/* Minimal structural CSS for Choices.js - handles what Tailwind can't */

.choices {
    position: relative;
}

/* Dropdown positioning and visibility control */
.choices__list--dropdown {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
    margin-top: 2px;
    z-index: 50;
}

.choices__list--dropdown.is-active,
.choices.is-open .choices__list--dropdown {
    display: block;
}

/* Flipped dropdown (opens upward) */
.choices.is-flipped .choices__list--dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 2px;
}

/* Inner scrollable list */
.choices__list--dropdown .choices__list {
    max-height: 300px;
    overflow-y: auto;
}

/* Hide the built-in Choices.js arrow, we'll use DaisyUI's select arrow */
.choices[data-type*=select-one]::after {
    display: none;
}

/* Hide native select */
.choices__input[hidden] {
    display: none;
}

/* Remove default browser focus outline from input */
.choices:focus,
.choices:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent body scroll when dropdown is open (optional) */
.choices.is-open {
    z-index: 50;
}

/* Apply black outline to inner container when open or focused */
.choices.is-open .choices__inner,
.choices.is-focused .choices__inner {
    outline: 1px solid black;
    outline-offset: 0px;
}

/* Remove button styling - hide text and show × symbol */
.choices__button {
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    margin-left: 0.5rem;
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
    cursor: pointer;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choices__button::before {
    content: '×';
    font-size: 1.25rem;
    line-height: 1;
    display: block;
}

.choices__button:hover {
    opacity: 1;
}