/* Accessible animated listboxes, synchronized with the original select controls. */
.staggered-native-select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; clip: rect(0,0,0,0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.staggered-select { display: block; position: relative; min-width: 0; width: 100%; }
.staggered-select .staggered-trigger { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid #5b91ce80; border-radius: 8px; background: #295e99; color: #fff; font: 700 1.05rem/1.25 'Barlow Condensed',sans-serif; letter-spacing: .035em; text-align: left; text-transform: none; box-shadow: 0 4px 14px #0003; cursor: pointer; }
.staggered-select .staggered-trigger:hover, .staggered-select .staggered-trigger[aria-expanded=true] { background: #356da5; border-color: #a9d2ff; }
.staggered-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staggered-trigger svg { flex: 0 0 16px; width: 16px; height: 16px; transition: transform 250ms ease; }
.staggered-trigger[aria-expanded=true] svg { transform: rotate(180deg); }
.staggered-trigger:focus-visible, .staggered-list:focus-visible { outline: 2px solid #a9d2ff; outline-offset: 4px; }
.staggered-list { position: fixed; z-index: 100; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 8px; list-style: none; border: 1px solid #5b91ce70; border-radius: 12px; background: #171e27; color: #dce7f2; box-shadow: 0 18px 48px #0009; overflow-y: auto; overscroll-behavior: contain; transform-origin: top; transition: opacity 180ms, transform 180ms; opacity: 0; transform: translateY(-8px) scaleY(.92); pointer-events: none; }
.staggered-list[data-open=true] { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.staggered-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; min-height: 44px; padding: 11px 12px; border-radius: 7px; font: 600 1rem/1.3 'Barlow Condensed',sans-serif; letter-spacing: .025em; cursor: pointer; }
.staggered-list[data-open=true] .staggered-option { animation: stagger-option-in 260ms both; animation-delay: var(--option-delay,0ms); }
.staggered-option:is(:hover,[data-highlighted]) { background: #5b91ce26; color: #fff; }
.staggered-option[aria-selected=true] { background: #295e99; color: #fff; }
.staggered-option[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.staggered-option-mark { flex-shrink: 0; color: #a9d2ff; }
.calendar-month-nav .staggered-select { flex: 1 1 auto; min-width: 180px; }
.calendar-month-nav .staggered-select .staggered-trigger { min-height: 51px; }
.calendar-filter .staggered-select { min-width: 220px; }
.catalog-filters label .staggered-select { margin-top: 0; }
@keyframes stagger-option-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) { .calendar-month-nav .staggered-select { min-width: 0; } .calendar-filter .staggered-select { min-width: 0; } }
@media(max-width:400px) { .calendar-month-nav .staggered-select { order: -1; flex: 1 0 100%; width: 100%; } }
@media(prefers-reduced-motion:reduce) { .staggered-list, .staggered-trigger svg { transition: none; } .staggered-list[data-open=true] .staggered-option { animation: none; } }