.input-with-addon {
    @apply relative rounded-md;
}

.addon-start {
    @apply absolute left-0 inset-y-0 flex items-center pl-3 pointer-events-none text-gray-500;
}

.addon-end {
    @apply absolute right-0 inset-y-0 flex items-center pr-3 pointer-events-none text-gray-500;
}

.input-with-start-addon {
    @apply pl-7 block w-full pr-3 py-2 rounded-lg border border-gray-300 focus:ring-sky-500 focus:border-sky-500;
}

.input-with-end-addon {
    @apply pr-10 block w-full pl-3 py-2 rounded-lg border border-gray-300 focus:ring-sky-500 focus:border-sky-500;
}

/* Basic slider styling */
.slider-thumb {
    @apply appearance-none w-full h-2 rounded-lg cursor-pointer;

    background: #e5e7eb;

    /* Default track color (gray-200) */
}

/* Webkit browsers (Chrome, Safari, newer Edge) */
.slider-thumb::-webkit-slider-thumb {
    @apply appearance-none w-5 h-5 rounded-full cursor-pointer;

    background: #66BAE7;

    /* sky-600 */
    box-shadow: 0 0 0 2px white, 0 1px 3px rgba(0,0,0,0.1);
}

.slider-thumb::-webkit-slider-runnable-track {
    @apply rounded-lg h-2;

    background: linear-gradient(to right, #66BAE7 var(--progress), #e5e7eb var(--progress));
}

/* Firefox */
.slider-thumb::-moz-range-thumb {
    @apply appearance-none w-5 h-5 rounded-full border-0 cursor-pointer;

    background: #66BAE7;

    /* sky-600 */
    box-shadow: 0 0 0 2px white, 0 1px 3px rgba(0,0,0,0.1);
}

.slider-thumb::-moz-range-track {
    @apply rounded-lg h-2;

    background: linear-gradient(to right, #66BAE7 var(--progress), #e5e7eb var(--progress));
}

/* MS Edge and IE */
.slider-thumb::-ms-thumb {
    @apply appearance-none w-5 h-5 rounded-full cursor-pointer;

    background: #66BAE7;

    /* sky-600 */
    box-shadow: 0 0 0 2px white, 0 1px 3px rgba(0,0,0,0.1);
}

.slider-thumb::-ms-track {
    @apply rounded-lg h-2;

    background: transparent;
    border-color: transparent;
    color: transparent;
}

.slider-thumb::-ms-fill-lower {
    background: #66BAE7;

    /* sky-500 */
    @apply rounded-lg;
}

.slider-thumb::-ms-fill-upper {
    background: #e5e7eb;

    /* Gray-200 */
    @apply rounded-lg;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

/* Ensure smooth transitions and proper z-index */
[x-cloak] {
    display: none !important;
}

/* Custom dropdown animation */
@keyframes dropdown-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes dropdown-exit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
}