﻿/* Choices.js Complete Styles with Higher Specificity */
.choices {
    margin-bottom: 0;
    min-width: 190px !important;
    width: 200px !important;
    max-width: 200px !important;
    flex-shrink: 0; /* Prevent shrinking */
}

.choices__inner {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 4px !important;
    min-height: unset !important;
    width: unset !important;
    padding: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.choices__list--dropdown,
.choices[data-type*='select-one'] .choices__dropdown {
    background-color: rgb(0, 0, 0) !important;
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 0 0 4px 4px;
    margin-top: 0;
}

    .choices__list--dropdown .choices__item,
    .choices__list[aria-expanded] .choices__item {
        color: white !important;
        padding: 8px 10px;
    }

    .choices__list--dropdown .choices__item--selectable,
    .choices__list[aria-expanded] .choices__item--selectable {
        padding-right: 10px;
    }

        .choices__list--dropdown .choices__item--selectable.is-highlighted,
        .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
            background-color: rgba(0, 255, 0, 0.2) !important;
            color: white !important;
        }

.choices__list--single {
    color: white;
    padding: 0 !important;
    margin: 0 !important;
}

.choices.is-focused .choices__inner {
    border-color: #00ff00 !important;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.choices__input {
    background-color: transparent !important;
    border: 0 !important;
    color: white !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

.choices[data-type*='select-one']::after {
    border-color: #00ff00 transparent transparent transparent !important;
    border-width: 5px !important;
}

.choices[data-type*='select-one'].is-open::after {
    border-color: transparent transparent #00ff00 transparent !important;
}

.choices[data-type*='select-one'] .choices__input {
    background-color: rgb(0, 0, 0) !important;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3) !important;
    color: white !important;
    padding: 10px !important;
}

/* Search input styles */
.choices__list--dropdown .choices__input--cloned {
    background-color: rgb(0, 0, 0) !important;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3) !important;
    color: white !important;
    padding: 10px !important;
    margin-bottom: 5px;
}

/* No results message */
.choices__list--dropdown .choices__item--no-choices {
    background-color: rgb(0, 0, 0) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 10px !important;
}

/* Selected item */
.choices__list--single .choices__item {
    color: white !important;
}

/* Remove right padding with arrow icon */
.choices__list--single .choices__item--selectable {
    padding-right: 0 !important;
}

/* Dark scrollbar for the dropdown */
.choices__list--dropdown {
    scrollbar-width: thin;
    scrollbar-color: #00ff00 #1a1a1a;
    min-width: 190px !important;
    width: 200px !important;
    max-width: 200px !important;
    margin-top: 2px !important;
}

    .choices__list--dropdown::-webkit-scrollbar {
        width: 6px;
    }

    .choices__list--dropdown::-webkit-scrollbar-track {
        background: #1a1a1a;
    }

    .choices__list--dropdown::-webkit-scrollbar-thumb {
        background-color: #00ff00;
        border-radius: 3px;
    }

/* Mobile optimization */
@media (max-width: 768px) {
    .choices__list--dropdown .choices__item--selectable {
        padding-right: 8px;
    }

    .choices__input {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}


/* For mobile you might want different width */
@media (max-width: 768px) {
    .choices {
        width: 150px !important;
    }

    .choices__list--dropdown {
        width: 150px !important;
        min-width: 150px !important;
    }

    .phone-inputs {
        gap: 5px; /* Smaller gap on mobile */
    }

    /* Ensure heights remain consistent on mobile */
    .choices__inner,
    .phone-number {
        height: 42px !important;
    }
}
