/* ─── kiosk ───────────────────────────────────────────────────────────
   An ordering-app storefront.

   Loaded after classic.css, which carries what every template shares: the
   theme tokens, the base type, the dialogs, the toast and the cart rows. This
   file is only the page, under its own class names, so nothing here collides
   with the classic chrome.

   Built on the theme tokens rather than fixed colours, so Lagoon — the same
   storefront in teal and sand — needs no separate rules. Logical properties
   throughout: the app bar, the chips and the photo-beside-text row all mirror
   into Arabic with no [dir="rtl"] block in this file. */

[data-template="kiosk"] { --kbar: 58px; }

/* ─── App bar ───────────────────────────────────────────────────────
   Small, pinned, and carrying the restaurant's name rather than a logo the
   size of a hero — the cover below does the introducing. */
.kiosk-bar {
  position: sticky; top: 0; z-index: 80; height: var(--kbar);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.kiosk-bar-inner {
  width: var(--container); margin-inline: auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.kiosk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kiosk-brand-mark {
  flex: none; width: 30px; height: 30px; border-radius: 9px; object-fit: cover;
  display: grid; place-items: center;
  background: var(--accent); color: var(--paper); font-size: 14px; font-weight: 800;
}
.kiosk-brand-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kiosk-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.kiosk-icon-btn, .kiosk-lang {
  height: 36px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.kiosk-icon-btn { width: 36px; }
.kiosk-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-lang { padding: 0 12px; font-size: 12.5px; font-weight: 700; }
.kiosk-icon-btn:hover, .kiosk-lang:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Cover ─────────────────────────────────────────────────────────
   The storefront banner. The mark sits on a light tile lifted onto the wash,
   which is the shape a guest already knows from every delivery app on their
   phone — and it is the one place the restaurant's colour fills the screen. */
.kiosk-cover { position: relative; overflow: hidden; padding: 26px 0 24px; color: #fff; }
.kiosk-cover-wash {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #000));
}
/* A soft second colour so the banner is not one flat fill. */
.kiosk-cover-wash::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  inset-block-start: -140px; inset-inline-end: -90px;
  background: color-mix(in srgb, var(--accent2) 55%, transparent); filter: blur(60px);
}
.kiosk-cover-inner {
  position: relative; z-index: 1; width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 18px;
}
.kiosk-cover-mark {
  flex: none; width: 84px; height: 84px; border-radius: 22px; padding: 8px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  display: grid; place-items: center;
}
.kiosk-cover-img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.kiosk-cover-img-initial { display: grid; place-items: center; background: none; color: var(--accent); font-size: 34px; font-weight: 800; }
.kiosk-cover-text { min-width: 0; }
.kiosk-cover-title { margin: 0; font-size: clamp(22px, 4.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kiosk-cover-sub { margin: 7px 0 0; font-size: 14px; color: rgba(255, 255, 255, .82); max-width: 46ch; }
.kiosk-cover-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kiosk-chip-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: 12px; font-weight: 600;
}
.kiosk-chip-pill:hover { background: rgba(255, 255, 255, .26); }
.hours-live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.kiosk-hours.is-open .hours-live-dot { background: #56d98a; }
.kiosk-hours.is-closing-soon .hours-live-dot { background: #ffc861; }
.kiosk-hours.is-closed .hours-live-dot { background: #ff8f7a; }
.hours-live-sep { opacity: .5; }
.kiosk-hours #liveDohaTime { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ─── Search and chips ──────────────────────────────────────────────
   Pinned directly under the app bar, so the way to find something never
   scrolls away. The chips are a jump list: tapping one moves the page to that
   section, and the active chip follows the scroll rather than staying on
   whatever was tapped last. */
.kiosk-sticky {
  position: sticky; top: var(--kbar); z-index: 70;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line); padding: 12px 0 0;
}
.kiosk-search {
  width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 14px; color: var(--muted);
}
.kiosk-search svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* 16px: anything smaller and iOS zooms the page when the guest taps it. */
.kiosk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.kiosk-search input::placeholder { color: var(--muted); }

.kiosk-chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  width: var(--container); margin: 10px auto 0; padding-bottom: 10px;
}
.kiosk-chips::-webkit-scrollbar { display: none; }
.kiosk-chip {
  flex: none; white-space: nowrap; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 650;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.kiosk-chip:hover { border-color: var(--accent); color: var(--accent); }
.kiosk-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-template="kiosk"] .result-count {
  display: block; width: var(--container); margin: 0 auto; padding-bottom: 9px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}

/* ─── Groups and rows ───────────────────────────────────────────────
   Every category on the page under its own heading. The row is text first and
   photo second, which is the order a guest reads in and the order that keeps a
   menu legible when half the items have no photograph yet. */
.kiosk-body { width: var(--container); margin-inline: auto; padding: 6px 0 120px; }
.kiosk-group { padding-top: 26px; scroll-margin-top: calc(var(--kbar) + 110px); }
.kiosk-group-title {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 19px; font-weight: 800; letter-spacing: -.025em;
}
.kiosk-group-title small {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.kiosk-list { display: grid; gap: 10px; }

.kiosk-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color .16s ease, transform .16s ease;
}
.kiosk-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.kiosk-card-text { min-width: 0; }
.kiosk-card-text h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.kiosk-card-text p {
  margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kiosk-card-price {
  margin-top: 8px; font-size: 14.5px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}

/* The media block is the anchor for the add button, which is lifted onto its
   corner — the pattern every delivery app uses, and the reason adding an item
   never needs the guest to open it first. */
.kiosk-card-media { position: relative; flex: none; }
.kiosk-card-photo {
  display: block; width: 96px; height: 96px; padding: 0; cursor: pointer;
  border: 0; border-radius: 16px; overflow: hidden; background: var(--line);
}
.kiosk-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.kiosk-card-empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: color-mix(in srgb, var(--accent) 12%, var(--white));
  color: var(--accent); font-size: 30px; font-weight: 800;
}
.kiosk-card-add {
  position: absolute; inset-block-end: -8px; inset-inline-end: -8px;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--white); background: var(--accent); color: #fff;
  font-size: 18px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .14s ease;
}
.kiosk-card-add:hover { transform: scale(1.08); }

/* ─── Order bar ─────────────────────────────────────────────────────
   The running total stays on screen instead of hiding behind a cart icon —
   the one number a guest actually wants while they browse. Absent entirely
   until there is something in the order. */
.kiosk-orderbar {
  position: fixed; z-index: 120; inset-inline: 0; bottom: 0;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.kiosk-orderbar-btn {
  width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 18px; border: 0; border-radius: 16px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
}
.kiosk-orderbar-count {
  flex: none; min-width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .24); font-size: 12.5px; font-weight: 700;
}
.kiosk-orderbar-label { flex: 1; text-align: start; }
.kiosk-orderbar-btn b { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ─── Footer ────────────────────────────────────────────────────────
   Token-based, so the footer is not a light block at the bottom of a dark
   palette. */
/* The bottom padding clears the fixed order bar (~67px plus the safe-area
   inset); without it the credit and copyright sit underneath it. */
[data-template="kiosk"] .footer {
  margin-top: 30px; padding: 40px 0 calc(104px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)); border-top: 1px solid var(--line);
}
[data-template="kiosk"] .footer-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
[data-template="kiosk"] .footer h4 { color: var(--ink); }
[data-template="kiosk"] .footer a,
[data-template="kiosk"] .footer button,
[data-template="kiosk"] .footer-open-links { color: var(--muted); font-size: 14px; }
[data-template="kiosk"] .footer a:hover,
[data-template="kiosk"] .footer button:hover { color: var(--accent); }
[data-template="kiosk"] .footer-logo { mix-blend-mode: normal; width: 120px; }
[data-template="kiosk"] .footer-bottom { border-top-color: var(--line); }
[data-template="kiosk"] .qmenu-credit {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: var(--line); color: var(--ink);
}
[data-template="kiosk"] .qmenu-credit:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: none; }

/* The toast sits above the order bar rather than under it. */
[data-template="kiosk"] .toast { bottom: 96px; }

@media (min-width: 820px) {
  /* Wide enough for two rows abreast; the row itself does not change shape. */
  .kiosk-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kiosk-cover { padding: 34px 0 32px; }
  .kiosk-cover-mark { width: 104px; height: 104px; border-radius: 26px; }
}

@media (max-width: 560px) {
  [data-template="kiosk"] { --kbar: 52px; }
  .kiosk-cover-mark { width: 66px; height: 66px; border-radius: 18px; padding: 6px; }
  .kiosk-cover-sub { display: none; }
  .kiosk-card-photo { width: 84px; height: 84px; border-radius: 14px; }
  .kiosk-group-title { font-size: 17px; }
}