/* =====================================================================
   Téli-Nyári – Ajándékutalvány (docs/104-ajandekutalvany.md)
   Előtag: tnav- (oldal), tnavk- (utalvány-kártya). A teli-nyari.css tokenjeire épül.
   JS nélkül minden mező látszik; a tn-utalvany.js csak a .tnav-js osztállyal rejt.
   ===================================================================== */

/* ------------------------------------------------------------- hős */
.tnav-hos { position: relative; isolation: isolate; overflow: hidden; background: var(--ej); color: #fff; padding: 34px 0 44px }
.tnav-hos::before { content: ""; position: absolute; inset: -30% -10% auto; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 18% 40%, rgba(79, 168, 232, .28), transparent 70%), radial-gradient(36% 52% at 82% 30%, rgba(228, 149, 28, .22), transparent 70%) }
.tnav-hos-racs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center }
.tnav-hos h1 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -.03em; margin: 10px 0 12px }
.tnav-hos .felirat { color: #9FC7EE }
.tnav-hos-p { color: #B9C3DB; max-width: 56ch; font-size: 16.5px }
.tnav-elonyok { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px }
.tnav-elonyok li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: #E4EAF6 }
.tnav-elonyok .tni { width: 22px; height: 22px; flex: 0 0 auto; color: var(--nap) }
.tnav-hos-kartya { transform: rotate(-3deg); max-width: 440px; justify-self: end; width: 100% }
@media (prefers-reduced-motion: no-preference) {
  .tnav-hos-kartya { animation: tnav-lebeg 7s var(--lassu) infinite alternate }
  @keyframes tnav-lebeg { from { transform: rotate(-3deg) translateY(0) } to { transform: rotate(-1.5deg) translateY(-8px) } }
}

/* ---------------------------------------------------------- utalvány-kártya */
.tnavk { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 22px 22px 18px; color: #fff; background: linear-gradient(135deg, #16233D 0%, #22355A 62%, #3D5F9E 100%); box-shadow: var(--arny-x); min-height: 250px; display: flex; flex-direction: column; gap: 6px }
.tnavk.t-karacsony { background: linear-gradient(140deg, #0F2A24 0%, #16233D 55%, #7A1F1F 130%) }
.tnavk.t-gumicsere { background: linear-gradient(140deg, #0B1322 0%, #16233D 48%, #24508F 100%) }
.tnavk.t-altalanos { background: linear-gradient(140deg, #16233D 0%, #3D5F9E 70%, #D98A12 140%) }
.tnavk-minta { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55 }
.t-karacsony .tnavk-minta { background-image: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .55) 0 1.5px, transparent 2px), radial-gradient(circle at 68% 12%, rgba(255, 255, 255, .45) 0 1.2px, transparent 1.8px), radial-gradient(circle at 86% 64%, rgba(255, 255, 255, .5) 0 1.6px, transparent 2.2px), radial-gradient(circle at 38% 78%, rgba(255, 255, 255, .35) 0 1.2px, transparent 1.8px); background-size: 120px 120px, 90px 90px, 140px 140px, 70px 70px }
.t-gumicsere .tnavk-minta { background-image: repeating-linear-gradient(118deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 26px), repeating-linear-gradient(62deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 26px) }
.t-altalanos .tnavk-minta { background-image: radial-gradient(60% 80% at 100% 0, rgba(228, 149, 28, .35), transparent 70%) }
.tnavk-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px }
.tnavk-fej img { height: 20px; width: auto; max-width: 62% }
.tnavk-ikon { display: none; color: var(--nap) }
.tnavk-ikon .tni { width: 30px; height: 30px; --tni-kitoltes: .3 }
.t-karacsony .i-karacsony, .t-gumicsere .i-gumicsere, .t-altalanos .i-altalanos { display: inline-flex }
.tnavk-cim { font-family: var(--disp); font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; margin-top: 10px }
.tnavk-neked { color: #C9D3E6; font-size: 14px }
.tnavk-neked b { color: #fff }
.tnavk-osszeg { font-family: var(--disp); font-weight: 800; font-size: clamp(34px, 5vw, 46px); letter-spacing: -.03em; line-height: 1.05; margin-top: 4px }
.tnavk-uzenet { margin: 6px 0 0; padding: 10px 12px; border-left: 3px solid var(--nap); background: rgba(255, 255, 255, .08); border-radius: 0 10px 10px 0; font-style: italic; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; max-height: 9.5em; overflow: hidden }
.tnavk-ki { color: #C9D3E6; font-size: 13px }
.tnavk-lab { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: #C9D3E6 }
.tnavk-kod { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; font-size: 15px; letter-spacing: .12em; color: #16233D; background: #fff; padding: 5px 10px; border-radius: 8px }

/* ------------------------------------------------------------- űrlap */
.tnav-torzs { padding-top: 30px; padding-bottom: 64px }
.tnav-nincs { margin-bottom: 18px }
.tnav-csapda { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.tnav-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 32px; align-items: start }
.tnav-lepesek { display: grid; gap: 18px; min-width: 0 }
.tnav-lepes { margin: 0; padding: 20px 20px 18px; border: 1px solid var(--vonal); border-radius: var(--r-l); background: var(--lap); box-shadow: var(--arny); min-width: 0 }
.tnav-lepes legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -.01em }
.tnav-lepes legend + * { clear: both }
.tnav-sz { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ej-2); color: #fff; font-size: 14px; font-weight: 800; flex: 0 0 auto }
.tnav-segit { color: var(--tinta-2); font-size: 14px; margin: 0 0 12px }
.tnav-temak, .tnav-kezb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.tnav-kezb { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.tnav-osszegek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.tnav-opc { position: relative; display: block; cursor: pointer; min-width: 0 }
.tnav-opc > input { position: absolute; opacity: 0; width: 1px; height: 1px }
.tnav-opc-b { display: grid; gap: 3px; height: 100%; padding: 14px 14px 13px; border: 1.5px solid var(--vonal); border-radius: var(--r); background: #fff; transition: border-color .2s, box-shadow .2s, background .2s }
.tnav-opc:hover .tnav-opc-b { border-color: var(--vonal-e) }
.tnav-opc > input:checked + .tnav-opc-b { border-color: var(--kek); box-shadow: 0 0 0 3px var(--kek-h); background: #FBFCFF }
.tnav-opc > input:focus-visible + .tnav-opc-b { outline: 3px solid rgba(36, 80, 143, .55); outline-offset: 2px }
.tnav-opc-i { color: var(--kek) }
.tnav-opc-i .tni { width: 26px; height: 26px }
.tnav-opc > input:checked + .tnav-opc-b .tnav-opc-i { color: var(--nap) }
.tnav-opc b { font-size: 15px; line-height: 1.25 }
.tnav-opc small { color: var(--tinta-2); font-size: 12.5px; line-height: 1.35 }
.tnav-opc strong { font-family: var(--disp); font-size: 20px; letter-spacing: -.01em; margin-top: 4px }
.tnav-mezo-ft { display: flex; align-items: center; gap: 8px; margin-top: 6px }
.tnav-mezo-ft input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid var(--vonal); border-radius: var(--r-s); font-size: 17px; font-weight: 700; background: #fff }
.tnav-mezo-ft input:focus { outline: 0; border-color: var(--kek); box-shadow: 0 0 0 4px var(--kek-h) }
.tnav-mezo-ft span { font-weight: 700; color: var(--tinta-2) }
.tnav-mezok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px }
.tnav-mezo { display: grid; gap: 6px; min-width: 0 }
.tnav-mezo > span { font-size: 13px; font-weight: 700; color: var(--tinta) }
.tnav-mezo small { font-weight: 500; color: var(--tinta-3) }
.tnav-szeles { grid-column: 1 / -1 }
.tnav-mezo input, .tnav-mezo select, .tnav-mezo textarea { width: 100%; min-width: 0; height: 50px; padding: 0 14px; border: 1.5px solid var(--vonal); border-radius: var(--r-s); background: #fff; font-size: 16px; font-weight: 500; appearance: none; transition: border-color .2s, box-shadow .2s }
.tnav-mezo textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5 }
.tnav-mezo input:focus, .tnav-mezo select:focus, .tnav-mezo textarea:focus { outline: 0; border-color: var(--kek); box-shadow: 0 0 0 4px var(--kek-h) }
.tnav-szamlalo { color: var(--tinta-3); font-size: 12px; text-align: right }
.tnav-szamlalo.sok { color: var(--piros) }
.tnav-email { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--vonal) }
.tnav-pipa { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 14px; line-height: 1.45; cursor: pointer }
.tnav-pipa input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--kek) }
.tnav-ido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto; gap: 12px; align-items: end; margin-top: 12px }
.tnav-chip { height: 50px; padding: 0 14px; border: 1.5px dashed var(--nap); border-radius: 999px; background: var(--nap-h); color: var(--nap-s); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap }
.tnav-chip:hover { background: #FBE7C5 }
.tnav-hiba { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-s); background: #FDECEA; color: #A3241A; font-size: 14px; font-weight: 600 }

/* JS-szel: a nem kellő részek rejtve */
.tnav-js .tnav-email[data-ki] { display: none }
.tnav-js .tnav-ido[data-ki] { display: none }
.nincs-js .tnav-chip { display: none }

/* ------------------------------------------------------------ oldalsáv */
.tnav-oldal { min-width: 0 }
.tnav-ragad { position: sticky; top: 108px; display: grid; gap: 14px }
.tnav-oldal-cim { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2) }
.tnav-ossz { margin: 0; padding: 14px 16px; border: 1px solid var(--vonal); border-radius: var(--r); background: var(--lap); display: grid; gap: 8px }
.tnav-ossz > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px }
.tnav-ossz dt { color: var(--tinta-2) }
.tnav-ossz dd { margin: 0; text-align: right; overflow-wrap: anywhere }
.tnav-ossz b { font-size: 18px }
.tnav-gombok { display: grid; gap: 10px }
.tnav-gombok .g { width: 100% }
.tnav-gombok .tni { width: 20px; height: 20px }
.tnav-fizet[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none }
.tnav-apro { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--tinta-2) }
.tnav-apro .tni { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px }
.tnav-szerver .tnavk { outline: 3px solid var(--nap); outline-offset: 3px }

/* ---------------------------------------------------------- így működik */
.tnav-hogyan { margin-top: 56px }
.tnav-hogyan h2 { margin-bottom: 18px }
.tnav-hogyan ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.tnav-hogyan li { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-l); background: var(--lap); border: 1px solid var(--vonal) }
.tnav-hogyan small { color: var(--tinta-2); font-size: 14px }

/* ------------------------------------------------------------- egyenleg */
.tnav-egyenleg { margin-top: 40px; padding: 24px; border-radius: var(--r-l); background: var(--ej); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: end }
.tnav-egyenleg h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px }
.tnav-egyenleg .tnav-segit { color: #B9C3DB; margin: 0 }
.tnav-egy-urlap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end }
.tnav-egy-urlap .tnav-mezo > span { color: #DCE3F1 }
.tnav-egy-urlap input { text-transform: uppercase; letter-spacing: .1em; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700 }
.tnav-egy-urlap .g { height: 50px }
.tnav-egy-valasz { grid-column: 1 / -1 }
.tnav-egy-valasz:empty { display: none }
.tnav-egy-ok { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .08) }
.tnav-egy-ok b { font-family: var(--disp); font-size: 30px; color: #fff }
.tnav-egy-ok span { color: #DCE3F1 }

/* -------------------------------------------------------------- kész */
.tnav-kesz .tnav-racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.tnav-kesz-info { display: grid; gap: 14px }

/* ----------------------------------------------------------- tablet / telefon */
@media (max-width: 1100px) {
  .tnav-racs { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 22px }
}
@media (max-width: 980px) {
  .tnav-hos-racs { grid-template-columns: 1fr; gap: 26px }
  .tnav-hos-kartya { justify-self: start; max-width: 420px }
  .tnav-racs, .tnav-kesz .tnav-racs { grid-template-columns: 1fr }
  .tnav-ragad { position: static }
  .tnav-temak { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 720px) {
  .tnav-hos { padding: 22px 0 30px }
  .tnav-elonyok { grid-template-columns: 1fr }
  .tnav-temak, .tnav-osszegek, .tnav-kezb, .tnav-mezok { grid-template-columns: 1fr }
  .tnav-temak .tnav-opc-b, .tnav-kezb .tnav-opc-b { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center }
  .tnav-temak .tnav-opc-i, .tnav-kezb .tnav-opc-i { grid-row: span 2 }
  .tnav-ido { grid-template-columns: minmax(0, 1fr) minmax(0, 120px) }
  .tnav-chip { grid-column: 1 / -1 }
  .tnav-hogyan ol { grid-template-columns: 1fr }
  .tnav-egyenleg { grid-template-columns: 1fr; padding: 20px 16px }
  .tnav-lepes { padding: 16px 14px 14px }
  .tnavk { padding: 18px 16px 14px; min-height: 0 }
}
@media (max-width: 380px) {
  .tnav-egy-urlap { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .tnav-hos-kartya { animation: none }
  .tnav-opc-b, .tnav-mezo input, .tnav-mezo select, .tnav-mezo textarea { transition: none }
}