/*
 * na82-combo — type-to-filter dropdown (partials/combobox.php + js/components/combobox.js).
 *
 * NOT global. Pulled in by the views that use it, like landing.css:
 *   admin/listings/form.php, order/index.php, electro/index.php.
 *
 * Styled entirely on Bootstrap's own custom properties. The admin layout loads
 * bootstrap + admin.css and the public one loads bootstrap + theme.css — the only
 * palette both share is --bs-*, and it already flips with [data-bs-theme], so the
 * widget follows light/dark in both areas without either stylesheet knowing about it.
 */

.na82-combo {
    position: relative;
}

.na82-combo__control {
    position: relative;
    display: flex;
    align-items: center;
}

.na82-combo__input {
    width: 100%;
    padding: 0.375rem 3.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.na82-combo__input:focus {
    outline: 0;
    border-color: rgba(var(--bs-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
}

.na82-combo__input:disabled {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

.na82-combo__input::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

.na82-combo--invalid .na82-combo__input {
    border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
}

.na82-combo--invalid .na82-combo__input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.2);
}

/*
 * The host page is allowed to restyle the field — the public picker matches every
 * `.car-picker__field input[type="text"]` (0,2,1) and beats the rule above, which
 * is the point: the widget should look native wherever it lands. The one thing it
 * may not lose is the room the two buttons need, so this selector is deliberately
 * specific enough (0,3,1) to survive that. Without it the ✕ and the chevron sit on
 * top of the text.
 */
.na82-combo .na82-combo__control .na82-combo__input[type="text"] {
    padding-right: 3.25rem;
}

/* Both trigger buttons sit inside the field; the input reserves room via padding-right. */
.na82-combo__clear,
.na82-combo__caret {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.na82-combo__clear:hover,
.na82-combo__caret:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

.na82-combo__clear {
    right: 1.85rem;
    font-size: 1.25rem;
    line-height: 1;
}

.na82-combo__caret {
    right: 0.3rem;
}

/* Chevron drawn in CSS — the two areas ship different icon fonts. */
.na82-combo__caret::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease-in-out;
}

.na82-combo--open .na82-combo__caret::before {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.na82-combo__caret:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.na82-combo__list {
    position: absolute;
    z-index: 1056; /* above a Bootstrap modal backdrop (1050) */
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    /* Starting value only — updatePlacement() writes the real cap, measured against
       the space actually available on the chosen side. */
    max-height: 17rem;
    margin: 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch;
}

/*
 * Flipped above the field. Downwards stays the default; this is what the phone
 * gets, where the on-screen keyboard covers everything below the input — the list
 * would otherwise be invisible for exactly as long as you are typing into it.
 */
.na82-combo--above .na82-combo__list {
    top: auto;
    bottom: calc(100% + 0.25rem);
}

.na82-combo__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    color: var(--bs-body-color);
    border-radius: calc(var(--bs-border-radius, 0.375rem) - 0.125rem);
    cursor: pointer;
}

.na82-combo__option--active {
    background-color: var(--bs-tertiary-bg);
}

.na82-combo__option--picked {
    font-weight: 600;
}

/* Reserved even when empty, so the labels of picked and unpicked rows line up. */
.na82-combo__check {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
}

.na82-combo__option--picked .na82-combo__check {
    position: relative;
}

.na82-combo__option--picked .na82-combo__check::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: -0.05rem;
    width: 0.3rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.na82-combo__empty {
    padding: 0.75rem 0.625rem;
    color: var(--bs-secondary-color);
}

.na82-combo__error {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-form-invalid-color, var(--bs-danger));
}

/*
 * Touch: a 16px font stops iOS Safari zooming the viewport on focus, and the
 * dropdown gets more height because there is no OS picker to fall back on.
 */
@media (max-width: 575.98px) {
    .na82-combo__input {
        font-size: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .na82-combo__option {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .na82-combo__input,
    .na82-combo__caret::before {
        transition: none;
    }
}