/* Customer PWA — screen-scoped styles.
   All tokens from ../../colors_and_type.css. Prefix everything `c-`. */

.c-screen {
  width:100%; height:100%;
  background: var(--ink-50);
  display:flex; flex-direction:column; overflow:hidden;
  font-family: var(--font-sans);
  color: var(--ink-800);
  position:relative;
}

/* ---- Hero --------------------------------------------------------------- */
/* Top 62px reserved for iOS status bar + dynamic island; pills sit beneath. */
.c-hero { height:180px; position:relative; flex:0 0 auto; overflow:hidden; padding-top:62px;}
.c-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,#f08a00 0%,#c76700 100%);}
.c-hero-scrim { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 30%, rgba(13,12,10,.55) 100%);}
.c-hero-content { position:absolute; left:16px; right:16px; bottom:12px; color:#fff; z-index:2;}
.c-hero-content h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em;}
/* Hero subtitle — must stay legible on amber gradient. Use high-opacity white
   plus a soft dark shadow so it reads over any part of the scrim. */
.c-hero-content .sub {
  font-size:13px;
  color:#fff;
  margin-top:4px;
  font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  letter-spacing:.01em;
}
.c-hero-top { position:absolute; top:68px; left:16px; right:16px; display:flex; justify-content:space-between; z-index:3;}
.c-chip-top {
  background:rgba(255,255,255,.95); border-radius:999px;
  padding:6px 10px; font-size:12px; font-weight:600;
  display:flex; align-items:center; gap:6px; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  border:0;
}
.c-chip-top .count { background:var(--ink-900); color:#fff; padding:1px 6px; border-radius:999px; font-size:10px; font-weight:700;}

/* ---- Search ------------------------------------------------------------- */
.c-search {
  padding:10px 16px 4px; background:var(--ink-50); flex:0 0 auto; position:relative;
}
.c-search-box {
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--ink-200);
  border-radius:12px; padding:9px 12px;
}
.c-search-box svg { color:var(--ink-500); flex:0 0 16px;}
.c-search-box input {
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--font-sans); font-size:14px; color:var(--ink-800);
  min-width:0;
}
.c-search-box input::placeholder { color:var(--ink-400);}

/* ---- Rails -------------------------------------------------------------- */
.c-rail {
  display:flex; gap:8px; padding:10px 16px;
  overflow-x:auto; scrollbar-width:none;
  flex:0 0 auto;
  /* Claim horizontal gestures so a wrapping design-canvas / artboard drag
     handler doesn't intercept them — without this, swiping pills often just
     drags the whole phone mockup sideways. */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.c-rail::-webkit-scrollbar { display:none;}

.c-rail-highlight .c-chip {
  background: var(--amber-100); color: var(--amber-700); border:1px solid var(--amber-200);
}
.c-rail-highlight .c-chip.ink {
  background: var(--ink-100); color: var(--ink-700); border:1px solid transparent;
}

.c-chip {
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; line-height:1.2;
  background:var(--ink-100); color:var(--ink-700); border:0;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  white-space:nowrap;
}
.c-chip.active { background:var(--ink-900); color:#fff;}
.c-chip .glyph { font-size:12px; opacity:.75;}

/* Sticky category rail */
.c-rail-cat-wrap {
  position:sticky; top:0; z-index:10;
  background:var(--ink-50); border-bottom:1px solid var(--ink-200);
  flex:0 0 auto;
}
/* Groupings row — small toggle pills for Categories / Dietary / Highlights.
   Needs its own background, padding, and border so it reads as a distinct UI
   region above the category chips (not a stray tags cloud). */
.c-rail-groupings {
  display:flex; gap:6px; padding:10px 16px 8px;
  overflow-x:auto; scrollbar-width:none;
  background:#fff;
  border-bottom:1px solid var(--ink-100);
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.c-rail-groupings::-webkit-scrollbar { display:none;}
.c-group-pill {
  flex:0 0 auto; padding:6px 12px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-700); background:var(--ink-100);
  border:1px solid var(--ink-200);
  cursor:pointer; white-space:nowrap;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:4px;
}
.c-group-pill:hover { background:var(--ink-200);}
.c-group-pill.active {
  background:var(--ink-900); color:#fff; border-color:var(--ink-900);
}
.c-group-pill.active { background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.c-rail-cat {
  position:relative;
  padding:8px 16px 10px;
}
/* Soft fade at the right edge telegraphs there's more to swipe to.
   Anchor to the STICKY WRAPPER (.c-rail-cat-wrap), not the scrolling rail —
   otherwise the gradient slides with the content and covers whichever pill
   is under it. overflow:hidden on the wrap keeps the fade clipped to the row. */
.c-rail-cat-wrap { overflow:hidden;}
.c-rail-cat-wrap::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:32px;
  background:linear-gradient(to right, rgba(245,243,238,0), var(--ink-50));
  pointer-events:none; z-index:2;
}
.c-rail-cat .c-chip { background:#fff; border:1px solid var(--ink-200);}.c-rail-cat .c-chip.active { background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
.c-rail-cat .c-chip .cnt { font-size:11px; color:var(--ink-500); font-weight:600; margin-left:4px;}
.c-rail-cat .c-chip.active .cnt { color:rgba(255,255,255,.7);}

.c-rail-cat-trailing { flex:0 0 auto; padding:8px 12px; border:1px dashed var(--ink-300); border-radius:999px; background:transparent; font-size:12px; font-weight:600; color:var(--ink-600); cursor:pointer;}

/* Filter notice + filter chips under cat rail */
.c-filter-chips {
  display:flex; gap:6px; flex-wrap:wrap; padding:8px 16px 0; align-items:center; flex:0 0 auto;
}
.c-filter-chip {
  background:var(--info-100); color:var(--info-700);
  border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; gap:4px;
}
.c-filter-chip .x { cursor:pointer; opacity:.7; font-weight:400;}
.c-filter-clear { font-size:11px; font-weight:700; color:var(--ink-600); text-decoration:underline; cursor:pointer; background:none; border:0;}

.c-filter-count {
  font-size:11px; color:var(--ink-500); padding:6px 16px 0;
  font-variant-numeric:tabular-nums;
}

/* ---- Menu body --------------------------------------------------------- */
.c-body { flex:1; overflow-y:auto; padding-bottom:88px;}

.c-section { padding:16px 16px 8px;}
.c-section h2 { font-size:17px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;}
.c-section h2 .pin { font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 6px; border-radius:4px; background:var(--amber-500); color:#fff; text-transform:uppercase;}
.c-section .sub { font-size:11px; color:var(--ink-500);}

/* Item row — image-less list density; price pinned right. */
.c-item { display:flex; gap:12px; padding:14px 16px; border-top:1px solid var(--ink-100); background:#fff; align-items:flex-start;}
.c-item:hover { cursor:pointer;}
.c-item.sold { opacity:.5;}
.c-item-body { flex:1; min-width:0;}
.c-item-name { font-size:15px; font-weight:700; color:var(--ink-800); line-height:1.25;}
.c-item-desc { font-size:12px; color:var(--ink-500); line-height:1.45; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Right rail: price on top, + button below. */
.c-item-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; padding-left:8px;}

.c-tags { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; align-items:center;}
.c-tag { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; letter-spacing:.04em;}
.c-tag-diet { background:var(--ok-100); color:var(--ok-700);}
.c-tag-diet-badge { background:transparent; padding:0; display:inline-flex; align-items:center;}
.c-tag-diet-badge .al-dietary { height:16px; width:auto; padding:0 5px; font-size:9px; }
.c-tag-local { background:var(--amber-100); color:var(--amber-700);}
.c-tag-allergen {
  border:1px solid var(--amber-500); color:var(--amber-700); background:transparent;
  display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:4px;
  font-size:10px; font-weight:700; cursor:pointer;
}
.c-tag-soldout { background:var(--ink-200); color:var(--ink-600);}

.c-item-foot { display:flex; justify-content:flex-start; align-items:center; margin-top:8px;}
.c-item-price { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.c-item-price .from { font-size:11px; color:var(--ink-500); font-weight:500; margin-right:2px;}
.c-add {
  width:32px; height:32px; border-radius:10px;
  background:var(--ink-900); color:#fff; border:0;
  font-size:20px; font-weight:400; line-height:1; cursor:pointer;
}
.c-add.mods { width:auto; padding:0 12px; font-size:12px; font-weight:700;}
.c-add:disabled { background:var(--ink-200); color:var(--ink-400); cursor:not-allowed;}

/* Cart pill */
.c-cart-pill {
  position:absolute; left:16px; right:16px; bottom:18px;
  background:var(--ink-900); color:#fff;
  padding:14px 18px; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; z-index:20;
  box-shadow:0 10px 30px rgba(13,12,10,.35);
  font-weight:700;
}
.c-cart-pill .cnt { background:var(--amber-500); color:#1b1a17; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:800; margin-right:8px;}

/* ---- Overlay sheets ---------------------------------------------------- */
.c-scrim { position:absolute; inset:0; background:rgba(13,12,10,.5); z-index:30;}
.c-sheet {
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-radius:20px 20px 0 0;
  max-height:calc(100% - 62px); display:flex; flex-direction:column;
  z-index:31;
  box-shadow:0 -10px 40px rgba(13,12,10,.25);
}
.c-sheet-handle { width:36px; height:4px; background:var(--ink-300); border-radius:2px; margin:8px auto 0;}
.c-sheet-head { padding:14px 18px 10px; display:flex; justify-content:space-between; align-items:center;}
.c-sheet-title { font-size:16px; font-weight:700;}
.c-sheet-close { background:var(--ink-100); border:0; border-radius:999px; width:28px; height:28px; cursor:pointer; font-size:16px;}
.c-sheet-body { flex:1; overflow-y:auto; padding: 0 18px;}
.c-sheet-foot { padding:14px 18px; border-top:1px solid var(--ink-100); background:#fff;}

/* Side overlay (allergens) — reserve 62px for iOS status bar + dynamic island */
.c-overlay-side {
  position:absolute; top:0; right:0; bottom:0; width:88%;
  background:#fff; z-index:31;
  display:flex; flex-direction:column;
  box-shadow:-10px 0 40px rgba(13,12,10,.25);
  padding-top:62px;
}

/* ---- Item detail sheet ------------------------------------------------- */
.c-detail-hero {
  height:140px; background:linear-gradient(135deg,#ffd98a,#f08a00);
  display:flex; align-items:center; justify-content:center;
  font-size:56px;
  flex:0 0 auto;
}
.c-detail-name { font-size:20px; font-weight:800; letter-spacing:-.02em; margin:14px 18px 2px;}
.c-detail-desc { font-size:13px; color:var(--ink-500); padding:0 18px; line-height:1.5;}

.c-mod-group { padding:14px 18px 6px; border-top:1px solid var(--ink-100); margin-top:14px;}
.c-mod-group:first-of-type { margin-top:6px;}
.c-mod-group h4 { font-size:14px; font-weight:700; margin:0; display:flex; justify-content:space-between; align-items:center;}
.c-mod-group h4 .req { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; background:var(--danger-100); color:var(--danger-700); letter-spacing:.04em;}
.c-mod-group h4 .opt { font-size:10px; font-weight:600; color:var(--ink-500);}
.c-mod-group .hint { font-size:11px; color:var(--ink-500); margin-top:2px;}

.c-mod-opt {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--ink-100);
  cursor:pointer;
}
.c-mod-opt:last-child { border-bottom:0;}
.c-mod-opt .radio, .c-mod-opt .check {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-300);
  flex:0 0 20px; display:flex; align-items:center; justify-content:center;
}
.c-mod-opt .check { border-radius:4px;}
.c-mod-opt.on .radio { border-color:var(--ink-900);}
.c-mod-opt.on .radio::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--ink-900);}
.c-mod-opt.on .check { border-color:var(--ink-900); background:var(--ink-900);}
.c-mod-opt.on .check::after {
  content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); margin-bottom:2px;
}
.c-mod-opt .lbl { flex:1; margin:0 10px; font-size:14px;}
.c-mod-opt .price { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-500);}
.c-mod-opt .price.pos { color:var(--ink-800);}

.c-qty { display:flex; align-items:center; gap:10px;}
.c-qty button {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--ink-300); background:#fff; font-size:18px; cursor:pointer;
}
.c-qty button:disabled { opacity:.4;}
.c-qty .n { font-weight:700; min-width:20px; text-align:center; font-variant-numeric:tabular-nums;}

.c-cta-primary {
  width:100%; background:var(--ink-900); color:#fff; border:0; border-radius:12px;
  padding:15px; font-size:15px; font-weight:700; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-sans);
}
.c-cta-primary:disabled { background:var(--ink-300); cursor:not-allowed;}
.c-cta-primary .price { font-variant-numeric:tabular-nums;}

/* ---- Allergen panel (AL-1) -------------------------------------------- */
/* Surface-provided cutout colour so icon negative space reads correctly */
.c-overlay-side { --c-icon-cut:#fff; }

.c-al-section { padding:14px 0 4px; border-top:1px solid var(--ink-100); }
.c-al-section:first-of-type { border-top:0; padding-top:4px; }
.c-al-label {
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-500); margin:0 0 10px;
}
.c-al-label-row { display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; }
.c-al-label-row .c-al-label { margin:0; }
.c-al-code-toggle {
  background:transparent; border:0; padding:4px 8px; cursor:pointer;
  font-size:11px; font-weight:700; color:var(--ink-600);
  border-radius:999px;
}
.c-al-code-toggle[aria-pressed="true"] { background:var(--ink-100); color:var(--ink-900); }

/* Dietary — positive-claim chips (pill + badge), clearly distinct from allergens */
.c-al-dietary-row { display:flex; flex-wrap:wrap; gap:8px; }
.c-al-dietary-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 6px; border-radius:999px;
  background:var(--ok-100); color:var(--ok-700);
  font-size:12px; font-weight:700;
}
.al-dietary {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ok-700);
  border-radius:999px; font-weight:800; letter-spacing:.02em;
  padding:0 6px; min-width:22px;
}

/* Allergens-present list — high contrast, row per allergen */
.c-al-list { display:flex; flex-direction:column; }
.c-al-row {
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--ink-100);
}
.c-al-row:last-child { border-bottom:0; }
.c-al-row .ic {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 36px;
}
.c-al-row.present .ic { background:var(--warn-100); color:var(--warn-700); }
.c-al-row.present.conf-printed .ic { background:var(--info-100); color:var(--info-700); }
.c-al-row.present.conf-suggested .ic { background:var(--amber-100); color:var(--amber-700); }
.c-al-row.present.conf-unknown .ic { background:var(--ink-100); color:var(--ink-600); }
.c-al-row .body { flex:1; padding-top:2px; }
.c-al-row .n {
  font-size:14px; font-weight:700; color:var(--ink-900);
  display:flex; align-items:center; gap:6px;
}
.c-al-row .n .code {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px; border-radius:4px;
  background:var(--ink-100); color:var(--ink-600);
  font-size:10px; font-weight:800; letter-spacing:.02em;
}
.c-al-row .conf { font-size:11px; color:var(--ink-500); margin-top:2px; }

/* May contain — 50% opacity second row, cross-contamination */
.c-al-may-contain { --c-icon-cut:var(--ink-50, #fafafa); }
.c-al-may-grid {
  display:flex; flex-wrap:wrap; gap:6px;
}
.c-al-may-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:var(--ink-50, #fafafa); color:var(--ink-600);
  border:1px dashed var(--ink-200);
  font-size:12px; font-weight:600;
  opacity:0.62;
}
.c-al-may-chip .code {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 3px; border-radius:3px;
  background:var(--ink-100); color:var(--ink-600);
  font-size:9px; font-weight:800; margin-left:2px;
}
.c-al-may-note {
  font-size:11px; color:var(--ink-500); margin-top:8px;
  line-height:1.4; font-style:italic;
}

.c-conf-banner {
  padding:12px 14px; border-radius:10px; font-size:12px; font-weight:600;
  display:flex; gap:8px; align-items:flex-start; margin-top:14px;
}
.c-conf-ok   { background:var(--ok-100); color:var(--ok-700);}
.c-conf-info { background:var(--info-100); color:var(--info-700);}
.c-conf-warn { background:var(--warn-100); color:var(--warn-700);}
.c-conf-mute { background:var(--ink-100); color:var(--ink-600);}

/* ---- Filter sheet ------------------------------------------------------ */
.c-fs-section { padding:14px 0; border-top:1px solid var(--ink-100);}
.c-fs-section:first-of-type { border-top:0;}
.c-fs-section h3 { font-size:13px; font-weight:700; margin:0 0 10px; color:var(--ink-500); letter-spacing:.04em; text-transform:uppercase;}
.c-fs-toggles { display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.c-fs-toggle {
  padding:10px 12px; border-radius:10px; border:1.5px solid var(--ink-200);
  font-size:13px; font-weight:600; background:#fff; cursor:pointer;
  display:flex; align-items:center; gap:8px; color:var(--ink-700);
  text-align:left;
}
.c-fs-toggle.on { border-color:var(--ink-900); background:var(--ink-900); color:#fff;}
.c-fs-toggle .dot { width:8px; height:8px; border-radius:50%; background:var(--ink-300); flex:0 0 8px;}
.c-fs-toggle.on .dot { background:var(--amber-500);}

.c-safety {
  background:var(--ink-900); color:#fff; padding:14px 16px; border-radius:12px;
  font-size:12px; line-height:1.5; margin:12px 0 0;
}
.c-safety strong { color:var(--amber-400);}

/* ---- Your Order screen (QR collection) --------------------------------- */
.c-ord-topbar { background:#fff; padding:calc(62px + 10px) 18px 14px; border-bottom:1px solid var(--ink-200); display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;}
.c-ord-topbar .back { background:none; border:0; padding:0; cursor:pointer; font-size:18px; color:var(--ink-700);}

.c-ord-scroll { flex:1; overflow-y:auto;}
.c-ord-head { padding:20px 18px; text-align:center;}
.c-ord-code {
  font-family:var(--font-mono);
  font-size:56px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-900); line-height:1;
}
.c-ord-caption { font-size:13px; color:var(--ink-500); margin-top:6px;}
.c-ord-status {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:700; margin-top:12px;
}
.c-ord-status .dot { width:8px; height:8px; border-radius:50%;}
.c-ord-status.preparing { background:var(--info-100); color:var(--info-700);}
.c-ord-status.preparing .dot { background:var(--info-500); animation:c-pulse 1.4s infinite;}
.c-ord-status.ready { background:var(--amber-500); color:#1b1a17;}
.c-ord-status.ready .dot { background:#1b1a17;}
@keyframes c-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* QR card */
.c-qr-card {
  margin:14px 18px; background:#fff; border-radius:16px; padding:18px;
  box-shadow:0 2px 10px rgba(46,44,39,.08);
  border:2px solid var(--ink-100);
  transition:border-color .3s;
  text-align:center;
}
.c-qr-card.ready {
  border-color:var(--amber-500);
  animation:c-glow 2s infinite;
}
@keyframes c-glow { 0%,100%{box-shadow:0 2px 10px rgba(46,44,39,.08)} 50%{box-shadow:0 2px 18px rgba(240,138,0,.5)} }
.c-qr-card h3 { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); margin:0 0 12px;}
.c-qr-hint { font-size:12px; color:var(--ink-500); margin-top:12px;}

.c-qr-svg-wrap { display:flex; justify-content:center;}

/* Lines summary */
.c-lines { margin:0 18px; background:#fff; border-radius:12px; padding:14px 16px;}
.c-line { display:flex; justify-content:space-between; padding:6px 0; font-size:13px;}
.c-line .qty { font-weight:700; margin-right:8px; color:var(--ink-500);}
.c-line .mod-line { font-size:11px; color:var(--ink-500); margin-top:2px;}
.c-line-total { display:flex; justify-content:space-between; padding:10px 0 0; margin-top:6px; border-top:1px solid var(--ink-100); font-weight:700; font-size:14px;}

/* ---- Full screen READY takeover -----------------------------------------*/
.c-ready-full {
  position:absolute; inset:0; background:var(--amber-500);
  display:flex; flex-direction:column; align-items:stretch;
  z-index:5; color:#1b1a17; overflow-y:auto;
}
.c-ready-inner {
  display:flex; flex-direction:column; align-items:center;
  padding:calc(62px + 16px) 20px 28px; width:100%;
}
.c-ready-full .k { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.8;}
.c-ready-full .code { font-family:var(--font-mono); font-size:84px; font-weight:700; line-height:1; margin-top:4px;}
.c-ready-full .big { font-size:22px; font-weight:800; margin:18px 0 10px; letter-spacing:-.02em; text-align:center;}
.c-ready-full .show { font-size:12px; opacity:.8; margin-top:12px; text-align:center; max-width:280px; line-height:1.5;}
.c-ready-qr {
  background:#fff; padding:14px; border-radius:14px; margin-top:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.c-ready-or {
  margin:24px 0 12px; font-size:11px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; opacity:.55; position:relative; width:100%;
  text-align:center;
}
.c-ready-or::before, .c-ready-or::after {
  content:''; position:absolute; top:50%; width:30%; height:1px;
  background:#1b1a17; opacity:.25;
}
.c-ready-or::before { left:4%;} .c-ready-or::after { right:4%;}
.c-ready-items {
  background:rgba(27,26,23,.06); border:1.5px solid rgba(27,26,23,.14);
  border-radius:14px; padding:14px 16px; width:100%; max-width:320px;
}
.c-ready-items .hd {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  opacity:.6; margin-bottom:8px;
}
.c-ready-items .row {
  display:flex; gap:10px; padding:5px 0; font-size:14px;
  border-bottom:1px solid rgba(27,26,23,.1);
}
.c-ready-items .row:last-of-type { border-bottom:0;}
.c-ready-items .row .q { font-weight:800; font-variant-numeric:tabular-nums; min-width:26px;}
.c-ready-items .row .n { font-weight:600; flex:1;}
.c-ready-items .foot {
  font-size:10.5px; opacity:.65; margin-top:10px; line-height:1.5;
  font-weight:500;
}
.c-ready-dismiss {
  margin-top:24px; background:#1b1a17; color:#fff; border:0; border-radius:12px;
  padding:12px 22px; font-weight:700; cursor:pointer; font-size:13px;
  font-family:var(--font-sans);
}

/* ---- Your Orders list -------------------------------------------------- */
.c-orders-list { padding:12px 16px;}
.c-orders-empty { text-align:center; padding:48px 24px; color:var(--ink-500); font-size:13px;}
.c-order-row {
  background:#fff; border-radius:12px; padding:14px 16px; margin-bottom:10px;
  display:flex; justify-content:space-between; cursor:pointer;
}
.c-order-row .l { flex:1;}
.c-order-row .when { font-size:11px; color:var(--ink-500); font-weight:600;}
.c-order-row .code { font-family:var(--font-mono); font-weight:700; font-size:16px; margin-top:2px;}
.c-order-row .items { font-size:12px; color:var(--ink-500); margin-top:2px;}
.c-order-row .r { text-align:right;}
.c-order-row .r .total { font-weight:700; font-variant-numeric:tabular-nums;}

/* READY rows glow amber — same colour as the takeover so it's obvious
   which order is actively waiting for collection. */
.c-order-row.ready {
  background:var(--amber-500);
  color:#1b1a17;
  box-shadow:0 4px 14px rgba(240,138,0,.22);
}
.c-order-row.ready .when,
.c-order-row.ready .items { color:rgba(27,26,23,.72);}
.c-order-row.ready .code { color:#1b1a17;}
.c-order-row.ready .total { color:#1b1a17;}
.c-order-row.ready .ready-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:#1b1a17; color:var(--amber-500);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px; margin-left:6px;
}
.c-order-row.ready .ready-badge .pulse {
  width:6px; height:6px; border-radius:50%; background:var(--amber-500);
  animation:readyPulse 1.4s ease-in-out infinite;
}
@keyframes readyPulse {
  0%,100% { opacity:1; transform:scale(1);}
  50%     { opacity:.55; transform:scale(1.25);}
}

/* ---- Closed state ----------------------------------------------------- */
.c-closed { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center;}.c-closed .badge { display:inline-block; padding:6px 14px; border-radius:999px; background:var(--ink-200); color:var(--ink-700); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px;}
.c-closed h1 { font-size:28px; font-weight:800; margin:0 0 8px;}
.c-closed p { color:var(--ink-500); font-size:14px; line-height:1.5; max-width:260px;}