/*------------------------------------*\
    
    WebFX Choices.js Customizations - Global styling for select box/text inputs using Choices.js

    Add custom Choices.js select input styling to this file if it should be applied to all Choices.js select inputs on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

.choices__inner {
    border-radius: 5px;
    background: var(--light-gray);
    width: 100%;
    padding: 8px 40px 8px 15px;
    height: 50px;
    border: 1px solid #ddd;
    font-size: 16px;
    color: var(--black, #333);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    min-height: 50px;
    box-sizing: border-box;
}

.choices__list--single {
    padding: 2px 0;
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 1.2;
}


.choices[data-type*="select-one"]::after {
    content: '';
    height: 16px;
    width: 16px;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
    margin-top: 0px !important;
    border: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 16 10"><path fill="%231f7dea" d="M8 10L0 2.5h16z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    background-color: transparent;
    clip-path: none;
}

.choices[data-type*="select-one"].is-open::after {
    transform: translate(0, -50%) rotate(-180deg);
}

.choices[data-type*="select-one"] .choices__input {
    display: none !important;
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border: 1px solid var(--primary, #1f7dea);
    box-shadow: 0 0 0 3px rgba(31, 125, 234, 0.15);
}

.choices:hover .choices__inner {
    border-color: var(--primary, #1f7dea);
}

.is-open .choices__list--dropdown {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    padding-bottom: 15px;
    margin-top: 5px;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
    display: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable {
    padding: 12px 15px;
    background: transparent;
    border-bottom: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--black, #333);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: #f8f9fa;
    font-weight: bold;
    color: var(--primary, #1f7dea);
}

.choices__list--dropdown .choices__item--selectable:last-child {
    border-bottom: none;
}

@media (min-width: 1600px) {
    .choices__inner {
        padding: 12px 60px 12px 28px;
        height: 69px;
        font-size: 17px;
        border-radius: 5px;
        background: var(--light-gray);
        border: 1px solid #ddd;
        color: var(--black, #333);
        display: flex;
        align-items: center;
        min-height: 69px;
        box-sizing: border-box;
    }

    .choices__list--single {
        padding: 3px 0;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 1.2;
    }


    .choices[data-type*="select-one"]::after {
        height: 20px;
        width: 20px;
        right: 26px;
        background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12" viewBox="0 0 20 12"><path fill="%231f7dea" d="M10 12L0 3h20z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        clip-path: none;
    }

    .is-open .choices__list--dropdown {
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        padding-bottom:0;
        margin-top: 5px;
    }

    .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
        display: none;
    }

    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list--dropdown .choices__item--selectable {
        padding: 12px 28px;
        font-size: 17px;
        color: var(--black, #333);
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /*
    .choices__list--dropdown .choices__item--selectable:first-child {
        padding-top: 0;
    }
    */

    .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background: #f8f9fa;
        font-weight: bold;
        color: var(--primary, #1f7dea);
    }

    .choices__list--dropdown .choices__item--selectable:last-child {
        border-bottom: none;
    }
}

/* Fallback styling for native select elements that haven't been enhanced by Choices.js */
select.js-category-dropdown:not(.choices__input--hidden),
select[name="category-dropdown"]:not(.choices__input--hidden) {
    height: 50px !important;
    width: 100% !important;
    max-width: 363px !important;
    padding: 8px 40px 8px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    background: #fff !important;
    font-size: 16px !important;
    color: var(--black, #333) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    
    /* Custom dropdown arrow */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 16 10"><path fill="%23666" d="M8 10L0 2.5h16z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px !important;
    
    transition: all 0.3s ease !important;
}

select.js-category-dropdown:not(.choices__input--hidden):hover,
select.js-category-dropdown:not(.choices__input--hidden):focus,
select[name="category-dropdown"]:not(.choices__input--hidden):hover,
select[name="category-dropdown"]:not(.choices__input--hidden):focus {
    border-color: var(--primary, #1f7dea) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 125, 234, 0.15) !important;
}