/*
 * One look for every select box on the site (public pages and both admin views).
 * The browser's own control, restyled: it stays accessible and keeps the native picker on
 * phones. Where supported (newer Chrome/Edge), the open list is styled to match too.
 */

select {
    -webkit-appearance: none;
    appearance: none;
    /* Height comes from equal top and bottom padding (not min-height, which leaves the spare
       space under the text in some browsers), so the text always sits in the middle */
    padding: 0.55rem 2.4rem 0.65rem 0.8rem;   /* a touch more below: capitals then sit optically centred */
    border: 1px solid #b9c1ce;
    border-radius: 6px;
    /* Chevron in the site blue */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230c599a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 0.75rem auto;
    color: #1d1d1f;
    font: inherit;
    line-height: 1.3;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

select:hover {
    border-color: #0c599a;
}

select:focus-visible {
    outline: none;
    border-color: #0c599a;
    box-shadow: 0 0 0 3px rgb(12 89 154 / 0.25);
}

select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Styled open list where the browser allows it */
@supports (appearance: base-select) {
    select,
    ::picker(select) {
        appearance: base-select;
    }

    select {
        display: inline-flex;
        align-items: center;
    }

    select::picker-icon {
        display: none;          /* we draw our own chevron */
    }

    ::picker(select) {
        margin-top: 4px;
        padding: 0.3rem;
        border: 1px solid #d3e1ed;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);
    }

    select option {
        padding: 0.45rem 0.7rem;
        border-radius: 5px;
    }

    select option:hover,
    select option:focus-visible {
        background: #eef3f8;
        color: #0c599a;
    }

    select option:checked {
        background: #0c599a;
        color: #fff;
        font-weight: 600;
    }

    select option::checkmark {
        display: none;
    }
}