/* ============================================================
   OrderSense — Customer Order App · Design System
   Glassmorphism, tenant-themed (brand color + font), light/dark.
   A single --brand seed (set inline per tenant) drives the palette
   via color-mix(), so each tenant adapts automatically.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- Tokens: light ---------- */
:root {
  /* Pin native controls (date picker icon, scrollbars) to the APP theme, not the OS —
     otherwise the OS scheme can render e.g. a light date-picker icon on our light input. */
  color-scheme: light;

  /* brand seed + contrast come inline from the tenant; sane fallbacks here */
  --brand: #1565C0;
  --on-brand: #ffffff;
  --font-brand: "Poppins";
  --font: var(--font-brand), "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* neutral surfaces (truly neutral for readability) */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --text: #14171c;
  --text-muted: #5a6472;
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 22%, transparent);

  /* brand-derived accents */
  --brand-strong: color-mix(in srgb, var(--brand) 88%, black);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--surface));
  --brand-softer: color-mix(in srgb, var(--brand) 7%, var(--surface));
  --on-brand-soft: color-mix(in srgb, var(--brand) 72%, black);
  --ring: color-mix(in srgb, var(--brand) 45%, transparent);

  /* glass */
  --glass-bg: color-mix(in srgb, #ffffff 64%, transparent);
  --glass-bd: color-mix(in srgb, #ffffff 75%, transparent);
  --glass-blur: 20px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.06);
  --shadow-md: 0 10px 28px -8px rgba(16,24,40,.20);
  --shadow-lg: 0 30px 70px -18px rgba(16,24,40,.34);

  /* radii */
  --r-xs: 9px; --r-sm: 13px; --r-md: 17px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* type scale */
  --fz-xs: .78rem; --fz-sm: .875rem; --fz-md: 1rem; --fz-lg: 1.18rem;
  --fz-xl: 1.5rem; --fz-2xl: 2rem;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;
}

/* ---------- Tokens: dark ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c11;
  --surface: #14181f;
  --surface-2: #1b2029;
  --text: #eef1f6;
  --text-muted: #9aa4b3;
  --border: color-mix(in srgb, #ffffff 13%, transparent);
  --border-strong: color-mix(in srgb, #ffffff 24%, transparent);

  --brand-soft: color-mix(in srgb, var(--brand) 26%, var(--surface));
  --brand-softer: color-mix(in srgb, var(--brand) 16%, var(--surface));
  --on-brand-soft: color-mix(in srgb, var(--brand) 70%, white);

  --glass-bg: color-mix(in srgb, #161a22 60%, transparent);
  --glass-bd: color-mix(in srgb, #ffffff 12%, transparent);

  --shadow-md: 0 12px 30px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 34px 80px -20px rgba(0,0,0,.72);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }

/* ---------- Glass surface ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-bd);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}

/* ---------- Buttons ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--bh); padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: var(--fz-md); font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), opacity var(--dur) var(--ease);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, white), var(--brand));
  color: var(--on-brand);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--brand) 78%, transparent); transform: translateY(-1px); }

.btn-tonal {
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}
.btn-tonal:not(:disabled):hover { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }

.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:not(:disabled):hover { border-color: var(--border-strong); }

.btn.loading { pointer-events: none; }

/* ---------- Spinner ---------- */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  display: inline-block; vertical-align: -3px;
  animation: os-spin .7s linear infinite;
}
@keyframes os-spin { to { transform: rotate(360deg); } }

/* ---------- Blur loader ----------
   Full-screen: OS.loader.show(msg)/hide().  Scoped over a container:
   OS.loader.scope(host, msg).done().  Both blur whatever sits behind them. */
.os-loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  opacity: 0; transition: opacity .22s var(--ease);
}
.os-loader.is-on { opacity: 1; }
.os-loader.is-scoped { position: absolute; z-index: 1; border-radius: inherit; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .os-loader { background: color-mix(in srgb, var(--bg) 86%, transparent); }
}
.os-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px 28px; text-align: center;
  transform: translateY(6px); transition: transform .22s var(--ease);
}
.os-loader.is-on .os-loader-card { transform: none; }
.os-loader-msg { font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); }

/* Dual-ring brand spinner (used by both the blur loader and inline loader) */
.os-ring { width: 48px; height: 48px; position: relative; flex: none; }
.os-ring::before, .os-ring::after {
  content: ''; position: absolute; border-radius: 50%; border: 3.5px solid transparent;
}
.os-ring::before { inset: 0; border-top-color: var(--brand); border-left-color: var(--brand); animation: os-spin .85s linear infinite; }
.os-ring::after  { inset: 7px; border-bottom-color: color-mix(in srgb, var(--brand) 40%, transparent); animation: os-spin 1.3s linear infinite reverse; }

/* Inline loader for an otherwise-empty region (no backdrop to blur) */
.os-inline-load {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 8px; color: var(--text-muted); font-size: var(--fz-sm); font-weight: 600;
}
.os-inline-load .os-ring { width: 38px; height: 38px; }

@media (prefers-reduced-motion: reduce) {
  .os-ring::before, .os-ring::after { animation-duration: 1.6s; }
  .os-loader, .os-loader-card { transition: none; }
}

/* ---------- App-bar "coming soon" toast (shared) ---------- */
.os-navtoast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fz-sm); font-weight: 600;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; z-index: 400;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.os-navtoast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Floating-label field ---------- */
.field { position: relative; display: block; flex: 1; }
.field-input {
  width: 100%; min-height: 56px; padding: 22px 16px 8px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field-input:hover { border-color: var(--border-strong); }
.field-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.field-label {
  position: absolute; left: 16px; top: 17px;
  color: var(--text-muted); font-size: var(--fz-md);
  pointer-events: none; transition: all .18s var(--ease);
}
.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label {
  top: 8px; font-size: var(--fz-xs); font-weight: 600;
  color: var(--brand);
}

/* ---------- Option rows (selectable list) ---------- */
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.opt:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.opt.selected { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 3px var(--ring); }
.opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opt-name { font-weight: 600; font-size: var(--fz-md); }
.opt-sub { font-size: var(--fz-sm); color: var(--text-muted); }
.opt-meta {
  flex-shrink: 0; font-size: var(--fz-xs); font-weight: 600; color: var(--on-brand-soft);
  background: var(--brand-soft); padding: 4px 10px; border-radius: var(--r-pill);
}
.opt-tick {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-brand);
  background: var(--brand); opacity: 0; transform: scale(.6);
  transition: all var(--dur) var(--ease);
}
.opt-tick svg { width: 16px; height: 16px; }
.opt.selected .opt-tick { opacity: 1; transform: scale(1); }
.opt-empty, .opt-loading { padding: 14px 4px; color: var(--text-muted); font-size: var(--fz-sm); }
.opt-loading { display: flex; align-items: center; gap: 10px; }

/* Single-branch confirmation (not selectable — auto-chosen) */
.opt-confirm {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--brand-softer); border: 1.5px solid var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
.opt-confirm .opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opt-confirm .opt-tick { opacity: 1; transform: scale(1); }

/* Closed / unavailable branch row */
.opt.is-closed { opacity: .6; cursor: not-allowed; }
.opt.is-closed:hover { transform: none; border-color: var(--border); }
.opt.is-closed .opt-tick { display: none; }

/* Open/closed status chip */
.opt-status { flex-shrink: 0; font-size: var(--fz-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.opt-status.open { color: #0a7d4b; background: color-mix(in srgb, #12b76a 16%, var(--surface)); }
.opt-status.closed { color: var(--text-muted); background: var(--surface-2); }
.opt-status.pre { color: #9a6212; background: color-mix(in srgb, #f5a524 20%, var(--surface)); }
[data-theme="dark"] .opt-status.open { color: #5fe3a1; background: color-mix(in srgb, #12b76a 22%, var(--surface)); }
[data-theme="dark"] .opt-status.pre { color: #f5c451; background: color-mix(in srgb, #f5a524 24%, var(--surface)); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { transform: rotate(-12deg); border-color: var(--border-strong); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: block; }

/* ---------- App bar (used by menu + later screens) ---------- */
.app-bar { position: sticky; top: 0; z-index: 40; border-left: 0; border-right: 0; border-top: 0; }
.app-bar-inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}

/* Shared navbar (used on every storefront page that includes layout/navbar.php,
   including the start screen). Kept here so the bar is styled even on pages that
   don't load menu.css. */
:root { --app-bar-h: 62px; }
.app-bar { height: var(--app-bar-h); }
.app-bar .app-bar-inner { height: 100%; padding: 0 16px; gap: 10px; }
.app-logo { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.app-logo img { max-height: 42px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.app-logo .brand-name { font-weight: 700; font-size: var(--fz-lg); color: var(--text); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link { padding: 8px 12px; border-radius: var(--r-pill); font-size: var(--fz-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; text-decoration: none; transition: all var(--dur) var(--ease); }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--brand); background: var(--brand-softer); }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.nav-burger svg { width: 22px; height: 22px; }
@media (max-width: 820px) {
  .nav-links {
    position: absolute; top: calc(var(--app-bar-h) + 4px); right: 12px;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 210px; padding: 8px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    display: none; z-index: 50;
  }
  .nav-open .nav-links { display: flex; }
  .nav-link { padding: 12px 14px; }
  .nav-burger { display: grid; }
}
/* ---- Flash banner (sits directly under the app bar, layout/navbar.php) ----
   Server-rendered, not a JS toast: the host optimiser defers JS until the first
   interaction, so a toast fired on load can never appear. It scrolls away with the
   page rather than sticking — it's a one-shot confirmation, not a persistent state. */
.os-flash {
  max-width: 1100px; margin: 12px auto 0; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--r-md); font-size: var(--fz-sm); font-weight: 600; line-height: 1.35;
}
.os-flash-ic { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; }
.os-flash-ic svg { width: 100%; height: 100%; }
.os-flash--ok  { background: color-mix(in srgb, #30a46c 16%, transparent); color: #1a7f4f; }
.os-flash--err { background: color-mix(in srgb, #e5484d 12%, transparent); color: #e5484d; }
[data-theme="dark"] .os-flash--ok  { background: color-mix(in srgb, #30a46c 22%, var(--surface)); color: #5fe3a1; }
[data-theme="dark"] .os-flash--err { background: color-mix(in srgb, #e5484d 20%, var(--surface)); color: #ff9ea1; }
@media (max-width: 820px) { .os-flash { margin: 10px 12px 0; } }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.brand-name { font-weight: 700; font-size: var(--fz-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-chip {
  display: flex; flex-direction: column; gap: 1px; margin-left: auto;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  transition: transform var(--dur) var(--ease);
}
.ctx-chip:hover { transform: translateY(-1px); }
.ctx-l1 { font-size: var(--fz-xs); font-weight: 700; color: var(--on-brand-soft); }
.ctx-l2 { font-size: var(--fz-xs); color: var(--text-muted); }
.chev { font-size: .6em; }

/* ---------- Placeholder panel (temporary menu screen) ---------- */
.placeholder-wrap { max-width: 560px; margin: 0 auto; padding: 18vh 18px 40px; }
.placeholder { border-radius: var(--r-xl); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-md); }
.ph-badge {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; font-size: 28px;
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.placeholder h1 { margin: 0 0 8px; font-size: var(--fz-xl); }
.placeholder p { margin: 4px 0; color: var(--text-muted); }
.ph-note { margin-top: 18px !important; font-size: var(--fz-sm); }
.ph-note a { color: var(--brand); font-weight: 600; }

/* ---------- Social sign-in buttons ---------- */
.social-auth { display: grid; gap: 8px; margin-top: 6px; }
.social-divider { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 2px; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px; border-radius: var(--r-md); font: inherit; font-weight: 600; font-size: var(--fz-sm); text-decoration: none; cursor: pointer; border: 1px solid var(--border); transition: filter .15s var(--ease); }
.social-btn .social-ic { display: inline-flex; align-items: center; }
.social-btn:hover { filter: brightness(.97); }
.social-google   { background: #fff;    color: #1f1f1f; border-color: #dadce0; }
.social-apple    { background: #000;    color: #fff;    border-color: #000; }
.social-facebook { background: #1877f2; color: #fff;    border-color: #1877f2; }

/* ---------- SVG icon family (replaces emoji "icons") ---------- */
.os-ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -.18em; }
.os-ic-sm { width: 16px; height: 16px; }
.os-ic-lg { width: 26px; height: 26px; }
.os-ic-xl { width: 34px; height: 34px; }

/* ---------- Tabular figures (align prices/points, stop digit jitter) ---------- */
.tnum, .os-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Skip link (keyboard users jump past the app bar) ---------- */
.os-skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 500;
  transform: translateY(-160%); transition: transform .18s var(--ease);
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: var(--fz-sm); font-weight: 700; box-shadow: var(--shadow-md);
}
.os-skip-link:focus { transform: translateY(0); outline: 3px solid var(--ring); outline-offset: 2px; }

/* ---------- Touch press feedback + no sticky hover on touch ---------- */
.opt:active { transform: scale(.99); }
@media (hover: none) {
  /* On touch, :hover styles latch after a tap and look like a stuck selection. */
  .opt:hover { transform: none; border-color: var(--border); }
  .opt.selected:hover { border-color: var(--brand); }
  .btn-primary:not(:disabled):hover { transform: none; }
  .ctx-chip:hover, .theme-toggle:hover { transform: none; }
}

/* ---------- Visually-hidden helper (labels for screen readers) ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}