/*
 * TULAJDONOSI FELÜLET · 1/3 — ÉTLAP- ÉS TERMÉKSZERKESZTŐ, A HELY BEÁLLÍTÁSAI
 *
 * Kedvezmények, menüépítő, nyitvatartás-szerkesztő, allergénválasztó,
 * termékűrlap, csoportpanelek, párbeszédablakok.
 *
 * A BETÖLTÉSI SORREND KÖTÖTT: ezek a fájlok EGY kaszkádot alkotnak —
 * ugyanazt, ami korábban egyetlen fájl volt. A darabolás BAJTRA folytonos
 * volt, tehát egyetlen szabály sem mozdult el a kaszkádban; de csak addig,
 * amíg a sorrend ez marad:
 *
 *   tulaj.css  ->  tulaj-licenc.css  ->  tulaj-listak.css
 *
 * A sorrendet a `lib/header.php` `$cssLapok` tömbje rögzíti.
 */
.qb-ugrosav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.qb-ugrosav::-webkit-scrollbar {
  display: none;
}

.qb-ugrosav a {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.qb-ugrosav a:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.qb-napok {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr 1fr minmax(64px, auto);
  gap: 6px 10px;
  align-items: center;
  margin: 8px 0 4px;
}

.qb-napok__fej {
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qb-napok__nev {
  font-weight: 700;
}

.qb-napok__ma {
  color: var(--brand-dark);
}

/*
 * A KÖZÖS VEZÉRLŐ-KINÉZET itt is érvényes (style.css) — ez csak a rács
 * miatti szélességet és a sűrűbb belső margót adja hozzá: hét sor alatt a
 * teljes méretű mező már túl magas oszlopot csinálna.
 */
.qb-napok input[type="time"] {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
}

@media (max-width: 420px) {
  .qb-napok {
    grid-template-columns: minmax(44px, auto) 1fr 1fr minmax(52px, auto);
    gap: 6px;
  }

  .qb-napok input[type="time"] {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ── Kedvezmény-sávok (happy hour, akció) ──────────────────────────────── */

/*
 * LENYITHATÓ SÁV, `<details>`-szel. Nem JS: a böngésző saját nyitogatója
 * működik CSP mellett, billentyűzetről, és a keresés is megtalálja benne a
 * szöveget. A CSUKOTT állapot az alapértelmezett, amíg a szabály üres —
 * aki nem akciózik, annak ez a lap két sorral hosszabb, nem kettővel több
 * képernyő.
 *
 * A csukott sáv FEJLÉCE KIÍRJA a szabályt („H, K 14:00–16:00, −20%"), tehát
 * a napi ellenőrzéshez nem is kell lenyitni. Egy csukott doboz, ami elrejti,
 * amit tud, csak akadály.
 */

.qb-kedv {
  margin: 10px 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.qb-kedv__fej {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-height: var(--tap);
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.qb-kedv__fej::-webkit-details-marker {
  display: none;
}

.qb-kedv[open] > .qb-kedv__fej {
  border-bottom: 1px solid var(--hairline);
}

.qb-kedv__fej:hover .qb-kedv__nev {
  color: var(--brand-dark);
}

.qb-kedv__nev {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* A NYITÓ JEL a néven ül: nyitva „−", csukva „+". */
.qb-kedv__nev::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--ash);
  font-family: var(--font-mono);
  font-weight: 400;
}

.qb-kedv[open] > .qb-kedv__fej .qb-kedv__nev::before {
  content: "−";
}

.qb-kedv__allapot {
  color: var(--ash);
  font-size: 0.875rem;
}

/*
 * AZ „ÉPP FUT" NEM DÍSZ. A tulajdonos legtöbbször azért nyitja meg ezt a
 * lapot, mert valaki megkérdezte, jár-e most a kedvezmény. A válasz a
 * csukott sáv fejlécén is ott áll.
 *
 * A MEGLÉVŐ `.qb-tag` jelvényt viseli, saját szabály nélkül: ugyanaz a
 * kérdés („fut vagy nem"), mint a lap többi állapotjelzőjén — más formát
 * adni neki csak azt jelentené, hogy a felhasználónak kétszer kell
 * megtanulnia ugyanazt.
 */

.qb-kedv__test {
  padding: 4px 14px 16px;
}

.qb-kedv__blokk {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.qb-kedv__cim {
  padding: 0;
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

/*
 * A KATEGÓRIÁK OSZLOPBAN FOLYNAK, nem rácsban: a lista az étlappal együtt
 * nő, és nem tudjuk előre, hány elem lesz. A `columns` négy kategóriánál
 * egy oszlop, húsznál három — magától.
 */
.qb-kedv__katk {
  columns: 200px;
  gap: 8px 20px;
  margin-top: 8px;
}

.qb-kedv__katk .qb-pipa {
  display: flex;
  margin-bottom: 8px;
  break-inside: avoid;
}

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

/*
 * A HÁROM MEZŐ NEM NYÚLHAT VÉGTELENÜL. Egy „14:00" és egy „20" beírásához
 * nem kell négyszáz pixel: szélesen a mező azt sugallná, hogy hosszú
 * választ várunk, és a szem is végigfut az üres helyen, mielőtt megtalálja
 * a következőt.
 */
.qb-kedv__sor .qb-field {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 220px;
}

.qb-menubuilder__limit {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0;
  padding: 10px 12px;
  color: var(--ash);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 0.875rem;
}

.qb-menubuilder__limit strong {
  color: var(--ink);
  font-size: 1rem;
}

.qb-menubuilder.is-over-limit .qb-menubuilder__limit {
  color: var(--danger, #9f2f25);
  border-color: currentColor;
}

.qb-menubuilder__offers {
  display: grid;
  gap: 14px;
}

.qb-menubuilder__offer {
  padding: 14px;
  background: color-mix(in srgb, var(--paper) 72%, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.qb-menubuilder__offerhead,
.qb-menubuilder__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qb-menubuilder__offerhead h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
}

.qb-menubuilder__base {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 160px) auto;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.qb-menubuilder__base .qb-field,
.qb-menubuilder__category .qb-field {
  max-width: none;
  margin: 0;
}

.qb-menubuilder__active {
  min-height: 44px;
  margin-bottom: 2px;
}

.qb-menubuilder__categories {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.qb-menubuilder__category {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.qb-menubuilder__addcat {
  width: 100%;
  margin-top: 10px;
  border-style: dashed;
}

.qb-menubuilder__actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 620px) {
  .qb-menubuilder__base,
  .qb-menubuilder__category {
    grid-template-columns: 1fr;
  }

  .qb-menubuilder__offerhead {
    align-items: flex-start;
  }

  .qb-menubuilder__category .qb-btn,
  .qb-menubuilder__actions .qb-btn {
    width: 100%;
  }
}

/*
 * PIPA-CÍMKE. Az egész címke kattintható felület, nem csak a kis négyzet —
 * telefonon a 13 pixeles jelölőnégyzetet eltalálni ügyességi feladat.
 */
.qb-pipa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 0.9rem;
  cursor: pointer;
}

.qb-pipa:hover {
  border-color: var(--brand);
}

.qb-pipa:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
  font-weight: 700;
}

/*
 * A BILLENTYŰZETES FÓKUSZ a címkén látszik, nem csak a rejtett négyzeten:
 * enélkül a tabbal járó ember nem tudja, hol tart.
 */
.qb-pipa:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Kártyás beállítólap (termék, hely) ────────────────────────────────── */

/*
 * EGY KOMPONENS KÉT LAPRA. A termék- és a hely-lap ugyanazt a feladatot
 * végzi: sok, csoportokba rendezhető mező egy hosszú űrlapon. Kétféle
 * megoldás ugyanarra azt jelentené, hogy a következő beállítólap egy
 * harmadikat kap.
 *
 * MIÉRT KÁRTYA. Tizenöt mező egyetlen oszlopban egy 1200 pixeles gépen két
 * dolgot rontott el: a jobb oldali fél képernyő üresen maradt, a Mentés
 * gomb pedig két képernyővel lejjebb került, mint a legfelső mező. A kártya
 * megmondja, hol kezdődik és hol ér véget egy gondolat.
 */

/*
 * MÉLYSÉG, DE HALKAN. A kártya eddig csak egy hajszálvonal volt a lap
 * színén — sík, és semmi nem mondta meg, hogy ez önálló egység. Egy
 * nagyon lágy árnyék elemeli, anélkül hogy dobozként tolakodna.
 */
.qb-csoport {
  padding: 16px 18px 18px;
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(27, 25, 21, 0.04);
}

/*
 * A SZOMSZÉD-MARGÓ CSAK OTT, AHOL EGYMÁS ALATT ÁLLNAK.
 *
 * A rácsban a `gap` adja a közt — ott ez a margó a MÁSODIK kártyát 16
 * képponttal lejjebb tolta a saját cellájában, és a sor két kártyája nem
 * egy vonalban kezdődött. Pontosan ez látszott a lapon: „a nyelvek lejjebb
 * van".
 */
.qb-csoport + .qb-csoport {
  margin-top: 16px;
}

.qb-csoport__cim {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qb-csoport__alcim {
  margin: 20px 0 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Automatikus allergénjavaslat a termék összetevőmezője alatt. */
.qb-allergenpick {
  min-width: 0;
  margin: 16px 0 0;
  padding: 14px;
  background: color-mix(in srgb, var(--mint-soft) 42%, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.qb-allergenpick__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.qb-allergenpick__head .qb-field__hint {
  margin: 0;
}

.qb-allergenpick__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.qb-allergenpick__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.qb-allergenpick__item:has(input:checked) {
  background: var(--mint-soft);
  border-color: var(--mint);
}

.qb-allergenpick__item input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--brand);
}

.qb-allergenpick__item span {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.qb-allergenpick__status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--ash);
  font-size: 0.8125rem;
}

@media (max-width: 620px) {
  .qb-allergenpick__head {
    align-items: stretch;
    flex-direction: column;
  }

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

/*
 * A MEZŐK EGYMÁS MELLÉ, ha elférnek. Az `auto-fit` nem törődik azzal, hány
 * mező van: két mezőnél két oszlop, ötnél annyi, amennyi kifér — és
 * telefonon magától egy. Kézzel megadott oszlopszám minden új mezőnél
 * hazuggá válna.
 */
/*
 * A SOR EGY SOR — VÍZSZINTESEN IGAZODVA.
 *
 * A mezők eddig nyúltak (`stretch`), és amelyik alatt magyarázószöveg
 * állt, az megnyújtotta az egész sort: a négy mező NEM egy vonalban ült.
 * A `start` igazítás mindet a sor tetejéhez teszi, a magyarázat pedig a
 * RÁCS ALÁ kerül, nem a mező alá — így nem tud elcsúsztatni semmit.
 */
.qb-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 16px;
  align-items: start;
}

/* Közös felső margó, hogy egy vonalban induljanak. */
.qb-racs > .qb-field {
  margin-top: 14px;
}

/*
 * A CÍMKÉK EGYFORMA MAGASAK a rácson belül.
 *
 * Enélkül a hosszabb címke két sorba tört, és a MEZŐJÉT nyomta lejjebb: a
 * négy mező két sorban ült, pedig egy rácssorban voltak. Két sor magasság
 * a leghosszabb címkének is elég, és a rövideknél sem látszik üresnek —
 * a mezők attól kerülnek egy vonalba.
 */
.qb-racs > .qb-field > .qb-field__label {
  display: block;
  min-height: 2.5em;
}

/* ── A termék- és a hely-lap két oszlopa ───────────────────────────────── */

/*
 * A MENTÉS A KÁRTYA ALJÁN — a doboz lábléce.
 *
 * Volt már sávként (üres negyedik kártya a lapon) és lebegő gombként (nem
 * tartozott sehová). Itt annak a doboznak az alján ül, amiben az utolsó
 * mező is van: ahol a szem amúgy is befejezi az űrlapot.
 *
 * A kártya belső margóján KÍVÜLRE nyúlik (negatív margó), hogy a
 * választóvonal a doboz széléig érjen — így látszik lábnak, nem egy
 * árválkodó gombnak a mezők után.
 */
.qb-csoport__labl {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
}

/*
 * KÉT HASÁB — a lista mellett a szerkesztő.
 *
 * A lista és a szerkesztő két önálló kártya, semmi trükk.
 *
 * A LISTA KAPJA A TÖBB HELYET. Négy oszlopnyi táblázat mellett egy két
 * mezős űrlap nem kér fél lapot.
 */
.qb-ketoszlop {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}

.qb-ketoszlop > .qb-csoport + .qb-csoport {
  margin-top: 0;
}

.qb-ketoszlop .qb-table {
  margin-top: 0;
}

/* Ahol a két oldal EGYENRANGÚ (statisztika), ott fele-fele. */
.qb-ketoszlop--fele {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .qb-ketoszlop,
  .qb-ketoszlop--fele {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * A LÁB TÖBB GOMBBAL: a mellékes balra, a fő jobbra — a szem a jobb
 * sarokban keresi azt, amivel befejezi.
 */
.qb-csoport__labl .qb-btn--ghost {
  margin-right: auto;
}

/* ── Összetevő-lista több hasábban ─────────────────────────────────────── */

/*
 * NÉGY OSZLOPNYI TÁBLÁZAT HELYETT HASÁBOK.
 *
 * A táblázat (név, allergén, használat, gombok) egyetlen nyúlós listát
 * adott: hatvan összetevőnél hatvan sor, egymás alatt, mellette meg egy
 * majdnem üres fél lap.
 *
 * A `columns` a böngészőre bízza a szétosztást: ahány hasáb kifér, annyit
 * használ, és MAGÁTÓL nagyjából egyenlő hosszúra tölti őket — egy új
 * összetevő mindig a legrövidebbet növeli. Kézzel megadott oszlopszám
 * minden új elemnél hazuggá válna.
 */
.qb-osszlista {
  columns: 480px;
  column-gap: 24px;
  margin-top: 4px;
}

/* A sor nem törhet ketté két hasáb között — a gombjai a nevétől elszakadnának. */
.qb-osszsor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

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

.qb-osszsor__nev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}

.qb-osszsor__db {
  color: var(--ash);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.qb-osszsor__allergen {
  margin: 2px 0 0;
  color: var(--ash);
  font-size: 0.8125rem;
}

.qb-osszsor__gombok {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}

.qb-osszsor__gombok .qb-inline-form {
  display: inline-flex;
}

/* Keskeny képernyőn csak akkor törnek a gombok új sorba, ha tényleg muszáj. */
@media (max-width: 460px) {
  .qb-osszsor {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .qb-osszsor__gombok {
    width: 100%;
  }
}

/* ── A hely-lap két oszlopa ────────────────────────────────────────────── */

/*
 * BAL: a hely maga (név, cím, típus, logó, nyitvatartás, kedvezmények).
 * JOBB: a szabályok és a szövegek (adatkezelés, szervizdíj, közlemények,
 * levél, értékelés). A kettő MÁS RITMUSBAN változik — a nyitvatartást
 * hetente nyitja meg az ember, az adatkezelési tájékoztatót egyszer —,
 * ezért nem keverednek egy folyamba.
 */

.qb-hely {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

/* EGY RÁCSCELLÁN BELÜL TÖBB KÁRTYA, EGYMÁS ALATT — a hely-lap két hasábja. */
.qb-hely__oszlop {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

/* A rács réstávolsága adja a közt; a margó itt duplázna. */
.qb-hely__oszlop > .qb-csoport + .qb-csoport {
  margin-top: 0;
}

/*
 * A KÁRTYÁN BELÜL AZ ŰRLAP KITÖLTI A HELYET. A globális 420 pixeles korlát
 * egy teljes szélességű lapon jó — egy fél lap széles kártyában viszont a
 * mező mellett üresen maradna a kártya harmada.
 */
.qb-csoport .qb-form,
.qb-csoport .qb-inlineform {
  max-width: none;
}

.qb-csoport > .qb-form:first-of-type {
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .qb-hely {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── A megváltozott funkció-sor villanása ──────────────────────────────── */

/*
 * A KAPCSOLÁS UTÁN A SOR VILLAN EGYET. A lap már nem ugrik a tetejére —
 * viszont ha ugyanott marad, semmi nem mondaná meg, hogy megtörtént-e a
 * kapcsolás. A villanás ezt jelzi, oda, ahova a szem amúgy is néz.
 *
 * `:target`, nem JS: a szigorú CSP mellett is működik, és nem kell hozzá
 * egy fájl sem. A böngésző a horgonyra ugráskor magától lefuttatja.
 *
 * A `scroll-margin-top` a tapadó fejléc miatt kell: enélkül a sor a fejléc
 * ALÁ csúszna, és pont az nem látszana, amit meg akarunk mutatni.
 */

.qb-menurow:target {
  scroll-margin-top: 90px;
  animation: qb-sorvillan 1400ms ease-out;
}

@keyframes qb-sorvillan {
  0%   { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  70%  { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  100% { background: transparent;       box-shadow: inset 3px 0 0 transparent; }
}

/*
 * AKI NEM KÉRI A MOZGÁST, annak a szín marad, csak nem mozdul semmi. A
 * villanás nem díszítés, hanem üzenet — kikapcsolni nem szabad, csak
 * lecsendesíteni.
 */
@media (prefers-reduced-motion: reduce) {
  .qb-menurow:target {
    animation: none;
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
  }
}

/* ── A kártyás lapok finomhangolása ────────────────────────────────────── */

/*
 * ITT VOLT EGY MÁRKASZÍNŰ VONALKA MINDEN CÍM ELŐTT. Kikerült: nyolc
 * kártyán nyolcszor ismételve nem ritmus, hanem zaj. A cím maga elég.
 */

/*
 * A MEZŐ NEM NYÚLHAT A VÉGTELENBE.
 *
 * Mérés: három mező 1318 képpont széles volt, köztük a „Minimum
 * választás", ami EGY számjegy. A széles mező hosszú választ ígér, és a
 * szem végigfut az üres helyen, mielőtt a következőt megtalálja.
 *
 * A korlát a MEZŐRE megy, nem az űrlapra: a kártya továbbra is teljes
 * szélességű, csak a benne álló beviteli sáv nem kilométeres.
 */
.qb-csoport .qb-field {
  max-width: 620px;
}

/* Szám, idő, rövid kód: ennyi elég, és a sor is olvashatóbb marad. */
.qb-csoport .qb-field:has(input[type="number"]),
.qb-csoport .qb-field:has(input[inputmode="numeric"]),
.qb-csoport .qb-field:has(input[type="time"]) {
  max-width: 260px;
}

/* A rácsban a rács dönti el a szélességet — ott nincs saját korlát. */
.qb-racs > .qb-field,
.qb-racs > .qb-field:has(input[type="number"]),
.qb-racs > .qb-field:has(input[inputmode="numeric"]) {
  max-width: none;
}

/*
 * A HOSSZÚ SZÖVEG KAP HELYET. A leírás doboza két sor magas volt, és a
 * szöveg félmondatban tűnt el — a tulajdonos nem látta, mit írt bele.
 */
.qb-csoport textarea {
  min-height: 96px;
  resize: vertical;
}

/*
 * A FÁJLVÁLASZTÓ IS VEZÉRLŐ. A böngésző alapértelmezett gombja szürke
 * dobozként ült a lapon; a saját gombunk ugyanazt a nyelvet beszéli, mint
 * a többi.
 */
.qb-csoport input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.qb-csoport input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.qb-csoport input[type="file"]:hover {
  border-color: var(--brand);
}

/* ── Termékadat-sorok ──────────────────────────────────────────────────── */

.qb-adatsor__row input {
  padding: 9px 12px;
  font-size: 0.9rem;
}

/* ── Az állapot-kártya és a mentősáv ───────────────────────────────────── */

/*
 * A CSÚSZKA ÉS A FELIRATA EGY SORBAN INDUL. A hosszú felirat két sorra
 * tört, és a csúszka a szöveg KÖZEPÉHEZ igazodott — kilógott a sorból.
 */
/*
 * A CSÚSZKA-SZABÁLYOK A KÁRTYÁRA vonatkoznak, nem a régi oldalsávra: az
 * megszűnt, és ezek a szabályok CSENDBEN nem fogtak volna többé — a
 * kapcsoló visszaesett volna a nyers alakjára.
 */
.qb-csoport .qb-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.qb-csoport .qb-toggle + .qb-toggle {
  border-top: 1px solid var(--hairline);
}

.qb-csoport .qb-toggle__label {
  line-height: 1.35;
}

/*
 * CSAK A MENTÉS, ÉS CSAK AKKORA, AMEKKORA. A `.qb-form .qb-btn--primary`
 * középre igazít és NYÚJT — egy egész képernyő széles gomb nem hangsúly,
 * hanem hiba: azt üzeni, hogy a felület nem tudta, mekkora legyen.
 */
.qb-form .qb-csoport__labl .qb-btn--primary,
.qb-csoport__labl .qb-btn--primary {
  flex: 0 0 auto;
  min-width: 180px;
}

/* ── Beszúró sorok (összetevő, opció) ──────────────────────────────────── */

/*
 * A BESZÚRÓ SOR EGY SOR. Ezek eddig nyers vezérlőkből álltak, és a
 * gomb a sor végén elúszott a mezőktől — most egymáshoz tartoznak.
 */
.qb-csoport .qb-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.qb-csoport .qb-rename select {
  flex: 1 1 220px;
  min-width: 0;
  width: auto;
}

.qb-csoport .qb-rename input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;
}

.qb-csoport .qb-rename input[inputmode="numeric"],
.qb-csoport .qb-rename input[size] {
  flex: 0 0 110px;
  width: auto;
}

/*
 * AZ OPCIÓCSOPORT HÁROM MEZŐJE: a név kapja a helyet, a két szám keveset.
 * Egyenlő oszlopokkal a „Maximum" ugyanolyan széles lenne, mint a név —
 * pedig egy számjegy áll benne.
 */
.qb-racs--opcio {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Összetevő: a név és az allergénje egyenrangú. */
.qb-racs--ossz {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * A HOSSZÚ SZÖVEG TÖBB HELYET KAP, mint egy név: 255 karakter egy 620
 * pixeles dobozban öt sor, szélesebben három.
 */
.qb-csoport .qb-field:has(textarea) {
  max-width: 880px;
}

/* A csoportválasztó: a legördülő és a gomb egy sorban, alul igazítva. */
.qb-csoportvalaszto {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.qb-csoportvalaszto .qb-field {
  flex: 1 1 320px;
  min-width: 0;
}

@media (max-width: 700px) {
  .qb-racs--opcio {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Beosztás és bélyegzés ────────────────────────────────────────────── */

.qb-belyegzo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.qb-belyegzo__allapot {
  margin: 0;
  font-size: 0.9375rem;
}

.qb-muszak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 6px 0;
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--edge);
  background: var(--paper);
  font-size: 0.8125rem;
}

.qb-input--sm {
  width: 5.5rem;
  min-height: 32px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

.qb-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ash);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

.qb-tag--warn {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--ink);
}

.qb-tag--mint {
  background: var(--mint-soft);
  border-color: var(--mint);
  color: var(--ink);
}

.qb-tag--pro,
.qb-price {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.qb-btn--danger {
  background: none;
  border-color: var(--plum);
  color: var(--plum);
}

.qb-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Valódi kétállapotú kapcsoló a tulajdonosi funkciókhoz. */
.qb-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--ash);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/*
 * UGYANAZ A CSÚSZKA, ŰRLAPMEZŐKÉNT.
 *
 * A Funkciók lapján a kapcsoló egy küldő GOMB: ott egy kapcsoló = egy
 * mentés. A hely és a termék lapján viszont a be/ki egy nagyobb űrlap
 * mezője, amit a „Mentés” visz el — ezért ott VALÓDI jelölőnégyzet hajtja
 * a csúszkát. Így a böngésző küldi, a billentyűzet kezeli, és JS nélkül is
 * működik; a szigorú CSP mellett ez nem apróság, hanem feltétel.
 *
 * A sín és a gomb szabálya közös a kettőben: egy csúszka nem nézhet ki
 * kétféleképp attól, hogy éppen gomb vagy mező hajtja.
 */
.qb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  cursor: pointer;
}

/*
 * A jelölőnégyzet nem tűnik el, csak láthatatlan. `display: none` esetén a
 * billentyűzet nem találná meg, és a csúszka egérrel használható maradna
 * csak — egy kapcsoló, amit nem lehet tabbal elérni, nem kapcsoló.
 */
.qb-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.qb-switch__track,
.qb-toggle__track {
  position: relative;
  display: block;
  width: 50px;
  height: 28px;
  background: color-mix(in srgb, var(--ink) 16%, var(--surface));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.qb-switch__knob,
.qb-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(27, 25, 21, 0.24);
  transition: transform 0.16s ease;
}

/*
 * FELUGRÓ PÁRBESZÉD — natív <dialog>.
 *
 * Nem magunk rakjuk össze: a böngésző adja hozzá a fókuszcsapdát, az Esc-et,
 * a háttér inaktiválását és a helyes felolvasó-viselkedést. Kézzel írva ez a
 * négy dolog az, amit ilyenkor el szoktak felejteni.
 */
.qb-modal {
  max-width: 460px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--lift-strong);
}

.qb-modal::backdrop {
  background: rgba(27, 25, 21, 0.44);
}

.qb-modal__doboz {
  padding: 26px 26px 22px;
}

.qb-modal__cimke {
  margin: 0;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qb-modal__cim {
  margin: 8px 0 0;
  font-size: 1.25rem;
}

.qb-modal__szoveg {
  margin: 12px 0 0;
  color: var(--ash);
  line-height: 1.6;
}

.qb-modal__gombok {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}

/* A fókusz a SÍNEN látszik, mert maga a mező láthatatlan. */
.qb-toggle__input:focus-visible + .qb-toggle__track {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.qb-switch__state {
  min-width: 1.5rem;
  text-align: left;
}

/* A csúszka felirata. Bekapcsolva sem színez: a sín mondja meg az állapotot. */
.qb-toggle__label {
  font-size: 0.9rem;
}

.qb-kozlsav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qb-kozl {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.qb-kozl.is-highlight {
  background: var(--amber-soft);
  border-width: 2px;
  border-color: var(--amber);
}