/* ==========================================================================
 * In-restaurant self-order touch panel (kiosk).
 * Full-screen, touch-first, landing-page energy. Uses app.css :root tokens.
 * Scoped to .qm-kiosk*. Only the centre column + side panels scroll (no body
 * scroll / stray scrollbars).
 * ========================================================================== */
* { box-sizing: border-box; }
.qm-kiosk-body { margin: 0; height: 100vh; overflow: hidden; background: var(--bg); color: var(--ink-800); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
.qm-kiosk { display: flex; flex-direction: column; height: 100vh; }
/* Header shown (Vendor Settings toggle, body.index-page): the fixed site header sits
above the shell, so it needs the same 68px offset #main-content uses everywhere else. */
.index-page .qm-kiosk { height: calc(100vh - 68px); margin-top: 68px; }
/* Touchscreen kiosk: swipe, never show scrollbars. */
.qm-kiosk-scroll, .qm-kiosk-rail, .qm-kiosk-order-lines, .qm-kiosk-offers, .qm-kiosk-rail-x { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.qm-kiosk-scroll::-webkit-scrollbar, .qm-kiosk-rail::-webkit-scrollbar, .qm-kiosk-order-lines::-webkit-scrollbar, .qm-kiosk-offers::-webkit-scrollbar, .qm-kiosk-rail-x::-webkit-scrollbar { display: none; width: 0; height: 0; }
.qm-kiosk-scroll { scroll-behavior: smooth; }

/* ---- Brand bar ---- */
.qm-kiosk-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 26px; color: #fff; background: var(--qm-grad-dark); }
.qm-kiosk-brand { display: flex; align-items: center; gap: 15px; }
.qm-kiosk-logo { width: 54px; height: 54px; border-radius: 15px; object-fit: cover; background: #fff; padding: 6px; }
/* Masthead lockup beside the logo, not a heading - the page h1 is the hero title.
   Outranks the generic tagline rule below on specificity. */
.qm-kiosk-top .qm-kiosk-brand-name { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.01em; opacity: 1; }
.qm-kiosk-top p { margin: 2px 0 0; font-size: var(--fs-400); opacity: .8; }
.qm-kiosk-top-right { display: flex; align-items: center; gap: 12px; }
.qm-kiosk-table { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; }
.qm-kiosk-help { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #fff; border: 0; padding: 10px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; cursor: pointer; }
.qm-kiosk-help:hover { background: rgba(255,255,255,.24); }

/* ---- Main 3-column area ---- */
.qm-kiosk-main { flex: 1 1 auto; display: grid; grid-template-columns: 140px minmax(0, 1fr) 384px; min-height: 0; }

/* Category rail (real 3D icons) */
.qm-kiosk-rail { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; overflow-y: auto; min-height: 0; background: var(--surface); border-left: 1px solid var(--line-2); }
.qm-kiosk-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-700); font-weight: 700; font-size: 12.5px; cursor: pointer; line-height: 1.15; text-align: center; transition: all var(--t-fast); }
.qm-kiosk-cat-ic { width: 48px; height: 48px; object-fit: contain; display: block; filter: drop-shadow(0 4px 8px rgba(78,8,29,.14)); transition: transform var(--t-fast); }
.qm-kiosk-cat-home { object-fit: cover; border-radius: 14px; background: #fff; padding: 5px; filter: none; box-shadow: 0 4px 10px rgba(78,8,29,.14); }
.qm-kiosk-cat:hover { background: var(--surface-2); }
.qm-kiosk-cat:hover .qm-kiosk-cat-ic { transform: scale(1.08); }
.qm-kiosk-cat.is-active { background: var(--qm-primary-50); color: var(--qm-primary); }

/* Scrolling content */
.qm-kiosk-scroll { overflow-y: auto; min-height: 0; padding: 22px 26px 40px; }

/* Hero */
.qm-kiosk-hero { position: relative; border-radius: var(--r-lg); overflow: hidden; padding: 34px 34px; color: #fff; background: linear-gradient(-90deg, rgba(31,11,18,.86) 0%, rgba(31,11,18,.52) 60%, rgba(31,11,18,.2) 100%), var(--hero) center/cover no-repeat, var(--qm-grad-dark); }
/* Wide enough for each half of the hero title to hold one line at the shared 52px
   ramp (the English halves measure 632px and 605px); 560px forced both to wrap.
   Capped so the cover image still reads to the right of the copy. */
.qm-kiosk-hero-in { max-width: min(100%, 720px); }
.qm-kiosk-hero-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); padding: 7px 14px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
/* Size, weight, leading, tracking and margins come from the shared hero-title ramp
   in app.css, so this reads exactly like every other hero in the product. Only the
   colour is local: that rule sets --ink-900 for heroes on light backgrounds, and
   this one sits on a darkened cover image. */
.qm-kiosk-hero h1 { color: inherit; }
/* The highlighted half takes its own line, so the title always reads as exactly two
   lines whatever the language - a <br> would bake an English break into es/ar. The
   brand colour itself comes from the shared .qm-hl rule in app.css. */
.qm-kiosk-hero h1 .qm-hl { display: block; }
.qm-kiosk-hero p { margin: 0; font-size: var(--fs-600); opacity: .9; line-height: 1.5; }

/* Bands (offers, featured) */
.qm-kiosk-band { margin-top: 26px; }
.qm-kiosk-band-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qm-kiosk-band-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink-900); display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.qm-kiosk-band-head h2 i { color: var(--qm-primary); }
.qm-kiosk-band-ic { width: 26px; height: 26px; object-fit: contain; }
/* Carousel arrows grouped on the right (mirrors the homepage rails). */
.qm-kiosk-band-head .qm-rail-controls { flex: 0 0 auto; }

/* Offers strip */
.qm-kiosk-offers { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.qm-kiosk-offer { flex: 0 0 312px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 8px 20px rgba(78,8,29,.07); }
.qm-kiosk-offer-media { position: relative; aspect-ratio: 20/9; background: var(--surface-2); }
.qm-kiosk-offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-kiosk-offer-badge { position: absolute; top: 12px; right: 12px; background: var(--qm-grad); color: #fff; font-weight: 800; font-size: var(--fs-400); padding: 6px 12px; border-radius: var(--r-pill); box-shadow: 0 6px 14px color-mix(in srgb, var(--qm-primary) 30%, transparent); }
.qm-kiosk-offer-body { padding: 14px 16px 16px; }
.qm-kiosk-offer-body h3 { margin: 0 0 4px; font-size: var(--fs-700); font-weight: 700; color: var(--ink-900); }
.qm-kiosk-offer-body p { margin: 0 0 10px; font-size: var(--fs-400); color: var(--ink-500); line-height: 1.4; }
.qm-kiosk-offer-code { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--qm-primary); background: var(--qm-primary-50); border: 1px dashed var(--qm-primary-100); padding: 5px 12px; border-radius: var(--r-pill); }

/* Featured rail */
.qm-kiosk-rail-x { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.qm-kiosk-feat { flex: 0 0 164px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: right; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.qm-kiosk-feat:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(78,8,29,.12); }
.qm-kiosk-feat-img { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.qm-kiosk-feat-img img { width: 100%; height: 100%; object-fit: cover; }
.qm-kiosk-feat-name { font-weight: 700; font-size: 13.5px; color: var(--ink-900); line-height: 1.25; }
.qm-kiosk-feat-price { font-weight: 800; font-size: 14px; color: var(--qm-primary); }

/* Menu sections */
.qm-kiosk-section { margin-top: 30px; }
.qm-kiosk-section-h { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 800; color: var(--ink-900); margin: 0 0 16px; letter-spacing: -.01em; }
/* Per-category accent (colour set inline via --cat): a tinted icon tile + a count pill,
   so each section is a distinct, fun break as the guest scrolls the board. */
.qm-kiosk-section-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; flex: none; background: color-mix(in srgb, var(--cat, var(--qm-primary)) 15%, #fff); box-shadow: 0 8px 18px color-mix(in srgb, var(--cat, var(--qm-primary)) 24%, transparent); }
.qm-kiosk-section-ic .qm-kiosk-cat-ic, .qm-kiosk-section-ic .qm-kiosk-cat-fa { width: 32px; height: 32px; }
.qm-kiosk-section-ic .qm-kiosk-cat-fa { font-size: var(--fs-700); }
.qm-kiosk-section-count { font-size: var(--fs-400); font-weight: 800; color: var(--cat, var(--qm-primary)); background: color-mix(in srgb, var(--cat, var(--qm-primary)) 13%, #fff); border-radius: var(--r-pill); padding: 3px 11px; }
.qm-kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 18px; }

.qm-kiosk-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 8px 20px rgba(78,8,29,.06); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.qm-kiosk-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(78,8,29,.13); }
.qm-kiosk-card.is-off { opacity: .62; cursor: default; }
.qm-kiosk-card-img { position: relative; aspect-ratio: 16/10; background: var(--surface-2); }
.qm-kiosk-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-kiosk-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1 1 auto; }
.qm-kiosk-card-head { display: flex; align-items: center; gap: 8px; }
.qm-kiosk-card-head .qm-badge-veg, .qm-kiosk-card-head .qm-badge-nonveg { flex: 0 0 auto; }
.qm-kiosk-card-body h3 { margin: 0; flex: 1 1 auto; font-size: 17px; font-weight: 700; color: var(--ink-900); }
.qm-kiosk-card-body .qm-attr-row { margin: 2px 0 0; }
.qm-kiosk-card-body p { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.45; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qm-kiosk-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qm-kiosk-price { font-size: var(--fs-900); font-weight: 800; color: var(--ink-900); }
.qm-kiosk-add { display: inline-flex; align-items: center; gap: 8px; background: var(--qm-grad); color: #fff; border: 0; font-weight: 700; font-size: var(--fs-600); padding: 11px 20px; border-radius: var(--r-pill); box-shadow: 0 8px 18px color-mix(in srgb, var(--qm-primary) 26%, transparent); }
.qm-kiosk-card:hover .qm-kiosk-add { transform: scale(1.03); }
.qm-kiosk-soldout { font-size: var(--fs-400); font-weight: 700; color: var(--ink-400); }

/* Order panel */
.qm-kiosk-order { display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line-2); min-height: 0; }
.qm-kiosk-order-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line-2); }
.qm-kiosk-order-hd h2 { margin: 0; font-size: var(--fs-800); font-weight: 800; color: var(--ink-900); display: inline-flex; align-items: center; gap: 10px; }
.qm-kiosk-order-hd h2 i { color: var(--qm-primary); }
.qm-kiosk-order-count { font-size: var(--fs-400); font-weight: 700; color: var(--ink-500); background: var(--surface-2); padding: 5px 12px; border-radius: var(--r-pill); }
.qm-kiosk-order-lines { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.qm-kiosk-line { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); }
.qm-kiosk-line:hover { background: var(--surface-2); }
.qm-kiosk-line > img { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.qm-kiosk-line-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.qm-kiosk-line-main:focus-visible { outline: 2px solid var(--qm-primary); outline-offset: 2px; border-radius: 6px; }
.qm-kiosk-line-name { font-weight: 700; font-size: 14.5px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-kiosk-line-opt { font-size: 11.5px; color: var(--ink-500); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-kiosk-line-price { font-size: var(--fs-400); font-weight: 700; color: var(--qm-primary); }
/* "Edit" affordance on each basket line — tapping the line body re-opens the customize popup. */
.qm-kiosk-line-edit { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--qm-primary); opacity: .8; }
.qm-kiosk-line-edit i { font-size: 9px; }
.qm-kiosk-line:hover .qm-kiosk-line-edit { opacity: 1; }
.qm-kiosk-qty { display: inline-flex; align-items: center; gap: 4px; }
.qm-kiosk-qty button { width: 34px; height: 34px; border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-800); border-radius: 50%; font-size: var(--fs-800); font-weight: 700; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.qm-kiosk-qty button:hover { border-color: var(--qm-primary); color: var(--qm-primary); }
.qm-kiosk-qty span { min-width: 22px; text-align: center; font-weight: 800; font-size: var(--fs-600); }

.qm-kiosk-order-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-400); gap: 12px; padding: 30px; }
.qm-kiosk-order-empty i { font-size: 40px; opacity: .35; }
.qm-kiosk-order-empty p { margin: 0; font-size: 14.5px; line-height: 1.5; }

.qm-kiosk-order-ft { border-top: 1px solid var(--line-2); padding: 18px 22px 22px; background: var(--surface-2); }
.qm-kiosk-order-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.qm-kiosk-order-total span { font-size: var(--fs-600); font-weight: 600; color: var(--ink-600); }
.qm-kiosk-order-total strong { font-size: var(--fs-h2); font-weight: 800; color: var(--ink-900); }
.qm-kiosk-checkout { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--qm-grad); color: #fff; border: 0; font-weight: 800; font-size: 17px; padding: 16px; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 12px 24px color-mix(in srgb, var(--qm-primary) 28%, transparent); transition: transform var(--t-fast), opacity var(--t-fast); }
.qm-kiosk-checkout:active { transform: scale(.98); }
.qm-kiosk-checkout:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.qm-kiosk-note { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: var(--ink-400); line-height: 1.4; }

/* Tablet / portrait */
@media (max-width: 1040px) {
  .qm-kiosk-main { grid-template-columns: 116px minmax(0,1fr) 306px; }
  .qm-kiosk-cat-ic { width: 40px; height: 40px; }
  /* No hero font-size step-down here: the shared clamp() already scales with the viewport. */
}
@media (max-width: 760px) {
  .qm-kiosk-main { grid-template-columns: 1fr; }
  .qm-kiosk-rail { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .qm-kiosk-cat { flex: 0 0 auto; min-width: 84px; }
  .qm-kiosk-order { position: fixed; inset: auto 0 0 0; max-height: 60vh; border-right: 0; border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px rgba(78,8,29,.18); border-radius: 18px 18px 0 0; z-index: 40; }
  /* The basket panel above is fixed to the viewport bottom and can grow up to
  60vh tall once a guest adds several items - without this, its own footer/
  checkout button permanently covers the last menu items with no way to
  scroll them into view above it. */
  .qm-kiosk-scroll { padding-bottom: 60vh; }
}

/* ============ Review & place order ============ */
.qm-kiosk-rv {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(31, 11, 18, .55); backdrop-filter: blur(4px);
}
.qm-kiosk-rv.is-open { display: flex; }
.qm-kiosk-rv-dialog {
  width: min(560px, 100%); max-height: 92vh; overflow: hidden auto;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(31, 11, 18, .35);
}
.qm-kiosk-rv-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.qm-kiosk-rv-hd h2 { margin: 0; font-size: var(--fs-900); color: var(--ink-900); display: flex; align-items: center; gap: 10px; }
.qm-kiosk-rv-hd h2 i { color: var(--qm-primary); }
.qm-kiosk-rv-close {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--ink-600); font-size: var(--fs-600);
}
.qm-kiosk-rv-body { padding: 16px 24px 4px; }
.qm-kiosk-rv-lines { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
.qm-kiosk-rv-line { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.qm-kiosk-rv-line .q { font-weight: 800; color: var(--qm-primary); flex: 0 0 auto; }
.qm-kiosk-rv-line .n { flex: 1 1 auto; color: var(--ink-800); font-weight: 600; }
.qm-kiosk-rv-line .p { font-weight: 700; color: var(--ink-900); }
.qm-kiosk-rv-totals { margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.qm-kiosk-rv-totals div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-600); padding: 2px 0; }
.qm-kiosk-rv-totals dd { margin: 0; font-weight: 600; color: var(--ink-800); }
.qm-kiosk-rv-totals .qm-kiosk-rv-grand { font-size: var(--fs-600); }
.qm-kiosk-rv-grand dt { font-weight: 800; color: var(--ink-900); }
.qm-kiosk-rv-totals .qm-kiosk-rv-grand dd { font-weight: 800; color: var(--qm-primary); font-size: var(--fs-800); }
.qm-kiosk-rv-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-400); margin: 14px 0 6px; }
.qm-kiosk-rv-paygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* First + last name side by side for counter payment; the phone sits under them on its own line. */
.qm-kiosk-rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qm-kiosk-rv-pay {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 10px; border: 1.5px solid var(--field-border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-700); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.qm-kiosk-rv-pay.is-active { border-color: var(--qm-primary); background: var(--qm-primary-50); color: var(--qm-primary); }
.qm-kiosk-rv-error { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.qm-kiosk-rv-ft { display: flex; gap: 12px; align-items: center; padding: 18px 24px 24px; }
.qm-kiosk-rv-ft .qm-kiosk-checkout { flex: 1 1 auto; margin: 0; }
.qm-kiosk-rv-back {
  border: 0; background: transparent; color: var(--ink-500); font-weight: 700; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px;
}
.qm-kiosk-rv-done { padding: 44px 32px 32px; text-align: center; }
.qm-kiosk-rv-done-ic {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--qm-grad); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--qm-primary) 35%, transparent);
}
.qm-kiosk-rv-done h2 { margin: 0 0 6px; font-size: 24px; color: var(--ink-900); }
.qm-kiosk-rv-done-no { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: .02em; color: var(--qm-primary); }
.qm-kiosk-rv-done-copy { margin: 0 auto 22px; max-width: 380px; font-size: 14.5px; color: var(--ink-600); }
.qm-kiosk-rv-done .qm-kiosk-checkout { max-width: 320px; margin: 0 auto; }
.qm-kiosk-rv-count { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-400); }

/* Staff-facing degraded-binding notice (table deactivated -> counter fallback). */
.qm-kiosk-degraded { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 24px;
  background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); font-size: 14px; line-height: 1.4; }
.qm-kiosk-degraded i { font-size: var(--fs-800); flex: 0 0 auto; }

/* ==========================================================================
 * Touch targets — WCAG 2.5.5 (Target Size) at the 48px kiosk standard.
 *
 * Every control a guest can hit on this page measures at least 48x48 CSS px on
 * its OWN box. Not a transparent overlay: an overlay satisfies a measuring
 * script and still misses under a thumb, because the thing that lights up on
 * press is the small box underneath it.
 *
 * Everything below is scoped to `body.qm-kiosk-body`, which only the kiosk
 * shell carries. The shared storefront header, the shared customize popup
 * (used by the POS too) and Bootstrap's form controls are therefore raised on
 * the kiosk and nowhere else.
 *
 * Sizing is expressed as min-width / min-height rather than width / height:
 * a used width can never fall below its min-width whatever else declares it,
 * so these hold against the shared rules without !important. Where a shared
 * rule already declares a min-* (the header action row declares 40px at
 * (0,3,0)), the selector carries the `body` element too, so it outranks it
 * on specificity rather than on load order.
 * ========================================================================== */

/* ---- Kiosk board ---- */
/* "Add" was 92.6x44.5 - wide enough, 3.5px short. */
.qm-kiosk-add { min-height: 48px; }
.qm-kiosk-help { min-height: 48px; }
/* Rail arrows: the shared .qm-carousel-nav pair renders 44x38 inside its divider frame. */
body.qm-kiosk-body .qm-carousel-nav .qm-carousel-btn { min-width: 48px; min-height: 48px; }
/* Sold-out cards carry no control, so the whole card is inert - nothing to raise there. */

/* ---- Basket panel ---- */
/* The quantity steppers are the most-tapped control on the panel and were the
   smallest at 34x34. The line grid is auto-sized, so the name column simply
   yields the extra width. */
.qm-kiosk-qty button { width: 48px; height: 48px; font-size: var(--fs-900); }
.qm-kiosk-qty { gap: 2px; }
.qm-kiosk-qty span { min-width: 26px; }

/* ---- Review & place order ---- */
.qm-kiosk-rv-close { width: 48px; height: 48px; }
.qm-kiosk-rv-back { min-height: 48px; }
/* The payment choices measure 48px in the shell that loads Bootstrap and 46px in
   the immersive one, which does not - Bootstrap's body line-height is what makes
   up the difference. Declared here so both shells hold. */
.qm-kiosk-rv-pay { min-height: 48px; }
/* Name / phone / offer code. Bootstrap's .form-control sets its height from
   padding + line-height and lands at 43px. */
body.qm-kiosk-body .qm-kiosk-rv-body .form-control { min-height: 48px; }

/* ---- Shared "customize your order" popup (order-customize.css) ----
   The modifier rows are the audit's named failing case: the guest taps the
   whole row, not the 18px native radio inside it, so the ROW is the target
   that has to measure. */
body.qm-kiosk-body .qm-cz-opt { min-height: 48px; }
body.qm-kiosk-body .qm-cz-chip { min-height: 48px; }
body.qm-kiosk-body .qm-cz-tab { min-height: 48px; padding-top: 0; padding-bottom: 0; }
body.qm-kiosk-body .qm-cz-close { width: 48px; height: 48px; }
body.qm-kiosk-body .qm-cz-qty button { width: 48px; height: 48px; }
body.qm-kiosk-body .qm-cz-note textarea { min-height: 48px; }
body.qm-kiosk-body .qm-cz-add { min-height: 48px; }

/* ---- Shared site header (rendered when the owner keeps kiosk_header_enabled) ----
   This is the storefront header partial, so each control is raised only under
   the kiosk body. The header band is 68px tall and these all centre their own
   contents, so a 48px floor sits inside it with room to spare. */
body.qm-kiosk-body .skip-link,
body.qm-kiosk-body .qm-nav-logo,
body.qm-kiosk-body .qm-loc-btn,
body.qm-kiosk-body .qm-explore-btn,
body.qm-kiosk-body .qm-order-now,
body.qm-kiosk-body .service-mode-toggle .mode-btn,
body.qm-kiosk-body .qm-nav-toggle,
body.qm-kiosk-body .qm-nav-actions > .qm-icon-pill,
body.qm-kiosk-body .qm-nav-actions .qm-icon-pill,
body.qm-kiosk-body .qm-nav-actions .qm-account-btn,
body.qm-kiosk-body .qm-nav-actions > .dropdown > .qm-account-btn,
body.qm-kiosk-body .qm-nav-actions > .qm-cuis-toggle,
body.qm-kiosk-body .qm-cuis-toggle { min-width: 48px; min-height: 48px; }
/* The skip link and the logo are links, so they need a box before a height applies. */
body.qm-kiosk-body .skip-link { display: inline-flex; align-items: center; }

/* Panels the header opens: cuisines, the store-type rail, the nav drawer, the
   language and account menus, and the cookie notice. Same 48px floor, same scope. */
body.qm-kiosk-body .qm-cuis-panel a,
body.qm-kiosk-body .qm-cuis-panel button,
body.qm-kiosk-body .qm-cuis-panel input,
body.qm-kiosk-body .qm-side-panel a,
body.qm-kiosk-body .qm-side-panel button,
body.qm-kiosk-body .qm-side a,
body.qm-kiosk-body .qm-side button,
body.qm-kiosk-body .qm-drawer a,
body.qm-kiosk-body .qm-drawer button,
body.qm-kiosk-body .dropdown-menu .dropdown-item,
body.qm-kiosk-body .qm-cookie a,
body.qm-kiosk-body .qm-cookie button { min-width: 48px; min-height: 48px; }
/* The A-Z jump rail packs 26 letters into the panel's full height. At 48px each
   that is taller than a landscape panel, so the rail goes back to the scrolling
   behaviour its own base rule declares (.qm-alpha-rail { overflow-y: auto }) -
   which the panel skin turns off because 18px letters always fitted. */
body.qm-kiosk-body .qm-cuis-panel .qm-alpha-rail { overflow-y: auto; justify-content: flex-start; }
body.qm-kiosk-body .qm-cuis-panel .qm-alpha { width: 48px; height: 48px; font-size: var(--fs-400); }

/* ==========================================================================
 * Idle reset — "Still ordering?"
 *
 * Mirrors the staff screen lock (staff_lock_seconds): one operator concept,
 * one shape. Same overlay language as the review dialog above so the guest
 * meets a surface they have already seen, not a second modal style.
 * ========================================================================== */
.qm-kiosk-idle { position: fixed; inset: 0; z-index: 130; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(31, 11, 18, .62); backdrop-filter: blur(4px); }
.qm-kiosk-idle.is-open { display: flex; }
.qm-kiosk-idle-dialog { width: min(460px, 100%); padding: 40px 32px 32px; text-align: center;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(31, 11, 18, .35); }
.qm-kiosk-idle-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--qm-grad); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--qm-primary) 30%, transparent); }
.qm-kiosk-idle-dialog h2 { margin: 0 0 8px; font-size: 24px; color: var(--ink-900); }
.qm-kiosk-idle-copy { margin: 0 auto 20px; max-width: 340px; font-size: 14.5px; color: var(--ink-600); line-height: 1.5; }
.qm-kiosk-idle-count { display: block; margin: 0 auto 22px; width: 92px; height: 92px; border-radius: 50%;
  border: 4px solid var(--qm-primary-100); color: var(--qm-primary);
  font-size: 34px; font-weight: 800; line-height: 84px; }
.qm-kiosk-idle-dialog .qm-kiosk-checkout { max-width: 320px; margin: 0 auto; }
.qm-kiosk-idle-end { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: 12px; padding: 10px 18px; border: 0; background: transparent;
  color: var(--ink-500); font-weight: 700; font-size: 14px; cursor: pointer; }
.qm-kiosk-idle-end:hover { color: var(--qm-primary); }

/* ---- Offline panel (offline terminals capability) --------------------------------------------
   A full-cover state, not a toast: this screen stands in a dining room and the message has to be
   readable from across it, and has to stop a guest interacting with a basket that cannot reach the
   server. It sits above everything including the idle overlay, because a machine with no line is a
   more urgent fact than an idle timer. Nothing here polls — the browser's own online/offline events
   drive it, so an unaffected kiosk pays nothing for it. */
.qm-kiosk-offline { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 32px; background: rgba(31, 11, 18, .82); backdrop-filter: blur(3px); }
.qm-kiosk-offline[hidden] { display: none; }
.qm-kiosk-offline-box { max-width: 560px; text-align: center; background: var(--surface, #fff);
  border-radius: var(--r-lg, 18px); padding: 44px 40px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.qm-kiosk-offline-box i { font-size: 46px; color: var(--qm-primary, #ff003d); margin-bottom: 18px; display: block; }
.qm-kiosk-offline-box h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--ink-900); }
.qm-kiosk-offline-box p { margin: 0; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-600, #5c4048); }
/* The basket must not accept taps behind the panel — a guest pressing through it would be building
   an order the server is never told about, which is the exact promise this feature refuses to make. */
body.is-kiosk-offline .qm-kiosk-main { pointer-events: none; }

/* ---- On-screen keyboard (KioskBoard) -------------------------------------------------
   While a keyboard is up the review overlay carries its height: the dialog moves to the top and
   shrinks to the space above it, scrolling inside, so the field being typed into and "Place
   order" stay reachable. The keyboard itself is the dialog's width, centred, with a brand "Done". */
.qm-kiosk-rv.is-osk { align-items: flex-start; padding-bottom: calc(var(--qm-osk-h, 0px) + 12px); }
.qm-kiosk-rv.is-osk .qm-kiosk-rv-dialog { max-height: calc(100vh - var(--qm-osk-h, 0px) - 36px); }
/* With the storefront header on, the raised dialog sits under it rather than behind it. */
.qm-kiosk-body.index-page .qm-kiosk-rv.is-osk { padding-top: 76px; }
.qm-kiosk-body.index-page .qm-kiosk-rv.is-osk .qm-kiosk-rv-dialog { max-height: calc(100vh - var(--qm-osk-h, 0px) - 88px); }
#KioskBoard-VirtualKeyboard { max-width: 820px !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; padding: 10px 12px 12px !important; box-shadow: 0 -12px 40px rgba(31, 11, 18, .18); }
#KioskBoard-VirtualKeyboard.kioskboard-theme-light { background: var(--surface-2, #fff4f8); }
#KioskBoard-VirtualKeyboard .kioskboard-key { border-radius: 10px !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .08) !important; }
#KioskBoard-VirtualKeyboard .kioskboard-key-enter { background: var(--qm-primary) !important; color: #fff !important; }