/* Tea Booth POS — design tokens + components.
   Rules: use tokens, logical properties (RTL safe), min 48px tap targets. */
:root {
  --bg: #f4eee3;
  --bg-2: #ece2d1;
  --surface: #fffdf9;
  --surface-2: #f8f2e8;
  --ink: #2b1d13;
  --ink-2: #5a4838;
  --muted: #8b7865;
  --line: #e7dbc8;
  --brand: #0d5c5f;
  --brand-2: #0a4649;
  --brand-soft: #d6ebe8;
  --accent: #e39a17;
  --accent-soft: #fcefd2;
  --tea: #b4532a;
  --ok: #1b8a52;
  --ok-soft: #d9f2e4;
  --warn: #b97800;
  --warn-soft: #fff1cc;
  --danger: #c0392b;
  --danger-soft: #fde3de;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 8px 24px rgba(60, 40, 20, .08);
  --shadow-lg: 0 24px 70px rgba(30, 18, 8, .3);
  --r: 20px;
  --r-sm: 14px;
  --font: 'Tajawal', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
  --rail: 96px;
  --header: 66px;
  --nav-h: 64px;
  --sat: env(safe-area-inset-top, 0px);    /* iPhone notch / status bar */
  --sab: env(safe-area-inset-bottom, 0px); /* iPhone home bar */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15110d;
  --bg-2: #1d1712;
  --surface: #221b15;
  --surface-2: #2a221a;
  --ink: #f7ede0;
  --ink-2: #dac9b5;
  --muted: #a8937e;
  --line: #3a2f25;
  --brand: #27a69d;
  --brand-2: #1d7f78;
  --brand-soft: #17393a;
  --accent: #f2b440;
  --accent-soft: #3d2f15;
  --tea: #e07a4c;
  --ok: #3cc47e;
  --ok-soft: #173826;
  --warn: #f0b640;
  --warn-soft: #3a2e12;
  --danger: #ff6b5a;
  --danger-soft: #42201b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #15110d; --bg-2: #1d1712; --surface: #221b15; --surface-2: #2a221a;
    --ink: #f7ede0; --ink-2: #dac9b5; --muted: #a8937e; --line: #3a2f25;
    --brand: #27a69d; --brand-2: #1d7f78; --brand-soft: #17393a;
    --accent: #f2b440; --accent-soft: #3d2f15; --tea: #e07a4c;
    --ok: #3cc47e; --ok-soft: #173826; --warn: #f0b640; --warn-soft: #3a2e12;
    --danger: #ff6b5a; --danger-soft: #42201b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, select { user-select: text; -webkit-user-select: text; font: inherit; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-touch-callout: none; }
button, a, input, select, label, .card { touch-action: manipulation; } /* no double-tap zoom, instant taps */
main#main, .grid, .modal-b, .cart-lines, .cats, .tabs { overscroll-behavior: contain; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.bold { font-weight: 800; }
.right { text-align: end; }
.center { text-align: center; }
.hide, [hidden] { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.gap-lg { gap: 18px; }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 24px; }
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 18px; height: 18px; }
.ico.lg { width: 28px; height: 28px; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: 16px; white-space: nowrap;
  transition: transform .08s ease, background .15s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #2b1d13; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-ghost { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.soft { background: var(--surface-2); }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 11px; }
.btn.lg { min-height: 62px; font-size: 19px; padding: 0 24px; border-radius: 18px; }
.btn.xl { min-height: 74px; font-size: 23px; padding: 0 26px; border-radius: 20px; }
.btn.block { width: 100%; }
.icon-btn {
  width: 46px; height: 46px; display: inline-grid; place-items: center;
  border-radius: 14px; border: 0; background: transparent; color: inherit;
}
.icon-btn:active { transform: scale(.94); }

/* segmented / choice buttons */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.choice {
  min-height: 58px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--surface); font-weight: 800; font-size: 16px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: all .12s;
}
.choice small { font-weight: 600; color: var(--muted); font-size: 13px; }
.choice.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.choice.on small { color: var(--brand); }
.choice.on-accent { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.input, select.input, textarea.input {
  min-height: 50px; border-radius: 13px; border: 1.5px solid var(--line);
  background: var(--surface); padding: 10px 14px; font-size: 17px; width: 100%;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 80px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.input.money { font-variant-numeric: tabular-nums; direction: ltr; text-align: end; font-weight: 800; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.switch:last-child { border-bottom: 0; }
.switch .lbl b { display: block; }
.switch .lbl small { color: var(--muted); }
.toggle { position: relative; width: 58px; height: 34px; flex: none; }
.toggle input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle i { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: .2s; }
.toggle i::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .2s; }
.toggle input:checked + i { background: var(--ok); }
.toggle input:checked + i::after { inset-inline-start: 28px; }

/* ---------- Shell ---------- */
.shell {
  display: grid; height: 100dvh;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: calc(var(--header) + var(--sat)) minmax(0, 1fr);
}
.topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: var(--sat) 14px 0;
  background: linear-gradient(110deg, var(--brand-2), var(--brand) 60%, #12767a);
  color: #fff; position: relative; z-index: 5;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .logo { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none; }
.brand b { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { display: block; opacity: .75; font-size: 12px; }
.top-mid { flex: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; }
.top-right { display: flex; align-items: center; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
}
.pill.warn { background: #ffcf5c; color: #3b2600; }
.pill.danger { background: #ff6b5a; color: #fff; animation: pulse 2s infinite; }
.pill.ok { background: rgba(80, 220, 150, .25); }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #5df29f; }
.pill .dot.off { background: #ffb4a8; }
.rail {
  background: var(--surface); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; overflow-y: auto;
}
.rail a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px;
  border-radius: 16px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; text-align: center;
  position: relative; transition: background .15s;
}
.rail a .ico { width: 26px; height: 26px; }
.rail a.on { background: var(--brand-soft); color: var(--brand); }
.rail a .badge { position: absolute; top: 4px; inset-inline-end: 10px; }
.rail .spacer { flex: 1; }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.badge.accent { background: var(--accent); color: #2b1d13; }
main#main { overflow: auto; min-height: 0; position: relative; }
.page { padding: 20px; max-width: 1280px; margin: 0 auto; }
.page-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-h h1 { font-size: 26px; font-weight: 800; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; background: var(--surface-2); padding: 5px; border-radius: 16px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs button { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: transparent; font-weight: 700; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs button.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cols-2 > .panel + .panel, .cols-3 > .panel + .panel { margin-top: 0; }
.cols-2 + .panel, .panel + .cols-2, .panel + .cols-3 { margin-top: 16px; }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; font-weight: 700; margin-bottom: 14px; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.danger { background: var(--danger-soft); color: var(--danger); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.info { background: var(--brand-soft); color: var(--brand); }
.banner .grow { color: var(--ink); font-weight: 600; }

/* ---------- Sell ---------- */
.sell { display: grid; grid-template-columns: 1fr 390px; height: 100%; min-height: 0; }
.catalog { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cats { display: flex; gap: 8px; padding: 14px 16px 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px;
  border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface);
  font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--ink-2);
}
.cat.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cat.best.on { background: linear-gradient(120deg, #e3720f, #e39a17); border-color: transparent; color: #fff; }
.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: max-content; gap: 14px; padding: 10px 16px 28px; overflow: auto; align-content: start; }
.card {
  --c: #c58a4a;
  background: var(--surface); border-radius: 22px; border: 1px solid var(--line);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  position: relative; transition: transform .1s;
}
.card:active { transform: scale(.985); }
.card .art {
  height: 136px; display: grid; place-items: center; border: 0; padding: 0; width: 100%;
  background:
    radial-gradient(120px 90px at 50% 70%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface));
}
.card .art svg, .card .art img { width: 118px; height: 118px; object-fit: cover; }
.card .art img { border-radius: 18px; width: 100%; height: 136px; }
.card .meta { padding: 8px 12px 4px; }
.card .meta b { font-size: 17px; font-weight: 800; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .meta small { color: var(--muted); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sizes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px 10px 10px; }
.card .sizes button {
  min-height: 52px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.card .sizes button b { font-size: 16px; font-weight: 800; }
.card .sizes button span { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.card .sizes button:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.card .sizes button:active span { color: #fff; }
.ribbon {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1;
  background: linear-gradient(120deg, #e3720f, #e39a17); color: #fff;
  font-size: 12px; font-weight: 800; padding: 4px 10px 4px 8px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 10px rgba(227,114,15,.35);
}
.ribbon .ico { width: 14px; height: 14px; }
.rank { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.card.out { opacity: .5; }

.cart { display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line); min-height: 0; }
.cart-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; gap: 8px; }
.cart-h h2 { font-size: 20px; font-weight: 800; }
.order-no { font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-soft); padding: 6px 10px; border-radius: 99px; }
.cart-lines { flex: 1; overflow: auto; padding: 0 12px; }
.cart-empty { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
.cart-empty svg { width: 120px; height: 120px; opacity: .85; }
.line {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 8px; border-radius: 16px; border: 1px solid transparent;
}
.line + .line { border-top-color: var(--line); border-radius: 0; }
.line .thumb { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #c58a4a) 18%, var(--surface)); overflow: hidden; }
.line .thumb svg { width: 46px; height: 46px; }
.line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.line .info { min-width: 0; text-align: start; background: none; border: 0; padding: 0; }
.line .info b { display: block; font-size: 16px; }
.line .info small { display: block; color: var(--muted); font-size: 13px; }
.line .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-top: 3px; }
.tag.free { background: var(--ok-soft); color: var(--ok); }
.tag.disc { background: var(--accent-soft); color: var(--warn); }
.line .end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.line .price { font-weight: 800; font-variant-numeric: tabular-nums; }
.line .price s { color: var(--muted); font-weight: 600; font-size: 13px; margin-inline-end: 4px; }
.qty { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--line); }
.qty button { width: 40px; height: 38px; border: 0; background: transparent; display: grid; place-items: center; }
.qty b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-f { padding: 12px 16px 16px; border-top: 1px dashed var(--line); background: var(--surface-2); }
.sum-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-2); padding: 2px 0; }
.sum-row.total { font-size: 26px; font-weight: 800; color: var(--ink); padding-top: 6px; }
.pay-btn { width: 100%; min-height: 72px; font-size: 23px; border-radius: 20px; margin-top: 10px; background: linear-gradient(120deg, var(--ok), #23a865); border: 0; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 24px color-mix(in srgb, var(--ok) 35%, transparent); }
.pay-btn:disabled { background: var(--line); color: var(--muted); box-shadow: none; }
.pay-btn:active { transform: scale(.98); }
.cart-actions { display: flex; gap: 8px; margin-top: 8px; }
.cart-actions .btn { flex: 1; }
/* phone-only pieces (shown in the max-width: 760px block) */
.cart-bar, .cart-backdrop, .login-brand-m { display: none; }
.show-m { display: none !important; }
.rail .more-tab { display: none; }
.flip-v { transform: rotate(180deg); }
.sheet-list { display: flex; flex-direction: column; gap: 4px; }
.sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 8px 10px; border: 0; background: transparent; border-radius: 16px; text-align: start; color: inherit; }
.sheet-row:active { background: var(--surface-2); }
.sheet-row b { display: block; font-size: 16px; }
.sheet-row small { color: var(--muted); font-size: 13px; }
.sheet-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }

.closed-day { display: grid; place-items: center; height: 100%; padding: 24px; }
.closed-day .panel { max-width: 460px; width: 100%; text-align: center; }

/* ---------- Modal ---------- */
.modal-wrap { position: fixed; inset: 0; background: rgba(20, 12, 6, .55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-lg); width: min(580px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .2s cubic-bezier(.2, .9, .3, 1.2); }
.modal-sm { width: min(420px, 100%); }
.modal-lg { width: min(880px, 100%); }
.modal-xl { width: min(1100px, 100%); }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line); }
[dir="rtl"] .modal-h { padding: 14px 22px 14px 16px; }
.modal-h h2 { font-size: 21px; font-weight: 800; }
.modal-b { padding: 18px 22px; overflow: auto; }
.modal-f { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; background: var(--surface-2); }
.modal-f .btn { min-width: 120px; }
.sec-title { font-weight: 800; font-size: 15px; color: var(--ink-2); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.sec-title:first-child { margin-top: 0; }

/* customize */
.cust-head { display: flex; gap: 16px; align-items: center; }
.cust-head .art { width: 110px; height: 110px; border-radius: 24px; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), color-mix(in srgb, var(--c) 12%, var(--surface)); overflow: hidden; }
.cust-head .art svg { width: 100px; height: 100px; }
.cust-head .art img { width: 100%; height: 100%; object-fit: cover; }
.cust-head h3 { font-size: 24px; font-weight: 800; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; }
.addon.on { border-color: var(--accent); background: var(--accent-soft); }
.addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 16px; padding: 4px; }
.stepper button { width: 54px; height: 50px; border-radius: 12px; border: 0; background: var(--surface); font-size: 24px; font-weight: 800; display: grid; place-items: center; }
.stepper b { min-width: 46px; text-align: center; font-size: 24px; }

/* payment */
.pay-total { text-align: center; padding: 6px 0 14px; }
.pay-total small { display: block; color: var(--muted); font-weight: 700; }
.pay-total b { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.method { min-height: 84px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 15px; }
.method .ico { width: 30px; height: 30px; }
.method.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.method:disabled { opacity: .4; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick button { min-height: 54px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.quick button.exact { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { min-height: 58px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font-size: 24px; font-weight: 800; }
.keypad button:active { background: var(--brand-soft); }
.change-box { border-radius: 20px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 2px dashed var(--line); }
.change-box b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.change-box.good { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.change-box.bad { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qr-box { display: grid; place-items: center; padding: 16px; background: #fff; border-radius: 18px; min-height: 220px; }
.done-hero { text-align: center; padding: 10px 0; }
.done-hero .check { width: 84px; height: 84px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; animation: pop .35s cubic-bezier(.2, .9, .3, 1.4); }
.done-hero .check .ico { width: 46px; height: 46px; stroke-width: 3; }
.done-hero .no { font-size: 64px; font-weight: 800; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }

/* PIN */
.pin-wrap { text-align: center; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 14px 0 20px; min-height: 18px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--brand); transition: background .1s; }
.pin-dots i.f { background: var(--brand); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 330px; margin: 0 auto; }
.pinpad button { height: 74px; border-radius: 22px; font-size: 30px; font-weight: 800; border: 1.5px solid var(--line); background: var(--surface); box-shadow: 0 2px 0 var(--line); }
.pinpad button:active { background: var(--brand-soft); transform: translateY(2px); box-shadow: none; }
.pinpad button.ok { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 2px 0 var(--brand-2); }
.pinpad button.del .ico { width: 30px; height: 30px; }
.pin-err { color: var(--danger); font-weight: 700; min-height: 24px; margin-top: 10px; }
.shake { animation: shake .4s; }

/* Login */
.login { display: grid; grid-template-columns: 1.1fr 1fr; height: 100dvh; }
.login-art {
  position: relative; overflow: hidden; color: #fff; padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(600px 400px at 20% 110%, rgba(227, 154, 23, .45), transparent 60%),
    radial-gradient(500px 400px at 100% 0%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(150deg, #0a4649, #0d5c5f 55%, #137a7c);
}
.login-art::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 4l7 19 19 7-19 7-7 19-7-19-19-7 19-7z' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.login-art h1 { font-size: 46px; font-weight: 800; position: relative; }
.login-art p { font-size: 18px; opacity: .85; position: relative; max-width: 420px; }
.login-cups { position: relative; display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.login-cups svg { width: 120px; height: 120px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
.login-cups svg:nth-child(2) { width: 150px; height: 150px; }
.login-pane { display: grid; place-items: center; padding: 24px; background: var(--bg); position: relative; }
.login-card { width: min(420px, 100%); }
.login-card h2 { font-size: 26px; font-weight: 800; text-align: center; }
.login-card .clock { text-align: center; color: var(--muted); font-weight: 700; margin-top: 4px; }
.login-top { position: absolute; top: 16px; inset-inline-end: 16px; display: flex; gap: 8px; }

/* Orders board */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.board-col { background: var(--surface-2); border-radius: 22px; padding: 12px; min-height: 300px; border: 1px solid var(--line); }
.board-col > h3 { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; font-size: 19px; }
.ticket { background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); border-inline-start: 6px solid var(--accent); margin-bottom: 10px; }
.ticket.ready { border-inline-start-color: var(--ok); }
.ticket .t-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket .t-no { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ticket ul { margin: 8px 0 12px; padding: 0; list-style: none; }
.ticket li { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.ticket li:last-child { border-bottom: 0; }
.ticket li b { font-size: 17px; }
.ticket li .opts { color: var(--muted); font-size: 14px; }
.age { font-weight: 800; font-size: 14px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); }
.age.late { background: var(--danger-soft); color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: start; font-size: 13px; color: var(--muted); font-weight: 800; padding: 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n, .tbl th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tfoot td { font-weight: 800; border-top: 2px solid var(--line); }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.status.preparing { background: var(--accent-soft); color: var(--warn); }
.status.ready { background: var(--ok-soft); color: var(--ok); }
.status.done { background: var(--surface-2); color: var(--ink-2); }
.status.cancelled { background: var(--danger-soft); color: var(--danger); }
.bar-cell { position: relative; }
.bar-cell i { position: absolute; inset-block: 6px; inset-inline-start: 0; background: var(--brand-soft); border-radius: 6px; z-index: 0; }
.bar-cell span { position: relative; z-index: 1; }

/* KPIs & charts */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi small { color: var(--muted); font-weight: 700; font-size: 13px; display: block; }
.kpi b { font-size: 27px; font-weight: 800; display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 13px; color: var(--ink-2); }
.kpi.hl { background: linear-gradient(140deg, var(--brand), #13807d); color: #fff; border: 0; }
.kpi.hl small, .kpi.hl .sub { color: rgba(255,255,255,.8); }
.chart svg { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--brand); }
.chart .bar.alt { fill: var(--accent); }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.split-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.split-bar i { display: block; height: 100%; }

/* Stock */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.stock-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.stock-card.low { border-color: var(--danger); background: linear-gradient(180deg, var(--danger-soft), var(--surface) 60%); }
.stock-card .qtyv { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.meter { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.meter i.mid { background: var(--accent); }
.meter i.low { background: var(--danger); }

/* Menu editor */
.mitem { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 8px; }
.mitem .thumb { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #c58a4a) 18%, var(--surface)); overflow: hidden; }
.mitem .thumb svg { width: 58px; height: 58px; }
.mitem .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mitem.inactive { opacity: .55; }
.prices { display: flex; gap: 6px; flex-wrap: wrap; }
.prices span { background: var(--surface-2); border-radius: 9px; padding: 3px 9px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.art-preview { width: 150px; height: 150px; border-radius: 26px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--surface)); overflow: hidden; flex: none; }
.art-preview svg { width: 136px; height: 136px; }
.art-preview img { width: 100%; height: 100%; object-fit: cover; }
.size-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }

/* Denominations */
.denoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.denom { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--surface-2); }
[dir="rtl"] .denom { padding: 6px 12px 6px 6px; }
.denom .input { min-height: 46px; text-align: center; font-weight: 800; }
.diff { font-size: 26px; font-weight: 800; }
.diff.pos { color: var(--ok); } .diff.neg { color: var(--danger); } .diff.zero { color: var(--ink); }

/* Launch / tests */
.check-item { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-box { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line); display: grid; place-items: center; flex: none; background: var(--surface); }
.check-box.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.health { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 99px; }
.health.good { background: var(--ok-soft); color: var(--ok); }
.health.bad { background: var(--danger-soft); color: var(--danger); }
.health.na { background: var(--surface-2); color: var(--muted); }
.drill-pill { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--ink); color: var(--surface); border-radius: 99px; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); font-weight: 800; }
.drill-pill .t { font-size: 22px; font-variant-numeric: tabular-nums; }
.pass { color: var(--ok); font-weight: 800; } .fail { color: var(--danger); font-weight: 800; }

/* Toast */
#toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 32px)); }
.toast { background: var(--ink); color: var(--surface); padding: 14px 20px; border-radius: 16px; font-weight: 700; box-shadow: var(--shadow-lg); animation: up .2s ease; display: flex; align-items: center; gap: 10px; }
.toast.ok { background: var(--ok); color: #fff; }
.toast.err { background: var(--danger); color: #fff; }
.toast.warn { background: #ffcf5c; color: #3b2600; }

/* Customer display */
.display { min-height: 100dvh; background: linear-gradient(150deg, #0a4649, #0d5c5f 60%, #137a7c); color: #fff; display: flex; flex-direction: column; }
.display header { display: flex; align-items: center; justify-content: space-between; padding: 24px 36px; }
.display header h1 { font-size: 36px; font-weight: 800; }
.display .cols { flex: 1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; padding: 0 36px 36px; }
.display .col-d { background: rgba(255,255,255,.08); border-radius: 30px; padding: 24px; }
.display .col-d.ready { background: rgba(255,255,255,.96); color: #0d5c5f; }
.display .col-d h2 { font-size: 30px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.display .nums { display: flex; flex-wrap: wrap; gap: 14px; }
.display .nums span { font-size: 54px; font-weight: 800; min-width: 120px; text-align: center; padding: 10px 18px; border-radius: 22px; background: rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.display .ready .nums span { background: #e9f7f0; color: #1b8a52; font-size: 76px; animation: glow 2s infinite; }

/* Animations */
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }
@keyframes up { from { opacity: 0; transform: translateY(10px); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes pulse { 50% { opacity: .75; } }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(27, 138, 82, .12); } }
@keyframes steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-8px); opacity: 0; } }
.steam path { animation: steam 2.6s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .8s; }
.steam path:nth-child(3) { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sell { grid-template-columns: 1fr 340px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .pay-grid, .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .display .cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .login-pane { place-items: start center; padding: calc(12px + var(--sat)) 16px calc(16px + var(--sab)); }
  .login-brand-m { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 64px 0 18px; }
  .login-brand-m .logo { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(140deg, #0a4649, #13807d); box-shadow: 0 10px 24px rgba(13, 92, 95, .35); }
  .login-brand-m b { font-size: 24px; font-weight: 800; }
}

/* ---------- Phone: native-app layout ---------- */
@media (max-width: 760px) {
  :root { --header: 56px; }
  .hide-m { display: none !important; }
  .show-m { display: inline-flex !important; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--header) + var(--sat)) minmax(0, 1fr) calc(var(--nav-h) + var(--sab)); }

  /* top bar: logo + screen title + only actionable warnings */
  .topbar { padding-inline: 12px; gap: 8px; overflow: hidden; }
  .brand .logo { width: 38px; height: 38px; border-radius: 12px; }
  .m-title { font-size: 20px; font-weight: 800; white-space: nowrap; }
  .top-mid { justify-content: flex-end; }
  .top-mid .pill .lbl { display: none; }
  .pill { height: 34px; padding: 0 10px; }
  .top-right { gap: 4px; }

  /* bottom tab bar (Material / iOS style) */
  .rail { grid-row: 3; flex-direction: row; justify-content: space-around; gap: 0; border-inline-end: 0; border-top: 1px solid var(--line); padding: 4px 4px var(--sab); overflow: hidden; position: relative; z-index: 25; }
  .rail a { flex: 1 1 0; min-width: 0; padding: 5px 2px 3px; gap: 3px; font-size: 11.5px; border-radius: 0; }
  .rail a.on { background: transparent; color: var(--brand); }
  .rail a .ico { width: 58px; height: 30px; padding: 3px 17px; border-radius: 99px; transition: background .2s; }
  .rail a.on .ico { background: var(--brand-soft); }
  .rail a .badge { top: 0; inset-inline-end: calc(50% - 30px); }
  .rail .more-item { display: none; }
  .rail .more-tab { display: flex; }

  /* pages */
  .page { padding: 14px 14px 28px; }
  .page-h { margin-bottom: 14px; }
  .page-h h1 { font-size: 22px; }
  .page-h:has(> h1.hide-m:only-child) { display: none; }
  .chart text { font-size: 22px; }
  .page-h > .row { width: 100%; }
  .page-h .row > .btn { flex: 1 1 auto; }
  .tabs { width: 100%; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .panel { padding: 14px; border-radius: 18px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; border-radius: 16px; }
  .kpi b { font-size: 21px; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 9px 8px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .denoms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .denom { grid-template-columns: 1fr 64px; }
  .stock-grid { grid-template-columns: minmax(0, 1fr); }
  .mitem { grid-template-columns: 52px minmax(0, 1fr); }
  .mitem > .row { grid-column: 1 / -1; justify-content: flex-end; }
  .board-col { padding: 10px; }
  .closed-day { padding: 16px; }

  /* sell: 2-column grid + floating order bar */
  .sell { grid-template-columns: minmax(0, 1fr); position: relative; }
  .cats { padding: 10px 14px 4px; }
  .cat { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px 14px 104px; }
  .card { border-radius: 20px; }
  .card .art { height: 108px; }
  .card .art svg { width: 94px; height: 94px; }
  .card .meta { padding: 6px 10px 2px; }
  .card .meta b { font-size: 15.5px; }
  .card .sizes { gap: 4px; padding: 6px 8px 8px; }
  .card .sizes button { min-height: 48px; border-radius: 12px; }
  .ribbon { top: 8px; inset-inline-start: 8px; font-size: 11px; }
  .cart { position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + var(--sab)); z-index: 30; max-height: calc(100dvh - var(--nav-h) - var(--sab) - var(--header) - var(--sat) - 12px); background: transparent; border: 0; box-shadow: none; transform: translateY(calc(100% - 80px)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .cart > * { pointer-events: auto; }
  .cart.is-empty { transform: translateY(120%); }
  .cart.open { transform: none; background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: 0 -14px 40px rgba(0, 0, 0, .25); }
  .cart:not(.open) .cart-h, .cart:not(.open) .cart-lines, .cart:not(.open) .cart-f { visibility: hidden; }
  .cart-backdrop { position: fixed; inset: 0; z-index: 28; background: rgba(20, 12, 6, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .sell.cart-open .cart-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .cart-bar { display: flex; gap: 8px; flex: none; margin: 8px 10px 10px; padding: 6px; min-height: 62px; border-radius: 20px; background: var(--ink); color: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
  .cart.open .cart-bar { background: var(--surface-2); color: var(--ink); box-shadow: none; margin: 12px 12px 2px; }
  .cart.open .cb-pay { display: none; }
  .cb-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px; border: 0; background: transparent; color: inherit; text-align: start; }
  .cb-open > .ico { margin-inline-start: auto; }
  .cb-count { min-width: 36px; height: 36px; padding: 0 6px; border-radius: 12px; background: var(--accent); color: #2b1d13; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
  .cb-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .cb-text b { font-size: 15px; }
  .cb-text small { font-size: 13px; opacity: .8; }
  .cb-pay { display: flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 15px; background: var(--ok); color: #fff; font-weight: 800; font-size: 17px; white-space: nowrap; }
  .cb-pay:active, .cb-open:active { transform: scale(.97); }
  .cart-h { padding: 10px 16px 6px; }
  .pay-btn { min-height: 62px; font-size: 21px; }

  /* modals become bottom sheets with a grab handle */
  .modal-wrap { padding: 0; align-items: end; }
  .modal { position: relative; width: 100%; max-height: calc(100dvh - var(--sat) - 10px); border-radius: 26px 26px 0 0; animation: sheet .3s cubic-bezier(.2, .8, .2, 1); }
  .modal::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; border-radius: 99px; background: var(--line); transform: translateX(-50%); }
  .modal-h, [dir="rtl"] .modal-h { padding: 18px 10px 10px 18px; }
  [dir="rtl"] .modal-h { padding: 18px 18px 10px 10px; }
  .modal-h h2 { font-size: 19px; }
  .modal-b { padding: 14px 16px; }
  .modal-f { padding: 10px 12px calc(10px + var(--sab)); gap: 8px; }
  .modal-f .btn { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 15px; }
  .modal-f .btn:last-child { flex-grow: 3; }
  .modal-f .btn.lg, .modal-f .btn.xl { min-height: 56px; font-size: 18px; }
  .cust-head .art { width: 84px; height: 84px; border-radius: 20px; }
  .cust-head .art svg { width: 76px; height: 76px; }
  .cust-head h3 { font-size: 21px; }
  .choice { min-height: 52px; font-size: 15px; }
  .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addon { min-height: 52px; padding: 0 10px; font-size: 14px; }

  /* payment: everything visible with little scrolling */
  .pay-total { padding: 0 0 8px; }
  .pay-total b { font-size: 34px; }
  .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .method { min-height: 52px; flex-direction: row; gap: 8px; font-size: 14px; border-radius: 14px; }
  .method .ico { width: 22px; height: 22px; }
  .pay-grid { gap: 10px; }
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .quick button { min-height: 46px; font-size: 16px; }
  .keypad { gap: 6px; }
  .keypad button { min-height: 50px; font-size: 22px; }
  .change-box { padding: 10px 14px; border-radius: 16px; }
  .change-box b { font-size: 26px; }
  .done-hero .no { font-size: 56px; }

  .pinpad { gap: 10px; }
  .pinpad button { height: 66px; }
  #toast-root { bottom: calc(var(--nav-h) + var(--sab) + 92px); }
  .drill-pill { top: calc(var(--header) + var(--sat) + 8px); }
  .display .nums span { font-size: 40px; min-width: 90px; }
}
@keyframes sheet { from { transform: translateY(35%); opacity: .5; } }

/* ---------- Print (receipt) ---------- */
@media print {
  body * { visibility: hidden; }
}