/* Válogató app – a design system tokenjei és a Weboldal.dc.html 1m + 1n-1q
   képernyőtervei szerint. A felület nem akar érdekes lenni: a kép a tartalom. */

/* --- betűtípusok (self-hosted, a weboldallal azonos) --- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2')
    format('woff2-variations');
  unicode-range: U+0000-00FF, U+2013, U+2014, U+2018-201A, U+201C-201E, U+2026;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2')
    format('woff2-variations');
  unicode-range: U+0100-024F, U+0170, U+0171, U+0150, U+0151;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-wght-normal.woff2')
    format('woff2-variations');
  unicode-range: U+0000-00FF, U+2013, U+2014, U+2018-201A, U+201C-201E, U+2026;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext-wght-normal.woff2')
    format('woff2-variations');
  unicode-range: U+0100-024F, U+0170, U+0171, U+0150, U+0151;
}

/* --- tokenek --- */
:root {
  --papir: #f7f7f3;
  --ho: #ffffff;
  --vaszon: #e7e7e0;
  --ko: #6f736a;
  --tinta: #22261f;
  --mustar: #edbf52;
  --mustar-sotet: #d4a431;
  --mustar-tinta: #33280a;
  --mustar-halvany: #fcf5e4;
  --ret: #5e7f52;
  --ret-sotet: #4c6b43;
  --ret-halvany: #edf2e9;
  --ret-vonal: #c6d5bf;
  --ret-feher: #fbfbf8;
  --bazsa: #c05c74;
  --bazsa-sotet: #9e4459;
  --hiba: #9c4a43;
  --hiba-halvany: #f7eceb;
  --hajszal: #dfdfd9;
  --hajszal-halvany: #e7e7e0;
  --eros-keret: #c9c9c0;
  /* Áttetsző változatokhoz: a --tinta és a --papir komponensei. Így az
     árnyékok és a fátylak sem kerülik meg a token-készletet. */
  --tinta-rgb: 34 38 31;
  --papir-rgb: 247 247 243;
  --font-display:
    'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:
    'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* A `hidden` attribútum MINDIG rejt.
   A böngésző alap-szabálya (`[hidden] { display: none }`) ugyanolyan gyenge,
   mint egy osztály-szelektor, tehát minden `display: flex`-et adó osztály
   felülírta. Ettől a borítóválasztó két doboza egyszerre látszott, a jelszó-
   blokk nem tűnt el, és a „Készen vagyok" gomb üres válogatásnál is kint volt.
   Ez a szabály nem stílus, hanem alapviselkedés – ezért `!important`. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  color: var(--tinta);
}

h1 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h2 {
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -0.014em;
}

h3 {
  font-size: 18px;
  line-height: 1.22;
}

@media (min-width: 768px) {
  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 26px;
  }
}

p {
  margin: 0;
}

a {
  color: var(--ret-sotet);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ret-vonal);
}

a:hover {
  color: var(--tinta);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

hr.hajszal {
  border: none;
  border-top: 1px solid var(--hajszal);
  margin: 16px 0;
}

.masodlagos {
  color: var(--ko);
  font-size: 15px;
}

.aprobetu {
  color: var(--ko);
  font-size: 14px;
}

.felcim {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko);
  font-weight: 500;
  margin: 0 0 10px;
}

.felcim--vilagos {
  color: rgb(var(--papir-rgb) / 0.82);
}

/* Az állapot-eyebrow sora a mentés-jelzőt is viszi, hogy ne kelljen új sáv. */
.felcim--jelzos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Halk visszajelzés az automentésről. Nem verzál, hogy állapotnak olvassuk,
   ne címkének. */
.mentes-jelzo {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ko);
  white-space: nowrap;
}

/* nem mentődött el minden – a sáv részletezi, mi maradt ki */
.mentes-jelzo[data-allapot='figyelmeztet'] {
  color: var(--hiba);
  font-weight: 500;
}

.mentes-jelzo[data-allapot='hiba'] {
  color: var(--hiba);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.szamsor {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
}

.hibauzenet {
  background: var(--hiba-halvany);
  color: var(--hiba);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}

.kiemeles {
  background: var(--ret-halvany);
  border: 1px solid var(--ret);
  border-radius: 3px;
  padding: 12px 16px;
  margin: 0 0 16px;
}

/* --- űrlapelemek --- */
label {
  font-size: 14px;
  font-weight: 500;
  display: block;
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--tinta);
  background: var(--ho);
  border: 1px solid var(--eros-keret);
  border-radius: 2px;
  padding: 11px 12px;
  width: 100%;
  margin: 4px 0 0;
}

/* A minta-szöveg ne nézzen ki kitöltött értéknek: halványabb és dőlt, hogy
   első pillantásra elváljon a beírt adattól. */
input::placeholder,
textarea::placeholder {
  color: var(--ko);
  opacity: 0.55;
  font-style: italic;
}

input[type='checkbox'],
input[type='radio'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ret);
  flex: 0 0 auto;
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--papir),
    0 0 0 4px var(--ret);
}

.gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tinta);
  background: var(--ho);
  border: 1px solid var(--eros-keret);
  border-radius: 3px;
  min-height: 48px;
  padding: 0 20px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.gomb:hover {
  border-color: var(--ret);
  color: var(--ret-sotet);
}

.gomb--fo {
  background: var(--mustar);
  border-color: var(--mustar);
  color: var(--mustar-tinta);
  font-size: 17px;
}

.gomb--fo:hover {
  background: var(--mustar-sotet);
  border-color: var(--mustar-sotet);
  color: var(--mustar-tinta);
}

.gomb--teljes {
  width: 100%;
}

.gomb--kicsi {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

.gomb--veszely:hover {
  border-color: var(--hiba);
  color: var(--hiba);
}

.szoveggomb {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ret-sotet);
  box-shadow: inset 0 -1px 0 var(--ret-vonal);
  cursor: pointer;
  text-decoration: none;
}

.szoveggomb:hover {
  color: var(--tinta);
}

.kartya {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 20px 24px;
}

.fuggoleges {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.soros {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.soros input:not([type='checkbox']):not([type='radio']),
.soros select {
  width: auto;
  flex: 1 1 160px;
}

.pipa-sor {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  min-height: 44px;
}

/* --- köszönő levél: melyik kidolgozott kép menjen vele --- */
.koszono-kepek {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.koszono-kep {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
}

.koszono-kep__kep {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  border: 2px solid transparent;
}

.koszono-kep__pipa:checked + .koszono-kep__kep {
  border-color: var(--ret-sotet);
}

.koszono-kep__nev {
  color: var(--ko);
  overflow-wrap: anywhere;
}

/* A × a csempe sarkában ül, a `label`-en KÍVÜL: belül a koppintás a pipát is
   átbillentené. A doboz csak a helyét adja meg. */
.koszono-kep-doboz {
  position: relative;
}

/* Melyik kép megy a levél tetejére. Halkan, a fájlnév alatt: a fő döntés a
   pipa, ez csak a kettő közötti sorrend. */
.koszono-kep__fejlec {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--ko);
  font-size: 12px;
  cursor: pointer;
}

/* „Másik képet töltök fel": egy sor, amíg nem kell. A teljes doboz akkor áll
   nyitva, amikor még egy kép sincs – onnantól ez a halk út a cseréhez. */
.koszono-ujkep {
  margin-bottom: 16px;
}

.koszono-ujkep__fej {
  display: inline-block;
  padding: 6px 0;
  color: var(--ret-sotet);
  font-size: 13px;
  cursor: pointer;
}

.koszono-ujkep__fej::marker {
  color: var(--ko);
}

.koszono-ujkep__doboz {
  margin-top: 8px;
}

/* Melyik build fut. Halkan, de mindig látszik: kézi zip-deploynál ez az
   egyetlen jelzés arról, hogy a Restart megtörtént-e. */
.admin-fej__verzio {
  color: var(--ko);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Az előző feltöltés sebessége. Halkan: nem funkció, hanem mérőszám – de a
   megosztott tárhelyen ez az egyetlen hely, ahol látszik. */
.feltoltes-meres {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hajszal);
  color: var(--ko);
  font-variant-numeric: tabular-nums;
}

/* --- köszönő levél: összecsukható szerkesztő + élő előnézet --- */
/* Elküldés után a szakasz becsukva jelenik meg: a lapon ilyenkor már a
   kidolgozás és az átadás a fontos. */
.koszono {
  padding: 0;
}

.koszono__fej {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
}

.koszono__fej::-webkit-details-marker {
  display: none;
}

.koszono__cim {
  margin: 0;
  flex: 1;
}

/* saját nyíl: a beépített háromszög flexben egyes böngészőkben eltűnik */
.koszono__fej::after {
  content: '▾';
  color: var(--ko);
  transition: transform 0.15s ease;
}

.koszono[open] > .koszono__fej::after {
  transform: rotate(180deg);
}

.koszono__allas {
  font-size: 13px;
  color: var(--ko);
}

.koszono__allas--kesz {
  color: var(--ret-sotet);
  font-weight: 500;
}

/* A kártyának magának nincs bélése (`.koszono { padding: 0 }`), tehát minden
   blokk maga adja hozzá – a feltöltő is, különben a szaggatott doboz a kártya
   szélének feszülne, miközben fölötte és alatta minden 24 px-re beljebb ül. */
.koszono__bevezeto,
.koszono > .masodlagos,
.koszono__feltolto,
.koszono-ujkep,
.koszono__oszlopok {
  padding-left: 24px;
  padding-right: 24px;
}

.koszono__feltolto {
  margin-bottom: 16px;
}

.koszono__oszlopok {
  display: grid;
  gap: 24px;
  padding-bottom: 22px;
}

@media (min-width: 900px) {
  .koszono__oszlopok {
    /* a szerkesztő kap több helyet: ott gépel, az előnézet olvasásra van */
    grid-template-columns: 1fr 380px;
  }
}

.koszono__elonezet {
  min-width: 0;
}

/* A levél a saját betűivel és színeivel rajzolódik ki, ezért iframe: az
   e-mail beágyazott stílusai így nem szivárognak az adminba. */
.koszono__keret {
  width: 100%;
  height: 520px;
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  background: var(--ho);
  display: block;
}

.koszono__pulzus {
  margin-left: 8px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ko);
}

/* a lezárás gombja a sáv alján áll, nyílt és csukott állapotban is */
/* ============ KLIENS ============ */

/* --- belépő / ki válogat --- */
.belepo__borito {
  position: relative;
  height: 46vh;
  min-height: 320px;
  background: var(--vaszon);
  overflow: hidden;
}

.belepo__borito img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.belepo__arnyek {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--tinta-rgb) / 0.62),
    rgb(var(--tinta-rgb) / 0) 62%
  );
}

.belepo__cimsor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px;
}

.belepo__cimsor h1 {
  font-weight: 300;
  font-size: 44px;
  line-height: 1.05;
  color: #f7f7f3;
  margin: 0 0 8px;
}

.belepo__meta {
  color: rgb(var(--papir-rgb) / 0.86);
  font-size: 15px;
}

.belepo__tartalom {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.belepo__tartalom .kartya h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.belepo__tartalom .kartya .masodlagos {
  margin-bottom: 20px;
}

.chip-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.valaszto-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--eros-keret);
  border-radius: 999px;
  background: var(--ho);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--tinta);
  cursor: pointer;
}

.valaszto-chip:hover {
  border-color: var(--ret);
  color: var(--ret-sotet);
}

/* --- válogató --- */
.valogato {
  padding-bottom: 220px;
}

.valogato__fej {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 16px 0;
}

.valogato__fej h1 {
  margin: 0 0 8px;
}

.valogato__hint {
  color: var(--ko);
  font-size: 15px;
  margin: 0 16px 20px;
}

.valogato hr.hajszal {
  margin: 20px 16px;
}

/* A KÉPEK SORFOLYTONOSAN, ahogy a fotós fotózta őket.
 *
 * Korábban `columns` volt itt, ami OSZLOPONKÉNT tölt: 200 képnél és négy
 * oszlopnál az első sorban az 1., az 51., a 101. és a 151. kép állt egymás
 * mellett. A fájlnevek időrendben kapják a számot, tehát a család össze-vissza
 * látta a fotózást. A flex-sorok DOM-sorrendben töltenek: 1., 2., 3., 4.
 *
 * A KÉPARÁNY MEGMARAD (nincs vágás): a sor magassága egységes, a szélességet
 * az arány adja – ez a klasszikus „justified" galéria. A `--arany` a
 * szerverről jön, a kép szélesség/magasság mezőjéből.
 */
.valogato__racs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px;
  --sormagassag: 180px;
}

@media (min-width: 700px) {
  .valogato__racs {
    --sormagassag: 240px;
  }
}

@media (min-width: 1100px) {
  .valogato__racs {
    --sormagassag: 260px;
  }

  .valogato__fej,
  .valogato__hint {
    padding-left: 24px;
    padding-right: 24px;
  }

  .valogato hr.hajszal {
    margin-left: 24px;
    margin-right: 24px;
  }
}

.kepkartya {
  position: relative;
  margin: 0;
  background: var(--vaszon);
  cursor: pointer;
  /* A SZÉLESSÉG AZ ARÁNYBÓL: a fekvő kép szélesebb helyet kap, mint az álló,
     és a sor magassága ettől lesz egységes. Arány nélkül (régi kép, amiről
     nincs méretünk) az álló 3:4 a tartalék. */
  flex: var(--arany, 0.75) 1 calc(var(--arany, 0.75) * var(--sormagassag));
}

.kepkartya img {
  display: block;
  width: 100%;
  height: auto;
}

/* AZ UTOLSÓ SOR KITÖLTŐI. Nélkülük a `flex-grow` az utolsó sor egy-két képét
   az egész szélességre nyújtaná – egyetlen maradék kép óriásira nőne. Ezek
   nulla magasak, tehát nem látszanak, csak helyet foglalnak. */
.kepkartya-szellem {
  flex: 1 1 calc(0.75 * var(--sormagassag));
  height: 0;
  margin: 0;
}

.kepkartya__jelolo {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ret);
  color: var(--ret-feher);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.kepkartya.kedvelt {
  outline: 3px solid var(--ret);
  outline-offset: -3px;
}

.kepkartya.kedvelt .kepkartya__jelolo {
  display: flex;
}

/* „Nagyi is kérte": a család másik része is bejelölte ezt a képet. Nem
   kattintható – a koppintás a képet válassza, ne a jelzést. A hosszú
   felsorolás a title-ben van, a mondat a diavetítésben. */
.kepkartya__masok {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 56px);
  padding: 4px 8px;
  background: rgb(var(--papir-rgb) / 0.92);
  color: var(--ko);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a bal felső sarokban a nagyítógomb áll: mellé kerül, nem alá */
.kepkartya__masok--tolva {
  left: 48px;
  max-width: calc(100% - 96px);
}

.kepkartya__cimke {
  position: absolute;
  left: 0;
  bottom: 0;
  min-height: 32px;
  display: none;
  align-items: center;
  padding: 0 12px;
  background: rgb(var(--papir-rgb) / 0.92);
  font-size: 13px;
}

@media (min-width: 1100px) {
  .kepkartya__cimke {
    display: flex;
  }
}

.kepkartya__megjegyzes {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgb(var(--papir-rgb) / 0.9);
  color: var(--tinta);
  font-size: 16px;
  cursor: pointer;
  display: none;
}

.kepkartya:hover .kepkartya__megjegyzes,
.kepkartya.kedvelt .kepkartya__megjegyzes {
  display: block;
}

.kepkartya__jegyzet {
  position: absolute;
  left: 0;
  right: 44px;
  bottom: 0;
  background: rgb(var(--papir-rgb) / 0.92);
  font-size: 13px;
  padding: 6px 10px;
}

/* A fájlnév-címke a bal alsó sarokban ül, ezért a letöltés a JOBB alsóba megy –
   egymáson állva a kettő olvashatatlan volt. */
.kepkartya__letoltes {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgb(var(--papir-rgb) / 0.92);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 13px;
  box-shadow: none;
}

/* --- összesítő sáv (1m) --- */
.osszesito {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  z-index: 20;
  pointer-events: none;
}

/* A sáv és a fölé kerülő figyelmeztetés egy oszlopban áll (design): ha a
   kártya magas, a sáv nem tolódik ki a képernyőről, hanem az oszlop görget. */
.osszesito__oszlop {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  max-height: 82dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.osszesito__doboz {
  width: 100%;
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  box-shadow: 0 -2px 24px rgb(var(--tinta-rgb) / 0.1);
}

/* A) felajánlás válogatás közben: ennyi, és nem több. Statikus sor, nincs
   animáció, nincs gomb – a teljes kártya a véglegesítésnél jön. */
.osszesito__halksor {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 14px;
  color: var(--ko);
}

.osszesito__halksor[hidden] {
  display: none;
}

.osszesito__sor {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  flex-wrap: wrap;
}

/* Az összeg maga is nyit-zár (a teljes sor gomb volt korábban), de a
   „Készen vagyok" most köztük áll, ezért két külön gomb. */
.osszesito__osszeg {
  flex: 1 1 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

/* A sávbeli lezáró gomb: kompakt, de nem eltüntethető – ez a továbbút. */
.osszesito__kesz-sav {
  flex: 0 0 auto;
}

/* Nincs kiválasztott kép: a gomb látszik, de nem visz sehová. Néma
   visszairányítás helyett inkább mutassa, hogy még nincs mit lezárni. */
.osszesito__kesz-sav[aria-disabled='true'],
.osszesito__kifejtes .gomb[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

.osszesito__reszletek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ret-sotet);
  white-space: nowrap;
  cursor: pointer;
}

/* A nyíl zárva felfelé mutat (a doboz felfelé nyílik), nyitva lefelé: így a
   gomb nyitva is a bezárást ígéri, nem újabb nyitást. */
.osszesito__nyil {
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

.osszesito__nyil--nyitva {
  transform: rotate(0deg);
}

.osszesito__kifejtes {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--hajszal);
}

.osszesito__kifejtes[hidden] {
  display: none;
}

.osszesito__tabla {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 15px;
  padding-top: 12px;
}

.osszesito__tabla .masodlagos {
  font-size: 15px;
}

.osszesito__vegosszeg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.osszesito__ar {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.022em;
}

.osszesito__jegyzet {
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--ko);
}

/* --- letöltő sáv (fizetés után) --------------------------------------------- */
/* Ugyanaz a lebegő hely, mint az összesítő sávé: fizetés előtt ott az ár és a
   lezárás, fizetés után a letöltés. Egyszerre soha nem látszik a kettő. */
.letolto__doboz {
  padding: 14px 16px;
}

.letolto__allas {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ko);
}

.letolto__sugo {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ko);
  line-height: 20px;
}

/* --- nudge: egy lap, két hangsúly ---------------------------------------- */
/* A két üzenet nem ugyanaz a fajta közlés (spec 4. fejezet), ezért nem is néz
   ki egyformán. Kitöltött háttér egyiken sincs: a színes alap kitöltött gombbal
   promóciós szalagnak olvasódna, és pont azt a manipulatív érzést adná, amit a
   spec kerülni akar. Az A) felajánlás hajszálkerettel és kontúros gombbal
   halkabb, a B) figyelmeztetés bazsarózsa kerettel és kitöltött gombbal
   hangsúlyos – de a hangvétele segítő, nem akciós. */
.nudge {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 20px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgb(var(--tinta-rgb) / 0.1);
}

.nudge--figyelmeztetes {
  border-color: var(--bazsa);
  box-shadow: 0 12px 32px rgb(var(--tinta-rgb) / 0.14);
}

.nudge__fej {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.nudge__cim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.22;
  text-wrap: balance;
}

.nudge__tabla {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-bottom: 12px;
}

.nudge__zaras {
  margin: 0 0 16px;
  text-wrap: pretty;
}

/* A bezárás jelentése is más: az × átmeneti elrejtés, a „Kösz, nem" döntés.
   Az × a kliensből jön (közvetlen gyerek), a „Kösz, nem" űrlapból – a sarokba
   húzás ezért mindkét burkolatra kell. */
.nudge__bezar {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ko);
  cursor: pointer;
}

.nudge__fej > .nudge__bezar,
.nudge__fej > form {
  flex: none;
  margin: -12px -12px 0 0;
}

.nudge__vissza {
  display: inline-block;
  margin-top: 12px;
}

/* ============ ADMIN (1n-1q) ============ */

.admin-fej {
  border-bottom: 1px solid var(--hajszal);
  background: var(--papir);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-fej__marka {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.admin-fej__nev {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--tinta);
}

.admin-fej__photo {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ret);
}

.admin-fej__cimke {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko);
}

.admin-fej__nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--eros-keret);
  background: var(--ho);
  color: var(--tinta);
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  box-shadow: none;
}

.admin-pill:hover {
  border-color: var(--ret);
  color: var(--ret-sotet);
}

.admin-pill--aktiv,
.admin-pill--aktiv:hover {
  border-color: var(--ret);
  background: var(--ret);
  color: var(--ret-feher);
}

.admin {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

@media (min-width: 768px) {
  .admin {
    padding: 32px 32px 64px;
  }
}

.admin-cim p.masodlagos {
  margin-top: 6px;
}

.admin-szekcio h2 {
  margin-bottom: 4px;
}

.admin-szekcio > .masodlagos {
  margin-bottom: 20px;
}

/* teendő kártyák (1n) */
.teendo {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.teendo__cim {
  font-size: 17px;
}

.teendo__allapot {
  font-size: 14px;
  color: var(--ko);
  margin-left: 8px;
}

.teendo__sor {
  font-size: 15px;
  color: var(--ko);
  margin-top: 2px;
}

.teendo__gombok {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}

/* szakasz-kártyák (1n) */
.szakaszok {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 900px) {
  .szakaszok {
    grid-template-columns: repeat(7, 1fr);
  }
}

.szakasz {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: var(--tinta);
  box-shadow: none;
  display: block;
}

.szakasz:hover {
  border-color: var(--ret);
  color: var(--tinta);
}

.szakasz__sav {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--vaszon);
}

.szakasz__szam {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.022em;
  margin-top: 12px;
}

.szakasz__cimke {
  display: block;
  font-size: 13px;
  color: var(--ko);
  margin-top: 2px;
}

/* pénz-kártyák (1n) */
.penz {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 900px) {
  .penz {
    grid-template-columns: repeat(4, 1fr);
  }
}

.penz__kartya {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 20px;
}

.penz__ertek {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.022em;
}

.penz__reszlet {
  font-size: 14px;
  color: var(--ko);
  margin-top: 4px;
}

/* fotózás-lista (1p) */
.lista-tabla {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  overflow: hidden;
}

.lista-tabla__fej,
.lista-tabla__sor {
  display: grid;
  grid-template-columns: 150px 1.2fr 1.4fr 210px 110px 90px;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hajszal-halvany);
}

.lista-tabla__fej {
  border-bottom: 1px solid var(--hajszal);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko);
}

.lista-tabla__sor:last-child {
  border-bottom: none;
}

.jobbra {
  text-align: right;
}

.allapot-pont {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--vaszon);
  flex: 0 0 auto;
}

/* állapot-színek: a folyamat elején mustár, közepén rét, a végén sötét rét */
.allapot--szabad {
  background: var(--eros-keret);
}

.allapot--lefoglalva {
  background: var(--mustar);
}

.allapot--lefotozva {
  background: var(--mustar-sotet);
}

.allapot--valogatasra_var {
  background: var(--ret-vonal);
}

.allapot--kidolgozasra_var {
  background: var(--ret);
}

.allapot--fizetesre_var {
  background: var(--bazsa);
}

.allapot--atadva {
  background: var(--ret-sotet);
}

.lista-kartya {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 16px;
  margin-bottom: 8px;
}

/* ---- fázis-sáv: a galéria admin navigációja ------------------------------
   Öt lépés, mindegyik a SAJÁT állapotával. A lap eddig mind a hat szakaszt
   egymás alá rakta, pedig Zsuzsi egy ügymenet miatt jön fel: a soron lévő
   lépést a folyamat állapota nyitja ki (`galeria-fazis.js`), tehát a sáv nem
   kérdés, hanem tájékoztatás – kattintani csak akkor kell, ha épp NEM a soros
   dolog miatt jöttél.

   Mobilon lista, 900 px fölött öt hasáb. A lista nem veszteség: csukott
   állapotban is ez a galéria állapotjelentése.

   A színek jelentése a token-készletből jön: rét = megvan, mustár = itt van a
   teendő, papír = még nem tart itt. Az ikon `currentColor`, hogy a jelölés
   színe se legyen külön érték. */
.fazisok {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  overflow: hidden;
}

.fazis {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 44px;
  padding: 11px 16px;
  border-top: 1px solid var(--hajszal);
  color: var(--tinta);
  text-decoration: none;
  /* a globális link-alávonást felül kell írni: ez a sáv nem szövegbeli link */
  box-shadow: none;
}

.fazis:first-child {
  border-top: none;
}

.fazis__fej {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fazis__jel {
  flex: 0 0 auto;
  color: var(--ko);
}

.fazis__nev {
  font-size: 15px;
  font-weight: 500;
}

.fazis__allas {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ko);
}

.fazis:hover .fazis__nev {
  color: var(--ret-sotet);
}

.fazis--kesz {
  background: var(--ret-halvany);
}

.fazis--kesz .fazis__jel,
.fazis--kesz .fazis__allas {
  color: var(--ret-sotet);
}

/* A mustár a teendő színe a felületen: itt is azt jelenti. */
.fazis--most {
  background: var(--ho);
  box-shadow: inset 3px 0 0 var(--mustar);
}

.fazis--most .fazis__nev {
  font-weight: 600;
}

.fazis--most .fazis__jel {
  color: var(--mustar-sotet);
}

.fazis--most .fazis__allas {
  color: var(--tinta);
}

.fazis--jon {
  background: var(--papir);
}

.fazis--jon .fazis__nev {
  color: var(--ko);
  font-weight: 400;
}

@media (min-width: 900px) {
  /* A hasábok számát a LÉPÉSEK száma adja, nem egy bedrótozott ötös: egy
     hatodik lépés így nem kér CSS-módosítást is. */
  .fazisok {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .fazis {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 13px 16px 14px;
    border-top: none;
    border-left: 1px solid var(--hajszal);
  }

  .fazis:first-child {
    border-left: none;
  }

  /* Öt hasáb mellett a felső él jelöli a mostani lépést: a bal oldali csík a
     szomszéd elválasztó vonalával csúszna egybe. */
  .fazis--most {
    box-shadow: inset 0 3px 0 var(--mustar);
  }
}

/* galéria admin (1o) */
.urlap-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  align-items: end;
}

.feltolto {
  border: 1px dashed var(--eros-keret);
  border-radius: 3px;
  background: var(--ho);
  padding: 32px;
  text-align: center;
}

.feltolto p {
  margin: 0 0 4px;
  font-size: 17px;
}

.feltolto .aprobetu {
  margin-bottom: 20px;
}

/* ---- képrács: csempék és a jelzéseik ------------------------------------
   Két független kérdés, két külön hely: a KERET mondja meg, hogy a család
   kérte-e, az alsó sáv pedig a fájlnevet és az állapotot. Korábban egyetlen
   címke próbálta mind a kettőt, és a legfontosabb – hogy mit kértek – sehol
   nem látszott. A borító nem gomb minden csempén, hanem mód: így a négy
   egymásra csúszó sarokból kettő maradt. */

.kepracs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 900px) {
  .kepracs {
    grid-template-columns: repeat(6, 1fr);
  }

  /* a rendelés a munkalista: ekkora méretben meg lehet ítélni a retust */
  .kepracs--nagy {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kep-csempe {
  margin: 0;
  position: relative;
  background: var(--vaszon);
}

.kepracs img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* A TÖRÖLT FÁJL HELYE. Ugyanaz az arány, mint a képé: enélkül a csempe
   magassága nullára esik, és a fájlnév-sávok egymásra csúsznak. */
.kep-csempe__hely {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papir);
  border: 1px dashed var(--hajszal);
  color: var(--ko);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 0 8px;
}

/* „a család kérte" – ugyanaz a jelzés, mint a családi oldalon a kedvelt kép */
.kep-csempe--kert {
  outline: 3px solid var(--ret);
  outline-offset: -3px;
}

/* Papír alátét: alátét nélkül a felirat eltűnt a világos képeken, pedig
   Zsuzsi világos, levegős képeket fotóz. */
.kep-csempe__sav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  background: rgb(var(--papir-rgb) / 0.92);
}

.kep-csempe__nev {
  font-size: 12px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Csend = alapállapot: szó csak ott van, ahol jelent is valamit. */
.kep-csempe__allapot {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ko);
}

.kep-csempe__allapot--hianyzik,
.kep-csempe__allapot--arva {
  color: var(--hiba);
  font-weight: 600;
}

.kep-csempe__allapot--kidolgozva {
  color: var(--ret-sotet);
  font-weight: 500;
}

.kep-csempe__allapot--gratisz {
  color: var(--bazsa-sotet);
  font-weight: 500;
}

/* a változat csendes: a rendelés állapotát a szülő csempéje viseli */
.kep-csempe[data-fajta='valtozat'] .kep-csempe__nev {
  color: var(--ko);

  /* HÁNY FÁJL MEGY ÁT EBBŐL A KÉPBŐL. Egy fotóhoz több kidolgozott fájl is
   tartozhat – színes és fekete-fehér –, és a család MINDET megkapja: a zip is
   minden feltöltött fájlt visz. Ugyanígy néz ki viszont két véletlenül
   feltöltött verzió, ezért ez tényközlés, nem hibajelzés: Zsuzsi eldönti.
   A bal felső sarok szabad, mert ahol ez megjelenik (rendelés, ráadás), ott
   nincs kijelölő pipa. */
  .kep-csempe__fajlok {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgb(var(--papir-rgb) / 0.92);
    color: var(--tinta);
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

/* A pipa elég nagy célfelülettel, egyedül a bal felső sarokban. */
.kep-csempe__pipa {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  background: rgb(var(--papir-rgb) / 0.9);
  cursor: pointer;
}

/* Érintőn nincs hover, ezért a törlés mindig látszik – csak halkan. Ugyanez a
   kör ül a köszönő levél csempéin is: egy jelentés, egy megjelenés. */
.kep-csempe__torles,
.koszono-kep__torles {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: rgb(var(--papir-rgb) / 0.72);
  color: var(--tinta);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.kep-csempe:hover .kep-csempe__torles,
.kep-csempe__torles:focus-visible,
.koszono-kep-doboz:hover .koszono-kep__torles,
.koszono-kep__torles:focus-visible {
  background: rgb(var(--papir-rgb) / 0.95);
}

.kep-csempe:has([data-kep-pipa]:checked) {
  outline: 2px solid var(--hiba);
  outline-offset: -2px;
}

/* „csak a hiányzók": halk szűrés a rendelés szakaszon belül */
.kepracs--csak-hianyzo .kep-csempe:not([data-fajta='hianyzik']) {
  display: none;
}

/* ---- borító mód ---------------------------------------------------------
   Galériánként egyszer döntesz róla, mégis minden csempére kellett volna egy
   gomb – ráadásul pont a kijelölő pipa helyére. Ezért mód lett belőle. */

/* --- borítókép: külön feltöltés, nem a válogató képek közül választás --- */
/* SOR VAN, FÁJL NINCS: a tárhely felszabadítása után a kép sora megmarad, a
   fájlja nem. Piros-halvány, nem mustár: ez nem tennivaló, hanem olyan állapot,
   amiben a család üres galériát látna. */
.fajlhiany-sor {
  margin: 0 0 16px;
  background: var(--hiba-halvany);
  border-left: 3px solid var(--hiba);
  border-radius: 3px;
  padding: 12px 16px;
}

.fajlhiany-sor p {
  font-size: 15px;
  margin: 0;
}

.borito-sor {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--mustar-halvany);
  border-radius: 3px;
  padding: 12px 16px;
}

.borito-sor__allapot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 260px;
}

.borito-sor__allapot p {
  font-size: 15px;
  margin: 0;
}

/* Az arány szándékosan fix: a levél tetején és a belépőn is fekvő sávként
   jelenik meg, tehát itt is úgy mutatjuk, ahogy a család látni fogja. */
.borito-sor__kep {
  width: 108px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}

.borito-sor__urlap {
  margin-left: auto;
}

/* ---- a kidolgozás nézet szakaszai -------------------------------------- */

.zaras-sav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-radius: 3px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 15px;
}

.zaras-sav .felcim {
  margin: 0;
}

.zaras-sav--kesz {
  background: var(--ret-halvany);
  color: var(--ret-sotet);
}

.zaras-sav--kesz .felcim {
  color: var(--ret-sotet);
}

.zaras-sav--figyelem {
  background: var(--mustar-halvany);
}

.racs-szakasz {
  margin-top: 28px;
}

.racs-szakasz__fej {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.racs-szakasz__fej .felcim,
.racs-szakasz__fej h3 {
  margin-bottom: 2px;
}

/* Pár nélküli kidolgozott fájl: nem ajándék, hanem elgépelt fájlnév. */
.arva-sav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--hiba-halvany);
  border-radius: 3px;
  padding: 12px 16px;
  margin-top: 24px;
  font-size: 14px;
  color: var(--ko);
}

.arva-sav__cimke {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hiba);
  white-space: nowrap;
}

.arva-sav strong {
  color: var(--tinta);
}

.arva-sav__racs {
  max-width: 620px;
}

/* Összecsukva indul: nyitáskor tölt, különben több száz aláírt R2-URL
   készülne olyan képekhez, amiket meg sem nézel. */
.tobbi-szakasz {
  margin-top: 28px;
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
}

.tobbi-szakasz__fej {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.tobbi-szakasz__nyil {
  flex: 0 0 auto;
  color: var(--ko);
  transition: transform 0.15s ease;
}

.tobbi-szakasz__fej[aria-expanded='true'] .tobbi-szakasz__nyil {
  transform: rotate(90deg);
}

.tobbi-szakasz__fej .aprobetu {
  margin-left: auto;
}

.tobbi-szakasz__tartalom {
  padding: 0 16px 16px;
}

.osszesito-tabla {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  font-size: 15px;
}

.vegosszeg-sor {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.vegosszeg-sor .szamsor {
  font-size: 30px;
}

/* időpontok (1q) */
.idopont-sor {
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  padding: 18px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.idopont-sor__datum {
  font-size: 17px;
  margin: 0 0 2px;
}

/* A sor bal fele a fotózás szerkesztőlapjára visz – az elgépelt időpont így
   a Fotózások oldal megkerülésével javítható. Nem az egész sor a link, mert
   a jobb felén űrlapok élnek (jelentkező neve, törlés). */
.idopont-sor__nyit {
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
  margin: -6px -10px;
  padding: 6px 10px;
  transition: background 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.idopont-sor__nyit:hover {
  background: var(--ret-halvany);
}

.idopont-sor__nyit:hover .idopont-sor__datum {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.idopont-sor__nyit:focus-visible {
  outline: 2px solid var(--ret);
  outline-offset: 2px;
}

.idopont-sor__gombok {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.idopont-sor__gombok input {
  min-width: 200px;
  width: auto;
  margin: 0;
}

.json-elonezet {
  margin: 0;
  border: 1px solid var(--eros-keret);
  border-radius: 2px;
  padding: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--papir);
  overflow-x: auto;
}

.kozep {
  max-width: 480px;
  margin: 0 auto;
  padding: 12vh 16px 64px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- fotózás detail (1p): folyamat-sáv, pénz-kártya, galéria-sáv --------- */

.folyamat-sav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.folyamat-lepes__csik {
  display: block;
  height: 3px;
  background: var(--vaszon);
}

.folyamat-lepes--mult .folyamat-lepes__csik {
  background: var(--ret);
  opacity: 0.45;
}

.folyamat-lepes--aktiv .folyamat-lepes__csik {
  background: var(--ret);
}

.folyamat-lepes__cimke {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ko);
}

.folyamat-lepes--aktiv .folyamat-lepes__cimke {
  color: var(--tinta);
}

@media (max-width: 700px) {
  .folyamat-lepes__cimke {
    display: none;
  }

  .folyamat-lepes--aktiv .folyamat-lepes__cimke {
    display: block;
    white-space: nowrap;
  }
}

.kartya-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 900px) {
  .kartya-racs {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.penz-osszesito {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 15px;
}

.galeria-sav {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.szoveggomb--veszely {
  color: var(--hiba);
}

/* ---- galéria admin (1o): link-kártya, kapcsolók, drop-zónák, statisztika -- */

.link-sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.jelszo-blokk {
  margin-top: 12px;
  margin-left: 28px;
  align-items: flex-end;
}

.jelszo-blokk input {
  max-width: 220px;
}

.beallitas-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .beallitas-racs {
    grid-template-columns: minmax(280px, 320px) 1fr;
  }

  .beallitas-racs--forditott {
    grid-template-columns: 1fr minmax(280px, 320px);
  }
}

.beallitas-sor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hajszal);
  margin: 0;
}

.beallitas-sor:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.beallitas-sor .pipa-sor {
  flex: 1 1 auto;
  margin: 0;
}

/* Félkész funkció: ott van, de halkan, és nem kapcsolható be. */
.beallitas-sor--tiltott .pipa-sor {
  color: var(--ko);
}

.beallitas-sor--tiltott input[type='checkbox'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* A címkén BELÜL van, hogy szűk kártyán a következő sorba tudjon tördelni. */
.beallitas-sor__jelzes {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko);
  background: var(--vaszon);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* ---- súgó-buborék -------------------------------------------------------
   A kapcsolók neve önmagáért beszél; a magyarázat csak akkor kell, ha
   rákérdezel. Az „i" a címkén KÍVÜL van, különben átbillentené a kapcsolót. */

.sugo-doboz {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}

.sugo {
  width: 24px;
  height: 24px;
  border: 1px solid var(--eros-keret);
  border-radius: 999px;
  background: var(--ho);
  color: var(--ko);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  line-height: 1;
  cursor: help;
  padding: 0;
}

.sugo:hover {
  border-color: var(--ko);
  color: var(--tinta);
}

.sugo__buborek {
  position: absolute;
  top: calc(100% + 8px);
  right: -4px;
  z-index: 2;
  width: 260px;
  padding: 10px 12px;
  background: var(--ho);
  border: 1px solid var(--hajszal);
  border-radius: 3px;
  box-shadow: 0 8px 24px -12px rgb(var(--tinta-rgb) / 0.28);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ko);
  text-transform: none;
  letter-spacing: 0;
  /* nem `visibility: hidden`: az kivenné a kisegítő fából is, pedig az
     aria-describedby épp erre a szövegre mutat */
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sugo:hover + .sugo__buborek,
.sugo:focus-visible + .sugo__buborek {
  opacity: 1;
}

.drop-zona {
  position: relative;
  border: 1px dashed var(--eros-keret);
  background: var(--ho);
  border-radius: 3px;
  padding: 40px 24px;
  text-align: center;
  transition: background 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.drop-zona--aktiv {
  border-color: var(--ret);
  background: var(--ret-halvany);
}

.drop-zona p {
  margin: 0 0 4px;
}

.drop-zona .aprobetu {
  display: block;
  margin: 0 0 20px;
}

.fizetve-sav {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lightroom-lista {
  width: 100%;
  border: 1px solid var(--eros-keret);
  border-radius: 2px;
  padding: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papir);
  resize: vertical;
}

.stat-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.stat-kartya__ertek {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.022em;
}

/* Galéria adatai kártya: 4 mező + Mentem egy sorban, felül igazítva –
   a hintek alul lógnak, nem tolják el a szomszéd mezőket. */
.urlap-racs--negyes {
  align-items: start;
}

.urlap-racs--negyes > button {
  justify-self: start;
}

@media (min-width: 980px) {
  .urlap-racs--negyes {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }

  /* a gomb a címke (23px) + input-térköz (4px) alá, az input-sor vonalába */
  .urlap-racs--negyes > button {
    margin-top: 27px;
  }
}

/* ---- magyar naptár-választó (a natív mező böngésző-nyelvű lenne) --------- */

.datum-burok {
  position: relative;
  display: block;
}

.datum-mezo {
  cursor: pointer;
}

.datum-mezo--hiba {
  border-color: var(--hiba);
}

.naptar {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 282px;
  background: var(--ho);
  border: 1px solid var(--eros-keret);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgb(var(--tinta-rgb) / 0.05),
    0 12px 32px -12px rgb(var(--tinta-rgb) / 0.25);
  padding: 12px;
}

.naptar__fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.naptar__cim {
  font-size: 15px;
  font-weight: 500;
}

.naptar__lapozo {
  border: none;
  background: none;
  font-size: 18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--ret-sotet);
  border-radius: 2px;
}

.naptar__lapozo:hover {
  background: var(--ret-halvany);
}

.naptar__hetfej {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ko);
  text-align: center;
  margin-bottom: 4px;
}

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

.naptar__nap {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tinta);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.naptar__nap:hover {
  background: var(--ret-halvany);
}

.naptar__nap--ma {
  box-shadow: inset 0 0 0 1px var(--ret);
}

.naptar__nap--aktiv {
  background: var(--ret);
  color: var(--ret-feher);
}

.naptar__lab {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* ---- kombinált dátum + idő popover (naptár + óra/perc oszlopok) ---------- */

.naptar--idovel {
  width: 396px;
}

.naptar__test {
  display: flex;
  gap: 12px;
}

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

.naptar__idoresz {
  display: flex;
  gap: 4px;
  border-left: 1px solid var(--hajszal);
  padding-left: 12px;
}

.ido-oszlop {
  width: 48px;
  max-height: 264px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}

.ido-oszlop__elem {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tinta);
  flex: 0 0 auto;
  padding: 7px 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
}

.ido-oszlop__elem:hover {
  background: var(--ret-halvany);
}

.ido-oszlop__elem--aktiv {
  background: var(--ret);
  color: var(--ret-feher);
}

@media (max-width: 480px) {
  .naptar--idovel {
    width: min(340px, calc(100vw - 48px));
  }

  .ido-oszlop {
    width: 42px;
    max-height: 232px;
  }
}

/* az „Új fotózás" kártya címe (1p) */
.kartya-cim {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.22;
  margin: 0 0 4px;
}

/* a fotózás lapja: keskenyebb, középre zárt tartalom (a prototípus 900px-e) */
.admin--keskeny {
  max-width: 960px;
}

/* a teendő-kártya gombjai törésnél is együtt, jobbra maradnak */
.teendo__gombok {
  margin-left: auto;
}

/* a szabad időpont sor törlő gombja a sor jobb szélére kerül (mobilon is) */
.idopont-sor__gombok > form:last-child {
  margin-left: auto;
}

/* a galériák lista oszloprendje (asztali) */
.lista-tabla--galeriak .lista-tabla__fej,
.lista-tabla--galeriak .lista-tabla__sor {
  grid-template-columns: 1.2fr 1.2fr 1fr 90px 140px 150px;
}

/* ---- mobil: a lista-táblák kártyás sorokká rendeződnek ------------------- */
@media (max-width: 760px) {
  .lista-tabla__fej {
    display: none;
  }

  .lista-tabla__sor,
  .lista-tabla--galeriak .lista-tabla__sor {
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    align-items: baseline;
    padding: 14px 16px;
  }

  /* Fotózások: dátum · megrendelő + összeg · helyszín + fizetve · állapot */
  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(1) {
    grid-column: 1 / -1;
    order: 1;
    font-size: 13px;
  }

  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(2) {
    order: 2;
    font-size: 17px;
  }

  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(5) {
    order: 3;
  }

  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(3) {
    order: 4;
  }

  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(6) {
    order: 5;
    font-size: 13px;
  }

  .lista-tabla--fotozasok .lista-tabla__sor > :nth-child(4) {
    grid-column: 1 / -1;
    order: 6;
    margin-top: 8px;
  }

  /* Galériák: név + képszám · link · fotózás + státusz · lejárat */
  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(1) {
    order: 1;
    font-size: 17px;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(4) {
    order: 2;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(4)::after {
    content: ' kép';
    color: var(--ko);
    font-size: 13px;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
    font-size: 13px;
    word-break: break-all;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(3) {
    order: 4;
    font-size: 14px;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(5) {
    order: 5;
    font-size: 14px;
  }

  .lista-tabla--galeriak .lista-tabla__sor > :nth-child(6) {
    grid-column: 1 / -1;
    order: 6;
    font-size: 13px;
  }
}

/* ---- Fotózások: következő fotózás kártya + csoport-fejek ------------------ */

.kovetkezo-kartya {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ho);
  border: 1px solid var(--ret);
  border-radius: 3px;
  padding: 20px 24px;
  color: inherit;
  box-shadow: none;
}

.kovetkezo-kartya:hover {
  color: inherit;
  box-shadow: none;
}

.kovetkezo-kartya:hover .gomb {
  border-color: var(--ret);
  color: var(--ret-sotet);
}

.kovetkezo-kartya__nev {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.22;
  margin: 2px 0;
}

.szekcio-fej {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.szekcio-fej h2 {
  margin: 0;
}

/* a lista sora teljes felületén kattintható */
a.lista-tabla__sor {
  color: inherit;
  box-shadow: none;
}

a.lista-tabla__sor:hover {
  background: var(--papir);
  color: inherit;
  box-shadow: none;
}

.szabad-cimke {
  color: var(--ko);
  font-style: italic;
}

/* az admin fejléc-navigáció desktopon egy sorban marad */
@media (min-width: 1000px) {
  .admin-fej,
  .admin-fej__nav {
    flex-wrap: nowrap;
  }
}

/* ---- feltöltés-jelző: „12 / 48 kép feltöltve" + sáv ---------------------- */

.feltoltes-jelzo {
  width: 100%;
  margin-top: 12px;
}

.feltoltes-sav {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--vaszon);
  overflow: hidden;
}

.feltoltes-sav span {
  display: block;
  height: 100%;
  background: var(--ret);
  transition: width 0.2s ease;
}

/* ---- „mai dolgom": a családra váró munkák halkabbak -------------------- */

.teendo--varakozik {
  border-left: 3px solid var(--hajszal);
}

.teendo--varakozik .teendo__cim {
  color: var(--ko);
}

/* ---- nagyító a képkártyán (diavetítés indítása) ------------------------- */
/* Érintőn nincs hover, ezért ez a gomb mindig látszik – halkan. */

.kepkartya__nagyit {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgb(var(--papir-rgb) / 0.82);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.kepkartya__nagyit:hover {
  background: var(--ho);
}

/* ---- diavetítés (nagy kép, léptetés, automatikus lejátszás) ------------- */

body.modalis-nyitva {
  overflow: hidden;
}

.diavetites {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 64px 12px 88px;
  background: rgb(var(--tinta-rgb) / 0.94);
}

.diavetites--nyitva {
  display: flex;
}

.diavetites__kep {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.diavetites--kedvelt .diavetites__kep {
  outline: 3px solid var(--ret);
  outline-offset: 4px;
}

.diavetites__fej {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--papir);
  font-size: 14px;
}

.diavetites__nev {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diavetites__szamlalo {
  color: var(--vaszon);
}

.diavetites__zar {
  border: none;
  background: none;
  color: var(--papir);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.diavetites__lepo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: none;
  border-radius: 3px;
  background: rgb(var(--papir-rgb) / 0.14);
  color: var(--papir);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.diavetites__lepo:hover {
  background: rgb(var(--papir-rgb) / 0.26);
}

.diavetites__lepo--elozo {
  left: 8px;
}

.diavetites__lepo--kovetkezo {
  right: 8px;
}

.diavetites__lab {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.diavetites__gombok {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* „Nagyi is kérte" – itt van hely a teljes felsorolásra és arra is, hogy mit
   jelent ez a pénzben. */
.diavetites__masok {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(var(--papir-rgb) / 0.72);
  text-align: center;
  text-wrap: pretty;
}

.diavetites__masok[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .diavetites {
    padding: 56px 4px 96px;
  }

  .diavetites__lepo {
    width: 38px;
    height: 54px;
    font-size: 24px;
  }
}

/* ---- lezárt válogatás összefoglalója (minden költséggel) ---------------- */

.zaro-osszefoglalo {
  padding: 0 16px 8px;
}

.zaro-osszefoglalo h2 {
  margin: 2px 0 10px;
}

@media (min-width: 1100px) {
  .zaro-osszefoglalo {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.zaro-osszefoglalo .kartya {
  max-width: 560px;
}

/* ---- szűrő: minden kép ↔ csak a kiválasztottak ------------------------- */
/* Ugyanaz a pill, mint a „ki válogat?" lapon (.valaszto-chip) – a válogató
   ne tanítson új alakot. A darabszám mindig kiírva, hogy a család a váltás
   előtt is lássa, hol áll. */

.valogato__szuro {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 16px;
  margin: 0 0 20px;
}

@media (min-width: 1100px) {
  .valogato__szuro {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* A pill alakot a .valaszto-chip adja (a „ki válogat?" lapról): a markupban
   mindkét osztály ott van, itt csak a különbség él. */
.szuro-chip {
  gap: 8px;
  white-space: nowrap;
}

.szuro-chip--aktiv,
.szuro-chip--aktiv:hover {
  background: var(--ret-halvany);
  border-color: var(--ret);
  color: var(--ret-sotet);
  font-weight: 500;
}

.szuro-chip__szam {
  font-size: 13px;
  color: var(--ko);
}

.szuro-chip--aktiv .szuro-chip__szam {
  color: var(--ret-sotet);
}

/* a szűrt nézetben a nem kért képek kiesnek a rácsból */
.valogato__racs--csak-kivalasztott
  .kepkartya:not(.kedvelt):not(.kepkartya--levetted) {
  display: none;
}

/* Épp levett kép: nem tűnik el a szem elől, hanem visszatehető marad –
   különben a koppintás után kiugrik a képernyőről, amit nem lehet visszavonni. */
.kepkartya--levetted {
  outline: 1px solid var(--hajszal);
  outline-offset: -1px;
}

.kepkartya__visszatevo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgb(var(--papir-rgb) / 0.78);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--tinta);
  cursor: pointer;
}

/* a belső pill a .valaszto-chip alakját viseli (markupban is az az osztály) */
.kepkartya__visszatevo > span {
  gap: 8px;
}

/* üres állapot: a szűrt nézet ne üres rács legyen, hanem vezessen vissza */
.valogato__ures {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 460px;
  margin: 24px auto;
  padding: 32px 24px;
}

.valogato__ures[hidden] {
  display: none;
}

.valogato__ures-jel {
  color: var(--eros-keret);
}

/* a megállt feltöltés sávja is jelezzen, ne csak a szöveg */
.feltoltes-sav--hiba span {
  background: var(--hiba);
}

/* ---- záró képernyők: összesítő, számlázás, kész ------------------------- */
/* A design négy lépése (templates/GaleriaAdmin/Csaladi Galeria Valogato):
   a válogatás után a család átnézi a rendelést, dönt a fizetés módjáról,
   megadja a számlázási adatokat, és kap egy visszaigazoló lapot. */

.zaro {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

.zaro--keskeny {
  max-width: 560px;
}

.zaro h1 {
  margin: 0 0 8px;
}

.zaro__vissza {
  margin-bottom: 16px;
}

.zaro__bevezeto {
  margin: 0 0 24px;
}

.zaro__kartya {
  margin-bottom: 16px;
}

.zaro__modvalto {
  margin: 0 0 20px;
}

.zaro__zarolt {
  margin: -12px 0 20px;
}

.zaro__jegyzet {
  margin: 12px 0 0;
}

.zaro__ar {
  font-size: 30px;
}

.zaro__nudge {
  margin: 0 0 16px;
}

/* „Kösz, nem" után a kártya nem jön vissza, de a tény megmarad */
.zaro__halksor {
  margin: -4px 0 16px;
}

.zaro__urlap {
  margin-top: 8px;
}

.zaro__cimsor {
  grid-template-columns: 120px 1fr;
}

.zaro__tovabb {
  margin-top: 8px;
}

/* a lépéssor: hol tart a család */
.zaro-lepesek {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}

.zaro-lepes__csik {
  display: block;
  height: 3px;
  background: var(--ret);
}

.zaro-lepes--mult .zaro-lepes__csik {
  opacity: 0.45;
}

.zaro-lepes--jovo .zaro-lepes__csik {
  background: var(--vaszon);
}

.zaro-lepes__cimke {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko);
}

.zaro-lepes--most .zaro-lepes__cimke {
  color: var(--tinta);
}

/* a fizetési mód választója: a pill kiválasztott állapota (design: ChoiceChip) */
.valaszto-chip--aktiv,
.valaszto-chip--aktiv:hover {
  background: var(--ret);
  border-color: var(--ret);
  color: var(--ret-feher);
  font-weight: 500;
}

.valaszto-chip:disabled {
  cursor: default;
  opacity: 0.75;
}

/* mező alatti hibaüzenet a számlázási űrlapon */
.hibauzenet--mezo {
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
  font-weight: 400;
}

/* ---- kedvezmény és fizető-választó a záró képernyőkön ------------------- */
/* A kedvezmény levonás: a szemnek is látszódjon, hogy lefelé visz. */
.kedvezmeny-ertek {
  color: var(--ret-sotet);
}

.zaro__fizeto {
  margin: 0 0 20px;
}

.zaro__fizeto .felcim {
  margin-bottom: 8px;
}

/* ---- admin: tömeges kijelölés a képrácsban ------------------------------ */

.kepracs-eszkoz {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.kepracs-eszkoz .pipa-sor {
  margin: 0;
}

.kepracs-eszkoz .aprobetu {
  margin-right: auto;
}

/* a hiányzó kidolgozott képek száma legyen szembetűnő */
.jelzos {
  color: var(--hiba);
  font-weight: 500;
}

/* a grátisz nem hiba, csak számon tartandó: bazsa, nem piros */
.jelzos-gratisz {
  color: var(--bazsa-sotet);
}