/*
 * VENDEGFELULET · 4/5 — MEGJELENESI RETEG (`qb-guest-premium`)
 *
 * A `body.qb-guest-premium` osztaly ad specificitas-tobbletet, amivel ez a
 * reteg legyozi a folotte levo `body.qb-guest ...` szabalyokat. A
 * `lib/header.php` teszi ki az osztalyt minden vendeglapra.
 *
 * A BETOLTESI SORREND KOTOTT, es nem izles kerdese. Ezek a fajlok EGY
 * kaszkadot alkotnak — ugyanazt, ami korabban egyetlen `vendeg.css` volt:
 *
 *   vendeg.css  ->  vendeg-vendegut.css  ->  vendeg-dizajn.css
 *               ->  vendeg-reteg.css     ->  vendeg-kartyas.css
 *
 * A darabolas BAJTRA folytonos volt: a reszek osszefuzve karakterre az
 * eredeti fajl. Ezert egyetlen szabaly sem valtoztatta a helyet a
 * kaszkadban — de csak addig, amig a sorrend ez marad. A sorrendet a
 * `lib/header.php` `$cssLapok` tombje rogziti; ott kell hozzanyulni.
 */

/* ══════════════════════════════════════════════════════════════════════════
   VENDÉGFELÜLET · MEGJELENÉSI RÉTEG  (`qb-guest-premium`)
   ══════════════════════════════════════════════════════════════════════════

   Ez nem opcionális előnézet: a `lib/header.php` MINDEN vendégoldalra
   ráteszi a `qb-guest-premium` osztályt, és mindig betölti ezt a réteget.

   A `qb-guest-premium` előtag SZÁNDÉKOSAN marad rajta. Nem dísz: ez adja azt
   a specifikussági többletet, amivel ezek a szabályok legyőzik a fenti
   `body.qb-guest ...` blokkot. Az előtag nélkül a réteg csendben elveszítené
   ezt a versenyt.
   ══════════════════════════════════════════════════════════════════════════ */

body.qb-guest-premium {
  --paper: #f4f6f1;
  --surface: #fffefa;
  --ink: #20352d;
  --ash: #748279;
  --hairline: #dce6df;
  --hairline-strong: #c8d7ce;
  --brand: #008568;
  --brand-dark: #006850;
  --brand-soft: #edf7f2;
  --mint: #008568;
  --mint-soft: #e4f4ed;
  --mint-solid: #008568;
  --mint-solid-hover: #006f57;
  --mint-solid-active: #005b47;
  --sky: #008568;
  --sky-soft: #edf7f2;
  --sky-solid: #006850;
  --tint-mint: rgba(0, 133, 104, 0.05);
  /*
   * A VENDÉGFELÜLET KEREKÍTÉSE EGYETLEN ÉRTÉK: 5px.
   *
   * Korábban ezt egy mindenre ráhúzott, `!important`-os csillagszabály
   * kényszerítette ki — amivel aztán 22 másik szabály verekedett a saját
   * `!important`-jával, és közben a körökből (a lépés-pöttyökből, a bezáró
   * X-ből) is 5px sarkú négyzet lett.
   *
   * A kalapács helyett most MINDEN kerekítési token ide mutat. Ha az egész
   * vendégoldalt kerekebbre akarod venni, itt az egy hely, ahol át kell
   * írni. Az `--edge` és a `--radius-xs` is bejön a sorba: a kalapács alatt
   * úgyis 5px-ként jelent meg mind a kettő.
   */
  --radius-xs: 5px;
  --radius-sm: 5px;
  --radius: 5px;
  --radius-lg: 5px;
  --radius-pill: 5px;
  --edge: 5px;
  --lift: 0 2px 8px rgba(28, 64, 50, 0.055);
  --lift-strong: 0 10px 34px rgba(28, 64, 50, 0.11);
  background:
    radial-gradient(800px 420px at 4% -8%, rgba(0, 133, 104, 0.07), transparent 62%),
    linear-gradient(180deg, #f7f8f4 0%, #f0f4ef 100%);
  color: var(--ink);
  color-scheme: light;
}

html:has(body.qb-guest-premium) {
  background: #f0f4ef;
  color-scheme: light;
}

/*
 * KIÍRT ÁGAK, NEM `:is()`. A csoport a LEGSPECIFIKUSABB ágának a súlyát adja
 * mindegyiknek: a `h1`, `h2`, `h3` itt osztály-szintű súlyt kapott volna
 * (mintha `.valami` lenne), és ezzel legyőzött volna minden olyan
 * címsor-szabályt, ami csak egy osztályból áll. Kiírva mindegyik a saját
 * súlyát viszi — a nagyobb szabály hosszabb, de nem hazudik a kaszkádnak.
 */
body.qb-guest-premium h1,
body.qb-guest-premium h2,
body.qb-guest-premium h3,
body.qb-guest-premium .qb-title,
body.qb-guest-premium .qb-section__title,
body.qb-guest-premium .qb-showcase__title,
body.qb-guest-premium .qb-catgrid__title,
body.qb-guest-premium .qb-sheet__title,
body.qb-guest-premium .qb-done__title,
body.qb-guest-premium .qb-farewell__thanks {
  color: var(--ink);
  letter-spacing: -0.028em;
}

body.qb-guest-premium.qb-guest > main,
body.qb-guest-premium .qb-statusmain {
  width: min(calc(100% - 28px), 1040px);
}

body.qb-guest-premium .qb-statusmain {
  max-width: 760px;
}

/* Fejléc: halk tájékozódási pont, nem külön óriáskártya. */
body.qb-guest-premium .qb-header {
  width: min(calc(100% - 28px), 1040px);
  margin: 10px auto 12px;
  padding: 11px 13px;
  background: rgba(255, 254, 250, 0.88);
  border: 1px solid var(--hairline);
  box-shadow: 0 3px 14px rgba(28, 64, 50, 0.05);
  backdrop-filter: blur(12px);
}

body.qb-guest-premium .qb-header__row {
  align-items: center;
  gap: 11px;
}

body.qb-guest-premium .qb-header__logo {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: none;
}

body.qb-guest-premium .qb-header .qb-title {
  font-size: clamp(1.02rem, 3.3vw, 1.18rem);
  font-weight: 760;
}

body.qb-guest-premium .qb-header .qb-sub {
  margin-top: 1px;
  color: var(--ash);
  font-size: 0.72rem;
}

body.qb-guest-premium .qb-header__meta {
  gap: 12px;
  margin-top: 7px;
}

body.qb-guest-premium .qb-header .qb-badge,
body.qb-guest-premium .qb-header__orders {
  min-height: 26px;
  padding: 4px 7px;
  background: transparent;
  border-color: var(--hairline);
  color: var(--brand-dark);
  font-size: 0.72rem;
  box-shadow: none;
}

body.qb-guest-premium .qb-header__orders {
  border: 0;
}

body.qb-guest-premium .qb-header__loyal {
  margin-left: auto;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-langs {
  gap: 2px;
  padding: 2px;
  background: #f6f8f4;
  border: 1px solid var(--hairline);
  box-shadow: none;
}

body.qb-guest-premium .qb-lang {
  min-width: 28px;
  min-height: 27px;
  padding: 4px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.qb-guest-premium .qb-lang.is-active {
  background: #fff;
  border-color: var(--hairline);
}

/* Egységes műveletek és mezők. */
/*
 * KIÍRT ÁGAK, NEM `:is()` — SZÁNDÉKOSAN.
 *
 * Ez a csoport `:is(...)`-szel volt írva, és a `:is()` a LEGSPECIFIKUSABB
 * ágának a súlyát adja MINDEGYIK ágnak. A `.qb-buttons a.is-primary` ág
 * miatt az egész csoport (0,3,2) lett — így a benne szereplő egyszerű
 * `.qb-cartbar` is (0,3,2)-vel versenyzett, és legyőzte az alsó dokk
 * `body.qb-guest-premium .qb-guestdock .qb-cartbar` (0,3,1) szabályát.
 * Eredmény: a dokk három pirulájából kettő sötét lett, a kosáré világos —
 * nem döntés volt, hanem mellékhatás.
 *
 * Kiírt ágakkal mindegyik a saját súlyát viszi, és a rá vonatkozó
 * pontosabb szabály tud fölé kerülni. Hosszabb, de nem hazudik.
 */
body.qb-guest-premium .qb-btn--primary,
body.qb-guest-premium .qb-btn--mint,
body.qb-guest-premium .qb-buttons a.is-primary,
body.qb-guest-premium .qb-cartbar {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 3px 9px rgba(0, 104, 80, 0.14);
}

body.qb-guest-premium .qb-btn--primary:hover,
body.qb-guest-premium .qb-btn--mint:hover,
body.qb-guest-premium .qb-buttons a.is-primary:hover,
body.qb-guest-premium .qb-cartbar:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

body.qb-guest-premium :is(.qb-btn--ghost, .qb-buttons a:not(.is-primary)) {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink);
  box-shadow: none;
}

body.qb-guest-premium :is(input, textarea, select) {
  background: #fff;
  border-color: var(--hairline-strong);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(32, 53, 45, 0.025);
}

body.qb-guest-premium :is(input, textarea, select):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 133, 104, 0.12);
  outline: 0;
}

body.qb-guest-premium :focus-visible {
  outline: 3px solid rgba(0, 133, 104, 0.25);
  outline-offset: 3px;
}

body.qb-guest-premium :is(.qb-link, .qb-header__orders, .qb-linkbtn,
  .qb-suggest__no, .qb-buzzer__tobb) {
  color: var(--brand-dark);
  text-decoration-color: rgba(0, 104, 80, 0.32);
  text-underline-offset: 3px;
}

/* Szekciók és kártyák: fehér felület, vékony vonal, csak leheletnyi mélység. */
body.qb-guest-premium :is(.qb-showcard, .qb-catcard, .qb-heti__kartya, .qb-product, .qb-cartline, .qb-course, .qb-done, .qb-buzzer, .qb-order, .qb-suggest, .qb-loyal, .qb-farewell, .qb-cartreco, .qb-paysummary) {
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: var(--lift);
}

body.qb-guest-premium :is(.qb-showcard, .qb-catcard, .qb-heti__kartya,
  .qb-product, .qb-suggest__item) {
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1),
              border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.qb-guest-premium :is(.qb-showcard, .qb-catcard, .qb-heti__kartya,
    .qb-product, .qb-suggest__item):hover {
    border-color: #bed4c7;
    box-shadow: 0 7px 20px rgba(28, 64, 50, 0.085);
    transform: translateY(-2px);
  }
}

body.qb-guest-premium .qb-showcase {
  margin-bottom: 24px;
  padding-top: 20px;
}

/* A személyes kedvencek és az étterem ajánlatai vezetik a kezdőlapot. */
body.qb-guest-premium .qb-homeflow {
  display: flex;
  flex-direction: column;
}

body.qb-guest-premium .qb-homeflow > .qb-personal { order: 1; }
body.qb-guest-premium .qb-homeflow > .qb-showcase--featured { order: 2; }
body.qb-guest-premium .qb-homeflow > .qb-heti { order: 3; }
body.qb-guest-premium .qb-homeflow > .qb-catgrid__title { order: 4; }
body.qb-guest-premium .qb-homeflow > .qb-catgrid { order: 5; }
body.qb-guest-premium .qb-homeflow > .qb-homeinfo { order: 6; }

body.qb-guest-premium .qb-personal {
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  box-shadow: none;
}

body.qb-guest-premium .qb-personal__head {
  box-sizing: border-box;
  width: 100%;
  padding: 9px var(--main-pad-x, 14px);
}

body.qb-guest-premium .qb-personal__details > .qb-showcase__list {
  box-sizing: border-box;
  width: 100%;
  padding: 4px var(--main-pad-x, 14px) 14px;
}

body.qb-guest-premium .qb-personal__details .qb-showcase__item,
body.qb-guest-premium .qb-personal__details .qb-showcard {
  max-width: 100%;
}

body.qb-guest-premium .qb-personal__details[open] .qb-personal__chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

body.qb-guest-premium .qb-homeinfo {
  margin: 6px 0 22px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

body.qb-guest-premium .qb-homeinfo__head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 2px;
  color: var(--ash);
  font-size: 0.82rem;
  font-weight: 750;
}

body.qb-guest-premium .qb-homeinfo__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--brand-dark);
  font: 800 0.72rem/1 var(--font-body);
}

body.qb-guest-premium .qb-personal__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

body.qb-guest-premium .qb-homeinfo .qb-fees {
  margin: 0;
  padding: 4px 0 14px;
}

body.qb-guest-premium .qb-showcase__title,
body.qb-guest-premium .qb-catgrid__title {
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  font-weight: 760;
}

body.qb-guest-premium .qb-showcase__lead {
  margin-top: 3px;
  color: var(--ash);
  font-size: 0.82rem;
}

body.qb-guest-premium .qb-showcase__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  gap: 11px;
}

body.qb-guest-premium .qb-showcard {
  padding: 0;
  overflow: hidden;
}

body.qb-guest-premium .qb-showcard__img {
  aspect-ratio: 4 / 3;
  background: #edf1e9;
}

/*
 * A JOBB OLDALI HELY A GOMBÉ. Fix 42 pixel volt, miközben a gomb 36 + 8
 * pixel térközzel 44-et foglal — a név utolsó betűje a gomb alá csúszhatott.
 * Most a fenntartott sáv ugyanabból a két tokenből számol, amiből a gomb
 * mérete: ha a gomb nő, a szöveg magától hátrébb lép.
 */
/*
 * A JOBB OLDALI FENNTARTOTT SÁV MEGSZŰNT. Amíg a kosárgomb a kártya JOBB
 * ALSÓ sarkában ült, a szövegnek ki kellett kerülnie — ezért volt 60 pixel
 * üres hely a jobb szélen. A gomb azóta a FELSŐ sarokba költözött (a
 * kivágott sarokjel), a fenntartott sáv viszont ottmaradt: a nevet
 * szűkítette, az árat pedig 61 pixellel a kártya széle elé tolta.
 */
body.qb-guest-premium .qb-showcard__body {
  gap: 3px;
  min-height: 88px;
  padding: 11px 12px;
}

body.qb-guest-premium .qb-showcard__name {
  font-size: 0.92rem;
  line-height: 1.28;
}
/*
 * A HOZZÁADÁS GOMB EGYETLEN LEÍRÁSA. A méretet, színt és sarkot a
 * `--add-*` tokenek adják (lásd lejjebb a `body.qb-guest-premium`
 * tokenblokkot). Aki új helyre tesz kosárgombot, csak ezt a listát
 * bővítse — ne írjon rá újabb szabályt.
 */
/*
 * ══════════════════════════════════════════════════════════════════════
 * A NYITVATARTÁS A MOTTÓ SORÁBAN · keret nélkül
 * ══════════════════════════════════════════════════════════════════════
 *
 * Bekeretezett, kitöltött jelvény volt a fejléc alsó sávjában. Egy fejlécen
 * belül három bekeretezett doboz (asztalszám, nyitvatartás, nyelvválasztó)
 * már nem tagolás, hanem zaj — mindegyik ugyanolyan hangosan kéri a
 * figyelmet, pedig csak az egyik művelet.
 *
 * Itt nem doboz kell, hanem MONDAT: a pont él (nyitva vagyunk), a szöveg
 * halkabb, mint a mottó, az időpont pedig kiemelve. A keret és a kitöltés
 * elment; a szeparátor egy vékony függőleges vonal, ha van mottó előtte.
 */
body.qb-guest-premium .qb-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

body.qb-guest-premium .qb-sub .qb-openhours {
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--brand-dark);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Elválasztó vonal CSAK akkor, ha van előtte mottó. */
body.qb-guest-premium .qb-sub__text + .qb-openhours::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 11px;
  margin-right: 4px;
  background: var(--hairline-strong);
}

body.qb-guest-premium .qb-sub .qb-openhours__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

body.qb-guest-premium .qb-sub .qb-openhours b {
  color: var(--ink);
}

/*
 * ══════════════════════════════════════════════════════════════════════
 * „BEKERÜLT A KOSÁRBA" · a koppintás visszajelzése
 * ══════════════════════════════════════════════════════════════════════
 *
 * A gomb eddig csak kicserélte a „+"-t pipára, és feldobott egy csíkot a
 * lap alján. Telefonon, hüvelykujjal a gomb FÖLÖTT, ebből semmi nem
 * látszott: a vendég nem tudta, hogy a koppintás megtörtént-e, és sokan
 * kétszer nyomtak rá.
 *
 * Két jel megy egyszerre, mindkettő OTT, ahol az ujj van: a gomb behúz és
 * kipattan (a fizikai gombnyomás mozdulata), a kártya pedig egy pillanatra
 * zöld gyűrűt kap — az utóbbi mondja meg, MELYIK termék ment be, ha a
 * vendég gyorsan egymás után nyom kettőt.
 *
 * A `is-added` osztályt a `menu.js` teszi rá 2,4 másodpercre; itt csak
 * megjelenítjük. A mozgáscsökkentést a lap végi blokk intézi.
 */
@keyframes qb-add-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(0.84); }
  60%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

@keyframes qb-add-ack {
  0%   { box-shadow: 0 0 0 0 rgba(0, 133, 104, 0.42), 0 10px 28px rgba(23, 57, 46, 0.09); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 133, 104, 0.10), 0 10px 28px rgba(23, 57, 46, 0.09); }
  100% { box-shadow: 0 0 0 0 rgba(0, 133, 104, 0), 0 10px 28px rgba(23, 57, 46, 0.09); }
}


body.qb-guest-premium .qb-showcard:has(.is-added),
body.qb-guest-premium .qb-reco:has(.is-added),
body.qb-guest-premium .qb-cartreco__item:has(.is-added),
body.qb-guest-premium .qb-section > .qb-list .qb-productrow:has(.is-added) .qb-product {
  border-color: var(--brand);
  animation: qb-add-ack 700ms ease-out;
}

/*
 * ══════════════════════════════════════════════════════════════════════
 * TERMÉKADATOK · egységes ikon és érték
 * ══════════════════════════════════════════════════════════════════════
 *
 * Minden adat ugyanazt a kompakt sort használja. A színes SVG-korongból
 * gyorsan felismerhető a tápérték típusa, mellette a címke és az érték
 * együtt marad; saját szöveg esetén sem törik szét a szerkezet.
 */
body.qb-guest-premium .qb-specs {
  display: grid;
  /* A hosszabb saját adatoknak is marad olvasható szélesség. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 15px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  list-style: none;
}

body.qb-guest-premium .qb-spec {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  background: rgba(255, 254, 250, 0.78);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(24, 55, 43, 0.045);
  text-align: left;
}

body.qb-guest-premium .qb-spec__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: #65746e;
  border-radius: 50%;
}

body.qb-guest-premium .qb-spec__icon svg {
  width: 19px;
  height: 19px;
}

body.qb-guest-premium .qb-spec--energy .qb-spec__icon { background: #f26b4b; }
body.qb-guest-premium .qb-spec--protein .qb-spec__icon { background: #d93339; }
body.qb-guest-premium .qb-spec--carbs .qb-spec__icon { background: #4f8f12; }
body.qb-guest-premium .qb-spec--fat .qb-spec__icon { background: #f0a11f; }
body.qb-guest-premium .qb-spec--salt .qb-spec__icon { background: #2875c7; }

body.qb-guest-premium .qb-spec__copy {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  text-align: left;
}

body.qb-guest-premium .qb-spec__label {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: normal;
}

body.qb-guest-premium .qb-spec__value {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
  /*
   * `break-word`, NEM `anywhere`: csak akkor vág bele egy szóba, ha az
   * magában sem fér ki. Az `anywhere` a „Magyarország"-ot is eltörte
   * „Magyaro / rszág"-ra, pedig kifért volna.
   */
  overflow-wrap: break-word;
  hyphens: auto;
}

/*
 * A SAROKJELET VISELŐ KÁRTYÁK KÖZÖS ÍVE. A kivágott sarok csak akkor
 * olvasható „a kártyából kiharapva"-ként, ha a gomb külső íve PONTOSAN a
 * kártyáé. Ezért egy token adja mindkettőt, és ezért kell az `overflow`
 * is: a gomb a kártya sarkához ér, a kártya vágja le a fölösleget.
 */
body.qb-guest-premium :is(.qb-showcard, .qb-catcard, .qb-heti__kartya,
  .qb-reco, .qb-cartreco__item, .qb-suggest__item) {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
}

body.qb-guest-premium .qb-showcard__cart,
body.qb-guest-premium .qb-quickadd,
body.qb-guest-premium .qb-reco__add,
body.qb-guest-premium .qb-suggest__add,
body.qb-guest-premium .qb-heti__kosar,
body.qb-guest-premium .qb-cartreco__item > .qb-btn {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--add-size);
  min-width: var(--add-size);
  height: var(--add-size);
  min-height: var(--add-size);
  margin: 0;
  padding: 0;
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  border-radius: var(--add-notch) 0 var(--add-scoop) 0;
  color: var(--add-fg);
  box-shadow: var(--add-shadow);
  -webkit-backdrop-filter: blur(11px) saturate(1.08);
  backdrop-filter: blur(11px) saturate(1.08);
}

/* Az ikon is egy méret — a 17/18/19/21 pixeles változatok helyett. */
body.qb-guest-premium .qb-showcard__cart svg,
body.qb-guest-premium .qb-quickadd svg,
body.qb-guest-premium .qb-reco__add svg,
body.qb-guest-premium .qb-suggest__add svg,
body.qb-guest-premium .qb-heti__kosar svg,
body.qb-guest-premium .qb-cartreco__item > .qb-btn svg {
  width: var(--add-icon);
  height: var(--add-icon);
  color: currentColor;
}

body.qb-guest-premium .qb-showcard__cart:hover,
body.qb-guest-premium .qb-quickadd:hover,
body.qb-guest-premium .qb-reco__add:hover,
body.qb-guest-premium .qb-suggest__add:hover,
body.qb-guest-premium .qb-heti__kosar:hover,
body.qb-guest-premium .qb-cartreco__item > .qb-btn:hover,
body.qb-guest-premium .qb-showcard__cart:focus-visible,
body.qb-guest-premium .qb-quickadd:focus-visible,
body.qb-guest-premium .qb-reco__add:focus-visible,
body.qb-guest-premium .qb-suggest__add:focus-visible,
body.qb-guest-premium .qb-heti__kosar:focus-visible,
body.qb-guest-premium .qb-cartreco__item > .qb-btn:focus-visible {
  background: var(--add-bg-hover);
  border-color: var(--add-bg-hover);
  color: var(--add-fg-hover);
}


/* Kategóriák és terméklista. */
body.qb-guest-premium .qb-catgrid {
  gap: 11px;
}

body.qb-guest-premium .qb-catcard {
  min-height: 104px;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

body.qb-guest-premium .qb-catcard__media {
  background: #edf1e9;
}

body.qb-guest-premium .qb-catcard--foto {
  min-height: 205px;
}

body.qb-guest-premium .qb-catcard__foto {
  min-height: 138px;
}

body.qb-guest-premium .qb-catcard__text,
body.qb-guest-premium .qb-catcard--foto .qb-catcard__text {
  min-height: 65px;
  margin-top: auto;
  padding: 11px calc(var(--add-size) + var(--add-inset) * 2) 11px 12px;
  background: var(--surface);
}

body.qb-guest-premium .qb-catcard__name {
  font-size: 0.94rem;
}

body.qb-guest-premium .qb-catcard__count {
  color: var(--ash);
}

/*
 * A KATEGÓRIA SAROKIKONJA NEM GOMB. Ugyanabban a sarokban ül, mint a
 * kosárgomb, ezért a térköze közös — de a kinézete szándékosan halvány
 * menta marad, míg a kosárgomb tömör zöld lett. Korábban a kettő pontosan
 * egyformán nézett ki: a vendég ugyanazt a formát látta kattinthatóként
 * és díszként.
 */
body.qb-guest-premium .qb-catcard__cornericon,
body.qb-guest-premium .qb-catcard--foto .qb-catcard__icon {
  right: var(--add-inset);
  bottom: var(--add-inset);
  top: auto;
  left: auto;
  width: 30px;
  height: 30px;
  padding: 6px;
  background: var(--mint-soft);
  border: 1px solid #b9dbc9;
  color: var(--brand-dark);
  box-shadow: none;
}

body.qb-guest-premium .qb-catcard__ghost {
  opacity: 0.045;
}

body.qb-guest-premium .qb-catnav {
  background: rgba(244, 246, 241, 0.9);
  border-color: var(--hairline);
  backdrop-filter: blur(12px);
}

body.qb-guest-premium .qb-catnav__inner {
  width: min(100%, 1040px);
  margin-inline: auto;
}

body.qb-guest-premium :is(.qb-catnav__btn, .qb-catnav__back, .qb-chip) {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ash);
  box-shadow: none;
}

body.qb-guest-premium :is(.qb-catnav__btn, .qb-chip).is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.qb-guest-premium .qb-product {
  min-height: 100px;
  border-color: var(--hairline);
}

body.qb-guest-premium .qb-product__img {
  background: #edf1e9;
}

body.qb-guest-premium .qb-akciojel {
  margin-top: 4px;
  padding: 3px 7px;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  font-size: 0.68rem;
  box-shadow: none;
}

body.qb-guest-premium .qb-akciojel::before {
  display: none;
}

/* Allergének: zárt állapotban egyetlen halk sor, nyitva rendezett panel. */
body.qb-guest-premium .qb-allergens-reopen {
  width: min(calc(100% - 28px), 1040px);
  margin: 2px auto 12px;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--ash);
  box-shadow: none;
}

body.qb-guest-premium .qb-allergens {
  width: min(calc(100% - 28px), 1040px);
  margin: 4px auto 12px;
  padding: 14px;
  background: rgba(255, 254, 250, 0.9);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
}

body.qb-guest-premium .qb-allergens .qb-chips {
  gap: 6px;
}

body.qb-guest-premium .qb-allergens .qb-chip {
  min-height: 38px;
  font-size: 0.74rem;
}

/* Elviteli díj: ugyanaz a kompakt szerkezet, csendesebb prémium felületen. */
body.qb-guest-premium .qb-fees .qb-kozl.qb-kozl--fee {
  background: #f2f7ed;
  border-color: #c9ddd0;
  box-shadow: 0 5px 15px rgba(28, 64, 50, 0.065);
}

body.qb-guest-premium .qb-fees .qb-kozl.qb-kozl--fee::before {
  background: var(--brand);
}

body.qb-guest-premium .qb-fees .qb-kozl--fee .qb-kozl__amount {
  border-left-color: #ccdccc;
}

body.qb-guest-premium .qb-fees .qb-kozl--fee .qb-kozl__sum {
  color: var(--ink);
}

/* Terméklap, kosár és fizetés: egyetlen papír- és összegnyelv. */
/*
 * A LAPPANEL NÉGY SARKA. A `style.css` csak a két FELSŐ sarkot kerekíti
 * (`var(--radius-lg) var(--radius-lg) 0 0`) — az admin felületeken ez a
 * helyes. A vendégoldalon viszont a régi `!important`-os kalapács mind a
 * négy sarkot 5px-re állította, és a panel így is nézett ki. A kalapács
 * elment, ez a sor tartja meg ugyanazt a képet.
 */
body.qb-guest-premium .qb-sheet__panel {
  border-radius: var(--radius);
}

body.qb-guest-premium :is(.qb-sheet__panel, .qb-tape, .qb-chat,
  .qb-ertesitesablak) {
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: 0 18px 60px rgba(20, 47, 37, 0.17);
}

body.qb-guest-premium :is(.qb-sheet__head, .qb-sheet__foot, .qb-carthead,
  .qb-chat__head, .qb-chat__composer, .qb-ertesitesablak__zar) {
  background: rgba(255, 254, 250, 0.94);
  border-color: var(--hairline);
  backdrop-filter: blur(14px);
}

body.qb-guest-premium :is(.qb-sheet__backdrop, .qb-chatbackdrop),
body.qb-guest-premium .qb-ertesitesablak::backdrop {
  background: rgba(20, 40, 32, 0.48);
  backdrop-filter: blur(5px);
}

/* Chat: ugyanaz a visszafogott papír, vonal és zöld hangsúly, mint az étlapon. */


body.qb-guest-premium .qb-chat {
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: min(390px, calc(100vw - 28px));
  height: min(540px, calc(100dvh - 96px));
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 18px 58px rgba(20, 47, 37, 0.18);
}

body.qb-guest-premium .qb-chat__head {
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

body.qb-guest-premium .qb-chat__identity {
  width: 36px;
  height: 36px;
  background: var(--mint-soft);
  border: 1px solid #c5dfd2;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-chat__identity svg {
  width: 19px;
  height: 19px;
}

body.qb-guest-premium .qb-chat__title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

body.qb-guest-premium .qb-chat__status {
  margin-top: 1px;
  color: var(--ash);
  font-size: 0.71rem;
}

body.qb-guest-premium .qb-chat__status span {
  width: 6px;
  height: 6px;
  background: var(--brand);
  box-shadow: none;
}

body.qb-guest-premium .qb-chat__close {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  color: var(--ash);
}

body.qb-guest-premium .qb-chat__close:hover {
  background: #f6f8f4;
  border-color: var(--hairline);
  color: var(--ink);
}

body.qb-guest-premium .qb-chat__conversation {
  padding: 14px;
  background: #f6f8f4;
}

body.qb-guest-premium .qb-chat__list {
  gap: 8px;
  scrollbar-color: #c5d5cc transparent;
}

body.qb-guest-premium .qb-chat__msg {
  max-width: min(84%, calc(100% - 12px));
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  box-shadow: none;
  color: var(--ink);
}

body.qb-guest-premium .qb-chat__msg.is-mine {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.qb-guest-premium .qb-chat__msg.is-staff {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}

body.qb-guest-premium .qb-chat__msg .qb-chat__meta {
  margin-top: 4px;
  font-size: 0.64rem;
  font-weight: 650;
  opacity: 0.62;
}

body.qb-guest-premium .qb-chat__composer {
  padding: 10px 11px calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

body.qb-guest-premium .qb-chat__hint {
  margin-bottom: 7px;
  color: var(--ash);
  font-size: 0.71rem;
}

body.qb-guest-premium .qb-chat__form textarea {
  min-height: 42px;
  padding: 10px 12px;
  background: #f8faf6;
  border-color: var(--hairline-strong);
  font-size: 0.86rem;
}

body.qb-guest-premium .qb-chat__form textarea:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 133, 104, 0.11);
}

body.qb-guest-premium .qb-chat__send {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
}

body.qb-guest-premium .qb-sheet__figure img {
  background: #edf1e9;
}

body.qb-guest-premium .qb-sheet__price,
body.qb-guest-premium .qb-tape .qb-cartline__amount {
  color: var(--ink);
  font-weight: 750;
}

body.qb-guest-premium .qb-sheet .qb-tape .qb-cartline {
  background: #fff;
  border-color: var(--hairline);
  box-shadow: none;
}

body.qb-guest-premium .qb-sheet .qb-tape .qb-tapesum {
  background: var(--mint-soft);
  border: 1px solid #c9dfd3;
  box-shadow: none;
}

body.qb-guest-premium .qb-sheet .qb-tape .qb-tape__sub,
body.qb-guest-premium .qb-sheet .qb-tape .qb-tape__note {
  color: var(--ash);
}

body.qb-guest-premium .qb-sheet .qb-tape .qb-tape__total {
  border-top-color: #c9dfd3;
}

body.qb-guest-premium .qb-sheet .qb-tape :is(.qb-tape__totallabel,
  .qb-tape__totalvalue) {
  color: var(--ink);
}

body.qb-guest-premium .qb-carthead__summary {
  background: var(--mint-soft);
  border: 1px solid #c9dfd3;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-cartempty {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  background: color-mix(in srgb, var(--mint-soft) 58%, #fff);
  border: 1px dashed var(--hairline-strong);
  border-radius: 10px;
  color: var(--ink);
}

body.qb-guest-premium .qb-cartempty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-cartempty__svg {
  width: 22px;
  height: 22px;
}

body.qb-guest-premium .qb-cartempty__copy {
  display: grid;
  gap: 3px;
}

body.qb-guest-premium .qb-cartempty__copy strong {
  font-size: 0.9rem;
}

body.qb-guest-premium .qb-cartempty__copy small {
  color: var(--ash);
  font-size: 0.76rem;
  line-height: 1.35;
}

body.qb-guest-premium .qb-guestdock [data-cart-submit]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Rendeléskövetés és sikerállapot. */
body.qb-guest-premium .qb-statusmain > :is(.qb-done, .qb-buzzer,
  .qb-orders, .qb-suggest, .qb-loyal, .qb-farewell) {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

body.qb-guest-premium .qb-done {
  padding: 24px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--brand);
  box-shadow: var(--lift);
}

body.qb-guest-premium .qb-done__mark {
  width: 54px;
  height: 54px;
  background: transparent;
  color: var(--brand);
  box-shadow: none;
}

body.qb-guest-premium .qb-done__mark::after {
  display: none;
}

body.qb-guest-premium .qb-done__mark svg {
  width: 34px;
  height: 34px;
}

body.qb-guest-premium .qb-done__code {
  background: #f7f8f4;
  border-color: var(--hairline);
}

body.qb-guest-premium .qb-buzzer {
  border-left: 2px solid var(--brand);
}

body.qb-guest-premium .qb-order {
  padding: 17px;
  box-shadow: var(--lift);
}

body.qb-guest-premium .qb-order .qb-live,
body.qb-guest-premium .qb-issuebox.is-ack {
  background: var(--mint-soft);
  border-color: #c9dfd3;
}

body.qb-guest-premium .qb-steps li.is-now::before {
  background: var(--brand);
  animation: none;
}

body.qb-guest-premium .qb-steps li.is-now .qb-steps__dot {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--mint-soft);
}

body.qb-guest-premium .qb-steps li.is-now .qb-steps__dot::after {
  background: var(--brand);
}

body.qb-guest-premium .qb-steps li.is-now .qb-steps__label {
  color: var(--brand-dark);
}

body.qb-guest-premium .qb-tape__delivered.is-served {
  background: transparent;
  border: 0;
  color: var(--brand);
  box-shadow: none;
}

body.qb-guest-premium .qb-loyal,
body.qb-guest-premium .qb-suggest,
body.qb-guest-premium .qb-farewell {
  border-color: var(--hairline);
  box-shadow: var(--lift);
}

/* Dokumentum- és foglalási vendégoldalak is ugyanazt a felületet kapják. */
body.qb-guest-premium .qb-page--doc {
  width: min(calc(100% - 28px), 42rem);
  margin: 28px auto;
  padding: clamp(20px, 4vw, 34px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
}

body.qb-guest-premium .qb-page--doc > h1 {
  margin-bottom: 8px;
}

body.qb-guest-premium .qb-page--doc > .qb-lead {
  color: var(--ash);
}
body.qb-guest-premium .qb-pagefoot {
  background: transparent;
  border-color: var(--hairline);
}


/* Mozgás: rövid és funkcionális; a tartalom nem úszkál. */
body.qb-guest-premium main > section,
body.qb-guest-premium .qb-statusmain > :is(.qb-done, .qb-buzzer, .qb-orders) {
  animation: qb-premium-preview-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}

body.qb-guest-premium .qb-sheet:not(.is-hidden) :is(.qb-sheet__panel, .qb-tape),
body.qb-guest-premium .qb-chat:not(.is-hidden),
body.qb-guest-premium .qb-ertesitesablak[open] {
  animation: qb-premium-preview-panel 220ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes qb-premium-preview-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qb-premium-preview-panel {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 900px) {
  body.qb-guest-premium .qb-catgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.qb-guest-premium .qb-catcard--foto {
    min-height: 228px;
  }

  body.qb-guest-premium .qb-catcard__foto {
    min-height: 158px;
  }
}

@media (max-width: 560px) {
  body.qb-guest-premium.qb-guest > main,
  body.qb-guest-premium .qb-statusmain {
    width: 100%;
  }

  body.qb-guest-premium .qb-header {
    width: calc(100% - 20px);
  }

  body.qb-guest-premium .qb-showcase__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.qb-guest-premium .qb-showcase__item:nth-child(n + 3) {
    display: none;
  }

  body.qb-guest-premium .qb-showcard__body {
    min-height: 76px;
    padding: 9px;
  }

  body.qb-guest-premium .qb-catcard--foto {
    min-height: 174px;
  }

  body.qb-guest-premium .qb-catcard__foto {
    min-height: 108px;
  }

  body.qb-guest-premium .qb-allergens {
    width: calc(100% - 20px);
  }

  body.qb-guest-premium .qb-chat {
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    left: 6px;
    width: auto;
    height: min(72dvh, 560px);
    max-height: calc(100dvh - 66px - env(safe-area-inset-top, 0px));
  }

}