/* Styled to match the Square POS "New POS" screen the baristas already use. */
:root {
  --bg: #000;
  --panel: #1c1c1e;
  --btn: #2c2c2e;
  --btn-2: #3a3a3c;
  --line: #2c2c2e;
  --text: #fff;
  --muted: #a1a1a6;
  --empty: #111316;
  --hot: #b31f24;
  --iced: #5aabe2;
  --blended: #0877bd;
  --littles: #c55f2d;
  --food: #7a4b2a;
  --seasonal: #a4562a;
  --merch: #4a4a4c;
  --gift: #4b2d24;
  --gray: #636366;
  --red: #ff453a;
  --amber: #ffb340;
  --green: #32d74b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}
/* No text-highlight on taps, but only on buttons/tiles so typing still works on iPad. */
button, .tile, .opt, .chip, .item-row, .line, .right-head, .tabs { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { -webkit-user-select: auto; user-select: auto; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 20px 8px; }
.tabs { display: flex; gap: 28px; font-size: 20px; font-weight: 600; }
.tab.active { text-decoration: underline; text-underline-offset: 5px; }
.top-right { display: flex; align-items: center; gap: 16px; }
.logo { height: 62px; max-width: 240px; margin: -6px 0; object-fit: contain; }
.shop-btn { font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--btn); }
.channels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 0 12px 6px; }
.channels button { min-height: 52px; border-radius: 6px; background: var(--btn); font-size: 16px; font-weight: 600; border: 2px solid transparent; padding: 0 6px; }
.channels button.on { border-color: #fff; background: #3a3a3c; }
.shop-pick h2 { margin: 18px 0 6px; font-size: 26px; }
.shop-pick p { color: var(--muted); margin: 0 0 18px; }
.shop-pick .opts { grid-template-columns: 1fr; }
.status { font-size: 13px; color: var(--muted); display: flex; gap: 12px; }
.status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--red); }
.status .dot.on { background: var(--green); }
.status .dot.warn { background: var(--amber); }
.banner { background: #3a2a10; color: #ffd8a0; padding: 8px 20px; font-size: 14px; }

.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 0; }
.left { padding: 8px 12px 12px 16px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* Voice panel (top left, easy to reach with the left hand) */
.voice { background: var(--panel); border-radius: 12px; padding: 14px 16px; display: flex; gap: 18px; align-items: center; flex: none; }
.mic {
  width: 104px; height: 104px; flex: none; border-radius: 50%; background: #0a84ff;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(10,132,255,.25); transition: transform .12s;
}
.mic svg { width: 46px; height: 46px; fill: #fff; }
.mic:active { transform: scale(.96); }
.mic.recording { background: var(--red); animation: pulse 1.2s infinite; }
.mic.busy { background: #8a6d1f; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,.5); } 70% { box-shadow: 0 0 0 16px rgba(255,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } }
.voice-text { flex: 1; min-width: 0; }
.mic-label { font-size: 22px; font-weight: 700; }
.transcript { font-size: 17px; color: var(--muted); margin-top: 4px; min-height: 1.3em; }
.transcript.heard { color: #fff; }
.timing { font-size: 12px; color: #6e6e73; margin-top: 2px; min-height: 1em; }
.type-form { display: flex; gap: 8px; margin-top: 8px; }
.type-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--btn-2); background: #000; color: #fff; font: inherit; }
.type-form button { padding: 0 18px; border-radius: 8px; background: var(--btn); font-weight: 600; }

/* Home tile grid (matches the Square "New POS" page) */
.home-grid { flex: 1; display: grid; gap: 14px; min-height: 0; }
.tile {
  width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; overflow: hidden; text-align: center;
  border-bottom: 2px solid #3a3a3c; border-radius: 0;
}
.tile.empty { background: var(--empty); border-bottom-color: transparent; }
.tile .face {
  flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: center; padding: 2px 4px;
  font-weight: 900; font-size: 32px; line-height: .98; letter-spacing: -.01em; white-space: pre-line; min-height: 0;
  font-family: 'Arial Black', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.tile .name { flex: none; width: 100%; background: var(--panel); padding: 6px 4px; font-size: min(1.25vw, 2vh); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:active .face { filter: brightness(1.2); }

/* Order panel */
.right { background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.right-head { text-align: center; font-size: 18px; font-weight: 600; padding: 10px 0 12px; }
.clarify { margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px; background: #3a2a10; color: #ffd8a0; font-size: 14px; }
.lines { list-style: none; margin: 8px 0 0; padding: 0 12px; flex: 1; overflow-y: auto; }
.lines .empty { color: #6e6e73; text-align: center; padding: 24px 0; }
.line { padding: 10px 6px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border-radius: 6px; }
.line:active { background: var(--panel); }
.line.fresh { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #1e3a55; } to { background: transparent; } }
.line .name { font-weight: 600; }
.line .price { text-align: right; }
.line .mods { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.line .note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-style: italic; }
.line .warn { grid-column: 1 / -1; font-size: 14px; color: var(--amber); }
.line.needs-look { box-shadow: inset 3px 0 0 var(--amber); background: #2a2210; }
.clarify { cursor: pointer; }
.problems { padding: 8px 6px; color: var(--red); font-size: 13px; }
.right-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.big-btn { height: 60px; border-radius: 4px; background: var(--btn); font-size: 19px; font-weight: 600; }
.big-btn:disabled { color: #6e6e73; }
#submit:not(:disabled) { background: #0a84ff; }

/* Modal (category list + item screen) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal[hidden] { display: none; }
.modal-card { background: var(--panel); width: min(830px, 94vw); height: min(92vh, 1000px); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; }
.x { width: 44px; height: 44px; border-radius: 50%; background: var(--btn-2); display: grid; place-items: center; flex: none; }
.x svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.4; }

.list-head { padding: 22px 26px 0; }
.list-head h2 { margin: 14px 0 18px; font-size: 26px; }
.search { width: 100%; padding: 12px 16px 12px 42px; border-radius: 999px; border: 1px solid #48484a; background: transparent; color: #fff; font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 20px; background-position: 14px center; }
.count { font-size: 15px; font-weight: 600; margin: 22px 0 10px; }
.item-list { overflow-y: auto; padding: 0 26px 20px; flex: 1; }
.item-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); text-align: left; font-size: 18px; }
.item-row:active { background: var(--btn); }
.badge { width: 48px; height: 48px; border-radius: 6px; display: grid; place-items: center; font-size: 17px; font-weight: 500; flex: none; }
.item-row .nm { flex: 1; }
.item-row .pr { color: #fff; }

.item-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 22px 26px 12px; }
.item-title { text-align: center; }
.item-title b { display: block; font-size: 20px; }
.item-title span { color: var(--muted); font-size: 15px; }
.head-right { display: flex; gap: 12px; align-items: center; }
.stepper { display: flex; align-items: center; gap: 18px; border: 1px solid #48484a; border-radius: 999px; padding: 4px 6px; height: 48px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; background: #d1d1d6; color: #000; font-size: 20px; line-height: 1; font-weight: 600; }
.stepper button:disabled { background: #48484a; color: #1c1c1e; }
.done { background: #fff; color: #000; font-weight: 600; font-size: 17px; padding: 0 22px; height: 48px; border-radius: 999px; }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 26px 10px; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 12px 18px; border-radius: 999px; border: 1px solid #48484a; color: #d1d1d6; font-size: 15px; white-space: nowrap; }
.chip.on { border: 2px solid #fff; color: #fff; padding: 11px 17px; }
.item-body { overflow-y: auto; padding: 4px 26px 30px; flex: 1; }
.sec h4 { margin: 26px 0 12px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.sec h4 small { font-size: 12px; font-weight: 500; color: #d1d1d6; background: var(--btn-2); padding: 4px 8px; border-radius: 999px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { min-height: 88px; padding: 0 16px; border-radius: 6px; background: var(--btn); display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; font-size: 18px; border: 2px solid transparent; }
.opt:active { background: var(--btn-2); }
.opt.on { border-color: #fff; }
.opt.auto { opacity: .55; cursor: default; }
.opt .p { font-size: 16px; color: #e5e5ea; white-space: nowrap; }
.note-box { width: 100%; min-height: 110px; background: #000; border: 1px solid #48484a; border-radius: 8px; color: #fff; padding: 14px 16px; font: inherit; font-size: 17px; resize: vertical; }
.remove-line { margin-top: 26px; color: var(--red); font-weight: 600; font-size: 17px; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #3a3a3c; color: #fff; padding: 12px 20px; border-radius: 12px; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 90vw; }

@media (max-height: 860px) and (min-width: 821px) {
  .voice { padding: 10px 14px; }
  .mic { width: 88px; height: 88px; }
  .mic svg { width: 40px; height: 40px; }
  .home-grid { gap: 10px; }
}

/* Landscape phone (wide but very short): let the page scroll instead of squashing the tile grid */
@media (max-height: 520px) and (min-width: 821px) {
  .topbar { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .logo { height: 40px; }
  .layout { min-height: 0; }
  .left { overflow-y: auto; gap: 8px; }
  .voice { padding: 8px 12px; gap: 12px; }
  .mic { width: 64px; height: 64px; }
  .mic svg { width: 30px; height: 30px; }
  .mic-label { font-size: 18px; }
  .home-grid { flex: none; grid-template-rows: none !important; grid-auto-rows: 84px; gap: 8px; }
  .tile .face { font-size: 22px; }
  .tile .name { font-size: 12px; }
  .right { overflow-y: auto; }
  .lines { flex: none; min-height: 100px; overflow: visible; }
}

@media (max-width: 820px) {
  .layout { display: flex; flex-direction: column; overflow-y: auto; }
  .left, .right { flex: none; }
  .home-grid { grid-template-rows: none !important; grid-auto-rows: 110px; }
  .tile .face { font-size: 24px; }
  .tile .name { font-size: 12px; }
  .mic { width: 80px; height: 80px; }
  .right { border-left: 0; border-top: 1px solid var(--line); min-height: 480px; }
  .opts { grid-template-columns: 1fr; }
  .item-head { grid-template-columns: auto 1fr; }
  .head-right { grid-column: 1 / -1; justify-content: space-between; }
}

/* Customer / loyalty */
.cust-row { margin: 4px 12px 0; min-height: 64px; border-radius: 6px; background: var(--panel); display: flex; align-items: center; gap: 12px; padding: 8px 14px; text-align: left; }
.cust-icon { width: 40px; height: 40px; border-radius: 50%; background: #000; display: grid; place-items: center; flex: none; }
.cust-icon svg { width: 22px; height: 22px; }
.cust-text { flex: 1; font-size: 17px; font-weight: 600; line-height: 1.25; }
.cust-text small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.cust-text small.ready { color: var(--green); }
.chev { font-size: 26px; color: var(--muted); }
.form-pad { padding: 22px 26px; overflow-y: auto; }
.form-pad h2 { margin: 16px 0 6px; font-size: 26px; }
.form-pad p { color: var(--muted); margin: 0 0 16px; }
.big-input { width: 100%; font-size: 28px; letter-spacing: .04em; padding: 14px 16px; border-radius: 10px; border: 1px solid #48484a; background: #000; color: #fff; }
.row-btns { display: flex; gap: 10px; margin-top: 14px; }
.row-btns button { flex: 1; height: 56px; border-radius: 8px; background: var(--btn); font-size: 17px; font-weight: 600; }
.row-btns .primary { background: #0a84ff; }
.loy-card { margin-top: 18px; padding: 16px; border-radius: 10px; background: var(--btn); }
.loy-card .nm { font-size: 22px; font-weight: 700; }
.loy-card .pts { font-size: 17px; color: #d1d1d6; margin-top: 4px; }
.loy-card .reward { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #123a1c; color: #b8f5c4; font-weight: 600; }
.loy-card .nexttier { margin-top: 10px; color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); margin-top: 12px; }

/* Passcode number pad */
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 10px 0 22px; min-height: 22px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.pin-dots.bad i { background: var(--red); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }
.pinpad button { height: 78px; border-radius: 12px; background: var(--btn); font-size: 30px; font-weight: 600; }
.pinpad button:active { background: var(--btn-2); }
.pinpad .go { background: #0a84ff; font-size: 20px; }
.pin-msg { text-align: center; color: var(--red); min-height: 1.3em; margin-top: 12px; }

/* Totals, discounts, gift cards */
.totals { padding: 8px 18px 0; border-top: 1px solid var(--line); }
.trow { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 16px; }
.trow span:first-child { flex: 1; }
.trow.minus { color: #9fe0ad; }
.trow.due { font-size: 20px; font-weight: 700; padding-top: 8px; }
.trow .rm { width: 30px; height: 30px; border-radius: 50%; background: var(--btn); color: var(--muted); font-size: 16px; line-height: 1; }
.disc-row .val { color: var(--muted); }
.disc-row .check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #48484a; display: grid; place-items: center; font-size: 16px; flex: none; }
.disc-row.on .check { background: #0a84ff; border-color: #0a84ff; }
.amount-show { text-align: center; font-size: 56px; font-weight: 700; margin: 6px 0 4px; }
.amount-note { text-align: center; color: var(--muted); min-height: 1.3em; margin-bottom: 14px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; margin: 0 auto 12px; }
.quick button { height: 56px; border-radius: 10px; background: #1e3a55; font-size: 19px; font-weight: 600; }

/* Category screen: best sellers + A-Z grid */
.modal-card.wide { width: min(1120px, 96vw); height: 94vh; }
.cat-head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px; padding: 18px 22px 8px; }
.cat-head h2 { margin: 0; font-size: 26px; white-space: nowrap; }
.cat-head .search { max-width: 360px; justify-self: end; }
.cat-body { overflow-y: auto; padding: 4px 22px 24px; flex: 1; }
.cat-sec { margin: 14px 0 10px; font-size: 16px; font-weight: 600; color: #d1d1d6; }
.cat-sec small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.pop-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.all-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.itile { position: relative; min-height: 104px; border-radius: 6px; padding: 10px 10px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2px; filter: saturate(.92); }
.itile:active { filter: brightness(1.2); }
.itile.big { min-height: 170px; }
.itile .pre { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.itile .main { font-weight: 800; font-size: 17px; line-height: 1.1; }
.itile.big .main { font-size: 24px; }
.itile .hint { font-size: 11px; opacity: .85; margin-top: 4px; }
.itile.big .hint { font-size: 13px; }
.itile.folder { box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.cat-head:has(.back) { grid-template-columns: auto auto auto 1fr; }
.cat-head .x.back { font-size: 34px; line-height: 1; color: #fff; margin-right: 4px; }
.itile .rank { position: absolute; top: 8px; left: 10px; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.28); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 1000px) { .all-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pop-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Grouped item screen */
.sec h4 small { margin-left: 4px; }
.subhead { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--btn); border-radius: 10px; padding: 4px; margin-bottom: 12px; }
.seg button { height: 52px; border-radius: 8px; font-size: 16px; font-weight: 600; color: #d1d1d6; }
.seg button.on { background: #fff; color: #000; }
.flv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flv { display: flex; min-height: 72px; border-radius: 6px; overflow: hidden; background: var(--btn); border: 2px solid transparent; }
.flv-main { flex: 1; text-align: left; padding: 0 16px; font-size: 18px; }
.flv-sf { width: 34%; max-width: 110px; flex: none; background: #3a3a3c; border-left: 1px solid #1c1c1e; font-size: 16px; font-weight: 700; color: #c7c7cc; letter-spacing: .04em; }
.flv.reg-on { border-color: #fff; }
.flv.reg-on .flv-main { background: #3a3a3c; }
.flv.sf-on { border-color: #64d2ff; }
.flv.sf-on .flv-sf { background: #64d2ff; color: #000; }
.flv.sf-only.sf-on .flv-main { background: #0f3b4d; }
.flv.sf-only .flv-main::after { content: ' · SF'; color: #64d2ff; font-weight: 700; }

/* ---- Compact, wider item screen ---- */
.modal-card.editor { width: min(1240px, 97vw); height: 95vh; }
.modal-card.editor .item-head { padding: 14px 20px 8px; }
.modal-card.editor .chips { padding: 2px 20px 8px; }
.modal-card.editor .chip { padding: 9px 15px; font-size: 14px; }
.modal-card.editor .chip.on { padding: 8px 14px; }
.modal-card.editor .item-body { padding: 0 20px 24px; }
.modal-card.editor .sec h4 { margin: 16px 0 8px; font-size: 16px; }
.modal-card.editor .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modal-card.editor .opt { min-height: 58px; padding: 0 12px; font-size: 16px; }
.modal-card.editor .opt .p { font-size: 14px; }
.modal-card.editor .flv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modal-card.editor .flv { min-height: 56px; }
.modal-card.editor .flv-main { font-size: 16px; padding: 0 12px; }
.modal-card.editor .flv-sf { width: 30%; font-size: 14px; }
.modal-card.editor .subhead { margin: 10px 0 6px; font-size: 12px; }
.modal-card.editor .seg { max-width: 560px; }
.modal-card.editor .seg button { height: 46px; font-size: 15px; }
.modal-card.editor .note-box { min-height: 70px; }
@media (max-width: 1000px) { .modal-card.editor .opts, .modal-card.editor .flv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Hot / Iced / Blended switch */
.style-sw { display: inline-flex; gap: 4px; background: var(--btn); border-radius: 999px; padding: 3px; margin-top: 6px; }
.style-sw button { padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #d1d1d6; }
.style-sw button.on { background: #fff; color: #000; }
.item-title span { display: block; }

/* Duplicate / remove */
.line-actions { display: flex; gap: 24px; margin-top: 18px; }
.dup-line { color: #64d2ff; font-weight: 600; font-size: 17px; }
.line-actions .remove-line { margin-top: 0; }

/* Car / name tag */
.cust-row + .cust-row, .usual-row + .cust-row { margin-top: 8px; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.swatches button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; background: var(--btn); border: 3px solid transparent; font-size: 13px; color: var(--muted); }
.swatches button i { display: block; width: 100%; height: 50px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.swatches button.on { border-color: #fff; color: #fff; }
.vehicles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.vehicles button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--btn); border: 3px solid transparent; font-size: 13px; color: var(--muted); }
.vehicles button svg { width: 100%; height: 50px; fill: #fff; color: #fff; }
.vehicles button.on { border-color: #fff; background: #3a3a3c; color: #fff; }
@media (max-width: 700px) { .swatches, .vehicles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chiprow button { padding: 10px 16px; border-radius: 999px; background: var(--btn); font-size: 16px; }
.chiprow button.on { background: #fff; color: #000; }

/* The usual */
.usual-row { margin: 6px 12px 0; }
.usual-row .subhead { margin: 4px 0 6px; }
.usual-btn { width: 100%; display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; background: #123a1c; color: #d6f5dc; font-size: 14px; font-weight: 600; }
.usual-btn .p { color: #9fe0ad; white-space: nowrap; }
.loy-card + #loyUsual .usual-btn, #loyUsual .usual-btn { font-size: 16px; padding: 12px 14px; }

/* Toast with Undo */
.toast { display: flex; align-items: center; gap: 14px; pointer-events: none; }
.toast[hidden] { display: none; } /* without this, display:flex above keeps a hidden toast on screen */
.toast .toast-btn { pointer-events: auto; } /* taps go through the message to the buttons under it, except its own button */
/* No double-tap zoom: tapping the same number twice fast (like 33) must not zoom the screen. */
html, body, button, input, select, textarea { touch-action: manipulation; }
.toast-btn { background: #fff; color: #000; font-weight: 700; padding: 6px 14px; border-radius: 999px; }

/* Shots counter, grouped rows, cold foam flavors */
.shot-step { display: flex; align-items: center; gap: 14px; background: var(--btn); border-radius: 8px; padding: 8px 14px; margin-bottom: 10px; max-width: 560px; }
.shot-step .lbl { font-size: 16px; font-weight: 600; flex: 1; }
.shot-step button { width: 52px; height: 44px; border-radius: 8px; background: #48484a; font-size: 26px; font-weight: 600; line-height: 1; }
.shot-step button:disabled { opacity: .35; }
.shot-step .val { min-width: 48px; text-align: center; font-size: 22px; font-weight: 700; color: var(--muted); }
.shot-step .val.on { color: #fff; }
.shot-step .cost { min-width: 90px; text-align: right; color: var(--muted); font-size: 14px; }
.modal-card.editor .sec .subhead { margin: 12px 0 6px; }
.chiprow.foam { gap: 6px; }
.chiprow.foam button { padding: 8px 12px; font-size: 14px; }

/* Customer number pad */
.modal-card .cust-pad { height: 100%; }
.cust-cols { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
.phone-show { font-size: 34px; font-weight: 700; letter-spacing: .02em; text-align: center; background: #000; border: 1px solid #48484a; border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.cust-left .pinpad button { height: 68px; }
.cust-right .loy-card { margin-top: 0; }
@media (max-width: 900px) { .cust-cols { grid-template-columns: 1fr; } }

/* Online orders on/paused switch */
.online-btn { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #123a1c; color: #9fe0ad; }
.online-btn.paused { background: #4a1c16; color: #ffb4a8; }

.chiprow.foam-pick { grid-column: 1 / -1; align-items: center; padding: 6px 0 10px; }
.foam-pick .foam-lbl { width: 100%; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.big-btn.charge { background: #0a84ff; color: #fff; }
.big-btn.charge:disabled { background: var(--btn); color: var(--muted); }

/* Phones: two flavors per row and a fixed-size, always-visible SF button */
@media (max-width: 820px) {
  .modal-card.editor .flv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-card.editor .flv { min-height: 60px; }
  .modal-card.editor .flv-main { min-width: 0; font-size: 16px; line-height: 1.15; padding: 0 10px; }
  .modal-card.editor .flv-sf { width: 54px; min-width: 54px; max-width: 54px; flex: none; font-size: 15px; }
}

/* Swipe a ticket line left to remove it; Remove button at the top of the item screen */
.line { touch-action: pan-y; transition: transform .15s ease, background .15s; }
.line.swiping { transition: none; }
.line.swipe-ready { background: #3a1a1a; }
.rm-top { color: var(--red); font-weight: 600; font-size: 17px; height: 48px; padding: 0 14px; background: transparent; }

/* Card / Cash buttons and the cash-received pad */
.payrow { display: flex; gap: 8px; }
.payrow .big-btn { flex: 1; }
.big-btn.cash { background: #248a3d; color: #fff; }
.big-btn.cash:disabled { background: var(--btn); color: var(--muted); }
.cash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.cash-grid button { height: 64px; border-radius: 8px; background: var(--btn); font-size: 20px; font-weight: 600; }
.cash-grid .primary { background: #0a84ff; grid-column: 1 / -1; }

.status-btn { margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--btn); color: var(--text, #fff); font-size: 13px; font-weight: 600; }

/* Say-the-number button on the customer lookup */
.phone-mic { width: 100%; margin: 0 0 10px; padding: 12px; font-size: 17px; font-weight: 600; border-radius: 12px; border: 1px solid #c9b79c; background: #fff; color: inherit; }
.phone-mic.rec { background: #c0392b; color: #fff; border-color: #c0392b; }
.phone-mic:disabled { opacity: .6; }

/* Cold foam "Other…" picker */
.foam-pick .foam-other { width: 100%; margin-top: 6px; }
.foam-other-in { width: 100%; box-sizing: border-box; padding: 12px; font-size: 17px; border-radius: 10px; border: 1px solid #c9b79c; margin-bottom: 8px; }
.foam-other-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 230px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.foam-other-list button { padding: 12px 8px; border-radius: 10px; font-size: 15px; }
.foam-other-list .use-typed { grid-column: 1 / -1; background: #123a1c; color: #d6f5dc; font-weight: 700; }

/* Favorites row above the home grid: 8 quick drinks on one line */
.fav-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; flex: none; }
.fav { background: #6b3fa0; min-width: 0; height: clamp(58px, 9vh, 84px); padding: 4px 3px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: #fff; border-bottom: 2px solid rgba(0,0,0,.35); overflow: hidden; }
.fav:active { filter: brightness(1.2); }
.fav .pre { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; min-height: 12px; }
.fav .main { font-weight: 800; font-size: clamp(11px, 1.35vw, 16px); line-height: 1.05; overflow-wrap: normal; }
@media (max-width: 760px) { .fav-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Item screen section buttons: wrap to a second row instead of swiping when they don't fit */
.modal-card.editor .chips { flex-wrap: wrap; overflow-x: visible; gap: 8px; }

/* ---- Cash drawer ---- */
.menu-btn { position: relative; font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--btn); }
.menu-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.drawer h2 { margin: 10px 0 8px; font-size: 26px; }
.drawer h3 { margin: 18px 0 8px; font-size: 18px; }
.drawer p { color: var(--muted); }
.dstep { color: var(--muted); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dlabel { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 15px; }
.dinput { width: 100%; padding: 14px 14px; border-radius: 10px; border: 1px solid var(--btn-2); background: #000; color: #fff; font: inherit; font-size: 20px; }
.dinput.sm { width: auto; min-width: 140px; padding: 10px 12px; font-size: 17px; margin: 0 8px 8px 0; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: 14px; }
.dgrid label { color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.dtotal { margin: 16px 0 6px; font-size: 20px; }
.dmsg { min-height: 22px; margin: 10px 0; color: var(--amber); }
.dbtns { display: grid; gap: 12px; margin-top: 14px; }
.dbtns.row { grid-template-columns: 1fr 1fr; }
.drawer .big-btn.go { background: #0a84ff; }
.drawer .big-btn.warn { background: #8a3b12; }
.drawer .big-btn.sm { height: 44px; font-size: 15px; padding: 0 14px; margin-left: 6px; }
.dseg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.dseg button { height: 48px; border-radius: 10px; background: var(--btn); font-weight: 600; }
.dseg button.on { background: #0a84ff; }
.sig { width: 100%; max-width: 760px; height: 160px; background: #000; border: 1px solid var(--btn-2); border-radius: 10px; touch-action: none; display: block; }
.dcard { background: var(--btn); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.dcard.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dsmall { color: var(--muted); font-size: 14px; margin-top: 4px; }
.dbig { font-size: 38px; font-weight: 700; }
.dwarn { background: #4a2a10; color: #ffd9a8; border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.warn-t { color: var(--amber); }
.dlist { font-size: 20px; line-height: 1.8; padding-left: 20px; }
.rprev { max-width: 100%; max-height: 220px; border-radius: 10px; margin-top: 10px; }
.drawer > .big-btn { display: block; width: 100%; margin-top: 14px; }
.rtab { width:100%; border-collapse:collapse; margin:10px 0; font-size:16px; }
.rtab th, .rtab td { padding:6px 8px; border-bottom:1px solid #e5e7eb; text-align:right; }
.rtab th:first-child, .rtab td:first-child { text-align:left; }
.drawer textarea.dinput { height:auto; padding:10px; font-family:inherit; }

.practice-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #d92d20; color: #fff; font-weight: 700; font-size: 14px; }
.practice-bar[hidden] { display: none; }
.practice-bar button { background: #fff; color: #d92d20; border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 800; font-size: 14px; }
body.practicing .topbar { box-shadow: inset 0 -4px 0 #d92d20; }

.linkbtn { background: none; border: 0; color: #5aabe2; font-size: 15px; text-decoration: underline; padding: 8px 12px; cursor: pointer; }

.cust-tabs { display: flex; gap: 8px; margin: 6px 0 12px; max-width: 420px; }
.cust-tabs button { flex: 1; height: 48px; border-radius: 10px; background: var(--btn); color: var(--text); font-size: 18px; font-weight: 600; }
.cust-tabs button.on { background: #0a84ff; }
.name-in { width: 100%; max-width: 420px; box-sizing: border-box; font-size: 24px; padding: 12px 14px; border-radius: 10px; border: 1px solid #48484a; background: var(--empty); color: var(--text); }
.name-out { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 420px; max-height: 44vh; overflow-y: auto; }
.name-pick { text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--btn); color: var(--text); font-size: 21px; font-weight: 600; }
.name-pick small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ---------- Customer-facing screen (tip, tap card, thank you) ---------- */
.cs { position: fixed; inset: 0; z-index: 9999; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; font-family: inherit; }
.cs-body { position: relative; z-index: 2; width: min(760px, 92vw); padding: 24px; }
.cs-h { font-size: clamp(30px, 5.2vw, 54px); line-height: 1.15; margin: 0 0 12px; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.cs-s { font-size: clamp(18px, 2.6vw, 26px); margin: 0 0 28px; opacity: .92; }
.cs-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 16px; }
.cs-tip { min-height: 132px; border-radius: 22px; background: rgba(255,255,255,.95); color: #1c1c1e; font-size: 44px; box-shadow: 0 6px 18px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.cs-tip b { font-size: 46px; }
.cs-tip small { font-size: 22px; color: #555; }
.cs-row { display: flex; gap: 14px; justify-content: center; }
.cs-alt { flex: 1; max-width: 320px; min-height: 64px; border-radius: 16px; background: rgba(0,0,0,.35); color: #fff; font-size: 24px; font-weight: 700; border: 2px solid rgba(255,255,255,.55); }
.cs-amt { font-size: 64px; font-weight: 800; margin: 0 0 14px; }
.cs-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 420px; margin: 0 auto; }
.cs-pad button { height: 78px; border-radius: 16px; background: rgba(255,255,255,.92); color: #1c1c1e; font-size: 32px; font-weight: 700; }
.cs-pad .cs-go { grid-column: 1 / -1; background: #32d74b; color: #06210d; font-size: 28px; }
.cs-card { font-size: 120px; margin-top: 10px; animation: cs-pulse 1.6s ease-in-out infinite; }
.cs-heart { font-size: 96px; margin-top: 18px; animation: cs-pulse 1.8s ease-in-out infinite; }
@keyframes cs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.cs-staff { position: absolute; left: 12px; bottom: 12px; z-index: 5; padding: 10px 16px; border-radius: 10px; background: rgba(0,0,0,.18); color: rgba(255,255,255,.55); font-size: 15px; font-weight: 600; user-select: none; -webkit-user-select: none; }
.cs-staff.new { background: rgba(0,0,0,.45); color: #fff; font-size: 18px; padding: 14px 22px; }
.cs-bits { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; }
.cs-bits span { position: absolute; top: 6%; font-size: 64px; }
.cs-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.cs-conf { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 2px; animation: cs-fall linear forwards; }
@keyframes cs-fall { to { transform: translateY(110vh) rotate(720deg); } }
.cs-balloon { position: absolute; bottom: -120px; width: 70px; height: 88px; border-radius: 50% 50% 48% 48%; animation: cs-rise ease-in forwards; box-shadow: inset -8px -8px 0 rgba(0,0,0,.12); }
.cs-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 46px; background: rgba(255,255,255,.7); }
@keyframes cs-rise { to { transform: translateY(-125vh) translateX(24px); } }
.cs-bit { position: absolute; top: -60px; animation: cs-drift linear forwards; }
@keyframes cs-drift { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(55vh) translateX(30px) rotate(160deg); } 100% { transform: translateY(115vh) translateX(-20px) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .cs-fx { display: none; } .cs-card, .cs-heart { animation: none; } }

/* customer screen: loyalty */
.cs-big { font-size: clamp(26px, 4.4vw, 44px); font-weight: 800; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.cs-fine { font-size: clamp(16px, 2.2vw, 21px); opacity: .9; margin: 0 0 22px; }
.cs-form { display: grid; gap: 12px; max-width: 520px; margin: 0 auto 16px; }
.cs-form input { height: 66px; border-radius: 16px; border: 0; padding: 0 20px; font-size: 28px; color: #1c1c1e; background: rgba(255,255,255,.96); }
.cs-err { color: #fff; background: rgba(160,20,20,.75); border-radius: 12px; padding: 10px 14px; font-size: 20px; margin: 0 auto 12px; max-width: 520px; }
.cs-main { min-height: 72px; padding: 0 34px; border-radius: 18px; background: #32d74b; color: #06210d; font-size: 28px; font-weight: 800; }

/* Refunds */
.rf-list { display: grid; gap: 8px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.rf-row { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 10px; background: var(--btn); font-size: 17px; }
.rf-row.done { opacity: .5; }
.rf-top { display: flex; align-items: baseline; gap: 6px; }
.rf-amt { margin-left: auto; font-weight: 600; }
.rf-sub { color: var(--muted); font-size: 15px; }
.rf-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #8a3b12; color: #fff; font-size: 13px; }
.rf-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 10px; background: var(--btn); font-size: 18px; }
.rf-item.on { outline: 2px solid #0a84ff; }
.rf-item.done { opacity: .45; }
.rf-item.static { background: #1c1c1e; }
.rf-box { flex: none; width: 28px; height: 28px; border-radius: 6px; border: 2px solid #8e8e93; display: grid; place-items: center; font-size: 20px; color: #fff; }
.rf-item.on .rf-box { background: #0a84ff; border-color: #0a84ff; }
.rf-name { display: grid; gap: 2px; }
.rf-name small { color: var(--muted); font-size: 14px; }

/* Split payment: cash already taken on this order */
.split-note { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin: 8px 26px; padding: 10px 14px; border-radius: 10px; background: #1d3b2a; color: #d6f5e0; font-size: 16px; }
.split-note b { flex-basis: 100%; font-size: 18px; color: #fff; }

/* Receipts */
.rf-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rf-rcpt { padding: 0 20px; border-radius: 10px; background: #0a84ff; color: #fff; font-size: 17px; font-weight: 600; }
.rf-qrs { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 10px 0 14px; }
.rf-qr { margin: 0; text-align: center; color: var(--muted); }
.rf-qr svg { width: 240px; height: 240px; background: #fff; border-radius: 12px; display: block; margin: 0 auto 6px; }
.rf-help { margin-top: 12px; padding: 14px 18px; border-radius: 12px; background: #1c1c1e; }
.rf-help h3 { margin: 0 0 6px; }
.rf-help ol { margin: 0; padding-left: 22px; line-height: 1.6; font-size: 17px; }

/* Voice box, tucked away: a slim bar until someone taps it */
.voice { position: relative; }
.voice-hide { position: absolute; top: 10px; right: 12px; font-size: 13px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--btn); }
.voice.collapsed { padding: 6px 12px; gap: 12px; cursor: pointer; }
.voice.collapsed .mic { width: 40px; height: 40px; box-shadow: none; }
.voice.collapsed .mic svg { width: 22px; height: 22px; }
.voice.collapsed .mic-label { font-size: 15px; font-weight: 600; color: var(--muted); }
.voice.collapsed .transcript, .voice.collapsed .timing, .voice.collapsed .type-form, .voice.collapsed .voice-hide { display: none; }

.cs-demo { margin-top: 18px; color: rgba(255,255,255,.75); font-size: 16px; text-align: center; }