/* ═══════════════════════════════════════════════════════════════
   WaitingZone — Customer app · "Host Stand" theme
   Uses the SAME tokens as the admin dashboard (theme-light.css):
   warm cream canvas · solid white cards · rust-orange accent ·
   Outfit headings + Inter body. Loaded AFTER theme-light.css on
   every customer-facing page.

   Part 1 — palette parity with admin (all screen sizes)
   Part 2 — desktop layout (≥ 1024px): top header, wide grids,
            two-column restaurant page, centred status cards
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Part 1 · Palette parity ───────── */
:root {
  --bg:#f7f7f8; --card:#FFFFFF; --card2:#f4f4f5;
  --border:#e4e4e7; --border2:#d4d4d8;
  --text:#18181b; --muted:#71717a; --subtle:#52525b;
  --accent:#18181b; --accent-dark:#27272a; --accent-soft:#f4f4f5; --accent-ink:#18181b;
  --green:#18181b; --green2:#27272a;
  --ok:#15803D; --ok-dim:rgba(21,128,61,.10);
  --warn:#B45309; --warn-dim:#FEF3C7;
  --red:#DC2626; --red-dim:rgba(220,38,38,.09);
  /* Customer screens used blue/purple as decorative accents. The admin has
     one brand colour, so both now resolve to the rust-orange family. */
  --blue:#18181b; --purple:#27272a; --amber:#B45309;
  --glass:#FFFFFF;
  --shadow:0 8px 30px rgba(24,24,27,.08);
}

body, .qf-body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }
h1,h2,h3,h4,.qf-h1,.qf-section-title,.qf-brand-name,.qf-r-name,.qf-btn { font-family:'Outfit','Inter',sans-serif; }
.qf-h1 { font-weight:600; letter-spacing:-.01em; }

/* no glows / grid — the admin canvas is flat cream */
.qf-bg, .qf-orb, .qf-grid, .orb, .grid, .bg-orbs, .bg-grid { display:none !important; }

/* brand mark = admin logo (solid rust circle) */
.qf-brand-icon { background:var(--accent); border-radius:50%; font-family:'Outfit',sans-serif; font-weight:600; font-size:.95rem; }
.qf-brand-name { font-weight:600; font-size:1.1rem; }

/* surfaces: solid white cards, admin border + radius, no blur */
.qf-card, .qf-r-card { background:#fff; border:1px solid var(--border); border-radius:18px; backdrop-filter:none; }
.qf-r-card:hover { border-color:var(--border2); transform:none; box-shadow:var(--shadow); }
.qf-r-thumb { background:var(--accent-soft); color:var(--accent); }
.qf-r-cuisine { background:var(--accent-soft); border:1px solid #d4d4d8; color:var(--accent-ink); }
.qf-icon-btn { background:#fff; border:1px solid var(--border); border-radius:10px; color:var(--subtle); }
.qf-icon-btn:hover { border-color:var(--border2); color:var(--text); background:var(--card2); }
.qf-fav-btn { background:#fff; border:1px solid var(--border); backdrop-filter:none; }
.qf-fav-btn.active { color:var(--red); border-color:rgba(220,38,38,.35); }

/* buttons = admin .btn-green / .btn-ghost */
.qf-btn-primary { background:var(--accent); color:#fff; box-shadow:none; }
.qf-btn-primary:hover { background:var(--accent-dark); box-shadow:none; transform:none; }
.qf-btn-secondary { background:#fff; border:1px solid var(--border); color:var(--text); }
.qf-btn-secondary:hover { background:var(--card2); border-color:var(--border2); }
.qf-btn-danger { background:#fff; border:1px solid #F5C6C6; color:var(--red); }
.qf-btn-danger:hover { background:var(--red-dim); }

/* inputs = admin .form-control */
.qf-input, .qf-search-input { background:#fff; border:1px solid var(--border2); color:var(--text); }
.qf-input:hover, .qf-search-input:hover { border-color:#c4c4cc; }
.qf-input:focus, .qf-search-input:focus { background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,24,27,.12); }
.qf-search-clear { background:var(--card2); }

/* chips / pills = admin .pill */
.qf-chip { background:#fff; border:1px solid var(--border); color:var(--subtle); }
.qf-chip.active { background:var(--text); border-color:var(--text); color:#fff; }
.cuisine-pill-icon { background:#fff; border:1px solid var(--border); color:var(--subtle); }
.cuisine-pill.active .cuisine-pill-icon { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); box-shadow:none; }
.cuisine-pill.active span { color:var(--accent-ink); }

/* status badges = admin semantics (waiting amber · called orange · seated green · cancelled red) */
.qf-badge { border:1px solid transparent; }
.qf-badge-waiting, .qf-badge-pending { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.qf-badge-called, .qf-badge-confirmed { background:#FDEADD; color:#7C2D12; border-color:#F9C9A8; }
.qf-badge-seated, .qf-badge-completed { background:rgba(21,128,61,.10); color:#15803D; border-color:rgba(21,128,61,.25); }
.qf-badge-cancelled, .qf-badge-no-show { background:rgba(220,38,38,.09); color:#DC2626; border-color:rgba(220,38,38,.22); }

/* bottom nav */
.qf-bottom-nav { background:rgba(255,255,255,.94); border-top:1px solid var(--border); }
.qf-nav-item.active { color:var(--accent); }
.qf-nav-item .qf-nav-dot { background:var(--accent); box-shadow:none; }

/* shared page furniture */
.qf-section-title a, .qf-section-title button, .info-link { color:var(--accent); }
.r-rating { color:var(--warn); }
.skeleton { background:linear-gradient(90deg,#f4f4f5,#E8E3DA,#f4f4f5); background-size:200% 100%; }

/* restaurant page — leftovers from the old glass look */
.hero-fade { background:linear-gradient(180deg,rgba(247,247,248,.15) 0%,rgba(247,247,248,0) 40%,rgba(247,247,248,.9) 85%,var(--bg) 100%); }
.hero-fallback { background:var(--accent-soft); color:var(--accent); }
.hero-icon-btn { background:#fff; border:1px solid var(--border); color:var(--text); backdrop-filter:none; }
.hero-icon-btn.active { color:var(--red); border-color:rgba(220,38,38,.35); }
.rname { text-shadow:none; font-weight:600; letter-spacing:-.01em; }
.rrating { background:var(--warn-dim); border-color:#FDE68A; color:var(--warn); }
.live-card { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:none; }
.stat-box { background:var(--card2); border:1px solid var(--border); border-radius:14px; }
.stat-val { color:var(--accent); font-family:'Outfit',sans-serif; font-weight:600; }
.act-btn { background:#fff; backdrop-filter:none; border-radius:14px; }
.act-btn.primary { background:var(--accent); box-shadow:none; color:#fff; }
.act-btn.primary:hover { background:var(--accent-dark); }
.act-btn.primary .act-sub { color:rgba(255,255,255,.82); }
.sheet { background:#fff; box-shadow:var(--shadow); }
.sheet-backdrop, .modal-overlay { background:rgba(24,24,27,.38); }
.action-bar { background:linear-gradient(180deg,rgba(247,247,248,0),var(--bg) 38%); }

/* leftovers: old neon gradient text + glass chips + glows */
.stat-val { background:none !important; -webkit-text-fill-color:var(--accent) !important; background-clip:border-box !important; }
.rchip { background:#fff; border:1px solid var(--border); color:var(--subtle); backdrop-filter:none; }
.live-card { box-shadow:none; backdrop-filter:none; }
.active-card { background:var(--accent-soft) !important; border-color:#d4d4d8 !important; }
.active-card::before { display:none; }
.qf-dh a.hs-brand, .qf-dh a.hs-brand:hover { color:var(--text); text-decoration:none; }

/* status / reservation-status cards */
.card { background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:none; border-radius:24px; }
.token, .token-num, .big-token { font-family:'Outfit',sans-serif; color:#C2410C; }

/* ───────── Desktop header (hidden on phones) ───────── */
.qf-dh { display:none; }

/* ═══════════════════════════════════════════════════════════════
   Part 2 · Desktop layout (≥ 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px) {
  .qf-dh { display:block; }
  .qf-dh .hs-header-in { max-width:1240px; gap:32px; }
  .qf-dh-nav { display:flex; align-items:center; gap:4px; flex:1; }
  .qf-dh-link { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; color:var(--subtle); font-size:.9rem; font-weight:500; text-decoration:none; position:relative; }
  .qf-dh-link i { font-size:1.05rem; }
  .qf-dh-link:hover { background:var(--card2); color:var(--text); }
  .qf-dh-link.active { background:var(--accent-soft); color:var(--accent-ink); }
  .qf-dh-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:2px; }
  .qf-dh-profile { display:inline-flex; align-items:center; gap:7px; padding:6px 14px 6px 10px; border:1px solid var(--border); border-radius:99px; background:#fff; color:var(--text) !important; font-size:.86rem; font-weight:500; text-decoration:none; }
  .qf-dh-profile i { font-size:1.25rem; color:var(--accent); }
  .qf-dh-profile:hover, .qf-dh-profile.active { background:var(--card2); }

  /* phone chrome off */
  .qf-bottom-nav { display:none !important; }
  /* the phone top bar's brand + icon buttons live in the header now;
     keep it only where it carries the page title (My Queue, Favorites, Profile) */
  .qf-topbar .qf-brand, .qf-topbar > .qf-icon-btn { display:none; }
  .qf-topbar:not(:has(h1)) { display:none; }
  .qf-topbar { margin-bottom:8px; }
  .qf-body { padding-bottom:0; }

  /* page shell */
  .qf-wrap { max-width:1240px; padding:34px 24px 70px; }
  .qf-h1 { font-size:2.3rem; line-height:1.1; margin-bottom:8px; }
  .qf-sub { font-size:1rem; }
  .greeting { font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
  .qf-back-btn { margin-bottom:18px; }

  /* search + cuisine block */
  .search-head { margin:0; padding:14px 0 10px; }
  .search-head.sticky { top:68px; background:linear-gradient(180deg,var(--bg) 85%,rgba(247,247,248,0)); }
  a.qf-search, .qf-search { max-width:640px; }
  .cuisine-row { margin:0; padding:4px 0 6px; flex-wrap:wrap; overflow:visible; gap:16px; }
  .cuisine-pill { width:76px; }
  .cuisine-pill:hover .cuisine-pill-icon { border-color:var(--border2); background:var(--card2); }

  /* restaurant grids */
  .cards { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:18px; }
  .qf-r-card { padding:14px; }
  .qf-r-thumb { width:104px; height:104px; }
  .qf-r-desc { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

  /* home extras */
  .quick-row { max-width:640px; }
  .active-card { max-width:none; }
  .qf-section-title { font-size:1.2rem; margin:34px 0 16px; }

  /* ── Restaurant page: content left, live status + Join sticky right ── */
  .page { max-width:1240px; padding:24px 24px 70px; display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:36px; align-items:start; }
  .page > .hero { grid-column:1 / -1; height:340px; border-radius:22px; margin-bottom:26px; }
  .hero-fade { background:linear-gradient(180deg,rgba(24,24,27,0) 45%,rgba(24,24,27,.0) 100%); }
  .hero-text { left:30px; bottom:26px; }
  .live-card { margin:0; }
  .resume-banner { margin:0; }
  .rs-main .section { padding:0; }
  .rs-main { grid-column:1; grid-row:2; min-width:0; }
  .rs-side { grid-column:2; grid-row:2; position:sticky; top:92px; display:flex; flex-direction:column; gap:14px; }
  .rs-side .action-bar { position:static; padding:0; background:none; }
  .rs-side .action-inner { max-width:none; }
  .rs-side .act-btn { padding:15px 12px; }
  .rs-main .section:first-child .rdesc { margin-top:0 !important; font-size:1.02rem; line-height:1.65; }

  /* booking sheet becomes a centred dialog */
  .sheet { position:fixed; inset:auto; left:50%; top:50%; right:auto; bottom:auto; margin:0; width:520px; max-width:92vw; max-height:88vh; border-radius:22px; overflow:hidden; border:1px solid var(--border); transform:translate(-50%,-46%) scale(.97); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .2s ease; }
  .sheet.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
  .sheet-grab { display:none; }

  /* ── Queue / reservation status (single-card pages) ──
     These pages centre one card in a flex body, so the header is pinned
     to the top instead of becoming a flex item. */
  body:not(.qf-body) > .qf-dh { position:fixed; top:0; left:0; right:0; }
  body:not(.qf-body):has(> .qf-dh) { padding-top:96px; padding-bottom:40px; }
  body > .wrap, body > .container { max-width:980px; }
  .card { max-width:520px; }

  /* ── Narrow content pages stay readable on wide screens ── */
  .page-profile .qf-wrap > *:not(.qf-topbar) { max-width:760px; }

  /* ── Bookings / favorites / profile ── */

  /* My Queue: card grid, aligned with the header */
  .page-bookings #activeWrap, .page-bookings #pastWrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; }
  .page-bookings .qf-section-title { font-size:1.2rem; margin:30px 0 14px; }
  .page-bookings .b-card { margin:0; padding:22px; background:#fff; border-radius:18px; transition:box-shadow .2s, border-color .2s; }
  .page-bookings .b-card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
  .page-bookings .b-name { font-size:1.15rem; }
  .page-bookings .b-type { font-size:.8rem; margin-top:4px; }
  .page-bookings .b-meta { font-size:.88rem; margin-top:14px; }
  .page-bookings .b-card::after { content:'View live status →'; display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); color:var(--accent); font-weight:600; font-size:.84rem; }
  .page-bookings .qf-empty, .page-favorites .qf-empty { grid-column:1 / -1; background:#fff; border:1px dashed var(--border2); border-radius:18px; padding:44px 20px; }

  /* Favorites: photo-first cards */
  .page-favorites .cards { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
  .page-favorites .qf-r-card { flex-direction:column; padding:0; gap:0; overflow:hidden; }
  .page-favorites .qf-r-thumb { width:100%; height:170px; border-radius:0; font-size:2.2rem; }
  .page-favorites .qf-r-info { padding:16px 18px 18px; gap:6px; }
  .page-favorites .qf-r-name { font-size:1.1rem; }
  .page-favorites .qf-fav-btn { top:12px; right:12px; }
}

@media (min-width:1024px) and (max-width:1180px) {
  .page { grid-template-columns:minmax(0,1fr) 360px; column-gap:28px; }
}

/* landing + login: same brand mark and cards as the admin */
.logo-icon, .logo-hex { background:var(--accent) !important; border-radius:50% !important; box-shadow:none !important; }
.portal-card { background:#fff !important; border:1px solid var(--border) !important; backdrop-filter:none !important; }
.portal-card:hover { box-shadow:var(--shadow) !important; border-color:var(--border2) !important; }
.portal-card::before { display:none !important; }
.qf-badge-waiting, .badge-waiting, .status-pill.waiting { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }