/* Central-site select theme. Values, events and validation stay native. */
body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) {
    min-width: var(--bi-select-min-width, 0);
    max-width: 100%;
    min-height: var(--bi-select-height, 40px);
    padding: var(--bi-select-padding, 9px) 38px var(--bi-select-padding, 9px) 14px;
    border: 1px solid var(--bi-border);
    border-radius: 6px;
    appearance: none;
    background-color: #ffffffb3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%238393a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    color: #536b80;
    font: inherit;
    font-size: var(--bi-select-font-size, 14px);
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):not(:disabled):hover,
body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):open {
    border-color: #a6bdd1;
    background-color: #fff;
}

body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):focus-visible {
    outline: 2px solid #0870de80;
    outline-offset: 3px;
    box-shadow: none;
}

body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):disabled {
    background-color: #f4f7fa;
    opacity: .65;
    cursor: default;
}

body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):is(.is-invalid, :user-invalid) {
    border-color: #b05a68;
}

.bi-central-site select.form-select-sm {
    --bi-select-height: 32px;
    --bi-select-padding: 6px;
    --bi-select-font-size: 13px;
}

.bi-event-radius-label {
    --bi-select-min-width: 166px;
    --bi-select-font-size: 13px;
    flex-shrink: 0;
}

/* The browser owns the picker, including keyboard, focus and form behavior. */
@supports (appearance: base-select) {
    body.bi-central-site select.bi-level-select > button {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: inherit;
    }

    body.bi-central-site select.bi-level-select .bi-level-select-content {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        gap: 8px;
    }

    body.bi-central-site select.bi-level-select selectedcontent {
        display: flex;
        min-width: 0;
    }

    body.bi-central-site select.bi-level-select selectedcontent .bi-level-select-content > span:last-child {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])),
    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select]))::picker(select) {
        appearance: base-select;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        padding-inline: 14px 38px;
        background-image: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select]))::picker-icon {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 12px;
        height: 12px;
        margin: 0;
        transform: translateY(-50%);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%238393a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform .2s ease;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):open::picker-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select]))::picker(select) {
        min-width: anchor-size(width);
        max-width: calc(100vw - 24px);
        max-height: min(300px, 50dvh);
        margin-block: 7px;
        padding: 5px;
        border: 1px solid #dce6ef;
        border-radius: 10px;
        background: #fff;
        color: #536b80;
        box-shadow: 0 8px 24px #17335414;
        font-family: var(--bi-font-family);
        font-size: 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        transform: translateY(-5px);
        transition: opacity .18s ease, transform .18s ease,
            display .18s allow-discrete, overlay .18s allow-discrete;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])):open::picker(select) {
            opacity: 0;
            transform: translateY(-5px);
        }
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 38px;
        padding: 8px 10px;
        border: 0;
        border-radius: 6px;
        color: #536b80;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
        transition: background-color .15s ease;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option[hidden] { display: none; }
    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option:checked {
        color: var(--bi-navy);
        background: linear-gradient(115deg, #edf5fc, #f4f1f8);
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option:not(:disabled):is(:hover, :focus-visible) {
        background-color: #f0f5f9;
        outline: 1px solid #a6bdd1;
        outline-offset: -1px;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option:disabled {
        opacity: .5;
        cursor: default;
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option::checkmark {
        order: 1;
        margin-left: auto;
        color: var(--bi-blue);
    }

    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) optgroup {
        color: var(--bi-muted);
        font-size: 13px;
        font-weight: 500;
    }
}

/* Searchable and multi-select widgets retain their existing behavior. */
.bi-central-site .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    min-height: 40px;
    border: 1px solid var(--bi-border);
    border-radius: 6px;
    background: #ffffffb3;
}
.bi-central-site .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    padding-right: 38px;
    color: #536b80;
    font-family: var(--bi-font-family);
    font-size: 14px;
    line-height: 38px;
}
.bi-central-site .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 12px;
}
.bi-central-site .select2-dropdown {
    overflow: hidden;
    border: 1px solid #dce6ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px #17335414;
    font-family: var(--bi-font-family);
    font-size: 14px;
}
.bi-central-site .select2-container--default .select2-results__option--selected {
    color: var(--bi-navy);
    background: linear-gradient(115deg, #edf5fc, #f4f1f8);
}
.bi-central-site .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--bi-navy);
    background: #f0f5f9;
}

@media (pointer: coarse) {
    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) { --bi-select-height: 44px; }
    @supports (appearance: base-select) {
        body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option { min-height: 44px; }
    }
}

@media (max-width: 767.98px) {
    .bi-clubs .bi-event-radius-label { --bi-select-min-width: 0px; }
}

@media (prefers-reduced-motion: reduce) {
    body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) { transition: none; }
    @supports (appearance: base-select) {
        body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select]))::picker-icon,
        body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select]))::picker(select),
        body.bi-central-site select:where(:not([multiple], [size], .select2-hidden-accessible, [data-native-select])) option { transition: none; }
    }
}

/* Keep the established homepage picker on browsers without native customization. */
@supports not (appearance: base-select) {
    /* A quieter distance filter; its native select remains the no-JS fallback. */
    .bi-homepage .bi-event-radius-label {
        flex-shrink: 0;
    }

    .bi-homepage .bi-event-radius-label .bi-radius-select,
    .bi-homepage .bi-event-radius-trigger {
        min-height: 40px;
        border: 1px solid var(--bi-border);
        border-radius: 6px;
        background-color: #ffffffb3;
        color: #536b80;
        font: inherit;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
    }

    .bi-homepage .bi-event-radius-label .bi-radius-select {
        appearance: none;
        padding: 9px 38px 9px 14px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%238393a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
    }

    .bi-homepage .bi-event-radius-dropdown {
        position: relative;
    }

    .bi-homepage .bi-event-radius-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-width: 166px;
        padding: 9px 14px;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .bi-homepage .bi-event-radius-trigger:hover,
    .bi-homepage .bi-event-radius-dropdown.is-open .bi-event-radius-trigger {
        border-color: #a6bdd1;
        background-color: #fff;
    }

    .bi-homepage .bi-event-radius-trigger:focus-visible {
        outline: 2px solid #0870de80;
        outline-offset: 3px;
    }

    .bi-homepage .bi-event-radius-chevron {
        flex-shrink: 0;
        color: #8393a4;
        transition: transform 0.2s ease;
    }

    .bi-homepage .bi-event-radius-dropdown.is-open .bi-event-radius-chevron {
        transform: rotate(180deg);
    }

    .bi-homepage .bi-event-radius-menu {
        position: absolute;
        z-index: 6;
        top: calc(100% + 7px);
        right: 0;
        min-width: 100%;
        margin: 0;
        padding: 5px;
        border: 1px solid #dce6ef;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 8px 24px #17335414;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-5px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
    }

    .bi-homepage .bi-event-radius-dropdown.is-open .bi-event-radius-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    .bi-homepage .bi-event-radius-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 6px;
        color: #536b80;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .bi-homepage .bi-event-radius-option[aria-selected="true"] {
        color: var(--bi-navy);
        background: linear-gradient(115deg, #edf5fc, #f4f1f8);
    }

    .bi-homepage .bi-event-radius-option svg {
        flex-shrink: 0;
        color: var(--bi-blue);
        opacity: 0;
    }

    .bi-homepage .bi-event-radius-option[aria-selected="true"] svg {
        opacity: 1;
    }

    .bi-homepage .bi-event-radius-option:hover,
    .bi-homepage .bi-event-radius-option:focus {
        background-color: #f0f5f9;
        outline: 1px solid #a6bdd1;
        outline-offset: -1px;
    }

    @media (pointer: coarse) {
        .bi-homepage .bi-event-radius-trigger,
        .bi-homepage .bi-event-radius-option {
            min-height: 44px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bi-homepage .bi-event-radius-trigger,
        .bi-homepage .bi-event-radius-chevron,
        .bi-homepage .bi-event-radius-menu,
        .bi-homepage .bi-event-radius-option {
            transition: none;
        }

        .bi-homepage .bi-event-radius-menu {
            transform: none;
        }
    }

}