/* ==========================================================================
   Vendéglátás — alapstílusok
   ========================================================================== */

/*
 * SZÍNKÉSZLET.
 *
 * A régi paletta nyomdai volt: meleg papír, tompa borszín, sárgás borostyán,
 * fakó zöld. Szép volt egy étlapon — egy kezelőfelületen viszont fáradtnak és
 * réginek látszott, és a színek nem MONDTAK semmit: a „kész" ugyanolyan
 * halkan szólt, mint a „vár".
 *
 * Az új készlet világosabb és telítettebb, és minden színnek DOLGA van:
 *
 *   mint   kész, mehet, elsődleges művelet
 *   sky    úton van, folyamatban, tájékoztatás
 *   amber  figyelem, vár valakire
 *   plum   baj van, visszavonás, törlés
 *
 * A világos mód hűvös fehér (nem krémszín): a képernyőn az tiszta, a
 * krémszín megsárgultnak látszik egy mai kijelzőn.
 */
/*
 * A HÁZ SZÍNEI a vendéglő saját arculatából jönnek (testverekvendegloje.hu):
 * meleg papír, mély — barnába hajló — fekete és bronz. A korábbi hűvös
 * szürkéskék készlet technikailag rendben volt, csak épp semmi köze nem volt
 * ahhoz a helyhez, ahol a vendég ül.
 *
 * AMI NEM VÁLTOZOTT: a négy állapotszín (mint, sky, amber, plum). Azok nem
 * dísz, hanem jelentés — a konyhai kijelzőn a „kész" zöldje és a „vár"
 * borostyánja fél másodperc alatt olvasható, és ezt egy arculat kedvéért nem
 * adjuk fel. A bronz ezért KÜLÖN token (`--brand`): márka, nem állapot.
 */
:root {
  --paper: #f1eadf;
  --surface: #fffdf8;
  --ink: #1b1915;
  --ash: #746c61;
  --hairline: #d8cbbb;
  --hairline-strong: rgba(27, 25, 21, 0.22);

  /*
   * A MÁRKA BRONZA. A sötétebb változat a gombokon és a kis szövegen dolgozik
   * (fehérrel 5,9:1 — kényelmesen olvasható), a világosabb a nagy, vastag
   * feliratokon és a kiemeléseken.
   */
  --brand: #a6793e;
  --brand-dark: #765329;
  --brand-soft: rgba(166, 121, 62, 0.14);

  --plum: #e11d48;
  --plum-soft: rgba(225, 29, 72, 0.12);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --mint: #10a37f;
  --mint-soft: rgba(16, 163, 127, 0.16);
  --sky: #2563eb;
  --sky-soft: rgba(37, 99, 235, 0.14);
  --free-soft: rgba(16, 163, 127, 0.10);

  --tint-mint: rgba(16, 163, 127, 0.07);
  --tint-amber: rgba(217, 119, 6, 0.07);
  --tint-sky: rgba(37, 99, 235, 0.06);
  --tint-plum: rgba(225, 29, 72, 0.06);

  --edge: 4px;

  --go-surface: var(--mint-soft);
  --go-border: var(--mint);
  --go-ink: var(--ink);

  /*
   * AKCIÓZÖLD. A `--mint` állapotot jelent, ez a sötétebb hármas pedig
   * nyomható felületet. Fehér felirattal is erős marad napfényben, és a
   * hover nem világosítja olvashatatlanná a gombot.
   */
  --mint-solid: #08775b;
  --mint-solid-hover: #06654d;
  --mint-solid-active: #054f3d;
  --sky-solid: #2563eb;

  --on-accent: #fff;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /*
   * KEREKÍTÉS-SKÁLA — LEGFELJEBB 5 KÉPPONT (2026-09-03).
   *
   * Ez a szám oda-vissza járt, és mindkét irány a tulajdonos döntése volt:
   *
   *   2026-08-28  a régi „legfeljebb 5px, kivétel nincs" szabály KIKERÜLT,
   *               mert a felülettől szögletesnek és hivatalosnak hatott;
   *               négyfokú, lágy skála lett helyette (10/14/22/999).
   *   2026-09-03  a lágy skála VISSZAVÉVE. A gömbölyű dobozok a prémium
   *               hatás ellen dolgoztak: a nagy sugár olcsó, „appos"
   *               benyomást keltett, nem szerkesztett felületet.
   *
   * A skála MEGMARADT — csak a tartománya szűkült. A cél változatlan: ne
   * legyen minden komponensnek saját kerekítése, és egy helyen lehessen
   * átírni az egészet. Négy fokozat, mert négyféle dolog van:
   *
   *   xs    zászló, jelölő pötty, vékony sáv — képpontnyi dolgok
   *   sm    jelvény, mező, kis gomb — amit a szem sorban olvas
   *   alap  kártya, panel, gomb — a felület alapköve
   *   lg    felugró réteg, nagy panel — ami a lap FÖLÉ kerül
   *   pill  állapotcímke, szűrőchip
   *
   * A `pill` NEVE megmaradt (negyvenöt helyen hivatkoznak rá), az ÉRTÉKE
   * viszont már nem 999px: ebben a felfogásban a jelvényt sem a lekerekítés
   * különbözteti meg, hanem a színe és a jele. Ami tényleg KÖR (kapcsolat-
   * pötty, jelmagyarázat-korong), az `50%`-ot használ — az geometria, nem
   * a kerekítési skála része.
   */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 5px;
  --radius-pill: 5px;

  /*
   * MÉLYSÉG. Két fokozat: a fekvő kártya alig vet árnyékot, az emelt (aktív,
   * lebegő, felugró) érezhetően. Puha és nagy sugarú, nem éles — az éles
   * árnyék olcsó hatás, a puha egyszerűen csak távolságot jelent.
   */
  --lift: 0 1px 2px rgba(27, 25, 21, 0.05), 0 8px 24px rgba(27, 25, 21, 0.10);
  --lift-strong: 0 2px 4px rgba(27, 25, 21, 0.08), 0 18px 48px rgba(27, 25, 21, 0.18);

  --tap: 44px;

  /*
   * HÁROM SZÉLESSÉG, három munkára.
   *
   *   olvasólap  folyó szöveg (adatkezelés, súgó). 60–70 karakternél
   *              hosszabb sort a szem nehezen követ vissza a sor elejére.
   *   lap        űrlapos vezetői lapok
   *   széles     listák és táblázatok — ezek KITÖLTIK a képernyőt. Egy
   *              huszonöt oszlopos foglalás-táblát 1100 képpontba szorítva
   *              a fél kijelző üresen áll, a sorok meg tördelve tolonganak.
   */
  --page-read: 760px;
  --page-max: 1100px;
  --page-wide: min(1680px, 100%);
  --page-pad: clamp(16px, 2.4vw, 40px);

  --champagne: #b08d57;

  /*
   * TENGERKÉK — az „ez megvan, tudomásul vettük" jelvényé.
   *
   * A paletta végig meleg (bronz, papír, tinta), és pont ezért működik itt
   * egy hideg szín: az állapotjelvény nem a lap része, hanem RÁTETT címke.
   * Feketén ugyanez a jelvény gyászjelentésnek látszott a krémszínű kártyán.
   * Egyetlen helyen él, a „leadva" fokon — ha máshova is kell, előbb kérdezd
   * meg, mit jelentene ott.
   */
  --navy: #24405e;

  /*
   * FÉM — a másodlagos gomb felülete.
   *
   * A projektben eddig lapos gombok voltak, és a másodlagos ettől
   * megkülönböztethetetlen volt a háttértől: a „Szétosztás" úgy nézett ki,
   * mint egy link egy dobozban. Ez a három érték egy nagyon halk,
   * fentről-lefelé futó csiszolt fém — nem dísz, hanem az, ami MEGFOGHATÓVÁ
   * teszi: látszik rajta, hogy meg lehet nyomni.
   */
  --metal-top: #fbfaf7;
  --metal-bottom: #ddd6ca;
  --metal-edge: #c3b9a8;
}

/*
 * SÖTÉT MÓD. Mélyebb és hidegebb alap, mint a régi #16191c: az szürke volt,
 * és a rátett felület alig vált el tőle — egy kártya, ami nem emelkedik ki a
 * lapból, nem is kártya. A tinta és a hamu is világosabb lett egy fokkal:
 * ezt a felületet fél sötétben, mozgás közben olvassák.
 */
/*
 * SÖTÉT MÓD. Meleg, barnába hajló mélysötét — a ház fekete-változata
 * (#1b1915) alá és fölé építve —, nem a régi kékesszürke. A hangsúlyszínek
 * VILÁGOSABBAK, mint világos módban: sötét háttéren a telített szín
 * sötétnek, tehát halottnak látszik.
 *
 * A bronz is világosodik. A #a6793e fekete alapon zavarosan tompa; a
 * #c99a5b ugyanaz a szín, csak megvilágítva.
 */
html.qb-dark {
  --paper: #14120f;
  --surface: #1f1c17;
  --ink: #f5f1e8;
  --ash: #b0a695;
  --hairline: #332e26;
  --brand: #c99a5b;
  --brand-dark: #a6793e;
  --brand-soft: rgba(201, 154, 91, 0.18);
  --plum: #fb7185;
  --plum-soft: rgba(251, 113, 133, 0.18);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.16);
  --mint: #34d399;
  --mint-soft: rgba(52, 211, 153, 0.16);
  --sky: #60a5fa;
  --sky-soft: rgba(96, 165, 250, 0.18);

  --go-surface: rgba(52, 211, 153, 0.16);
  --go-border: var(--mint);
  --go-ink: var(--ink);

  --mint-solid: #34d399;
  --mint-solid-hover: #5ee0b0;
  --mint-solid-active: #10b981;
  --sky-solid: #3b82f6;

  --tint-mint: rgba(52, 211, 153, 0.09);
  --tint-amber: rgba(251, 191, 36, 0.09);
  --tint-sky: rgba(96, 165, 250, 0.08);
  --tint-plum: rgba(251, 113, 133, 0.09);

  --lift: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.45);
  --lift-strong: 0 2px 6px rgba(0, 0, 0, 0.50), 0 24px 60px rgba(0, 0, 0, 0.60);
  --hairline-strong: rgba(255, 255, 255, 0.24);
  --free-soft: rgba(52, 211, 153, 0.12);
  --on-accent: #05140f;
  --champagne: #d4b483;

  /* Sötét lapon a tengerkék VILÁGOSODIK, különben beleolvad a papírba. */
  --navy: #7aa3cc;

  /* A fém sötét lapon is fém: csak a fényforrás kerül lejjebb. */
  --metal-top: #3a3a38;
  --metal-bottom: #23241f;
  --metal-edge: #4b4b46;
}

/*
 * RÖGZÍTETT VILÁGOS OLDALAK. A vendég nyitóoldala és a belépő nem üzemi
 * kijelző: a telefon mentett témája nem fordíthatja őket sötétre. A body-n
 * lévő tokenek az html.qb-dark értékeit is felülírják.
 */
.qb-fixed-light {
  --paper: #f1eadf;
  --surface: #fffdf8;
  --ink: #1b1915;
  --ash: #746c61;
  --hairline: #d8cbbb;
  --hairline-strong: rgba(27, 25, 21, 0.22);
  --brand: #a6793e;
  --brand-dark: #765329;
  --brand-soft: rgba(166, 121, 62, 0.14);
  --plum: #e11d48;
  --plum-soft: rgba(225, 29, 72, 0.12);
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --mint: #10a37f;
  --mint-soft: rgba(16, 163, 127, 0.16);
  --sky: #2563eb;
  --sky-soft: rgba(37, 99, 235, 0.14);
  --free-soft: rgba(16, 163, 127, 0.10);
  --tint-mint: rgba(16, 163, 127, 0.07);
  --tint-amber: rgba(217, 119, 6, 0.07);
  --tint-sky: rgba(37, 99, 235, 0.06);
  --tint-plum: rgba(225, 29, 72, 0.06);
  --mint-solid: #08775b;
  --mint-solid-hover: #06654d;
  --mint-solid-active: #054f3d;
  --sky-solid: #2563eb;
  --go-surface: var(--mint-soft);
  --go-border: var(--mint);
  --go-ink: var(--ink);
  --on-accent: #fff;
  --lift: 0 1px 2px rgba(27, 25, 21, 0.05), 0 8px 24px rgba(27, 25, 21, 0.10);
  --lift-strong: 0 2px 4px rgba(27, 25, 21, 0.08), 0 18px 48px rgba(27, 25, 21, 0.18);
  --champagne: #b08d57;

  /*
   * FÉM ÉS TENGERKÉK — A SÖTÉT TÉMÁBÓL IDE IS ÁT KELL ÍRNI.
   *
   * Ez élesben elrontott kép volt: a pincér lapja `qb-fixed-light`, de ha a
   * GÉP sötét módban áll, a `html.qb-dark` tokenjei érvényben maradnak
   * mindenre, amit ez a blokk nem ír felül. A „Kivittem" és a „Szétosztás"
   * ezért koromfekete lett egy világos lapon — úgy néztek ki, mintha ki
   * lennének kapcsolva. Ezért itt minden sötét témás tokent visszaállítunk.
   */
  --metal-top: #fbfaf7;
  --metal-bottom: #ddd6ca;
  --metal-edge: #c3b9a8;
  --navy: #24405e;

  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
}

/*
 * PINCÉR NAPPALI ÜZEM. Tiszta, nagy kontrasztú felület kültéri használatra:
 * a színek állapotot jelentenek, a szöveg pedig erős marad közvetlen fényben.
 */
.qb-daylight {
  /*
   * SZEREPSZÍNEK. A gomb színe a DOLGÁT mondja meg, nem a helyét: ugyanaz a
   * művelet az asztaltérképen és a Minden rendelés lapon ugyanúgy néz ki.
   * Az alakjukat a `szemelyzet.css` írja le, a színüket itt, a paletta
   * többi tagja mellett.
   */
  --btn-felvesz: #2563eb;
  --btn-elutasit: #be123c;
  --btn-kivisz: #24405e;
  --btn-szetoszt: #3b423c;
  --btn-fizet: var(--mint-solid);

  --paper: #f3f6f1;
  --surface: #ffffff;
  --ink: #101712;
  --ash: #435047;
  --hairline: #b9c4bb;
  --hairline-strong: rgba(16, 23, 18, 0.28);
  --brand: #9a682d;
  --brand-dark: #714414;
  --brand-soft: rgba(154, 104, 45, 0.14);
  --plum: #c51d43;
  --plum-soft: rgba(197, 29, 67, 0.14);
  --amber: #a65700;
  --amber-soft: rgba(166, 87, 0, 0.16);
  --mint: #007b57;
  --mint-soft: rgba(0, 123, 87, 0.16);
  --sky: #075fa7;
  --sky-soft: rgba(7, 95, 167, 0.15);
  --free-soft: rgba(0, 123, 87, 0.12);
  --tint-mint: rgba(0, 123, 87, 0.10);
  --tint-amber: rgba(166, 87, 0, 0.11);
  --tint-sky: rgba(7, 95, 167, 0.10);
  --tint-plum: rgba(197, 29, 67, 0.10);
  --mint-solid: #006a4a;
  --mint-solid-hover: #00563c;
  --mint-solid-active: #004431;
  --sky-solid: #075b9d;
  --go-surface: var(--mint-soft);
  --go-border: var(--mint);
  --go-ink: var(--ink);
  --on-accent: #fff;
  --lift: 0 1px 2px rgba(16, 23, 18, 0.10), 0 5px 16px rgba(16, 23, 18, 0.09);
  --lift-strong: 0 2px 4px rgba(16, 23, 18, 0.13), 0 12px 28px rgba(16, 23, 18, 0.15);
  --champagne: #8f642d;

  /*
   * FÉM ÉS TENGERKÉK — A SÖTÉT TÉMÁBÓL IDE IS ÁT KELL ÍRNI.
   *
   * Ez élesben elrontott kép volt: a pincér lapja `qb-fixed-light`, de ha a
   * GÉP sötét módban áll, a `html.qb-dark` tokenjei érvényben maradnak
   * mindenre, amit ez a blokk nem ír felül. A „Kivittem" és a „Szétosztás"
   * ezért koromfekete lett egy világos lapon — úgy néztek ki, mintha ki
   * lennének kapcsolva. Ezért itt minden sötét témás tokent visszaállítunk.
   */
  --metal-top: #fbfaf7;
  --metal-bottom: #ddd6ca;
  --metal-edge: #c3b9a8;
  --navy: #24405e;

  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
}

/*
 * ÜZEMI SÖTÉT — a helyiség dönti el, nem a kolléga.
 *
 * A `qb-dark` fent a SZEMÉLY választása: a saját eszközén, a saját szeme
 * szerint. Ez más: a fali kijelző és a pincér telefonja egy félhomályos
 * teremben dolgozik, ahol este a világos képernyő vakít — és a kijelző
 * előtt nem áll senki, aki átkapcsolná. Ezért a `body`-n ül, tehát a
 * kapcsoló állásától függetlenül érvényes.
 *
 * E-PAPÍR sötétben: fekete alapon NEM fehér. A tiszta fehér egy sötét
 * képernyőn ég, és a betűk szélén szétfolyik a fény. Papíron sincs
 * önvilágító fehér — ott a tinta sötét, a lap világos; megfordítva a lap
 * sötét, a tinta VILÁGOS SZÜRKE. A kontraszt így is 11:1 fölött marad.
 *
 * HŐSKÁLA, nem pasztell: a lágy bíbor sötét képernyőn rózsaszínnek látszott,
 * egy konyhában pedig a rózsaszín nem jelent semmit. Zöld → sárga → kék →
 * piros, a megszokott sorrendben; a pirosat csak az kapja, ami tényleg
 * elakadt. Ha az öt perces rendelés is piros lenne, egy óra múlva a szín
 * nem jelentene semmit.
 */
.qb-shift {
  --paper: #100e0b;
  --surface: #1f1c17;
  --hairline: #332e26;
  --ink: #f2eee5;
  --ash: #b0a695;
  --brand: #c99a5b;
  --brand-dark: #a6793e;
  --brand-soft: rgba(201, 154, 91, 0.18);

  --mint: #34d399;
  --amber: #fbbf24;
  --sky: #60a5fa;
  --plum: #fb7185;

  /* Tele akcentuson SÖTÉT a felirat: ezek a színek világosak. */
  --on-accent: #05140f;

  /*
   * A SZÁRMAZÉKOK IS KELLENEK, különben a lap sötét, a komponensek viszont
   * világosban gondolkodnak tovább. A kijelző ezt megúszta, mert ott minden
   * komponens újra van írva (kijelzo.css) — a pincér viszont a KÖZÖS
   * komponenseket használja, és azok ezekből a tokenekből élnek.
   *
   * A tintek 5-6%-ról 12%-ra nőttek. Világos lapon a halvány derengés elég,
   * sötéten viszont eltűnik: a 0,055-ös zöld a #0a0c0e-n mérhetetlen, tehát
   * a szabad asztal ugyanúgy nézett ki, mint az üres hely.
   */
  --tint-mint: rgba(52, 211, 153, 0.12);
  --tint-amber: rgba(251, 191, 36, 0.12);
  --tint-sky: rgba(96, 165, 250, 0.12);
  --tint-plum: rgba(251, 113, 133, 0.12);

  --mint-soft: rgba(52, 211, 153, 0.20);
  --amber-soft: rgba(251, 191, 36, 0.20);
  --sky-soft: rgba(96, 165, 250, 0.20);
  --plum-soft: rgba(251, 113, 133, 0.20);
  --free-soft: rgba(52, 211, 153, 0.14);

  /* Tömör akcentus: sötéten maga a szín, nem a világoshoz sötétített árnyalat. */
  --mint-solid: #34d399;
  --mint-solid-hover: #5ee0b0;
  --mint-solid-active: #10b981;
  --sky-solid: #3b82f6;

  /* A „mehet" felület: sötéten áttetsző zöld, nem világos pasztell tábla. */
  --go-surface: rgba(52, 211, 153, 0.18);
  --go-border: var(--mint);
  --go-ink: var(--ink);

  /* Sötét lapon a fekete tintával számolt árnyék nem látszik; a fény sem. */
  --lift: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.45);
  --lift-strong: 0 2px 6px rgba(0, 0, 0, 0.50), 0 24px 60px rgba(0, 0, 0, 0.60);
  --hairline-strong: rgba(255, 255, 255, 0.24);

  --champagne: #d4b483;

  background: var(--paper);
  color: var(--ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: var(--paper);
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 * JAVÍTÁS: A BODY FLEX OSZLOP LÉGYEN
 * ═══════════════════════════════════════════════════════════════════════
 *
 * A `body` BLOKK marad, de flex oszlopként működik, hogy a lábléc
 * a lap aljára kerülhessen (`margin-top: auto`).
 */
body {  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }}

.is-hidden {
  display: none !important;
}

/* ── Tipográfia ────────────────────────────────────────────────────────── */

.qb-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.qb-sub {
  margin: 8px 0 0;
  color: var(--ash);
  font-size: 0.875rem;
}

.qb-badge,
.qb-tag,
.qb-link,
.qb-field__label {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* ── Fejléc ────────────────────────────────────────────────────────────── */

.qb-header__row,
.qb-tablesheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.qb-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}

.qb-link:hover {
  text-decoration-color: currentColor;
}

/* ── Értesítő sáv ──────────────────────────────────────────────────────── */

.qb-notice {
  padding: 14px 18px;
  background: var(--amber-soft);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.qb-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--plum-soft);
  border: 1px solid var(--plum);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.qb-section__title,
.qb-menusec__title,
.qb-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.qb-page > .qb-h2,
.qb-page > h2 {
  margin: 44px 0 4px;
}

.qb-page > h2 {
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.qb-page > h2:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.qb-page > h2[id] {
  scroll-margin-top: 18px;
}

/*
 * A KISZERELÉS ÉS A JELVÉNYEK EGY SORBAN. A `block` miatt a „Népszerű" és
 * a kedvezmény-jelvény külön sorba tört a „0,25 l" ALÁ — három sor egy
 * terméknek, ahol kettő is elég. Egy sorban a szem is együtt olvassa őket:
 * mekkora, és mi jellemző rá.
 */
/* ── Gombok ────────────────────────────────────────────────────────────── */

.qb-btn {
  min-height: var(--tap);
  padding: 10px 18px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease,
              transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

/*
 * A SEMLEGES GOMB ALAPJA. Eddig CSAK a `.qb-daylight` alatt volt megadva,
 * tehát a tulajdonosi lapokon (világos alapon) egy áttetsző keretű, szín
 * nélküli folt lett belőle — és pont ilyen az elfogyott-jelzés „Rendben"
 * gombja, ami a `lib/admin-nav.php`-ból MINDEN admin lapra kimegy.
 *
 * Itt a paletta közös tokenjeiből épül, tehát mindenhol működik. A
 * személyzeti felület ezt felülírja (`.qb-daylight .qb-btn--semleges`,
 * két osztály, tehát nyer) — a megmunkált változat ott marad.
 */
.qb-btn--semleges {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}

.qb-btn--semleges:hover {
  border-color: var(--hairline-strong);
}

.qb-btn:active {
  transform: translateY(1px);
}

/*
 * PRÉMIUM ÉRZET — RÉTEG, NEM DÍSZ.
 *
 * Nincs színátmenet és nincs csillogás: az egy műszak alatt százszor
 * megnyomott gombon a dísz fárasztó, és az első zsíros ujjlenyomat alatt
 * úgyis eltűnik. Ami drágának érződik, az három olcsó dolog:
 *
 *  - egy HAJSZÁLNYI belső fény a gomb tetején (`inset` felül), amitől a
 *    felület domborúnak látszik, anélkül hogy bárki átmenetet látna;
 *  - egy LÁGY ÁRNYÉK, ami a gombot a lap fölé emeli — színes gombon a saját
 *    színéből, hogy ne szürküljön be a hangulat;
 *  - a lenyomás, ami ELVESZI mindkettőt: a gomb tényleg belesüpped.
 *
 * A `--tap` magasság, a lapos kitöltés és az 5 px alatti kerekítés marad.
 */

.qb-btn--mint,

.qb-btn--primary,

.qb-btn--danger,

.qb-btn--felvesz,

.qb-btn--elutasit,

.qb-btn--kivisz,

.qb-btn--szetoszt,

.qb-btn--szerkeszt,

.qb-btn--torol,

.qb-btn--fizet {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(27, 25, 21, 0.10),
    0 2px 8px rgba(27, 25, 21, 0.09);
}

.qb-btn--mint:hover,

.qb-btn--primary:hover,

.qb-btn--danger:hover,

.qb-btn--felvesz:hover,

.qb-btn--elutasit:hover,

.qb-btn--kivisz:hover,

.qb-btn--szetoszt:hover,

.qb-btn--szerkeszt:hover,

.qb-btn--torol:hover,

.qb-btn--fizet:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(27, 25, 21, 0.12),
    0 6px 16px rgba(27, 25, 21, 0.14);
}

/* Lenyomva a gomb BELESÜPPED: az árnyék eltűnik, a fény befelé fordul. */

.qb-btn--mint:active,

.qb-btn--primary:active,

.qb-btn--danger:active,

.qb-btn--felvesz:active,

.qb-btn--elutasit:active,

.qb-btn--kivisz:active,

.qb-btn--szetoszt:active,

.qb-btn--szerkeszt:active,

.qb-btn--torol:active,

.qb-btn--fizet:active {
  box-shadow: inset 0 2px 5px rgba(27, 25, 21, 0.22);
}

/*
 * A HALK GOMB is kap egy leheletnyi emelést — enélkül a színes gombok
 * mellett laposnak és inaktívnak látszott, pedig ugyanúgy megnyomható.
 */
.qb-btn--ghost:active {
  box-shadow: inset 0 2px 4px rgba(27, 25, 21, 0.10);
}

/* A letiltott gomb NEM emelkedik: ami nem nyomható, az ne is kínálja magát. */
.qb-btn[disabled],
.qb-btn[aria-disabled="true"] {
  box-shadow: none;
}

/*
 * A HALK GOMB IS DOMBORÚ, csak halkabban: felül a lap fehérje, alul a
 * papír színe. Színes gombok mellett enélkül lapos foltnak látszott.
 */
.qb-btn--ghost,
.qb-buttons a,
.qb-ikongomb {
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  border-color: var(--hairline);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(27, 25, 21, 0.06);
}

.qb-buttons a:hover,
.qb-ikongomb:hover {
  border-color: var(--hairline-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 5px rgba(27, 25, 21, 0.10);
}

.qb-buttons a:active,
.qb-ikongomb:active {
  box-shadow: inset 0 2px 4px rgba(27, 25, 21, 0.14);
}

.qb-btn--ghost:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 3px rgba(27, 25, 21, 0.10);
}

/*
 * A TÖMÖR GOMB DOMBORÚ — EGY KÉPLET, VÁLTOZÓ SZÍNNEL.
 *
 * Függőleges átmenet: fent a szín világosabb, középen maga a szín, lent
 * sötétebb — a keret pedig még sötétebb. Ettől a felület domborúnak
 * látszik, és a gomb megnyomhatónak. A pincér-felület (`szemelyzet.css`)
 * régóta ezt viseli; a tulajdonosi lapokon lapos színfoltok álltak.
 *
 * A képlet EGY helyen van, a variáns csak a `--btn-szin`-t adja meg. Öt
 * másolatból öt kicsit más gomb lenne, és a hetediknél már senki nem
 * tudná, melyik a helyes.
 */
.qb-btn--primary,
.qb-btn--mint,
.qb-btn--szerkeszt,
.qb-btn--torol,
.qb-buttons a.is-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-szin) 86%, #fff) 0%,
    var(--btn-szin) 52%,
    color-mix(in srgb, var(--btn-szin) 92%, #000) 100%);
  border-color: color-mix(in srgb, var(--btn-szin) 66%, #000);
  color: var(--on-accent);
  font-weight: 700;
}

.qb-btn--primary,
.qb-btn--mint,
.qb-buttons a.is-primary {
  --btn-szin: var(--mint-solid);
}

/* Rámutatáskor az egész felület egy fokkal világosabb — mintha közelebb jönne. */
.qb-btn--primary:hover,
.qb-btn--mint:hover,
.qb-btn--szerkeszt:hover,
.qb-btn--torol:hover,
.qb-buttons a.is-primary:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-szin) 78%, #fff) 0%,
    color-mix(in srgb, var(--btn-szin) 94%, #fff) 52%,
    var(--btn-szin) 100%);
}

/*
 * LENYOMVA MEGFORDUL AZ ÁTMENET, és a vetett árnyék helyére belső árnyék
 * kerül. Ettől a gomb tényleg belesüpped — a puszta elmozdítás csak
 * csúsztat, nem nyom.
 */
.qb-btn--primary:active,
.qb-btn--mint:active,
.qb-btn--szerkeszt:active,
.qb-btn--torol:active,
.qb-buttons a.is-primary:active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--btn-szin) 92%, #000) 0%,
    var(--btn-szin) 60%,
    color-mix(in srgb, var(--btn-szin) 88%, #fff) 100%);
}

.qb-btn--primary:focus-visible,
.qb-btn--mint:focus-visible,
.qb-cartbar:focus-visible,
.qb-heti__kosar:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mint) 38%, transparent);
  outline-offset: 3px;
}

/* ── Szemantikus gombszínek ────────────────────────────────────────────
 *
 * A SZÍN JELENTÉS, NEM DÍSZ. Egy műszakban ezeket százszor nyomják meg; ha
 * a törlés ugyanolyan szürke, mint az átnevezés, előbb-utóbb elmegy alatta
 * egy termék. A szín az egyetlen, ami periférián is látszik.
 *
 *   zöld  — MENTÉS, felvétel: amivel befejezel valamit
 *   kék   — SZERKESZTÉS: átviszi máshová, de nem változtat semmin
 *   piros — TÖRLÉS, elfogyott: amitől eltűnik valami a vendég elől
 *   borostyán — KIEMELÉS: figyelemre tesz, nem vesz el
 *   halk  — RENDEZÉS és minden más: a sorrend nem döntés, csak elrendezés
 *
 * Mindegyik ugyanazt a felületet viseli (belső fény + lágy árnyék + valódi
 * lenyomás), csak a színük más — a kéz így egy nyelvet tanul meg.
 */

/*
 * A KIEMELÉS BOROSTYÁN: figyelemre tesz, de nem vesz el semmit — a piros
 * itt hazudna, a zöld pedig azt sugallná, hogy elmentettél valamit.
 */
.qb-btn--wide {
  flex: 1 1 auto;
  justify-content: center;
}

.qb-btn--primary[disabled],
.qb-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

/*
 * Itt CSAK a lapos kitöltés kell. A szöveg színét és vastagságát a fenti
 * gombcsoport (`.qb-btn--primary, … , .qb-buttons a.is-primary`) már
 * ugyanezekkel az értékekkel megadta — megismételve két helyen kellene
 * karbantartani ugyanazt.
 */
.qb-buttons a.is-primary {
  background: var(--mint-solid);
  border-color: var(--mint-solid);
}

.qb-chip.is-active,

.qb-lang.is-active,

.qb-optbtn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.qb-btn--sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 0.8125rem;
}

.qb-btn.is-confirm {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--on-accent);
  font-weight: 700;
  animation: qb-pulse 1.2s ease-in-out infinite;
}

.qb-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.qb-stepper button {
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  cursor: pointer;
}

.qb-stepper span {
  width: 32px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
}

/* ── Alsó lapok ────────────────────────────────────────────────────────── */

.qb-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.qb-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 0;
  cursor: pointer;
}

.qb-sheet__panel,
.qb-tape {
  position: relative;
  max-height: 88dvh;
  overflow-y: auto;
  animation: qb-sheet-up 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qb-sheet__panel {
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--lift-strong);
}

@keyframes qb-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.qb-sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.qb-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.qb-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
}

.qb-sheet__body + .qb-sheet__body {
  padding-top: 0;
}

/*
 * HAPPY HOUR: az eredeti ár áthúzva az akciós mellett. Halványabb és
 * kisebb — a fizetendő szám a hangsúlyos, ez csak a viszonyítás.
 */
/*
 * NÉPSZERŰ TÉTEL. A lángot SZÖVEG kíséri: magában legfeljebb csípősnek
 * látszana, és pont az ellenkezőjét mondaná, mint amit akarunk. A chili
 * mellett áll a sorban, ezért nem viheti el a hangsúlyt tőle — az a
 * vendég döntése, ez csak ajánlás.
 */
.qb-hit__ikon {
  width: 14px;
  height: 14px;
}

/*
 * KEDVEZMÉNY-JELVÉNY. Az áthúzott ár megmutatja, hogy olcsóbb; ez megmondja,
 * miért. A „Népszerű" mellett áll a sorban, de nem versenyzik vele:
 * az ajánlás a vendégek döntése, ez a hely ajánlata.
 */
/* ── Mezők ─────────────────────────────────────────────────────────────── */

.qb-field {
  display: block;
}

.qb-field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--ash);
  /* A betűt a fenti `.qb-badge, .qb-tag, .qb-link, .qb-field__label` csoport
     adja; itt megismételve csak két helyen kellene karbantartani. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}

/*
 * MINDEN VEZÉRLŐ UGYANÚGY NÉZ KI — a `.qb-field`-en kívüliek is.
 *
 * A termékadat-sorok és a beszúró űrlapok mezői nincsenek `.qb-field`-be
 * csomagolva, ezért NYERS böngésző-alapértelmezéssel jelentek meg: fehér
 * háttér, 2 képpontos szürke keret, 1 képpont belső margó — a fölöttük
 * lévő szép mezők mellett úgy néztek ki, mint egy félkész lap.
 *
 * A szelektorokat ehhez a szabályhoz adjuk, nem külön blokkba: két
 * másolatból előbb-utóbb kétféle mező lenne.
 */
.qb-field input,
.qb-field textarea,
.qb-field select,
.qb-adatsor__row input,
.qb-napok input[type="time"],
.qb-rename input[type="text"],
.qb-rename input[type="number"],
.qb-rename select {
  width: 100%;
  /*
   * KÖZÖS FELSŐ MARGÓ. A `select` és a `textarea` 8 képpontot kapott, a
   * sima `input` nullát — egy rácssorban ettől a legördülő NYOLC
   * KÉPPONTTAL lejjebb ült, mint a mellette lévő szövegmező. Egy sorban
   * négy vezérlő, kettő magasabban: pont az, ami rendetlennek látszik,
   * és semmi nem mondja meg, miért.
   */
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  resize: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.qb-field input:focus,
.qb-field textarea:focus,
.qb-field select:focus,
.qb-adatsor__row input:focus,
.qb-napok input[type="time"]:focus,
.qb-rename input:focus,
.qb-rename select:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
  outline: none;
}

.qb-field input::placeholder,
.qb-field textarea::placeholder,
.qb-adatsor__row input::placeholder,
.qb-rename input::placeholder {
  color: var(--ash);
}

.qb-field__hint {
  color: var(--ash);
  font-size: 0.85rem;
}

/*
 * ZÁROLT KAPCSOLÓ. Ugyanaz a csúszka, csak megfogyatkozva: látszik, hogy
 * kapcsoló volna, és látszik, hogy nem a tiéd. Nem tüntetjük el és nem
 * cseréljük másik alakú gombra — a szem így minden sorban ugyanott találja
 * ugyanazt az elemet.
 */
.qb-kozl__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qb-kozl__amount {
  margin: 0;
  line-height: 1.2;
}

.qb-kozl__sum {
  font-family: var(--font-mono);
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.qb-kozl__unit {
  color: var(--ash);
  font-size: 0.86em;
}

.qb-kozl__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: 1 0 100%;
  margin: 2px 0 0;
  color: var(--ash);
  font-size: 0.75em;
  line-height: 1.35;
}

@keyframes qb-tape-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qb-tape__opts,
.qb-tape__linenote,
.qb-item__opts {
  margin: 2px 0 0;
  padding-left: 28px;
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

.qb-course__mode,
.qb-course__quick,
.qb-course__pick {
  border: 1px solid #cbd8d1;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #32473e;
  font: inherit;
  cursor: pointer;
}
.qb-coursechip { display: inline-flex; width: fit-content; margin-top: .35rem; padding: .2rem .5rem; border-radius: var(--radius-pill); background: #fff0d4; color: #855612; font-size: .75rem; font-weight: 800; }
.qb-coursechip.is-held { border: 1px solid #e3b86e; }
.qb-catcard__icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  color: var(--cat, var(--mint));
}

/* Kategóriaszínek */
/* A fizetési döntés is ugyanazt a zöld műveleti nyelvet használja. */
[data-pay-form] .qb-chip.is-active {
  background: var(--mint-solid);
  border-color: var(--mint-solid);
  color: #fff;
}

.qb-order__code,
.qb-tablecard__state {
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

.qb-order__total,
/*
 * A VÉGÖSSZEG SAJÁT SORA. Ezt a számot mondja ki a kolléga a vendégnek —
 * a kártya alján ez a legnagyobb dolog, és egyedül áll. Korábban a gombok
 * mellé szorult apró, egysoros feliratként, a gombon MEGISMÉTELVE.
 */
/*
 * JOBBRA ZÁRVA. Középen a címke és a szám együtt lebegett a kártya
 * közepén, sehova sem igazodva; a jobb szél viszont fix vonal — a szem
 * ugyanoda tér vissza minden kártyán, és a számokat így lehet FÜGGŐLEGESEN
 * összevetni, ahogy a számlákon szokás.
 */
.qb-card__total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 2px 0 6px;
}

@keyframes qb-step-flow {
  to { background-position: -200% 0; }
}

@keyframes qb-step-pulse {
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--amber) 9%, transparent); }
}

@keyframes qb-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes qb-belep {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * MIND EGY SORBAN, AMÍG BEFÉR.
 *
 * A `45%` alapszélesség kettesével törte a gombokat, a fizetés pedig külön
 * teljes sort kapott — négy gomb így HÁROM sorba került, és a kártya
 * kétszer olyan magas lett, mint a rendelés, amiről szól. A pincér a
 * listában egymás alatt látja az asztalokat: ott minden fölösleges sor egy
 * asztallal kevesebbet jelent a képernyőn.
 *
 * AZ ALAPSZÉLESSÉG DÖNT, NEM MÉDIALEKÉRDEZÉS. Előbb `@media (max-width:
 * 560px)` állt itt — csakhogy az a NÉZETABLAKOT méri, nem a kártyát: széles
 * képernyőn egy keskeny kártya nem tört volna, keskeny ablakban egy széles
 * kártya viszont igen. A `96px`/`140px` alapszélesség magát a kártyát nézi:
 * amíg elfér négy gomb, egy sorban maradnak; ha nem, kettesével törnek.
 * Mérve: 640 és 520 képpontos kártyán egy sor, 343-on kettő — mindkettőn
 * túlcsordulás nélkül, pedig a `.qb-btn` `nowrap`.
 *
 * A gombok száma az asztal állapotától függ, egytől négyig — fix oszlopszám
 * ezért nem jó.
 */
/*
 * A FIZETÉS A LEGSZÉLESEBB a sorban: rajta az összeg is ott van, és ez az
 * egyetlen gomb, ami PÉNZT zár le. A duplázott alapszélesség nem külön sor,
 * csak nagyobb szelet ugyanabból.
 */
.qb-actions,
.qb-optgroup__list{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/*
 * AZ ALLERGÉNJEGY BRONZ, körvonallal.
 *
 * Volt piros, tömör kitöltéssel — és ott ült három sorral a piros
 * késés-jelzés alatt, ugyanabban a színben. A pulton a piros a BAJ színe
 * (elakadt rendelés, vendég jelzése); ha az allergén is az, a szem egy hét
 * alatt megtanulja, hogy ne nézzen oda. A bronz a márka színe: kiemel, de
 * nem riaszt — a jegy alakja és a címke-ikon viszi a figyelmet.
 */
/* ── Üres állapot ──────────────────────────────────────────────────────── */

.qb-empty {
  max-width: 420px;
  margin: 0 auto;
  padding: 96px 20px;
  text-align: center;
}

.qb-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.qb-empty p {
  margin: 8px 0 0;
  color: var(--ash);
  font-size: 0.9rem;
}

/* ── Egyszerű oldalak ──────────────────────────────────────────────────── */

.qb-page {
  max-width: var(--page-read);
  margin: 0 auto;
  padding: 32px var(--page-pad) 64px;
}

.qb-page h1 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.qb-page > .qb-lead {
  max-width: 68ch;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}

.qb-page h2 {
  margin: 48px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.qb-lead {
  margin: 16px 0 0;
  color: var(--ash);
  line-height: 1.55;
}

.qb-eyebrow {
  margin: 0;
  color: var(--mint);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qb-buttons,
.qb-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.qb-langs .qb-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.qb-langs .qb-lang:hover {
  border-color: var(--mint);
}

.qb-buttons a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
}

/*
 * A `.qb-page h2` (0,1,1) erősebb, mint egy sima osztály (0,1,0), és 48
 * pixel felső margót ad — a panelen belül ez a 24 pixel belső margóval
 * együtt 72 pixel üres sáv volt a cím fölött. Egy fokkal fajsúlyosabb
 * választó a helyes válasz, nem `!important`.
 */
/*
 * IKONGOMB — négyzetes, keretes, csak jellel.
 *
 * Az étlapsorban hat szöveges gomb szélesebb volt, mint maga a termék neve.
 * Ez a gomb a HELYET spórolja, nem a jelentést: a `title` és az `aria-label`
 * a markupban marad, tehát egérrel odaérve kiírja magát, felolvasóval
 * felolvassa. Ikon önmagában sosem elég — csak akkor jó, ha van mellette
 * szöveg valahol.
 *
 * A méret 36px: hüvelykujjal is eltalálható, de nem uralja a sort.
 */
/* BEKAPCSOLT ÁLLAPOT: a kiemelt termék és az elfogyott jelölése. */
/* ── Admin navigáció ───────────────────────────────────────────────────── */

/*
 * A FEJLÉCSÁV a lap tetején ragad, és a görgetett tartalom ALATTA fut el.
 * Áttetsző alapon, elmosással: így látszik, hogy a lap mozog, de a menü
 * olvasható marad.
 */
/*
 * A LAPVÁLASZTÓ CSÚSZKA (szegmens-kapcsoló).
 *
 * Eddig két szabadon álló pirula volt, és az aktívat egy tömör barna folt
 * jelölte — két különálló GOMB, nem egy választó. A pincér viszont nem két
 * dolog közül nyom meg egyet, hanem ÁTVÁLT: a két lap ugyanannak a
 * munkának a két nézete.
 *
 * A süllyesztett sín és a KIEMELKEDŐ aktív szegmens ezt mondja ki: a
 * kapcsoló egy darab, a fogantyú benne csúszik. A `transition` a
 * háttéren és az árnyékon van, tehát a váltás nem villan, hanem MOZDUL —
 * `prefers-reduced-motion` mellett a globális szabály úgyis leállítja.
 */
/* A FOGANTYÚ: világos lap, ami kiemelkedik a sínből. */
/*
 * A CSOMAG-JELVÉNY LEVÁLIK A NÉVRŐL.
 *
 * Eddig csak színt kapott, margót nem — a menüben ezért „ÁllomásokPro"
 * állt egybeírva. Kis emelt jelvény lett belőle: a szem külön szónak
 * látja, és a zárolás oka egy pillantásból megvan.
 */
/*
 * A FÜLEK GÉPEN A SZÖVEGÜKHÖZ IGAZODNAK.
 *
 * Telefonon a teljes szélesség helyes: ott a hüvelykujjnak nagy cél kell.
 * Nagy képernyőn viszont két szó nyúlt szét fél méteren, és a sáv úgy
 * nézett ki, mintha valami hiányozna belőle. A `--navsor-min` alatt marad
 * a régi, nyújtott viselkedés.
 */
/*
 * A LENYÍLÓ PANEL: MENÜ, NEM SZÜRKE TÖMB.
 *
 * A csoportok ugyanazt a `.qb-buttons` dobozt használták, mint a fülsáv —
 * ott a keretes, kitöltött blokk helyes (az AKTÍV lapot jelöli), itt
 * viszont három szürke hasáb lett belőle, amiben a menüpontok elvesztek.
 * A panelben a menüpont egy SOR: teljes szélességű, saját tapadási
 * felülettel, és csak az aktív kap kitöltést.
 */
/* Az AKTÍV menüpont a panelben is kitöltött — ott tartunk éppen. */
/* A csoportcímek közé vékony vonal: a szem így látja, hol kezdődik az új. */
/*
 * LOGÓ — NÉV / BEOSZTÁS — KILÉPÉS.
 *
 * Három dolog, három hely, minden lapon ugyanott. A név és a beosztás
 * EGYMÁS ALATT áll, nem egy sorban: így a név marad a hangsúlyos (azt
 * olvassa el a kolléga, hogy jó fiókban van-e), a beosztás pedig halkan
 * megerősíti, mit szabad neki. Egy sorban a kettő egyenrangúnak látszott,
 * és a hosszabb nevek mellett tördelt is.
 */
.qb-page code {
  overflow-wrap: anywhere;
}

@media print {
  .qb-page h1,
  .qb-lead,
  .qb-eyebrow {
    display: none;
  }
}

/* ── PIN-váltó ─────────────────────────────────────────────────────────── */

/* ── Több asztal kijelölése (foglalás) ─────────────────────────────────── */

.qb-page.is-saving {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.12s linear;
}

/* ── Nyelvek ───────────────────────────────────────────────────────────── */

.qb-lang__flag {
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
}

.qb-flag {
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--hairline-strong);
}

/* ── Termékképek ───────────────────────────────────────────────────────── */

@keyframes qb-ring {
  0% {
    box-shadow: 0 0 0 0 var(--ring);
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ── Fizetés ───────────────────────────────────────────────────────────── */

.qb-payrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.qb-payrow__name {
  flex: 1 1 auto;
  min-width: 0;
}

.qb-payrow__sum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.qb-payrow.is-done .qb-payrow__name,
.qb-payrow.is-done .qb-payrow__sum {
  color: var(--ash);
}

.qb-payrow__detail {
  margin: 4px 0 0;
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.qb-payrow--total .qb-payrow__name,
.qb-payrow--total .qb-payrow__sum {
  color: var(--ash);
}

.qb-payrow--total.is-grand .qb-payrow__name,
.qb-payrow--total.is-grand .qb-payrow__sum {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.qb-paysummary .qb-payrow:last-of-type {
  border-bottom: 0;
}

.qb-payitem__hint.is-done {
  color: var(--mint);
}

/* ── Közös személyzeti chat ───────────────────────────────────────────── */

.qb-staffchatbackdrop {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(20, 24, 22, 0.42);
  backdrop-filter: blur(2px);
}

.qb-staffchatfab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  z-index: 86;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 15px;
  background: var(--mint-solid);
  border: 1px solid var(--mint-solid);
  border-radius: var(--radius-pill);
  box-shadow: var(--lift-strong);
  color: var(--on-accent);
  font: 750 0.84rem/1 var(--font-body);
  cursor: pointer;
}

.qb-staffchatfab:hover,
.qb-staffchatfab.has-unread {
  background: var(--mint-solid-hover);
  border-color: var(--mint-solid-hover);
}

.qb-staffchatfab.has-unread {
  box-shadow: 0 0 0 6px var(--mint-soft), var(--lift-strong);
}

.qb-staffchatfab > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.qb-staffchatfab__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  background: var(--plum);
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  color: #fff;
  font: 800 0.7rem/1 var(--font-body);
}

.qb-staffchat {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 36px));
  height: min(610px, calc(100dvh - 150px));
  min-height: 360px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-strong);
  color: var(--ink);
  animation: qb-chat-in 0.18s ease-out;
}

.qb-staffchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  background: color-mix(in srgb, var(--surface) 90%, var(--mint-soft));
  border-bottom: 1px solid var(--hairline);
}

.qb-staffchat__head .qb-eyebrow {
  margin: 0 0 3px;
  color: var(--mint-solid);
}

.qb-staffchat__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
}

.qb-staffchat__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ash);
  font: 400 1.55rem/1 var(--font-body);
  cursor: pointer;
}

.qb-staffchat__layout {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

.qb-staffchat__threads {
  min-width: 0;
  padding: 14px 10px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--paper) 75%, var(--surface));
  border-right: 1px solid var(--hairline);
}

.qb-staffchat__threads-title {
  margin: 0 7px 9px;
  color: var(--ash);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.qb-staffchat__threads ul,
.qb-staffchat__messages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qb-staffchat__thread {
  width: 100%;
  padding: 10px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.qb-staffchat__thread strong,
.qb-staffchat__thread span {
  display: block;
  overflow-wrap: anywhere;
}

.qb-staffchat__thread span {
  margin-top: 3px;
  color: var(--ash);
  font-size: 0.7rem;
}

.qb-staffchat__thread.is-active {
  background: var(--surface);
  border-color: var(--mint);
  box-shadow: 0 2px 8px rgba(20, 24, 22, 0.07);
}

.qb-staffchat__thread.is-pending span {
  color: var(--mint-solid);
  font-weight: 800;
}

.qb-staffchat__conversation,
.qb-staffchat__active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.qb-staffchat__empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--ash);
  text-align: center;
}

.qb-staffchat__empty strong {
  color: var(--ink);
}

.qb-staffchat__table {
  margin: 0;
  padding: 11px 15px;
  background: var(--mint-soft);
  border-bottom: 1px solid var(--hairline);
  color: var(--mint-solid);
  font-size: 0.82rem;
  font-weight: 800;
}

.qb-staffchat__messages {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 15px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--paper) 70%, var(--surface));
}

.qb-staffchat__message {
  max-width: min(84%, calc(100% - 12px));
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.qb-staffchat__message p {
  margin: 0;
  white-space: pre-wrap;
}

.qb-staffchat__message span {
  display: block;
  margin-top: 5px;
  font-size: 0.67rem;
  font-weight: 750;
  opacity: 0.68;
}

.qb-staffchat__composer {
  flex: 0 0 auto;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.qb-staffchat__composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  max-height: 112px;
  padding: 11px 13px;
  resize: none;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: 0.88rem/1.4 var(--font-body);
}

.qb-staffchat__composer .qb-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.qb-staffchat__composer .qb-btn svg {
  width: 20px;
  height: 20px;
}

.qb-staffchat__message.is-staff,
.qb-chat__msg.is-mine {
  align-self: flex-end;
  background: var(--mint-solid);
  border-color: var(--mint-solid);
  color: var(--on-accent);
  border-bottom-right-radius: var(--radius-xs);
}

.qb-staffchat__message.is-guest,
.qb-chat__msg.is-staff {
  align-self: flex-start;
  background: var(--surface);
  border-bottom-left-radius: var(--radius-xs);
}

.qb-staffchat__composer > div,
.qb-chat__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

@keyframes qb-chat-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@media (max-width: 640px) {
  body.qb-chat-open,
  body.qb-staffchat-open {
    overflow: hidden;
  }

  .qb-chat {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    width: auto;
    height: min(72dvh, 580px);
    max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
    border-radius: var(--radius-lg);
    animation-name: qb-chat-mobile-in;
  }

  .qb-chat__head {
    padding-top: 12px;
  }

  .qb-staffchatfab {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    justify-content: center;
  }

  .qb-staffchatfab__label {
    display: none;
  }

  .qb-staffchat {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px;
    width: auto;
    height: min(84dvh, 690px);
    max-height: calc(100dvh - 34px - env(safe-area-inset-top, 0px));
    min-height: 0;
  }

  .qb-staffchat__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .qb-staffchat__threads {
    display: block;
    padding: 9px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .qb-staffchat__threads-title {
    display: none;
  }

  .qb-staffchat__threads ul {
    display: flex;
    gap: 7px;
    width: max-content;
  }

  .qb-staffchat__thread {
    width: 144px;
  }}

@keyframes qb-chat-mobile-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

/* ── Ajánló ────────────────────────────────────────────────────────────── */

.qb-suggest__head,
.qb-loyal__head,
.qb-paynotice__head,
.qb-paynotice__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

@keyframes qb-live-breath {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.qb-reco__add.is-added,
.qb-btn.is-added,
.qb-heti__kosar.is-added,
.qb-quickadd.is-added {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--on-accent);
}

@keyframes qb-carttoast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
}
/* ── Hőtérkép ──────────────────────────────────────────────────────────── */

/*
 * IKON — egyetlen alapszabály az egész felületre.
 *
 * Körvonalas, `currentColor`-ral: az ikon annak a szövegnek a színét
 * veszi fel, ami mellett áll, tehát sötét sávon is helyes marad anélkül,
 * hogy külön szabályt kellene írni rá. A mérete `em`-ben van, így a
 * szöveggel EGYÜTT nő — nem csúszik el a sor közepéről.
 */
/* Üresen csak a csendes sín látszik — nem három nulla. */
/* Ami üres, az halkabb — de olvasható marad. */
/*
 * A KRITIKUS REKESZ FEHÉR FELIRATA KIKERÜLT.
 *
 * Amíg a rekesz tömör piros doboz volt, kellett hozzá világos tinta — és
 * pont ez okozta a bajt: az ÜRES rekeszen is fehér maradt a címke, mert a
 * `.is-empty` csak a doboz színét vette vissza, a benne lévő szövegét nem.
 * A sáv ott állt a lapon, olvashatatlanul.
 *
 * A jelmagyarázat ma nem tömör doboz, hanem pötty + szám + szó a lap saját
 * papírján: nincs sötét háttér, tehát nincs mit világosra festeni. A
 * kijelzőn (`kijelzo.css`) a tömör alak megmaradt, ott a `:not(.is-empty)`
 * továbbra is kötelező.
 */

/* ── Céglogó ───────────────────────────────────────────────────────────── */

/* ── Item állapot ──────────────────────────────────────────────────────── */

.qb-itemstate,
.qb-payrow__state,
.qb-optgroup__rule {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ash);
}

/* ── Asztalfoglalás — a vendég űrlapja ─────────────────────────────────── */

/*
 * Három kérdés, három blokk: mikor, hányan, ki vagy. Egy hosszú, tagolatlan
 * mezősort a telefonon senki nem tölt ki szívesen — a csoportosítás nem
 * díszítés, hanem az, ami miatt a vendég a végére ér.
 */

@keyframes qb-done-ring {
  from {
    transform: scale(0.86);
    opacity: 0.5;
  }
  to {
    transform: scale(1.12);
    opacity: 0;
  }
}

/* ── Telefon optimalizálás ────────────────────────────────────────────── */

@media (max-width: 640px) {
  .qb-adminbar .qb-buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    mask-image: linear-gradient(to right, transparent 0, #000 12px,
                #000 calc(100% - 18px), transparent 100%);
  }
  .qb-adminbar .qb-buttons a {
    padding: 0 10px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .qb-pult__header {
    padding: 10px 0;
  }
  .qb-pult__header .qb-title {
    font-size: 1.125rem;
  }
  .qb-legend {
    gap: 4px 10px;
    font-size: 0.75rem;
  }
  .qb-tablecard {
    min-height: 96px;
  }
  .qb-tablesheet .qb-btn {
    flex: 1 1 100%;
    min-height: var(--tap);
    justify-content: center;
  }
  .qb-tablesheet__panel {
    max-height: calc(100vh - 12px);
  }
  .qb-tablesheet__head,
  .qb-tablesheet__body,
  .qb-tablesheet__actions {
    padding-right: 16px;
    padding-left: 16px;
  }
  /*
   * A FELVÉTEL ÉS A FIZETÉS TELEFONON IS EGY SORBAN. Oszlopba állítva a
   * panel aljának fele elment két gombra, és a tétellistából ugyanennyi
   * kicsúszott a képernyőről — pont az, amiért a pincér kinyitotta.
   * 155 képpont fejenként bőven eltalálható hüvelykujjal.
   */
  .qb-primary-actions .qb-btn {
    min-height: 56px;
  }
  .qb-tablesheet .qb-primary-actions .qb-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.9rem;
  }
  .qb-secondary-actions .qb-btn {
    flex: 1 1 45%;
    min-height: 44px;
    font-size: 0.8125rem;
  }
  .qb-menusec__tools .qb-btn,
  .qb-menurow__tools .qb-btn,
  .qb-table__actions .qb-btn {
    min-height: 40px;
    padding: 8px 14px;
  }
  .qb-menurow__tools,
  .qb-menusec__tools {
    margin-left: 0;
  }
  .qb-paybar__item .qb-btn {
    min-height: var(--tap);
    justify-content: center;
  }
  .qb-paybar__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .qb-paybar__amount {
    align-self: start;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .qb-paybar__done {
    grid-column: 1 / -1;
    width: 100%;
  }
  .qb-carthead {
    align-items: flex-start;
  }
  .qb-sheet.qb-sheet--cart .qb-tape .qb-cartline {
    grid-template-columns: 76px minmax(0, 1fr) auto;
  }
  .qb-sheet.qb-sheet--cart .qb-tape .qb-cartline__img {
    display: block;
    width: 76px;
    height: 76px;
  }
  .qb-heti__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-inline: 12px;
  }
  .qb-heti__kartya {
    min-height: 176px;
    padding: 11px;
  }
  .qb-heti .qb-heti__nev {
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.15;
  }
  .qb-heti__ikon {
    width: 22px;
    height: 22px;
  }
  .qb-heti__fogasok {
    padding-left: 15px;
    font-size: 0.82rem;
  }
  .qb-heti__ar {
    font-size: 0.82rem;
  }
  .qb-done {
    margin-inline: 14px;
  }
  .qb-quicksheet__panel {
    padding: 16px;
  }
  .qb-quick__item {
    padding: 10px 12px;
    font-size: 0.9rem;
  }}

@media (prefers-reduced-motion: reduce) {
  .qb-chat {
    animation: none;
    transition: none;
  }
  .qb-btn:active,
  .qb-tablecard:active {
    transform: none;
  }
  .qb-card.is-belep {
    animation: none;
  }
  .qb-card.is-overdue,
  .qb-tablecard.is-checkin {
    animation: none;
  }
  .qb-tablecard.is-friss {
    animation: none;
    box-shadow: 0 0 0 3px var(--ring);
  }
  .qb-done__mark::after {
    animation: none;
  }}

/*
 * ═══════════════════════════════════════════════════════════════════
 * KÉT FELÜLET OSZTOZIK RAJTA — ezért a közös lapon
 * ═══════════════════════════════════════════════════════════════════
 *
 * Ezek a szabályok a felületi rétegekből kerültek vissza ide, mert
 * KETTŐ felület használja őket — a réteglapok pedig soha nem töltenek
 * be együtt. Egy rétegben hagyva az egyik felület stílus nélkül jelent
 * volna meg, miközben a fejlesztői gépen jól néz ki: ott a másik lap
 * is be van töltve valahol.
 *
 * A hiba oka mindkét esetben ugyanaz: egy szkriptet KÉT lap is behúz.
 * A `fizetes.js` a vendég fizetési lapján ÉS a pincér asztaltérképén
 * fut (a tételenkénti szétosztás miatt), a `pult-kozos.js` pedig a
 * pulton ÉS a konyhai kijelzőn. A szétbontás kézzel írt forrás-listája
 * ezt nem tudta. A közös szabályok ezért ebben a stíluslapban vannak.
 */

/* ── Csipeszek ─────────────────────────────────────────────────────────── */

.qb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.qb-chip {
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.qb-chip.is-clear {
  border-style: dashed;
}

.qb-payrow--total {
  border-bottom: 0;
}

.qb-payrow--total.is-grand {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.qb-payitem {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.qb-payitem__name {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 500;
}

.qb-payitem__hint {
  margin: 8px 0 0;
  color: var(--amber);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

/*
 * ═══════════════════════════════════════════════════════════════════
 * KÉT FELÜLET OSZTOZIK RAJTA — ezért a közös lapon
 * ═══════════════════════════════════════════════════════════════════
 *
 * Ezek a szabályok a felületi rétegekből kerültek vissza ide, mert
 * KETTŐ felület használja őket — a réteglapok pedig soha nem töltenek
 * be együtt. Egy rétegben hagyva az egyik felület stílus nélkül jelent
 * volna meg, miközben a fejlesztői gépen jól néz ki: ott a másik lap
 * is be van töltve valahol.
 *
 * A hiba oka mindkét esetben ugyanaz: egy szkriptet KÉT lap is behúz.
 * A `fizetes.js` a vendég fizetési lapján ÉS a pincér asztaltérképén
 * fut (a tételenkénti szétosztás miatt), a `pult-kozos.js` pedig a
 * pulton ÉS a konyhai kijelzőn. A szétbontás kézzel írt forrás-listája
 * ezt nem tudta. A közös szabályok ezért ebben a stíluslapban vannak.
 */

/*
 * A TEREM ÁLLAPOTA EGY PANELBEN.
 *
 * Öt szám és három idősáv. Korábban egyetlen tördelt sorban álltak, és
 * telefonon szövegblokká olvadtak össze — a pultos egy pillantásra semmit
 * nem olvasott ki belőle. Most rácsban ülnek: fent a címke, alatta az ikon
 * és a szám, végül a három idősáv egy sávban.
 *
 * A KERET BRONZ HAJSZÁLVONAL, nem szürke: ez a lap első eleme, és a
 * márkaszín ott a legolcsóbb, ahol egy pixel is elég belőle.
 */
/*
 * A KETTŐ SZÉTVÁLT. Amíg közös szabály volt, az idősávok is TÖRDELŐDTEK —
 * telefonon „2 + 1" alakban, és a magára maradt harmadik sáv nem skálának
 * látszott, hanem elrontott elrendezésnek. A foglalás-sáv viszont
 * továbbra is tördelhet: ott a lista hossza változó.
 */
/*
 * A TERHELÉS-SÁV: egy csík, három arányos szakasszal.
 *
 * Ezt nem KIOLVASNI kell, hanem ránézni: ha a piros szakasz széles, baj
 * van. Három egyforma dobozban álló három szám ugyanezt csak összehasonlítás
 * után mondta el.
 */
/*
 * AZ ARÁNY OSZTÁLYBÓL JÖN, mert sorközi stílus nincs (szigorú CSP). A
 * `flex-grow` maga a darabszám: két rendelés kétszer olyan széles, mint egy.
 * A nullás szakasz ÖSSZECSUKÓDIK — nem hagy maga után üres helyet.
 */
/*
 * A JELMAGYARÁZAT egy sor: pötty, szám, idősáv. Innen kapja a sáv színe a
 * nevét — magyarázó szöveg nélkül.
 */
/*
 * `nowrap`: a „0–4 PERC" két szó, és tördelve két sorba esett — három
 * kétsoros jelmagyarázat-elem magasabb volt, mint maga a sáv, amit magyaráz.
 */
/*
 * KÉT SORNYI HELY A CÍMKÉNEK, akkor is, ha egy sor elég.
 *
 * Az „Átlagos várakozás" telefonon két sorba tört, a mellette álló „A
 * legrégebbi" nem — a két szám így egymáshoz képest elcsúszva állt, és a
 * rács szétesett. Kevesebb bajjal jár egy sornyi üres hely, mint egy
 * rövidebb, pontatlanabb címke.
 */
/*
 * AZ IKON ÉS A SZÁM EGY SORBAN. Az ikon nem díszítés: öt egyforma alakú
 * doboz közül ez választja szét, melyik szól időről és melyik darabszámról,
 * mielőtt a címkét elolvasnád.
 */
/* A piktogramot csak az arra kialakított vendégoldali díjkártya kapcsolja be. */
.qb-kozl__icon {
  display: none;
}