/* Dropdowns on the public pages (static/select.js). Same look as the app's (frontend/src/index.css,
   "Dropdown"); pages restyle .sel-trigger to match their own fields. */
.sel { position: relative; min-width: 0; }
.sel-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px;
    background: var(--surface, #fff); border: 1.5px solid var(--border-strong); border-radius: var(--radius, 8px);
    font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sel-trigger:hover { border-color: rgba(130,75,20,0.35); }
.sel-trigger:focus-visible, .sel-trigger.open { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-chevron { display: inline-flex; flex: none; color: var(--text-4); transition: transform .22s cubic-bezier(.2,.8,.2,1), color .15s; }
.sel-trigger:hover .sel-chevron { color: var(--text-3); }
.sel-trigger.open .sel-chevron { transform: rotate(180deg); color: var(--brand); }

.sel-pop {
    position: fixed; z-index: 1100; display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface, #fff); border: 1.5px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg);
    font-family: var(--font-sans); transform-origin: top center; animation: selIn .16s cubic-bezier(.2,.8,.2,1);
}
.sel-pop.is-up { transform-origin: bottom center; animation-name: selInUp; }
@keyframes selIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes selInUp { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
.sel-list { flex: 1; min-height: 0; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.sel-group { padding: 12px 10px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-4); }
.sel-group:first-child { padding-top: 5px; }
.sel-opt {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    font-size: 14.5px; line-height: 1.35; color: var(--text-2); cursor: pointer; transition: background .1s;
}
.sel-opt.in-group { padding-left: 14px; }
.sel-opt.is-active { background: var(--bg-1); color: var(--text); }
.sel-opt.is-selected { color: var(--brand-3); font-weight: 600; }
.sel-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.sel-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sel-opt-label { overflow-wrap: anywhere; }
.sel-opt-hint { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--text-4); }
.sel-check { display: inline-flex; flex: none; color: var(--brand); }
/* Phones: a bottom sheet with bigger touch targets. */
.sel-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(26,13,0,0.38); animation: selFade .18s ease; }
@keyframes selFade { from { opacity: 0; } to { opacity: 1; } }
.sel-pop.is-sheet {
    left: 0; right: 0; bottom: 0; border-bottom: none; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); animation: selSheet .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes selSheet { from { transform: translateY(100%); } to { transform: none; } }
.sel-grabber { display: block; flex: none; width: 40px; height: 4px; margin: 9px auto 3px; border-radius: 2px; background: var(--border-bright, rgba(130,75,20,0.32)); }
.sel-pop.is-sheet .sel-list { padding: 6px 10px 12px; }
.sel-pop.is-sheet .sel-opt { padding: 12px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
    .sel-pop, .sel-backdrop { animation: none; }
    .sel-chevron { transition: none; }
}