/* Our own dropdown (fselect.js). Colours come from the admin (--panel, --text…) or website (--surface, --ink…) theme. */
.fsel__native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.fsel__btn { display: flex; align-items: center; gap: 8px; text-align: start; cursor: pointer; font: inherit; color: var(--text, var(--ink)); background-image: none !important; padding-inline-end: 12px !important; appearance: none; -webkit-appearance: none; }
.fsel__btn:disabled { opacity: .6; cursor: not-allowed; }
.fsel__btn.is-empty .fsel__text { color: var(--muted, #7e686d); }
.fsel__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel__chev { flex: none; color: var(--muted, #7e686d); transition: transform .15s; }
.fsel__btn[aria-expanded="true"] .fsel__chev { transform: rotate(180deg); }
.fsel__btn.is-invalid { border-color: var(--danger, #dc2626) !important; }

.fsel__panel { position: fixed; inset: auto; margin: 0; z-index: 1000; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--line, #e4d3d3); border-radius: 12px; background: var(--panel, var(--surface, #fff)); color: var(--text, var(--ink, #222)); box-shadow: 0 18px 40px -12px rgba(20, 4, 8, .35); font-size: 14.5px; outline: none; }
.fsel__panel.is-sheet { inset: auto 0 0 0; width: 100%; max-height: 72vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); font-size: 16px; animation: fsel-up .18s ease-out; }
.fsel__panel.is-sheet::before { content: ""; display: block; flex: none; width: 42px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--line, #ddd); }
.fsel__panel::backdrop { background: transparent; }
.fsel__panel.is-sheet::backdrop { background: rgba(10, 2, 4, .45); }
@keyframes fsel-up { from { transform: translateY(30px); } }
.fsel__search { flex: none; padding: 8px; border-bottom: 1px solid var(--line, #e4d3d3); }
.fsel__search input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line, #e4d3d3); border-radius: 9px; background: var(--panel-2, var(--light, #f7f3f0)); color: inherit; font: inherit; }
.fsel__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 6px; } /* min-height 0: the list shrinks to the panel and scrolls */
.fsel__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 9px; cursor: pointer; line-height: 1.45; }
.is-sheet .fsel__opt { min-height: 48px; }
.fsel__opt span { flex: 1; min-width: 0; }
.fsel__opt svg { flex: none; color: var(--primary, var(--crimson, #9a0e29)); }
.fsel__opt.is-active { background: var(--primary-soft, var(--p-soft, rgba(154, 14, 41, .08))); }
.fsel__opt.is-on { font-weight: 700; }
.fsel__opt.is-off { opacity: .45; cursor: default; }
.fsel__opt[hidden], .fsel__group[hidden] { display: none; }
.fsel__group { padding: 10px 12px 4px; font-size: 12px; font-weight: 700; color: var(--muted, #7e686d); text-transform: uppercase; letter-spacing: .02em; }
[dir="rtl"] .fsel__group { letter-spacing: 0; text-transform: none; }