/* ── QR-kódok és asztalok ─────────────────────────────────────────────── */
.qb-qradmin > section,
.qb-qradmin > details {
  margin-top: 28px;
}

.qb-qradmin .qb-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

:is(.qb-qrcard, .qb-accordion, .qb-booking-card, .qb-booking-detail) {
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, #dedbd5);
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(26, 54, 40, .045);
}

.qb-qrgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.qb-qrcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px;
  text-align: center;
}

.qb-qrcard__headline,
.qb-qrcard__label {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.qb-qrcard__headline { font-size: 1.05rem; }
.qb-qradmin input, .qb-qradmin select { min-height: 44px; font-size: 16px; }
.qb-qradmin :is(input, select, textarea):focus-visible, .qb-booking-admin :is(input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.qb-qrcard__label { color: var(--ash); }

.qb-qrcard__code,
.qb-qrprintcard__code,
.qb-qrposter__code {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  max-width: 100%;
  background: #fff;
}

.qb-qrcard__code { width: 188px; min-height: 188px; }

[data-qr] > svg { display: block; max-width: 100%; height: auto; }


.qb-qrbooking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.qb-accordion {
  overflow: clip;
}

.qb-accordion > summary {
  min-height: 56px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
}

.qb-accordion > summary span { color: var(--ash); font-size: .875rem; }
.qb-accordion__body { padding: 4px 20px 22px; }

.qb-formgrid,
.qb-tableedit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.qb-tableedit {
  margin-top: 12px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.qb-tableedit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-tableedit--archived { grid-template-columns: 1fr auto auto; align-items: center; }

/* ── A4-es QR-nyomtatás ───────────────────────────────────────────────── */
.qb-qrprint__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: 20px var(--page-pad);
}

.qb-qrprintgrid {
  display: grid;
  gap: 10mm;
  max-width: 190mm;
  margin: 0 auto;
  padding: 8mm;
}

.qb-qrprintgrid.is-batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-qrprintgrid.is-single { grid-template-columns: 1fr; max-width: 150mm; }

.qb-qrprintcard,
.qb-qrposter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118mm;
  padding: 10mm;
  background: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  color: #111;
  text-align: center;
  break-inside: avoid;
  overflow-wrap: anywhere;
}

.qb-qrprintgrid.is-single .qb-qrprintcard { min-height: 245mm; }
.qb-qrprintcard h2 { margin: 0; font-size: 1.5rem; }
.qb-qrprintcard__venue { margin: 0; color: #666; font-weight: 700; text-transform: uppercase; }
.qb-qrprintcard__table { margin: 0; font-size: 1.15rem; font-weight: 700; }
.qb-qrprintcard__code,
.qb-qrposter__code { width: fit-content; height: fit-content; }

.qb-qrposter {
  max-width: 170mm;
  min-height: 250mm;
  margin: 0 auto;
  padding: 18mm;
}

.qb-qrposter h1 { margin: 0; font-size: 2.8rem; }
.qb-qrposter > p { max-width: 32rem; font-size: 1.25rem; }
.qb-qrposter__footer { font-weight: 700; }

@media (max-width: 720px) {
  .qb-qrprintgrid.is-batch,
  .qb-qrbooking,
  .qb-formgrid,
  .qb-tableedit { grid-template-columns: 1fr; }
  .qb-tableedit--archived { grid-template-columns: 1fr auto; }
}

@page qr-cards { size: A4 portrait; margin: 10mm; }
body.qb-qrlap { page: qr-cards; }

@media print {
  .qb-qrprint__tools { display: none; }
  body.qb-qrlap { margin: 0; background: #fff; }
  .qb-qrprintgrid.is-batch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-qrprintgrid { gap: 8mm; max-width: none; padding: 0; }
  .qb-qrprintcard,
  .qb-qrposter { border: 1px solid #bbb; box-shadow: none; }
  .qb-qrprintgrid.is-batch .qb-qrprintcard { min-height: 127mm; }
  .qb-qrprintgrid.is-single .qb-qrprintcard { min-height: 267mm; }
  .qb-qrposter { min-height: 267mm; }
}


/* QR and booking share the same paper, spacing and touch targets. */
.qb-booking-header { margin-bottom: 28px; }
.qb-booking-header h1 { margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.1; letter-spacing: -.035em; }
.qb-booking-header p { max-width: 62ch; }
.qb-booking-logo { width: 88px; height: 88px; object-fit: contain; margin-bottom: 18px; }
.qb-booking-capacity { display: inline-block; padding: 12px 18px; border: 1px solid #b9d6cc; border-radius: 12px; background: #edf7f2; color: #194a3a; line-height: 1.6; }
/* A függő foglalások sora: minden admin lap tetején, ezért egysoros és halk. */
.qb-booking-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: calc(100% - 2 * var(--page-pad, 16px)); max-width: calc(var(--page-wide, 1200px) - 2 * var(--page-pad, 16px)); margin: 12px auto 0; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--amber, #d97706) 24%, transparent); border-radius: 14px; background: #fbefd9; color: var(--ink, #1b1915); }
.qb-booking-alert__jel { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--amber, #d97706); font-size: .8125rem; font-weight: 800; }
.qb-booking-alert__szoveg { display: flex; flex: 1 1 220px; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; margin: 0; font-size: .875rem; }
.qb-booking-alert__szoveg span { color: var(--ash, #746c61); font-size: .8125rem; }
.qb-booking-alert__gombok { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-booking-alert__elem, .qb-booking-alert__osszes { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--amber, #d97706) 28%, transparent); border-radius: 999px; background: #fffdf8; color: var(--ink, #1b1915); font-size: .8125rem; font-weight: 650; text-decoration: none; }
.qb-booking-alert__elem small { color: var(--ash, #746c61); font-weight: 600; }
.qb-booking-alert__osszes { border-color: transparent; background: none; color: #9a5708; }
.qb-booking-alert__elem:hover, .qb-booking-alert__osszes:hover { border-color: #9a5708; }
.qb-booking-actions, .qb-booking-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qb-booking-toolbar { align-items: end; margin: 24px 0; }
.qb-booking-list { display: grid; gap: 14px; margin: 20px 0 32px; }
.qb-booking-card { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: 22px; align-items: center; padding: 24px; }
.qb-booking-card h3, .qb-booking-card p { margin: 4px 0; }
.qb-booking-contact { display: grid; gap: 8px; overflow-wrap: anywhere; }
.qb-booking-contact a { min-height: 32px; display: inline-flex; align-items: center; }
.qb-booking-dialog { width: min(740px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid #d5dbd5; border-radius: 20px; background: #fffdfa; color: #252c28; box-shadow: 0 24px 90px #14241d40; overflow: auto; }
.qb-booking-dialog::backdrop { background: #15272099; backdrop-filter: blur(3px); }
.qb-booking-close { display: block; margin-left: auto; margin-bottom: 16px; }
.qb-booking-detail { padding: 24px; margin: 24px 0; }
.qb-booking-detail-content { display: grid; gap: 18px; }
.qb-booking-detail-content h2, .qb-booking-detail-content p { margin: 0; }
.qb-booking-detail-content { gap: 14px; }
.qb-booking-detail-content > .qb-eyebrow { font-size: .6875rem; letter-spacing: .08em; }
.qb-booking-detail-content > h2 { font-size: 1.375rem; line-height: 1.2; }
.qb-booking-detail-content .qb-booking-capacity { justify-self: start; padding: 6px 12px; border-radius: 999px; font-size: .875rem; }
.qb-booking-detail-content > .qb-booking-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ash, #746c61); font-size: .875rem; }
.qb-booking-detail-content .qb-booking-contact a { min-height: 0; color: var(--ink, #1b1915); }
.qb-booking-detail-content .qb-booking-actions { gap: 8px; }
.qb-booking-detail-content .qb-btn { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: .875rem; }
.qb-booking-detail-content .qb-booking-form { gap: 10px; margin-top: 4px; }
.qb-booking-detail-content .qb-booking-form fieldset { padding: 10px 12px 12px; border-color: #e6e1d8; }
.qb-booking-detail-content .qb-booking-form legend { font-size: .875rem; }
.qb-booking-detail-content .qb-booking-form > .qb-btn { justify-self: start; }
.qb-booking-detail-content .qb-booking-tables { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.qb-booking-detail-content .qb-booking-tables label { min-height: 38px; padding: 6px 10px; border-radius: 9px; background: #f4f1eb; font-size: .8125rem; }
.qb-booking-detail-content .qb-booking-tables label:has(input:checked) { background: #e3f1ea; box-shadow: inset 0 0 0 1px #0f7a55; }
.qb-booking-detail-content .qb-booking-tables input { width: 16px; height: 16px; }
.qb-booking-detail-content .qb-booking-mail { gap: 10px; padding-top: 14px; border-top-color: #e6e1d8; }
.qb-booking-detail-content .qb-booking-mail h3 { margin: 0; font-size: 1.0625rem; }
.qb-booking-detail-content .qb-booking-mail textarea { min-height: 150px; font-size: .875rem; }
.qb-booking-template { padding: 20px; border: 1px solid var(--hairline, #dedbd5); border-radius: 16px; background: var(--surface, #fff); }
.qb-booking-template summary { cursor: pointer; min-height: 44px; font-size: 1.1rem; font-weight: 700; }
.qb-booking-form, .qb-booking-mail { display: grid; gap: 16px; }
.qb-booking-form { margin-top: 16px; }
.qb-booking-form fieldset { min-width: 0; padding: 16px; border: 1px solid #d8ded8; border-radius: 12px; }
.qb-booking-form legend { padding: 0 6px; font-weight: 700; }
.qb-booking-mail { padding-top: 20px; border-top: 1px solid #d8ded8; }
.qb-booking-mail textarea { width: 100%; resize: vertical; min-height: 200px; line-height: 1.6; }
.qb-booking-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.qb-booking-tables label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px; background: #f2f5f1; border-radius: 8px; }
.qb-booking-tables input { width: 20px; height: 20px; flex-shrink: 0; }
:is(.qb-booking-admin, .qb-booking-dialog, .qb-booking-alert, .qb-qradmin, .qb-booking-guest) .qb-btn { min-height: 44px; white-space: normal; text-align: center; }
.qb-booking-guest { max-width: 740px; padding-top: 40px; padding-bottom: 56px; }
.qb-reserve { display: grid; gap: 22px; }
.qb-reserve__blokk { min-width: 0; padding: 24px; margin: 0; display: grid; gap: 18px; border: 1px solid #dedfd5; border-radius: 18px; background: #fffefa; }
.qb-reserve__cim { padding: 0 8px; color: #264c3d; font-size: 1.15rem; font-weight: 750; }
.qb-reserve__sor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qb-reserve__sor > .qb-field { min-width: 0; }
.qb-reserve__fok { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qb-reserve__fo { position: relative; cursor: pointer; }
.qb-reserve__fo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qb-reserve__fo span { display: grid; place-items: center; min-height: 48px; border: 1px solid #c7d2c8; border-radius: 10px; background: #fff; color: #254534; font-weight: 700; }
.qb-reserve__fo input:checked + span { background: #254f3f; border-color: #254f3f; color: #fff; }
.qb-reserve__fo input:focus-visible + span { outline: 3px solid #b98331; outline-offset: 3px; }
.qb-reserve__elfogad { display: flex; align-items: start; gap: 12px; line-height: 1.6; }
.qb-reserve__elfogad input { width: 22px; height: 22px; margin-top: 3px; flex-shrink: 0; }
.qb-booking-guest input, .qb-booking-guest textarea { font-size: 16px; }
.qb-booking-guest .qb-field input { min-height: 48px; }
.qb-booking-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(100%, 420px); padding: 13px 15px; background: #edf7f2; border: 1px solid #b9d6cc; border-radius: 10px; }
.qb-booking-status span { color: var(--ash, #64706a); }
.qb-booking-status strong { color: #194a3a; }
.qb-booking-cancel { margin: 2px 0; }
.qb-booking-waitlist { border-left: 4px solid #a6752e; }
.qb-qradmin .qb-panel { border-radius: 16px; }
.qb-qrcard__hiba { max-width: 30ch; color: #963b2e; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .qb-booking-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .qb-booking-alert { width: calc(100% - 24px); }
  .qb-booking-alert__gombok { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .qb-booking-alert__elem, .qb-booking-alert__osszes { flex: none; }
  .qb-booking-dialog { padding: 16px; }
  .qb-booking-actions > .qb-btn, .qb-booking-actions > form { flex: 1 1 180px; }
  .qb-booking-actions form .qb-btn { width: 100%; }
  .qb-booking-detail-content .qb-booking-actions > form, .qb-booking-detail-content .qb-booking-actions > .qb-btn { flex: 1 1 0; }
  .qb-booking-detail-content .qb-booking-actions form .qb-btn { padding: 0 8px; }
  .qb-booking-detail-content .qb-booking-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .qb-reserve__sor { grid-template-columns: 1fr; }
  .qb-reserve__blokk { padding: 18px; }
  .qb-reserve__fok { grid-template-columns: repeat(3, 1fr); }
}
@media print {
  .qb-booking-alert, .qb-booking-dialog { display: none; }
  .qb-qrcard { break-inside: avoid; }
}


.qb-fogsav {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.qb-fogsav__cim {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface), var(--paper));
  color: var(--brand-dark);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}
.qb-fogsav__cim::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qb-fogsav__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qb-fogsav__elem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.8125rem;
}
.qb-fogsav__elem + .qb-fogsav__elem {
  border-top: 1px solid var(--hairline);
}
.qb-fogsav__elem.is-var {
  background: var(--amber-soft);
  border-color: transparent;
}

.qb-fogsav__ido {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 8px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(158deg, #b98a4e, var(--brand) 55%, var(--brand-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qb-fogsav__szoveg {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.qb-fogsav__nev {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.1;
}
.qb-fogsav__meta {
  margin-top: 2px;
  color: var(--ash);
  font-size: 0.82rem;
}


/*
 * ══════════════════════════════════════════════════════════════════════════
 * TERHELÉSI NAPTÁR · admin/foglalasok.php
 * ══════════════════════════════════════════════════════════════════════════
 *
 * RÁCS, NEM TÁBLÁZAT. A kezelő nem sorokat olvas, hanem FOLTOT keres: hol
 * van lyuk a délutánban. Egy táblázat ehhez soronként végigolvastatna; a
 * rács egy pillantással megmutatja az alakzatot.
 *
 * A SZÍN NEM AZ EGYETLEN JELZÉS. Minden cellában ott a szám is (fő/férőhely),
 * és az állapotnak eltérő a háttere ÉS a keretvastagsága — színtévesztéssel
 * is olvasható marad. Egy beosztás, ami csak színnel működik, a személyzet
 * egy részének nem működik.
 * ══════════════════════════════════════════════════════════════════════════
 */
.qb-loadcal {
  margin: 24px 0;
}

.qb-loadcal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.qb-loadcal__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.qb-loadcal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.qb-loadchip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.qb-loadchip--ures    { background: var(--surface); border: 1px solid var(--hairline); color: var(--ash); }
.qb-loadchip--reszben { background: var(--mint-soft); border: 1px solid var(--mint); color: var(--ink); }
.qb-loadchip--szoros  { background: var(--amber-soft); border: 1px solid var(--amber); color: var(--ink); }
.qb-loadchip--telt    { background: var(--plum-soft); border: 1px solid var(--plum); color: var(--ink); }

.qb-loadcal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qb-loadcell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.qb-loadcell__ido {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

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

/* A várólista saját sora: ez az, amiért vissza kell hívni valakit. */
.qb-loadcell__var {
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.qb-loadcell--reszben {
  background: var(--mint-soft);
  border-color: var(--mint);
}

.qb-loadcell--szoros {
  background: var(--amber-soft);
  border-color: var(--amber);
  border-width: 2px;
}

.qb-loadcell--telt {
  background: var(--plum-soft);
  border-color: var(--plum);
  border-width: 2px;
}

.qb-loadcell--telt .qb-loadcell__fo,
.qb-loadcell--szoros .qb-loadcell__fo {
  color: var(--ink);
  font-weight: 700;
}

/*
 * AMI ELMÚLT, AZ NEM DÖNTÉS TÖBBÉ. Nem tüntetjük el — a délelőtt is része a
 * napnak, és utólag is megnézhető —, de halkabb, hogy a szem a MÉG HÁTRALÉVŐ
 * sávokra essen.
 */
.qb-loadcell.is-past {
  opacity: 0.45;
}

@media print {
  .qb-loadcal__legend { display: none; }
  .qb-loadcell { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PRÉMIUM QR-TERVEZŐ
 * A kód körüli négy modulnyi biztonsági sávhoz nem nyúlunk: minden márka-
 * elem, keret és dekoráció azon kívül marad, így a szebb kód is jól olvasható.
 * ══════════════════════════════════════════════════════════════════════════ */
.qb-qrdesigner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.qb-qrdesigner__controls,
.qb-qrdesigner__premium {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.qb-qrdesigner__premium {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.qb-qrdesigner__premium > :not(legend) {
  width: 100%;
  margin-top: 20px;
}

.qb-qrdesigner__premium > legend {
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 760;
}

.qb-qrdesigner__premium[disabled] {
  opacity: 0.5;
}

.qb-qrdesigner__feliratok,
.qb-qrdesigner__colors,
.qb-qrdesigner__logo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.qb-qrdesigner__feliratok > .qb-mezo,
.qb-qrdesigner__stylegroups > .qb-mezo,
.qb-qrdesigner__logo > .qb-mezo {
  grid-column: auto;
}

.qb-qrdesigner__colors label,
.qb-qrdesigner__feliratok label {
  display: grid;
  gap: 7px;
  color: var(--ash);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.qb-qrdesigner__colors input[type="color"] {
  width: 100%;
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.qb-qrdesigner__contrast {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--mint);
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--mint-solid-active);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.qb-qrdesigner__contrast.is-bad {
  border-color: #d09a76;
  background: #fff1e8;
  color: #7f301b;
}

.qb-qrdesigner__sectiontitle {
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.qb-qrdesigner__presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.qb-qrpreset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.qb-qrpreset:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

.qb-qrpreset.is-active {
  border-color: var(--mint-solid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint-solid) 14%, transparent);
}

.qb-qrpreset__swatch {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--preset-light, #fff) 0 52%, var(--preset-dark, #111) 52% 100%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 68%, transparent);
}

.qb-qrpreset__swatch.is-classic { --preset-dark: #111111; --preset-light: #ffffff; }
.qb-qrpreset__swatch.is-brand { --preset-dark: #0b6b51; --preset-light: #f5fbf8; }
.qb-qrpreset__swatch.is-bistro { --preset-dark: #4b2e24; --preset-light: #fff8ec; }
.qb-qrpreset__swatch.is-elegant { --preset-dark: #20352d; --preset-light: #fffefa; }

.qb-qrpreset span,
.qb-qrpreset small {
  display: block;
  min-width: 0;
}

.qb-qrpreset small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ash);
  font-size: 0.64rem;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qb-qrdesigner__stylegroups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

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

.qb-qroption {
  position: relative;
  display: grid;
  gap: 7px;
  place-items: center;
  min-width: 0;
  padding: 10px 6px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ash);
  font-size: 0.7rem;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.qb-qroption input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

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

.qb-qroption:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--mint-solid) 24%, transparent);
  outline-offset: 2px;
}

.qb-qrshape {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 7px);
  grid-auto-rows: 7px;
  gap: 3px;
  width: 27px;
  height: 27px;
}

.qb-qrshape i {
  display: block;
  width: 7px;
  height: 7px;
  background: currentColor;
}

.qb-qrshape--module-rounded i { border-radius: 2.5px; }
.qb-qrshape--module-dots i { border-radius: 50%; }
.qb-qrshape--module-elegant i:nth-child(odd) { border-radius: 50%; }
.qb-qrshape--module-elegant i:nth-child(even) { border-radius: 1px 5px 1px 5px; }

.qb-qrshape[class*="qb-qrshape--finder-"] {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border: 4px solid currentColor;
  background: var(--surface);
}

.qb-qrshape[class*="qb-qrshape--finder-"]::before,
.qb-qrshape[class*="qb-qrshape--finder-"] i {
  position: absolute;
  content: "";
}

.qb-qrshape[class*="qb-qrshape--finder-"]::before { inset: 4px; background: var(--surface); }
.qb-qrshape[class*="qb-qrshape--finder-"] i { inset: 8px; width: auto; height: auto; background: currentColor; }
.qb-qrshape--finder-rounded { border-radius: var(--radius); }
.qb-qrshape--finder-rounded::before { border-radius: 4px; }
.qb-qrshape--finder-rounded i { border-radius: 2px; }
.qb-qrshape--finder-circle,
.qb-qrshape--finder-circle::before,
.qb-qrshape--finder-circle i { border-radius: 50%; }

.qb-qrshape[class*="qb-qrshape--frame-"] {
  position: relative;
  display: block;
  width: 34px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 5px;
}

.qb-qrshape[class*="qb-qrshape--frame-"] i {
  position: absolute;
  inset: 7px 9px;
  width: auto;
  height: auto;
  border: 2px solid currentColor;
  background: transparent;
}

.qb-qrshape--frame-brand { border-top-width: 5px; }
.qb-qrshape--frame-signature {
  border-style: double;
  border-width: 3px;
  border-radius: var(--radius);
}

.qb-qrdesigner__logo {
  align-items: end;
}

.qb-qrdesigner__color {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px !important;
  align-items: center;
  min-height: 62px;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.qb-qrdesigner__color input[type="color"] {
  width: 48px;
  min-height: 48px;
  padding: 4px;
}

.qb-qrdesigner__color span,
.qb-qrdesigner__color b,
.qb-qrdesigner__color code,
.qb-qrdesigner__contrast span,
.qb-qrdesigner__contrast b,
.qb-qrdesigner__contrast small {
  display: block;
}

.qb-qrdesigner__color code,
.qb-qrdesigner__contrast small {
  margin-top: 3px;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.qb-qrdesigner__logotoggle {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 740;
}

.qb-qrdesigner__logotoggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint-solid);
}

.qb-qrdesigner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.qb-qrdesigner__actions .qb-mezo__tipp {
  flex: 1 1 220px;
  margin: 0;
}

.qb-qrdesigner__preview {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 11px;
  min-width: 0;
}

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

.qb-qrdesigner__previewhead span,
.qb-qrdesigner__previewhead small,
.qb-qrdesigner__previewhead b {
  display: block;
}

.qb-qrdesigner__previewhead small,
.qb-qrdesigner__previewhead em {
  color: var(--ash);
  font-size: 0.72rem;
  font-style: normal;
}

.qb-qrdesigner__previewhead b {
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.92rem;
}

.qb-qrdesigner__card {
  min-height: 420px;
  justify-content: center;
  padding: clamp(22px, 4vw, 38px) !important;
  text-align: center;
}

.qb-qrdesigner__card .qb-qr {
  width: min(100%, 230px);
  margin-inline: auto;
}

.qb-qrcard__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 4px;
}

.qb-qrcard__downloads .qb-gomb {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.74rem;
}

.qb-qrdesigner__safe {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--ash);
  font-size: 0.72rem;
}

.qb-qrdesigner__safe span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--mint-solid);
  font-weight: 900;
}

:is(.qb-qrcard, .qb-qrprintcard, .qb-qrposter)[data-qr-frame] {
  --qr-dark: #111111;
  --qr-light: #ffffff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(.qb-qrcard, .qb-qrprintcard, .qb-qrposter)[data-qr-frame="brand"] {
  border-color: color-mix(in srgb, var(--qr-dark) 28%, var(--hairline));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--qr-light) 89%, #fff) 0 100%);
  box-shadow: inset 0 7px 0 var(--qr-dark), var(--lift);
}

:is(.qb-qrcard, .qb-qrprintcard, .qb-qrposter)[data-qr-frame="brand"]::after {
  position: absolute;
  right: -46px;
  bottom: -50px;
  z-index: -1;
  width: 140px;
  height: 140px;
  border: 18px solid color-mix(in srgb, var(--qr-dark) 8%, transparent);
  border-radius: 50%;
  content: "";
}

:is(.qb-qrcard, .qb-qrprintcard, .qb-qrposter)[data-qr-frame="signature"] {
  border: 1px solid color-mix(in srgb, var(--qr-dark) 38%, var(--hairline));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--qr-dark) 7%, transparent), transparent 34%),
    color-mix(in srgb, var(--qr-light) 93%, #fff);
  box-shadow:
    inset 0 0 0 5px var(--qr-light),
    inset 0 0 0 6px color-mix(in srgb, var(--qr-dark) 22%, transparent),
    var(--lift);
}

@media (max-width: 1050px) {
  .qb-qrdesigner {
    grid-template-columns: 1fr;
  }

  .qb-qrdesigner__preview {
    position: static;
  }

  .qb-qrdesigner__card {
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .qb-qrdesigner__presets,
  .qb-qrdesigner__colors,
  .qb-qrdesigner__stylegroups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-qrdesigner__stylegroups > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .qb-qrdesigner__feliratok,
  .qb-qrdesigner__logo,
  .qb-qrdesigner__colors,
  .qb-qrdesigner__presets {
    grid-template-columns: 1fr;
  }

  .qb-qrdesigner__stylegroups {
    grid-template-columns: 1fr;
  }

  .qb-qrdesigner__stylegroups > :last-child {
    grid-column: auto;
  }
}

@media print {
  :is(.qb-qrprintcard, .qb-qrposter)[data-qr-frame="brand"],
  :is(.qb-qrprintcard, .qb-qrposter)[data-qr-frame="signature"] {
    box-shadow: none;
  }
}