/* ==========================================================================
   Slowpoke Coffee Co. — Staff POS register
   Denser, utilitarian sibling of style.css. Same fonts/palette, tuned for
   fast tapping on an iPad in landscape, with graceful fallbacks for desktop
   and phone. Loads standalone (does not import style.css) but reuses the
   same custom property names so a shared brand identity is unmistakable.
   The modal shell, buttons, animated cup, and modifier-group styling are
   shared with the guest-facing customization sheet via order-builder.css
   (linked alongside this file in pos.php) rather than duplicated here.
   ========================================================================== */

:root {
  --cream-50:   #fbf1de;
  --cream-100:  #f6e3c4;
  --cream-200:  #eed3a4; /* menu-preview.css's .mat-pastries gradient needs this */
  --cocoa-900:  #241a11;
  --cocoa-700:  #5a4230;
  --cocoa-600:  #6f4e37;
  --rust-700:   #8a3418;
  --rust-600:   #b6472a;
  --rust-500:   #d9622b;
  --rust-400:   #e8834f;
  --mustard-600: #c8811a;
  --mustard-500: #e8a33d;
  --mustard-400: #f0bc63;
  --avocado-700: #3f4f28;
  --avocado-600: #5b6f3a;
  --avocado-500: #748f46;
  --avocado-400: #93ac66;
  --sunset-500: #e2665a;
  --sunset-400: #ec8a7f;
  --cream: #fffaf0;

  --bg: #f2ede2;
  --surface: #ffffff;
  --surface-2: #f6f2e8;
  --text: #241a11;
  --text-soft: #6b5642;
  --border: rgba(36, 26, 17, 0.14);
  --border-strong: rgba(36, 26, 17, 0.28);
  --accent: var(--rust-600);
  --accent-hover: var(--rust-700);
  --accent-contrast: #ffffff;
  --avocado: var(--avocado-600);
  --danger: #c1443a;
  /* Layered shadows: a tight contact shadow plus a wider ambient one reads as
     real depth, where a single soft blur just reads as blur. */
  --shadow-sm: 0 1px 2px rgba(20, 14, 8, 0.08), 0 2px 6px rgba(20, 14, 8, 0.06);
  --shadow-md: 0 2px 4px rgba(20, 14, 8, 0.08), 0 8px 20px rgba(20, 14, 8, 0.12);
  --shadow-lg: 0 4px 10px rgba(20, 14, 8, 0.14), 0 24px 56px rgba(20, 14, 8, 0.30);
  --ring: 0 0 0 3px rgba(182, 71, 42, 0.18); /* focus/selected halo, accent-tinted */

  --font-heading: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17110b;
    --surface: #241b13;
    --surface-2: #1c150e;
    --text: #f3e9d9;
    --text-soft: #c9b69c;
    --border: rgba(243, 233, 217, 0.12);
    --border-strong: rgba(243, 233, 217, 0.22);
    --accent: var(--mustard-400);
    --accent-hover: #ffd07d;
    --accent-contrast: #241b13;
    --avocado: var(--avocado-400);
    --ring: 0 0 0 3px rgba(240, 188, 99, 0.22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17110b; --surface: #241b13; --surface-2: #1c150e; --text: #f3e9d9; --text-soft: #c9b69c;
  --border: rgba(243, 233, 217, 0.12); --border-strong: rgba(243, 233, 217, 0.22);
  --accent: var(--mustard-400); --accent-hover: #ffd07d; --accent-contrast: #241b13; --avocado: var(--avocado-400);
  --ring: 0 0 0 3px rgba(240, 188, 99, 0.22);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f2ede2; --surface: #ffffff; --surface-2: #f6f2e8; --text: #241a11; --text-soft: #6b5642;
  --border: rgba(36, 26, 17, 0.14); --border-strong: rgba(36, 26, 17, 0.28);
  --accent: var(--rust-600); --accent-hover: var(--rust-700); --accent-contrast: #ffffff; --avocado: var(--avocado-600);
  --ring: 0 0 0 3px rgba(182, 71, 42, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  /* A flat fill made the work area read as one dead slab. Two very soft warm
     washes (rust top-left, mustard bottom-right) sit under everything and give
     the surfaces something to lift off. */
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(217, 98, 43, 0.06), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(232, 163, 61, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  overflow: hidden; /* the POS is a fixed-viewport app shell, panels scroll internally */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; -webkit-user-select: none; user-select: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
p { margin: 0; }

/* iOS Safari's toolbars shrink and grow as you scroll, and 100vh describes the
   viewport as if they were not there, so a 100vh app shell overflows and the
   bottom bar gets pushed under the browser chrome. 100dvh tracks the real
   visible height. The 100vh line stays first as the fallback for browsers
   without dvh support. */
.pos-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- Top bar ---------- */
.pos-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; color: var(--cream-50); flex-shrink: 0;
  /* Roasted-bean gradient rather than a flat brown bar, with a mustard hairline
     under it so the chrome has an edge instead of just stopping. */
  background: linear-gradient(180deg, #2f2317 0%, var(--cocoa-900) 100%);
  border-bottom: 1px solid rgba(240, 188, 99, 0.28);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  position: relative; z-index: 5;
  /* Clear the notch / Dynamic Island in landscape and portrait. */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.pos-topbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); }
/* Groove gets a lit disc to sit on so he reads as the brand mark and not as a
   stray emoji in the chrome. */
.pos-brand-mascot {
  font-size: 1.5rem; line-height: 1; width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full);
  background: radial-gradient(circle at 50% 35%, rgba(240,188,99,0.30), rgba(240,188,99,0.08) 70%);
  box-shadow: inset 0 0 0 1px rgba(240, 188, 99, 0.28);
}
.pos-topbar-brand strong { font-size: 1.05rem; letter-spacing: 0.2px; }
.pos-topbar-sub { display: block; font-size: 0.68rem; color: rgba(251,243,231,0.65); letter-spacing: 0.3px; }
.pos-topbar-actions { display: flex; align-items: center; gap: 14px; }
.pos-clock { font-family: var(--font-heading); font-variant-numeric: tabular-nums; color: rgba(251,243,231,0.85); font-size: 0.9rem; min-width: 70px; text-align: right; }
/* min-height 44px is a base rule, not a phone-only override: iPad is this
   register's primary device and these get tapped there just as often. */
.pos-sound-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(251,243,231,0.1);
  color: rgba(251,243,231,0.9); border: 1px solid rgba(251,243,231,0.3); border-radius: var(--radius-full);
  padding: 7px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; min-height: 44px;
}
.pos-sound-toggle:hover { background: rgba(251,243,231,0.18); }
.pos-sound-toggle.muted { opacity: 0.55; }
.pos-topbar-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: rgba(251,243,231,0.85); text-decoration: none; font-size: 0.82rem; font-weight: 700;
  padding: 7px 12px; border-radius: var(--radius-full); border: 1px solid rgba(251,243,231,0.3); white-space: nowrap;
}
.pos-topbar-link:hover { background: rgba(251,243,231,0.12); }

/* ---------- Ticket tab strip ---------- */
.pos-ticket-tabs {
  display: flex; gap: 8px; padding: 8px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch;
  /* Keep a horizontal flick inside the strip instead of bouncing the page. */
  overscroll-behavior: contain;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.pos-ticket-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full);
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 700; font-family: var(--font-heading); min-height: 44px;
  font-size: 0.85rem; white-space: nowrap; cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pos-ticket-chip:hover { border-color: var(--border-strong); }
.pos-ticket-chip:active { transform: scale(0.96); }
/* The active ticket is the single most important "where am I" signal on this
   screen, so it gets the accent fill plus a halo, not just a border swap. */
.pos-ticket-chip.active {
  border-color: var(--accent); background: var(--accent); color: var(--accent-contrast);
  box-shadow: var(--shadow-md), var(--ring);
}
.pos-ticket-chip .chip-count { background: rgba(0,0,0,0.15); border-radius: var(--radius-full); padding: 1px 7px; font-size: 0.72rem; }
.pos-ticket-chip.active .chip-count { background: rgba(255,255,255,0.25); }
.pos-ticket-chip .chip-status { font-size: 0.9rem; }
.pos-ticket-chip-new {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 16px; border-radius: var(--radius-full); border: 2px dashed var(--border-strong); background: transparent;
  color: var(--text-soft); font-weight: 700; font-family: var(--font-heading); font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
}
.pos-ticket-chip-new:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- App layout ---------- */
.pos-app { flex: 1; display: flex; min-height: 0; }
.pos-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 0; overflow: hidden; }
.pos-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; flex-shrink: 0; }
.pos-cat-btn {
  padding: 12px 18px; border-radius: var(--radius-full); border: 2px solid var(--border); background: var(--surface);
  color: var(--text); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; cursor: pointer; min-height: 48px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pos-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.pos-cat-btn:active { transform: scale(0.96); }
.pos-cat-btn.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
  box-shadow: var(--shadow-md), var(--ring);
}
.pos-cat-btn.active:hover { color: var(--accent-contrast); }

.pos-item-grid {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; align-content: start; padding-bottom: 100px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* A tile is: preview, name, price chip. The name is the thing being scanned
   for, so it gets the weight; the price is secondary and sits in a chip so the
   eye can skip it or find it deliberately. The preview brings its own colored
   mat from menu-preview.css, so the tile does not add a backdrop of its own. */
.pos-item-tile {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  box-shadow: var(--shadow-sm); min-height: 176px; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pos-item-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Listed after :hover so a press always wins over the hover lift. */
.pos-item-tile:active { transform: scale(0.96); }
/* Explicit width AND height, not max-width + aspect-ratio.
   menu-preview.css sizes these with width:100% + aspect-ratio:3/4, which gives
   the grid no definite height to size the row from: the row collapsed onto the
   tile's min-height and a two-line name pushed its price chip clean outside the
   card. A definite box (62 x 83 keeps the same 3:4) lets the row measure the
   tile honestly and grow for the tall ones. */
.pos-item-tile .drink-cup, .pos-item-tile .pastry-card {
  width: 62px; height: 83px; max-width: none; flex: 0 0 auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 3px 5px rgba(20, 14, 8, 0.16));
}
.pos-item-name { font-weight: 800; font-size: 0.88rem; line-height: 1.25; letter-spacing: 0.1px; }
/* margin-top:auto pins the price to the bottom edge so prices line up across a
   row even when names wrap to two lines. */
.pos-item-price {
  margin-top: auto; font-family: var(--font-heading); color: var(--accent); font-weight: 700; font-size: 0.8rem;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: var(--radius-full); line-height: 1.4;
}
.pos-item-tile:hover .pos-item-price { border-color: var(--accent); }
.pos-item-tile.disabled { opacity: 0.4; pointer-events: none; filter: saturate(0.5); }

/* ---------- Ticket panel (sidebar on wide screens) ---------- */
.pos-ticket-panel {
  width: 380px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  /* Lift the ticket off the item grid: this is the receipt, not more chrome. */
  box-shadow: -8px 0 28px rgba(20, 14, 8, 0.10);
  position: relative; z-index: 2;
}
.ticket-head {
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.ticket-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* One small colored badge per order type, so For Here / To Go / Mobile Order
   / Drive-Thru are told apart at a glance instead of all reading as the same
   gray label. Drive-Thru gets the loudest treatment (the accent itself):
   it is the newest order path and the one most likely to need a fast hand-off. */
.ticket-order-type {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.7px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
}
.ticket-order-type.type-togo { background: rgba(232, 163, 61, 0.16); color: var(--mustard-600); border-color: rgba(232, 163, 61, 0.4); }
.ticket-order-type.type-mobile { background: rgba(91, 111, 58, 0.14); color: var(--avocado-700); border-color: rgba(91, 111, 58, 0.35); }
.ticket-order-type.type-drivethru { background: rgba(217, 98, 43, 0.16); color: var(--rust-600); border-color: rgba(217, 98, 43, 0.45); }
.ticket-label { font-family: var(--font-heading); font-size: 1.45rem; margin-top: 1px; line-height: 1.15; }
.ticket-fired-badge {
  background: var(--avocado-500); color: #fffaf0; font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap;
}
.ticket-empty-note { color: var(--text-soft); font-style: italic; font-size: 0.9rem; padding: 30px 18px; text-align: center; }

.ticket-lines {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* Each line is a small card with a quiet accent rail on its left edge, so a
   long ticket reads as a stack of items instead of a wall of text. */
.ticket-line {
  padding: 10px 10px 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  margin-bottom: 8px; border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

/* ---------- Tap a line to edit it ----------
   The whole name/mods/note block is one button so the target is comfortably
   past the 44px HIG minimum without adding a fiddly little pencil icon. */
.ticket-line-main {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; color: inherit; padding: 4px; margin: -4px -4px 0; cursor: pointer;
  border-radius: var(--radius-sm); min-height: 44px;
  transition: background 0.12s ease;
}
.ticket-line-main:hover { background: rgba(0, 0, 0, 0.04); }
.ticket-line-main:active { background: rgba(0, 0, 0, 0.08); }
:root[data-theme="dark"] .ticket-line-main:hover { background: rgba(255, 255, 255, 0.05); }
@media (prefers-color-scheme: dark) { .ticket-line-main:hover { background: rgba(255, 255, 255, 0.05); } }
.ticket-line-main.is-locked { cursor: default; }
.ticket-line-main.is-locked:hover { background: none; }
.ticket-line-hint {
  display: inline-block; margin-top: 5px; font-size: 0.7rem; font-weight: 700;
  color: var(--accent); letter-spacing: 0.3px;
}
.ticket-line-hint.locked { color: var(--text-soft); font-weight: 600; font-style: italic; }

.ticket-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ticket-line-name { font-weight: 700; font-size: 0.92rem; }
.ticket-line-total { font-family: var(--font-heading); font-weight: 600; color: var(--accent); white-space: nowrap; font-size: 0.9rem; }
.ticket-mods { margin: 4px 0 0; padding-left: 12px; }
.ticket-mods li { font-size: 0.78rem; color: var(--text-soft); list-style: disc; }
.ticket-note { font-size: 0.78rem; font-style: italic; color: var(--text-soft); margin-top: 4px; }
.ticket-line-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ticket-qty { display: flex; align-items: center; gap: 8px; }
/* 44px minimum everywhere, not just under the phone breakpoint: iPad is this
   register's primary device, and a ticket line's qty buttons are tapped just
   as often there as a phone would tap them. */
.ticket-qty-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; transition: transform 0.1s ease;
}
.ticket-qty-btn:active { transform: scale(0.9); }
.ticket-qty-btn:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.ticket-line-remove {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: none; color: var(--danger); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 6px 10px;
}
/* A fired line is locked and the barista is already building it, so it steps
   back visually and its rail turns avocado: done, not pending. */
.ticket-line.sent { opacity: 0.75; border-left-color: var(--avocado); }
.ticket-line-sent-tag { font-size: 0.65rem; color: var(--avocado-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* The money end of the ticket. Tinted and topped with a hard rule so it reads
   as a separate "what is owed" block rather than the tail of the item list. */
.ticket-foot {
  border-top: 1px solid var(--border-strong); padding: 14px 18px 18px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%);
}

/* ---------- Promo code panel ---------- */
.promo-row { display: flex; gap: 8px; margin-bottom: 10px; }
.promo-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); font-family: inherit;
  text-transform: uppercase;
  /* Anything under 16px makes iOS Safari zoom the whole page in on focus and
     never zoom back out, which strands the register mid-order. 16px exactly
     is the threshold, so this must not become an rem that resolves smaller. */
  font-size: 16px;
  min-height: 44px;
}
.promo-input:focus { outline: none; border-color: var(--accent); }
.promo-apply-btn {
  border: none; background: var(--avocado); color: #fffaf0; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.85rem; padding: 0 16px; border-radius: var(--radius-sm); cursor: pointer;
  min-height: 44px; min-width: 44px; flex-shrink: 0;
}
.promo-apply-btn:hover { background: var(--avocado-700, var(--avocado)); }
.promo-msg { font-size: 0.78rem; margin: -2px 0 10px; min-height: 1em; }
.promo-msg.success { color: var(--avocado-500); font-weight: 700; }
.promo-msg.error { color: var(--danger); font-weight: 700; }
.promo-applied-row {
  display: flex; justify-content: space-between; align-items: center; background: rgba(116,143,70,0.14);
  border: 1px solid rgba(116,143,70,0.4); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px;
  font-size: 0.85rem;
}
.promo-applied-row .promo-name { font-weight: 700; color: var(--avocado-700, var(--avocado)); }
.promo-remove-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  background: none; border: none; color: var(--danger); font-size: 0.75rem; font-weight: 700; cursor: pointer;
}

.ticket-totals-row {
  display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 4px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; /* money columns line up instead of jittering */
}
.ticket-totals-row.discount { color: var(--avocado-500); font-weight: 700; }
/* The grand total is the number the cashier reads out loud, so it is the
   largest, heaviest, accent-colored thing in the panel. */
.ticket-totals-row.grand {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--text);
  margin-top: 8px; padding-top: 10px; border-top: 2px dashed var(--border-strong);
  align-items: baseline; letter-spacing: 0.2px;
}
.ticket-totals-row.grand span:last-child { color: var(--accent); }
.ticket-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ticket-actions-full { grid-column: 1 / -1; }
.ticket-actions .pos-btn { min-height: 52px; font-size: 0.98rem; }

/* ---------- Order setup ---------- */
.setup-options { display: grid; gap: 12px; margin: 16px 0; }
.setup-option {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--surface-2); cursor: pointer; text-align: left;
}
.setup-option.selected { border-color: var(--accent); background: rgba(217,98,43,0.08); }
.setup-option-icon { font-size: 1.6rem; }
.setup-option-label { font-family: var(--font-heading); font-weight: 600; }
.setup-option-sub { font-size: 0.78rem; color: var(--text-soft); }
.setup-detail { margin-top: 10px; }
.setup-detail label { display: block; font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
.setup-detail input, .setup-detail select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-family: inherit;
  font-size: 16px; /* below 16px iOS zooms the page in on focus (see .promo-input) */
  min-height: 44px;
}

/* Receipt modal */
.receipt-lines { margin: 14px 0; }
.receipt-line { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.receipt-line-mods { font-size: 0.74rem; color: var(--text-soft); padding-left: 10px; }
.receipt-totals { margin-top: 10px; }
.receipt-disclaimer {
  margin-top: 18px; padding: 14px; border-radius: var(--radius-md);
  background: rgba(217,98,43,0.1); border: 1px solid rgba(217,98,43,0.3); font-size: 0.85rem;
}
.receipt-disclaimer strong { display: block; margin-bottom: 4px; }

/* ---------- Mobile ticket toggle ---------- */
.pos-mobile-toggle {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--accent); color: var(--accent-contrast);
  border: none; padding: 16px 20px; font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  justify-content: space-between; align-items: center; cursor: pointer;
  min-height: 44px;
  /* Sit above the home indicator instead of under it. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pos-ticket-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
    transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -12px 0 40px rgba(0,0,0,0.3);
    z-index: 280;
  }
  /* Above the mobile toggle bar (z-index 300) while open, so the panel's own
     footer buttons (Send to Barista / Close & Pay) are never intercepted by
     the toggle bar sitting fixed at the bottom of the screen. */
  .pos-ticket-panel.open { transform: translateX(0); z-index: 310; }
  .pos-mobile-toggle { display: flex; }
  .pos-item-grid { padding-bottom: 90px; }
}

/* ---------- Phone ----------
   Verified against 375px (SE/mini), 390px (14/15), and 430px (Pro Max). */
@media (max-width: 560px) {
  /* Two tiles fit at 375px once the tile floor drops; auto-fill keeps three
     at 430px. Neither overflows horizontally. */
  .pos-item-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .pos-topbar-sub { display: none; }
  .pos-main { padding: 10px 10px 0; }

  /* The action strip (sound, clock, two links) is ~536px laid out in one row,
     which forced the whole register to scroll sideways on every iPhone width.
     Let it wrap onto its own line and tighten it instead. */
  .pos-topbar { flex-wrap: wrap; gap: 4px 10px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .pos-topbar-brand { min-width: 0; }
  .pos-topbar-brand strong { font-size: 0.92rem; }
  /* Sound, clock, and the two links measured 352px against 351px of room, so
     they wrapped onto a THIRD row and the top bar ate 157px (22% of a 375x812
     screen) to strand "Exit to Site" on a line of its own. Trimming the pill
     padding and type lands the whole strip on one row: 107px, 50px of it handed
     back to the item grid. The pills still measure 44px tall. */
  .pos-topbar-actions { flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .pos-clock { min-width: 0; margin-right: auto; font-size: 0.8rem; }
  .pos-sound-toggle, .pos-topbar-link { padding: 8px 9px; font-size: 0.72rem; }

  /* Category buttons wrapped onto four rows at 375px and ate the whole screen
     before a single drink was visible. One scrollable row instead. */
  .pos-categories {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; margin-bottom: 10px; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .pos-categories::-webkit-scrollbar { display: none; }
  .pos-cat-btn { flex-shrink: 0; padding: 10px 14px; font-size: 0.88rem; }

  /* The ticket panel is the whole screen on a phone, and its footer has to
     clear the home indicator since the panel sits above the toggle bar. */
  .pos-ticket-panel { width: 100%; max-width: none; }
  .ticket-foot {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .ticket-head { padding: 14px 14px 10px; padding-top: max(14px, env(safe-area-inset-top)); }
  .ticket-lines { padding: 10px 12px; }

  /* Apple HIG minimum on every control that a thumb has to hit. */
  .ticket-qty-btn { width: 44px; height: 44px; font-size: 1.15rem; }
  .ticket-line-remove { min-height: 44px; padding: 6px 10px; }
  .pos-ticket-chip, .pos-ticket-chip-new { min-height: 44px; }
  .pos-sound-toggle, .pos-topbar-link { min-height: 44px; display: inline-flex; align-items: center; }
  .promo-remove-btn { min-height: 44px; padding: 0 8px; }
  .ticket-actions .pos-btn { min-height: 48px; }
}

/* Landscape phone: the shell is only ~390px tall, so the chrome has to give
   the item grid room to breathe. */
@media (max-height: 460px) and (orientation: landscape) {
  .pos-topbar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .pos-brand-mascot { font-size: 1.2rem; }
  .pos-topbar-sub { display: none; }
  .pos-ticket-tabs { padding-top: 5px; padding-bottom: 5px; }
  .pos-cat-btn { min-height: 40px; padding: 8px 12px; }
}