/* SFC Pulse — rounded custom <select> (matches the fancy-picker calendar). Progressive enhancement
   on pointer:fine (desktop); mobile keeps the native dropdown. The native <select> stays in the DOM
   as the source of truth (name/value/onchange all keep working) — we just draw a styled layer on top.
   Colours + accent come from the SAME --fp-* variables as fancy-picker.css, so both follow the user's
   theme (light/dark) and chosen accent in lockstep. Opt out with class "no-fancy". */

/* Fallback --fp-* values so this file works even if load order changes (fancy-picker.css owns these too). */
:root{
  --fp-bg:#ffffff; --fp-border:#e6e9f0; --fp-text:#0f172a; --fp-sub:#64748b;
  --fp-muted:#94a3b8; --fp-hover:#f1f5f9; --fp-shadow:0 12px 34px rgba(15,23,42,.16);
  --fp-accent:#4f46e5; --fp-on:#ffffff;
}
:root[data-theme="dark"]{
  --fp-bg:#161c26; --fp-border:#2a3342; --fp-text:#e8ebf1; --fp-sub:#94a3b8;
  --fp-muted:#5b6675; --fp-hover:#1e2632; --fp-shadow:0 12px 34px rgba(0,0,0,.5);
  --fp-accent:#6366f1;
}

/* Native select stays in the DOM as the source of truth. It's CLIPPED (not display:none) so that
   `required` still validates and submits — a display:none control throws "not focusable" on submit. */
.fs-native{ position:absolute !important; left:0; bottom:0; width:1px; height:1px; padding:0; margin:0;
  border:0; opacity:0; overflow:hidden; clip:rect(0 0 0 0); pointer-events:none; }
.fs{ position:relative; }
.fs-field{ display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left; font:inherit;
  background:var(--fp-bg); color:var(--fp-text); }
.fs-field .fs-val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-field .fs-val.fs-ph{ color:var(--fp-muted); }
.fs-chev{ flex:none; color:var(--fp-muted); font-size:.72em; line-height:1; transition:transform .16s; }
.fs.fs-open .fs-chev{ transform:rotate(180deg); }
.fs.fs-open .fs-field{ border-color:var(--fp-accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fp-accent) 22%, transparent); }
.fs-field.fs-disabled{ opacity:.55; cursor:not-allowed; }

.fs-pop{ position:absolute; z-index:1000; left:0; top:calc(100% + 6px); min-width:100%;
  width:max-content; max-width:min(380px,92vw); box-sizing:border-box;
  background:var(--fp-bg); color:var(--fp-text); border:1px solid var(--fp-border);
  border-radius:16px; box-shadow:var(--fp-shadow); padding:8px; font-size:13px;
  -webkit-user-select:none; user-select:none;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.fs.fs-open .fs-pop{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fs-pop.fs-up{ top:auto; bottom:calc(100% + 6px); transform:translateY(4px); }
.fs.fs-open .fs-pop.fs-up{ transform:translateY(0); }
.fs-pop.fs-right{ left:auto; right:0; }

.fs-search{ width:100%; box-sizing:border-box; border:0; background:var(--fp-hover); color:var(--fp-text);
  border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; margin-bottom:6px; outline:none; }
.fs-search::placeholder{ color:var(--fp-muted); }
.fs-list{ max-height:230px; overflow-y:auto; scrollbar-width:thin; padding-right:2px; }
.fs-list::-webkit-scrollbar{ width:6px; }
.fs-list::-webkit-scrollbar-thumb{ background:var(--fp-border); border-radius:6px; }

.fs-opt{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0;
  background:transparent; color:var(--fp-text); font:inherit; font-size:13px; padding:8px 10px;
  margin-bottom:2px; border-radius:10px; cursor:pointer; transition:background .1s; }
.fs-opt .fs-lab{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-opt .fs-tick{ flex:none; opacity:0; }
.fs-opt.fs-sel{ background:var(--fp-accent); color:var(--fp-on); font-weight:600; }
.fs-opt.fs-sel .fs-tick{ opacity:1; }
.fs-opt.fs-active:not(.fs-sel){ background:var(--fp-hover); }     /* keyboard highlight */
.fs-opt:hover:not(.fs-sel){ background:var(--fp-hover); }
.fs-opt.fs-odis{ opacity:.4; cursor:not-allowed; }
.fs-grp{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fp-muted); padding:8px 10px 3px; }
.fs-none{ padding:12px 10px; color:var(--fp-muted); text-align:center; font-size:12.5px; }

/* ---- multi-select (checkbox rows) — the outlet filter lets you pick All or individual ---- */
.fs-check{ flex:none; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--fp-muted);
  display:grid; place-items:center; color:transparent; font-size:12px; font-weight:800; transition:.12s; }
.fs-opt.fs-on .fs-check{ background:var(--fp-accent); border-color:var(--fp-accent); color:var(--fp-on); }
.fs-opt.fs-on{ color:var(--fp-text); font-weight:600; }
.fs-mdiv{ height:1px; background:var(--fp-border); margin:4px 2px; }

/* ---- liquid glass: frost the dropdown / calendar / time popups (both fs + fp) ---- */
:root{ --glass-bg:rgba(255,255,255,.62); --glass-br:rgba(255,255,255,.7); --glass-hi:rgba(255,255,255,.9);
  --glass-shadow:0 16px 50px rgba(15,23,42,.22); }
:root[data-theme="dark"]{ --glass-bg:rgba(22,28,38,.55); --glass-br:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.20);
  --glass-shadow:0 18px 55px rgba(0,0,0,.6); }
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .fs-pop, .fp-pop{
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
    border-color:var(--glass-br);
    box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  }
}

/* Single-access chip: the one restaurant's name shown in place of the outlet picker. */
.fs-single{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--fp-text); background:var(--fp-hover); border:1px solid var(--fp-border);
  border-radius:10px; padding:6px 12px; white-space:nowrap; }
.fs-single::before{ content:"📍"; font-size:12px; }