/* =====================================================================
   Téli-Nyári Autógumi – „rendszer” réteg (docs/102-teli-nyari.md)
   1. folyamatos átmenet lista ↔ termék (View Transitions, dokumentumok között)
   2. okos méretmező: chipek, javaslatok, diktálás
   3. „Mi történik a rendelésemmel?” – idővonal
   A tokenek a teli-nyari.css-ből jönnek; a követő lap a Kocsigumi
   layoutjában is fut, ezért ott tartalék értékekkel.
   ===================================================================== */

/* ------------------------------------------------------- 1. atmenet */
/* "kevesebb mozgas" mellett nincs atmenet: a navigacio a szokasos */
/* Az @view-transition bekapcsolasa a _rendszer partialban van (inline), hogy a fooldalon ki lehessen hagyni:
   onnan indulva a regi oldal pillanatkepe 4 mp-ig tartott (3D, vasznak, retegabra). */
::view-transition-old(root) { animation: tnrVtKi .2s cubic-bezier(.4, 0, 1, 1) both }
::view-transition-new(root) { animation: tnrVtBe .46s cubic-bezier(.16, 1, .3, 1) .05s both }
@keyframes tnrVtKi { to { opacity: 0 } }
@keyframes tnrVtBe { from { opacity: 0; transform: translateY(12px) } }
/* a kartya kepe "beleul" a termekoldal szinpadaba */
::view-transition-group(*.tn-kep) { animation-duration: .56s; animation-timing-function: cubic-bezier(.22, .9, .24, 1) }
::view-transition-old(*.tn-kep), ::view-transition-new(*.tn-kep) { height: 100%; object-fit: contain; animation-duration: .34s }
/* a fejlec es az also sav helyben marad (nem villan at) */
::view-transition-group(tn-fej), ::view-transition-group(tn-msav) { animation-duration: .3s; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
::view-transition-old(tn-fej), ::view-transition-old(tn-msav) { animation: none; opacity: 0 }
::view-transition-new(tn-fej), ::view-transition-new(tn-msav) { animation: none }

/* ------------------------------------------------------- 2. okos meretmezo */
.tnr-meret { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 90; background: #fff; border: 1px solid var(--vonal); border-radius: 20px; box-shadow: var(--arny-x); padding: 14px 16px 16px; transform-origin: 50% 0; animation: tnrPanel .26s var(--lassu) both }
.tnr-meret[hidden] { display: none }
@keyframes tnrPanel { from { opacity: 0; transform: translateY(-6px) scale(.985) } }
.tnr-meret.raz .tnr-meret-belso { animation: tnrRaz .52s cubic-bezier(.36, .07, .19, .97) both }
@keyframes tnrRaz { 0%, 100% { transform: none } 18% { transform: translateX(-6px) } 36% { transform: translateX(5px) } 54% { transform: translateX(-3px) } 72% { transform: translateX(2px) } }
.tnr-meret.nincs { border-color: rgba(229, 55, 43, .28) }
.tnr-meret.csendes { border-color: rgba(229, 55, 43, .45); box-shadow: 0 0 0 4px rgba(229, 55, 43, .08), var(--arny-x) }

.tnr-chipsor { display: flex; align-items: center; gap: 12px; min-height: 36px }
.tnr-chipek { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0 }
.tnr-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ej); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -10px rgba(7, 11, 25, .7) }
.tnr-chip.tnr-chip-atm { background: var(--grad); box-shadow: 0 8px 18px -10px rgba(123, 108, 255, .9) }
.tnr-chip.tnr-chip-ix { background: var(--hatter); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--vonal-e); font-size: 14px }
.tnr-chip.tnr-be { animation: tnrChip .52s var(--rugo) both; animation-delay: var(--kes, 0ms) }
@keyframes tnrChip { from { opacity: 0; transform: translateX(-12px) scale(.9) } }
.tnr-chip-elv { color: var(--tinta-3); font-weight: 800; padding: 0 3px }
.tnr-db { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: 13.5px; font-weight: 600; white-space: nowrap }
.tnr-db b { color: var(--tinta); font-weight: 800 }
.tnr-db kbd, .tnr-meret kbd { font: 700 11.5px/1 var(--test); color: var(--tinta-2); padding: 5px 8px; border-radius: 7px; background: var(--hatter); box-shadow: inset 0 -1px 0 var(--vonal-e), inset 0 0 0 1px var(--vonal) }
.tnr-uzenet { margin: 10px 2px 0; font-size: 14px; font-weight: 600; color: var(--tinta-2) }
.tnr-uzenet:empty { display: none }
.tnr-uzenet.hiba { color: #B4271D }
.tnr-javaslat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px }
.tnr-javaslat:empty { display: none }
.tnr-javaslat small { flex: 1 1 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3) }
.tnr-jav { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--vonal); background: #fff; font-weight: 700; font-size: 14.5px; color: var(--tinta); transition: border-color .2s, transform .3s var(--rugo), box-shadow .2s }
.tnr-jav em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--tinta-3) }
.tnr-jav:hover, .tnr-jav:focus-visible { border-color: rgba(47, 107, 255, .5); box-shadow: 0 0 0 4px rgba(47, 107, 255, .1); transform: translateY(-1px); outline: none }

/* diktalas */
.tnr-mik { position: relative; flex: 0 0 auto; width: 42px; height: 42px; margin-right: 6px; border: 0; border-radius: 50%; background: #fff; color: var(--tinta); display: grid; place-items: center; cursor: pointer; box-shadow: var(--arny); transition: transform .35s var(--rugo), background .25s, color .25s }
.tnr-mik[hidden] { display: none }
.tnr-mik:hover { transform: scale(1.06) }
.tnr-mik:focus-visible { outline: 2px solid var(--kek); outline-offset: 2px }
.tnr-mik svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1 }
.tnr-mik i { position: absolute; inset: 0; border-radius: 50%; pointer-events: none }
.tnr-hallgat .tnr-mik { background: var(--ej); color: #fff }
.tnr-hallgat .tnr-mik i { box-shadow: 0 0 0 2px rgba(123, 108, 255, .55); animation: tnrHallgat 1.6s var(--lassu) infinite }
@keyframes tnrHallgat { from { transform: scale(1); opacity: .9 } to { transform: scale(1.75); opacity: 0 } }

.tnr-rejtett { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

@media (max-width: 560px) {
  .tnr-mik { width: 38px; height: 38px; margin-right: 4px }
  .tnr-meret { border-radius: 18px; padding: 12px 12px 14px }
  .tnr-chip { height: 32px; padding: 0 12px; font-size: 15px }
  .tnr-db { font-size: 12.5px }
  .tnr-db kbd { display: none }
}

/* ------------------------------------------------------- 3. rendeles-kovetes */
.tnr-kov {
  --t-ej: var(--ej, #0B1B33); --t-grad: var(--grad, linear-gradient(118deg, #2F6BFF, #00A3FF));
  --t-tinta: var(--tinta, #0D2340); --t-tinta-2: var(--tinta-2, #55657E); --t-tinta-3: var(--tinta-3, #8A97AB);
  --t-vonal: var(--vonal, #E3E8EF); --t-vonal-e: var(--vonal-e, #CDD5E0); --t-hatter: var(--hatter, #F5F7FA);
  --t-lassu: var(--lassu, cubic-bezier(.16, 1, .3, 1)); --t-rugo: var(--rugo, cubic-bezier(.34, 1.56, .64, 1));
  --t-disp: var(--disp, inherit); --t-zold: var(--zold, #10A36B);
  padding-top: 26px; padding-bottom: 64px; color: var(--t-tinta)
}
.tnr-kov .szam { font-variant-numeric: tabular-nums }

.tnr-hos { position: relative; overflow: hidden; isolation: isolate; background: var(--t-ej); color: #fff; border-radius: 30px; padding: clamp(24px, 4vw, 48px) clamp(22px, 4vw, 52px) clamp(24px, 3.4vw, 40px) }
.tnr-hos::before { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 108, 255, .42), transparent) }
.tnr-hos::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; left: -200px; bottom: -280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(62, 197, 255, .24), transparent) }
.tnr-hos-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.tnr-szam { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9DA9C7 }
.tnr-szam b { color: #fff; font-size: 14px; letter-spacing: .01em; text-transform: none; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08) }
.tnr-elo { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #B9C4DD }
.tnr-elo i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3BE29A; box-shadow: 0 0 0 3px rgba(59, 226, 154, .16) }
.tnr-elo i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(59, 226, 154, .6); animation: tnrElo 2.4s var(--t-lassu) infinite }
@keyframes tnrElo { from { transform: scale(.6); opacity: 1 } to { transform: scale(2); opacity: 0 } }
.vege .tnr-elo i, .torolt .tnr-elo i { background: #8A93AB; box-shadow: none }
.vege .tnr-elo i::after, .torolt .tnr-elo i::after { display: none }
.tnr-hos h1 { margin: 26px 0 10px; color: #fff; font-family: var(--t-disp); font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; max-width: 18ch; text-wrap: balance }
.tnr-alcim { margin: 0; max-width: 56ch; color: #C9D3EA; font-size: clamp(15.5px, 1.6vw, 17.5px); font-weight: 500; line-height: 1.5 }
.torolt .tnr-hos h1 { color: #FFD3CE }

.tnr-sav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: clamp(26px, 3.4vw, 40px) }
.tnr-sav span { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden }
.tnr-sav span i { position: absolute; inset: 0; border-radius: inherit; background: var(--t-grad); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--t-lassu) }
.tnr-sav span.kesz i { transform: none }
.tnr-sav span.most i { transform: scaleX(.5) }
.tnr-sav span.most::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: tnrFeny 2.2s ease-in-out infinite }
@keyframes tnrFeny { to { transform: translateX(100%) } }
.tnr-sav-cim { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #8E9AB8; line-height: 1.3 }

.tnr-racs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; margin-top: 28px; align-items: start }
.tnr-cimke { margin: 0 0 20px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-tinta-3) }
.tnr-ut, .tnr-reszlet { background: #fff; border: 1px solid var(--t-vonal); border-radius: 26px; box-shadow: 0 2px 6px rgba(11, 18, 36, .04), 0 24px 48px -24px rgba(11, 18, 36, .22) }
.tnr-ut { padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 36px) clamp(18px, 2.4vw, 28px) }

.tnr-lepesek { list-style: none; margin: 0; padding: 0 }
.tnr-l { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-bottom: 26px }
.tnr-l:last-child { padding-bottom: 4px }
.tnr-pont { position: relative; z-index: 1; width: 30px; height: 30px; margin: 2px 7px 0; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--t-vonal-e) }
.tnr-pont svg, .tnr-pont::before { grid-area: 1 / 1 }
.tnr-pont svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0 }
.tnr-pont svg path { stroke-dasharray: 20; stroke-dashoffset: 0 }
.tnr-l.kesz .tnr-pont { background: var(--t-grad); box-shadow: 0 8px 18px -8px rgba(123, 108, 255, .75) }
.tnr-l.kesz .tnr-pont svg { opacity: 1 }
.tnr-l.most .tnr-pont { box-shadow: none; background: linear-gradient(#fff, #fff) padding-box, var(--t-grad) border-box; border: 2px solid transparent }
.tnr-l.most .tnr-pont::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--t-grad) }
.tnr-l.most .tnr-pont::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(123, 108, 255, .45); animation: tnrHalo 2.4s var(--t-lassu) infinite }
@keyframes tnrHalo { from { transform: scale(1); opacity: 1 } to { transform: scale(1.9); opacity: 0 } }
.tnr-l.var .tnr-pont::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-vonal-e) }

/* a szakasz a kovetkezo lepes pontjaig; tele, ha az mar elkezdodott */
.tnr-szakasz { position: absolute; left: 21px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--t-vonal); overflow: hidden }
.tnr-l:last-child .tnr-szakasz { display: none }
.tnr-szakasz i { position: absolute; inset: 0; background: linear-gradient(180deg, #3EC5FF, #7B6CFF 60%, #FF6B2C); transform-origin: 50% 0; transform: scaleY(0) }
.tnr-l.tovabb .tnr-szakasz i { transform: none }
.tnr-l.nyit .tnr-szakasz i { animation: tnrSzakasz 1s var(--t-lassu) both }
@keyframes tnrSzakasz { from { transform: scaleY(0) } }
.tnr-l.valt.kesz .tnr-pont { animation: tnrPop .6s var(--t-rugo) both }
.tnr-l.valt.kesz .tnr-pont svg path { animation: tnrPipa .5s var(--t-lassu) .18s both }
.tnr-l.valt.most .tnr-pont { animation: tnrPop .6s var(--t-rugo) .3s both }
@keyframes tnrPop { from { transform: scale(.55) } }
@keyframes tnrPipa { from { stroke-dashoffset: 20 } }

.tnr-l-test { min-width: 0; padding-top: 4px }
.tnr-l.most .tnr-l-test { margin: -10px -14px 0 -10px; padding: 14px 14px 16px 10px; border-radius: 18px; background: linear-gradient(118deg, rgba(62, 197, 255, .09), rgba(123, 108, 255, .08) 50%, rgba(255, 107, 44, .07)) }
.tnr-l-fej { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap }
.tnr-l-fej b { font-family: var(--t-disp); font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--t-tinta) }
.tnr-l.var .tnr-l-fej b { color: var(--t-tinta-3); font-weight: 600 }
.tnr-l-fej time { font-size: 13.5px; font-weight: 600; color: var(--t-tinta-3); white-space: nowrap }
.tnr-l.most .tnr-l-fej time { color: var(--t-tinta-2) }
.tnr-l-test p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--t-tinta-2) }
.tnr-l.var .tnr-l-test p { color: var(--t-tinta-3) }
.tnr-l-test small { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: var(--t-hatter); font-size: 12.5px; font-weight: 600; color: var(--t-tinta-2) }
.tnr-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; border: 1px solid var(--t-vonal-e); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--t-tinta); transition: border-color .2s, transform .3s var(--t-rugo) }
.tnr-link:hover { border-color: #2F6BFF; transform: translateY(-1px) }
.tnr-link .gls { background: #06246B; color: #FFD200; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 4px 7px; border-radius: 6px }
.tnr-labjegy { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--t-vonal); font-size: 12.5px; line-height: 1.5; color: var(--t-tinta-3) }
.torolt .tnr-l:not(:first-child) { opacity: .5 }

.tnr-reszlet { position: sticky; top: 130px; padding: clamp(20px, 2.6vw, 28px) }
.tnr-adatok { margin: 0; display: grid; gap: 14px }
.tnr-adatok div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: baseline }
.tnr-adatok dt { font-size: 12.5px; font-weight: 700; color: var(--t-tinta-3) }
.tnr-adatok dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--t-tinta) }
.tnr-adatok .halv { color: var(--t-tinta-2); font-weight: 500; font-size: 14px }
.tnr-tetelek { margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--t-vonal) }
.tnr-tetel { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--t-vonal); font-size: 14.5px; font-weight: 600; color: var(--t-tinta) }
.tnr-tetel small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--t-tinta-3) }
.tnr-tetel > b { white-space: nowrap }
.tnr-tetel.kicsi { padding: 8px 0; border-bottom: 0; color: var(--t-tinta-2) }
.tnr-tetel.veg { border-bottom: 0; border-top: 1px dashed var(--t-vonal-e); margin-top: 6px; padding-top: 16px; align-items: baseline }
.tnr-tetel.veg b { font-family: var(--t-disp); font-size: 26px; letter-spacing: -.03em }
.tnr-hivas { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--t-ej); color: #fff; transition: transform .35s var(--t-rugo), box-shadow .3s }
.tnr-hivas:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(7, 11, 25, .8) }
.tnr-hivas span { font-weight: 700; font-size: 15px }
.tnr-hivas small { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: #A9B4CF }
.tnr-hivas b { white-space: nowrap; font-size: 15px }

@media (max-width: 960px) {
  .tnr-racs { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px }
  .tnr-reszlet { position: static }
}
@media (max-width: 560px) {
  .tnr-kov { padding-top: 14px }
  .tnr-hos { border-radius: 24px }
  .tnr-hos h1 { margin-top: 20px }
  .tnr-sav-cim { display: none }
  .tnr-hivas { flex-direction: column; align-items: flex-start; gap: 8px }
  .tnr-ut, .tnr-reszlet { border-radius: 22px }
  .tnr-l { grid-template-columns: 38px minmax(0, 1fr); gap: 10px }
  .tnr-pont { margin: 2px 4px 0 }
  .tnr-szakasz { left: 18px }
  .tnr-l-fej b { font-size: 16px }
  .tnr-adatok div { grid-template-columns: 96px minmax(0, 1fr) }
}

@media (prefers-reduced-motion: reduce) {
  .tnr-meret, .tnr-chip.tnr-be, .tnr-meret.raz .tnr-meret-belso { animation: none }
  .tnr-hallgat .tnr-mik i, .tnr-elo i::after, .tnr-l.most .tnr-pont::after, .tnr-sav span.most::after { animation: none; display: none }
  .tnr-l.nyit .tnr-szakasz i, .tnr-l.valt .tnr-pont, .tnr-l.valt .tnr-pont svg path { animation: none }
  .tnr-sav span i { transition: none }
}