/*
 * Searchable dropdowns (public/website/shared/ws-select.js). The closed box copies the
 * replaced select through the --ws-s2-* properties set on each container; the open list
 * uses the site colours.
 */
/* The site bundle (resources/css/app.css) carries admin-panel rules that force every
   select2 to 28px / 10px with !important; these undo them for the website widgets. */
.select2.select2-container.ws-s2 { height: auto !important; max-width: 100%; text-align: left; }
.select2-container--default.ws-s2 .select2-selection--single {
    height: var(--ws-s2-h, 2.75rem) !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    font-size: var(--ws-s2-size, 0.875rem) !important;
}
.select2-container--default.ws-s2 .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
    font-size: inherit !important;
}
.select2-container.ws-s2 .select2-selection--single {
    display: flex;
    align-items: center;
    height: var(--ws-s2-h, 2.75rem);
    border: var(--ws-s2-border, 1px solid #d1d5db);
    border-radius: var(--ws-s2-radius, 0.5rem);
    background: var(--ws-s2-bg, #fff);
    color: var(--ws-s2-color, #1f2937);
    font-size: var(--ws-s2-size, 0.875rem);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.select2-container.ws-s2 .select2-selection--single .select2-selection__rendered {
    flex: 1;
    min-width: 0;
    padding-left: var(--ws-s2-pad, 0.75rem);
    padding-right: 2.25rem;
    color: inherit;
    line-height: 1.4;
    text-align: left;
}
.select2-container.ws-s2 .select2-selection--single .select2-selection__placeholder { color: #9ca3af; }
.select2-container.ws-s2 .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
}
.select2-container.ws-s2 .select2-selection--single .select2-selection__arrow b {
    position: static;
    margin: 0;
    width: 0.55rem;
    height: 0.55rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    color: #9ca3af;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s;
}
.select2-container.ws-s2.select2-container--open .select2-selection__arrow b { transform: rotate(-135deg) translate(-2px, -2px); }
.select2-container.ws-s2.select2-container--focus .select2-selection--single,
.select2-container.ws-s2.select2-container--open .select2-selection--single {
    border-color: var(--ws-primary, #059669);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary, #059669) 18%, transparent);
}

/* the open list */
.select2-dropdown.ws-s2-drop {
    z-index: 10050;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: var(--ws-s2-radius, 0.5rem);
    background: #fff;
    color: #1f2937;
    box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.35);
}
.select2-container--open .select2-dropdown--below.ws-s2-drop { margin-top: 4px; border-top: 1px solid #e5e7eb; }
.select2-container--open .select2-dropdown--above.ws-s2-drop { margin-top: -4px; border-bottom: 1px solid #e5e7eb; }
.ws-s2-drop .select2-search--dropdown { padding: 0.5rem; }
.ws-s2-drop .select2-search--dropdown .select2-search__field {
    padding: 0.5rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: calc(var(--ws-s2-radius, 0.5rem) * 0.75);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}
.ws-s2-drop .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ws-primary, #059669);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary, #059669) 18%, transparent);
}
.ws-s2-drop .select2-results > .select2-results__options { max-height: 15rem; padding: 0 0.35rem 0.35rem; }
.ws-s2-drop .select2-results__option {
    padding: 0.5rem 0.65rem;
    border-radius: calc(var(--ws-s2-radius, 0.5rem) * 0.6);
    font-size: 0.9rem;
}
.ws-s2-drop .select2-results__option--selectable.select2-results__option--highlighted {
    background: color-mix(in srgb, var(--ws-primary, #059669) 12%, #fff);
    color: inherit;
}
.ws-s2-drop .select2-results__option--selected {
    background: var(--ws-primary, #059669);
    color: #fff;
}
.ws-s2-drop .select2-results__option--selected.select2-results__option--highlighted {
    background: color-mix(in srgb, var(--ws-primary, #059669) 85%, #000);
    color: #fff;
}
.ws-s2-drop .select2-results__message { color: #6b7280; }

/* dark mode */
#ws-root.ws-dark .select2-container.ws-s2 .select2-selection--single { background: #1e293b; border-color: #334155; color: #e2e8f0; }
#ws-root.ws-dark .select2-dropdown.ws-s2-drop,
body.ws-dark-body > .select2-container .ws-s2-drop { background: #1e293b; border-color: #334155; color: #e2e8f0; }
#ws-root.ws-dark .ws-s2-drop .select2-search__field,
body.ws-dark-body > .select2-container .ws-s2-drop .select2-search__field { background: #0f172a; border-color: #334155; color: #e2e8f0; }
#ws-root.ws-dark .ws-s2-drop .select2-results__option--selectable.select2-results__option--highlighted,
body.ws-dark-body > .select2-container .ws-s2-drop .select2-results__option--selectable.select2-results__option--highlighted {
    background: color-mix(in srgb, var(--ws-primary, #059669) 25%, #1e293b);
}

/* The open list lives in its own span.select2-container (no "select2" class; that one is the
   field). The site bundle (resources/css/app.css) makes every .select2-container 100% wide,
   which stretched this floating wrapper across the page from the field's left edge: the page
   grew sideways and scrolled. The list sizes itself from the field; it only must not pass the
   viewport's right edge. */
html body .select2-container:not(.select2) {
    width: auto !important;
    max-width: none !important;
}
html body .select2-container--open .select2-dropdown.ws-s2-drop { max-width: calc(100vw - 1rem); }