/*
 * VENDEGFELULET · 3/5 — VEGSO VENDEG-DIZAJNRENDSZER
 *
 * A kozos formanyelv: arnyekok, sarkok, tipografiai finomhangolas. Azert
 * all a komponensek UTAN, mert felulirja oket — ez a sorrend maga a
 * mukodes.
 *
 * 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` `$vendegLapok` tombje rogziti; ott kell hozzanyulni.
 */

/* ═══════════════════════════════════════════════════════════════════════
   VÉGSŐ VENDÉG-DIZÁJNRENDSZER
   Egy paletta, egy mélységskála, egy mozgásnyelv az étlapon és a követőn.
   ═══════════════════════════════════════════════════════════════════════ */

body.qb-guest {
  --paper: #f1f5f0;
  --surface: #fffefa;
  --ink: #17251f;
  --ash: #65736c;
  --hairline: #d6e0d9;
  --hairline-strong: rgba(23, 37, 31, 0.22);
  --brand: #109675;
  --brand-dark: #08775b;
  --brand-soft: rgba(16, 150, 117, 0.13);
  --mint: #10a37f;
  --mint-soft: rgba(16, 163, 127, 0.13);
  --mint-solid: #08775b;
  --mint-solid-hover: #06664e;
  --mint-solid-active: #054f3d;
  --sky: #278b75;
  --sky-soft: rgba(39, 139, 117, 0.13);
  --sky-solid: #19755f;
  --tint-mint: rgba(16, 163, 127, 0.065);
  --radius-xs: 4px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 17px;
  --radius-pill: 13px;
  --lift: 0 2px 5px rgba(24, 55, 43, 0.045),
          0 9px 25px rgba(24, 55, 43, 0.075);
  --lift-strong: 0 4px 10px rgba(24, 55, 43, 0.07),
                 0 22px 52px rgba(24, 55, 43, 0.13);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(16, 163, 127, 0.12), transparent 58%),
    radial-gradient(760px 480px at 102% 18%, rgba(16, 163, 127, 0.075), transparent 62%),
    linear-gradient(180deg, #f6f7f1 0%, #edf3ee 100%);
  color: var(--ink);
}

html:has(body.qb-guest) {
  background: #edf3ee;
}

body.qb-guest .qb-header {border-radius: var(--radius);}

body.qb-guest .qb-header__logo {  border-color: color-mix(in srgb, var(--mint) 22%, var(--hairline));
  border-radius: var(--radius);}

body.qb-guest .qb-header .qb-badge,
body.qb-guest .qb-cathead__badge,
body.qb-guest .qb-chat__identity {
  background: var(--mint-soft);
  border-color: color-mix(in srgb, var(--mint) 28%, var(--hairline));
  color: var(--mint-solid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body.qb-guest .qb-btn,
body.qb-guest button,
body.qb-guest a,
body.qb-guest input,
body.qb-guest textarea,
body.qb-guest select {
  -webkit-tap-highlight-color: transparent;
}

body.qb-guest .qb-btn,
body.qb-guest .qb-quickadd,
body.qb-guest .qb-reco__add,
body.qb-guest .qb-heti__kosar,
body.qb-guest .qb-cartbar {
  transition: transform 160ms cubic-bezier(.2, .8, .2, 1),
              box-shadow 160ms ease,
              background-color 160ms ease,
              border-color 160ms ease;
}

body.qb-guest .qb-btn--primary,
body.qb-guest .qb-btn--mint,
body.qb-guest .qb-buttons a.is-primary {border-radius: var(--radius);}

body.qb-guest .qb-btn--ghost,
body.qb-guest .qb-buttons a:not(.is-primary) {
  background: rgba(255, 255, 255, 0.78);
  border-color: color-mix(in srgb, var(--mint) 18%, var(--hairline));
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(24, 55, 43, 0.05);
}

body.qb-guest :is(input, textarea, select) {border-radius: var(--radius);transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body.qb-guest :is(input, textarea, select):focus {
  background: #fff;}

body.qb-guest .qb-chip,
body.qb-guest .qb-catnav__btn,
body.qb-guest .qb-catnav__back,
body.qb-guest .qb-lang {
  border-radius: var(--radius);
  transition: transform 150ms ease, background 150ms ease,
              color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

body.qb-guest .qb-chip.is-active,
body.qb-guest .qb-catnav__btn.is-active {
  background: linear-gradient(145deg, #109675, var(--mint-solid));
  border-color: var(--mint-solid);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 6px 15px rgba(8, 119, 91, 0.16);
}

body.qb-guest :is(.qb-showcard, .qb-catcard, .qb-heti__kartya,
  .qb-product, .qb-cartline, .qb-tapesum, .qb-course,
  .qb-done, .qb-buzzer, .qb-order, .qb-suggest, .qb-loyal,
  .qb-farewell, .qb-cartreco, .qb-paysummary) {
  border-color: color-mix(in srgb, var(--mint) 18%, var(--hairline));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), var(--lift);
}

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

body.qb-guest .qb-product__img,
body.qb-guest .qb-showcard__img,
body.qb-guest .qb-catcard__foto,
body.qb-guest .qb-reco__img,
body.qb-guest .qb-suggest__img,
body.qb-guest .qb-cartreco__img {
  background: linear-gradient(145deg, #f8faf7, #e8f0ea);
}

body.qb-guest .qb-sheet__panel,
body.qb-guest .qb-tape,
body.qb-guest .qb-chat,
body.qb-guest .qb-ertesitesablak {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--mint) 22%, var(--hairline));
  box-shadow: var(--lift-strong);
}

body.qb-guest .qb-sheet__foot,
body.qb-guest .qb-carthead,
body.qb-guest .qb-chat__head,
body.qb-guest .qb-chat__composer,
body.qb-guest .qb-ertesitesablak__zar {
  background: color-mix(in srgb, rgba(255, 255, 255, 0.94) 92%, var(--mint-soft));
  border-color: color-mix(in srgb, var(--mint) 18%, var(--hairline));
  backdrop-filter: blur(14px);
}

body.qb-guest .qb-home__arrow {
  background: linear-gradient(145deg, #109675, var(--mint-solid));
  color: #fff;
  box-shadow: 0 5px 14px rgba(8, 119, 91, 0.18);
}

body.qb-guest .qb-home {
  background:
    linear-gradient(90deg, var(--mint-solid) 0 5px, transparent 5px),
    transparent;
}

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

body.qb-guest .qb-sheet__backdrop,
body.qb-guest .qb-chatbackdrop,
body.qb-guest .qb-ertesitesablak::backdrop {
  background: rgba(13, 31, 24, 0.52);
  backdrop-filter: blur(5px);
}

body.qb-guest .qb-carttoast,
body.qb-guest .qb-toast {
  background: rgba(6, 78, 59, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  color: #fff;
  box-shadow: var(--lift-strong);
  backdrop-filter: blur(12px);
}

body.qb-guest .qb-pagefoot {  border-top-color: color-mix(in srgb, var(--mint) 16%, var(--hairline));
}

body.qb-guest .qb-link,
body.qb-guest .qb-header__orders,
body.qb-guest .qb-suggest__no,
body.qb-guest .qb-buzzer__tobb,
body.qb-guest .qb-linkbtn {
  color: var(--mint-solid);
  text-decoration-color: color-mix(in srgb, var(--mint-solid) 38%, transparent);
  text-underline-offset: 3px;
}
body.qb-guest main > section,
body.qb-guest .qb-statusmain > .qb-done,
body.qb-guest .qb-statusmain > .qb-buzzer,
body.qb-guest .qb-statusmain > .qb-orders,
body.qb-guest .qb-allergens {
  animation: qb-premium-rise 360ms cubic-bezier(.2, .8, .2, 1) both;
}

body.qb-guest main > section:nth-of-type(2),
body.qb-guest .qb-statusmain > .qb-buzzer {
  animation-delay: 45ms;
}

body.qb-guest main > section:nth-of-type(3),
body.qb-guest .qb-statusmain > .qb-orders {
  animation-delay: 80ms;
}

@media (hover: hover) and (pointer: fine) {
  body.qb-guest :is(.qb-btn, .qb-quickadd, .qb-reco__add, .qb-heti__kosar, .qb-cartbar):hover {
    transform: translateY(-1px);
  }
}

body.qb-guest :is(.qb-btn, .qb-quickadd, .qb-reco__add, .qb-heti__kosar, .qb-cartbar):active {
  transform: translateY(0) scale(0.985);
}

/* Törzsvendég-ajánló és az időzített értesítési tájékoztató. */
body.qb-guest .qb-personal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
}

body.qb-guest .qb-personal__head::-webkit-details-marker {
  display: none;
}

body.qb-guest .qb-personal__head > span:first-child {
  display: grid;
  gap: 2px;
}

body.qb-guest .qb-personal__title {
  color: var(--ink);
  font-size: 0.9rem;
}

body.qb-guest .qb-personal__lead {
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 600;
}

body.qb-guest .qb-buzzer__close,
body.qb-guest .qb-allergens__close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--hairline);
  color: var(--ash);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

body.qb-guest .qb-buzzer {
  position: relative;
  padding-right: 48px;
}

body.qb-guest .qb-buzzer__close {
  position: absolute;
  top: 10px;
  right: 10px;
}

body.qb-guest .qb-allergens__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

body.qb-guest .qb-allergens__title {
  margin-bottom: 0;
}

/* Az étlap fejléce csak tájékozódási pont: vékony, sík és csendes marad,
   hogy a termékek legyenek az oldal főszereplői. */
body.qb-guest .qb-header {
  margin-top: 8px;
  margin-bottom: 10px;border-color: color-mix(in srgb, var(--mint) 12%, var(--hairline));}
body.qb-guest .qb-header__meta {
  display: flex;
  align-items: center;
  width: 100%;
}

body.qb-guest .qb-header__loyal {font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
}

/* A főoldali elviteli díj rövid figyelmeztetés, nem tartalmi óriáskártya. */
body.qb-guest .qb-fees {
  margin-top: 4px;
  margin-bottom: 18px;
}

body.qb-guest .qb-fees .qb-kozlsav:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* A kiemelt és személyes ajánlások kártyáján a termék megnyitása és a
   kosárművelet két külön, egymást nem fedő vezérlő. */
body.qb-guest .qb-showcard {  cursor: default;
}

body.qb-guest .qb-showcard__open {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0 0 10px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.qb-guest .qb-showcard__body {
  padding-right: 38px;
}

body.qb-guest .qb-showcard__cart {border-color: rgba(16, 163, 127, 0.36);cursor: pointer;
}
body.qb-guest .qb-showcard__cart.is-in-cart {color: #fff;
  box-shadow: 0 4px 11px rgba(8, 119, 91, 0.2);
}
body.qb-guest .qb-showcard__cart.is-in-cart::after {  font-size: 0.92rem;
  font-weight: 900;
}

body.qb-guest .qb-allergens-reopen {
  display: flex;
  align-items: center;
  gap: 7px;font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

body.qb-guest .qb-allergens-reopen > svg {
  width: 17px;
  height: 17px;
}

body.qb-guest .qb-allergens-reopen__chevron {
  margin-left: auto;
  font-size: 1rem;
  line-height: 1;
}

body.qb-guest .qb-allergens-reopen.is-hidden {
  display: none;
}

body.qb-guest .qb-loyal__head,
body.qb-guest .qb-loyal__actions {
  display: flex;
  align-items: center;
}

body.qb-guest .qb-loyal__head {
  justify-content: space-between;
  gap: 10px;
}

body.qb-guest .qb-loyal__actions {
  gap: 8px;
}

body.qb-guest .qb-loyal__close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hairline);
  color: var(--ash);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 900px) {
  body.qb-guest .qb-header {
    padding: 10px 13px;
  }
}


/*
 * „EZT IS SZOKTÁK RENDELNI" — a hozzáadás a kártya JOBB FELSŐ sarkába kerül,
 * plusz-jellel (nem karika: lapos ötpixeles négyzet, a képre ülve). A gomb
 * MINDEN állapotban tömör zöld, a „+" MINDIG fehér — így hover/koppintás közben
 * sem tűnik el (ez volt a hiba: a sötétzöld hoveren a sötét ikon eltűnt).
 */
body.qb-guest .qb-reco {
  position: relative;
}

/*
 * A gomb TÉRKÖZE A KÁRTYA BELSŐ MARGÓJÁVAL EGYEZIK. Korábban 6px volt,
 * miközben a `.qb-reco` kártya `padding`-ja 8px — a gomb így két pixellel
 * a kép mellé, a kártya saját lekerekített sarkára csúszott. Egy szögletes
 * folt a lekerekített sarkon nem finom eltérés: a vendég elcsúszott
 * elemet lát, nem gombot.
 *
 * A méret, a szín és a sarok NEM ide tartozik — azt a közös `--add-*`
 * tokenkészlet adja, mint a többi hat kosárgombnak.
 */

body.qb-guest .qb-reco__add .qb-btn__icon {
  width: var(--add-icon);
  height: var(--add-icon);
  stroke: currentColor;
}

/* A név alatt nincs többé gomb: a kártya alja levegő, nem üres sáv. */
body.qb-guest .qb-reco__price {
  margin-bottom: 0;
}
body.qb-guest .qb-menuoffer__choice img    { grid-column: 1; }
body.qb-guest .qb-menuoffer__choice input {
  grid-column: 3;
  justify-self: end;
}

body.qb-guest .qb-menuoffer__choice strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}
/* LEBEGŐ alsó dokk: elemelve az élektől, erős árnyékkal. */
body.qb-guest .qb-sheet__foot {
  margin: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 20%, var(--hairline));
  background: linear-gradient(180deg, #ffffff, var(--surface));
  box-shadow: 0 12px 30px rgba(24, 55, 43, 0.22),
              0 2px 8px rgba(24, 55, 43, 0.10);
}
@keyframes qb-premium-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qb-premium-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Kompakt termékadatok: ikon nélkül kiférnek, és szükség esetén új sorba
   törnek ahelyett, hogy vízszintesen görgetnék a lapot. */
body.qb-guest .qb-specs {width: 100%;}

body.qb-guest .qb-spec {  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;  justify-items: center;}
body.qb-guest .qb-spec__label {
  max-width: 100%;
  overflow: hidden;text-overflow: ellipsis;}
/* Az aktív kedvezmény ne vesszen el a terméknév alatti apró szövegek közt. */
body.qb-guest .qb-akciojel {
  position: relative;
  gap: 5px;border: 1px solid color-mix(in srgb, var(--mint-solid) 78%, #fff);
  border-radius: var(--radius);font-weight: 850;
  letter-spacing: .015em;}

body.qb-guest .qb-akciojel::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #dfff8f;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px rgba(223, 255, 143, .16);
}

/* Elviteli díj: kompakt, vízszintes információs kártya. */
body.qb-guest .qb-fees .qb-kozl.qb-kozl--fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  min-height: 0;
  padding: 13px 15px;
  overflow: hidden;  border: 1px solid rgba(8, 119, 91, .26);
  border-radius: var(--radius);}

body.qb-guest .qb-fees .qb-kozl.qb-kozl--fee::before {
  width: 3px;}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__head {
  grid-column: 1;
  grid-row: 1;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__icon {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  background: var(--mint-soft);
  border-color: rgba(8, 119, 91, .28);
  border-radius: var(--radius);
  color: var(--mint-solid);
  box-shadow: none;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__icon svg {
  width: 13px;
  height: 13px;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__title {
  overflow: hidden;
  color: var(--mint-solid);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__text {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  color: var(--ash);
  font-size: .72rem;
  line-height: 1.35;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__amount {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  min-width: 74px;
  margin: 0;
  padding-left: 15px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(8, 119, 91, .20);
  text-align: center;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__sum {
  margin: 0;  font-family: var(--font-mono);
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__currency {
  display: block;
  margin-top: 4px;
  color: var(--mint-solid);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__unit {
  margin-top: 4px;
  color: var(--ash);
  font-size: .6rem;
  line-height: 1.2;
}

@media (max-width: 360px) {
  body.qb-guest .qb-fees .qb-kozl.qb-kozl--fee {
    grid-template-columns: minmax(0, 1fr) 68px;
    column-gap: 10px;
    padding: 12px;
  }

  body.qb-guest .qb-fees .qb-kozl--fee .qb-kozl__amount {
    min-width: 0;
    padding-left: 10px;
  }
}