/* Kocsigumi gyorspenztar (public/js/kg-gyorspenztar.js, docs/50-webshopok.md). Ikonok: a TnIkon geometriaja kitoltes nelkul,
   1.75-os vonallal (Adam 2026-11-07: "modernebb, letisztultabb"). */
.kgi { display: block; flex: none }

/* kosarba-uzenet: a fejlec ala, jobbra; telefonon teljes szelessegben - nem takarja a Kosarba gombot */
.kg-toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); z-index: 160; width: min(380px, calc(100vw - 32px)); background: var(--ej, #071C36); color: #fff;
  border-radius: 16px; padding: 12px; display: grid; gap: 10px; box-shadow: 0 18px 40px -16px rgba(7, 28, 54, .6) }
.kg-toast[hidden] { display: none }
.kg-toast-sor { display: flex; align-items: center; gap: 10px }
.kg-toast-sor b { font-size: 15px; flex: 1; font-variant-numeric: tabular-nums }
.kg-toast-pipa { width: 26px; height: 26px; border-radius: 99px; border: 1.5px solid #5FD08E; color: #5FD08E; display: grid; place-items: center; flex: none }
.kg-toast-x { border: 0; background: transparent; color: rgba(255, 255, 255, .7); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer }
.kg-toast-gombok { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.kg-tg { display: grid; place-items: center; min-height: 42px; border-radius: 10px; border: 0; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none;
  background: rgba(255, 255, 255, .1); color: #fff; transition: transform 120ms ease-out }
.kg-tg:active { transform: scale(.97) }
.kg-tg-fo { background: var(--kek, #0B5CAB) }
@media (max-width: 760px) { .kg-toast { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto } }
.kg-szellem { position: fixed; left: 0; top: 0; z-index: 170; pointer-events: none; border-radius: 50%; background: #1A2029 center / cover no-repeat; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5) }

/* penztar: kitoltott szakasz -> osszefoglalo */
.kg-sz-test[hidden], .kg-sz-ossz[hidden] { display: none !important }
.kg-sz-ossz { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2) }
.kg-sz-ossz [data-o] { flex: 1; min-width: 0; overflow-wrap: anywhere }
.kg-modosit { border: 0; background: transparent; color: var(--kek, #0B5CAB); font-weight: 800; font-size: 14px; cursor: pointer; padding: 6px 4px; flex: none }
.kg-tovabb { margin-top: 18px }
.tnp-blokk.kg-kesz .szam-kor { background: var(--zold, #127A3E) !important; font-size: 0 }
.tnp-blokk.kg-kesz .szam-kor::after { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.75 9.75 17 18.5 7.75' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.75 9.75 17 18.5 7.75' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat }

/* Apple Pay: Safariban a WebKit hivatalos gombja; mashol nem latszik (a JS rejti) */
[data-kg-applepay][hidden] { display: none !important }
.kg-ap-gomb { display: block; width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: #000; color: #fff; cursor: pointer; font: 600 17px -apple-system, system-ui, sans-serif; text-decoration: none; text-align: center; line-height: 50px }
@supports (-webkit-appearance: -apple-pay-button) {
  .kg-ap-gomb { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; font-size: 0; line-height: 0 }
}

/* zaro visszajelzesek (koszonjuk) */
.kg-zaro-jel { width: 96px; height: 96px; display: block }
.kg-forgo { transform-origin: 56px 56px; animation: kgForog 2.4s linear infinite }
@keyframes kgForog { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .kg-forgo { animation: none } .kg-tg, .kg-szellem { transition: none } }

/* penztar valaszto-kartyak (Adam elesben + Fo fejleszto atnezese, 2026-11-07): telefonon egy oszlopban; az ikon a
   cimmel egy vonalban felul; a szovegoszlop szeles (a radio csak a cimsortol tart tavolsagot); a radiogomb nem log bele */
body.tema-kg .tnp-blokk .valaszto > span:last-child { min-width: 0; flex: 1 1 auto }
body.tema-kg .tnp-blokk .valaszto > span:last-child > span { overflow-wrap: anywhere }
body.tema-kg .tnp-blokk .valaszto b { padding-right: 28px }
@media (max-width: 1100px) {
  body.tema-kg .tnp-blokk .valaszto { align-items: flex-start !important; gap: 12px !important; padding: 14px 14px 14px 12px !important }
  body.tema-kg .tnp-blokk .valaszto .ik { width: 36px !important; height: 36px !important; border-radius: 11px }
  body.tema-kg .tnp-blokk .valaszto .ik svg { width: 20px; height: 20px }
}
@media (max-width: 760px) {
  body.tema-kg .tnp-blokk .valasztok, body.tema-kg .tnp-blokk .valasztok.ket { grid-template-columns: minmax(0, 1fr) !important }
  body.tema-kg .tnp-blokk .valaszto { flex-direction: row !important }
}
/* Apple Pay a fizetesi mod kartyajan: a hivatalos Apple Pay Mark (SVG, valtoztatas nelkul), a tobbi ikon helyen es
   szelessegeben - a szoveg egy vonalban kezdodik */
.kg-ap-hely { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center }
.kg-ap-jel { display: block; width: 44px; height: auto }
@media (max-width: 1100px) { .kg-ap-hely { width: 36px; height: 36px } .kg-ap-jel { width: 36px } }
/* Bankkartya: kis Visa / Mastercard jel */
.kg-kartyajel { display: flex !important; gap: 6px; margin-top: 8px }
.kg-kartyajel img { display: block; width: 38px; height: 24px }
/* Apple Pay kivalasztva: a Megrendelem helyett a hivatalos fekete gomb (WebKit rajzolja, "order"); mashol (tartalek) fekete
   gomb a jellel */
.kg-ap-rend[hidden], [data-kg-rendgomb][hidden] { display: none !important }
#tnpPanel .kg-ap-rend { margin-top: 14px }
.kg-ap-rend { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; min-height: 0; line-height: 1; border-radius: 14px; font: 600 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif }
.kg-ap-rend img { height: 26px; width: auto; border-radius: 5px }
.kg-ap-sav { width: auto; flex: 0 0 auto; height: 46px; padding: 0 16px; margin-left: auto; border-radius: 12px; font-size: 15px }
.kg-ap-sav img { height: 22px }
@supports (-webkit-appearance: -apple-pay-button) {
  .kg-ap-rend { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: order; -apple-pay-button-style: black; -apple-pay-button-corner-radius: 14px }
  .kg-ap-rend > * { display: none }
  .kg-ap-sav { width: 170px; padding: 0; -apple-pay-button-corner-radius: 12px }
}
/* a tapado also sav (Osszesen + Megrendelem) es a fejlec ne takarja a fokuszalt / odagorgetett mezot */
html:has(body.tema-kg #penztarUrlap) { scroll-padding-top: 150px; scroll-padding-bottom: 170px }

/* szamlazas blokk: a ceges blokk sajat jeloloje helyett a Maganszemely / Ceg gomb dont */
#pCeg > .mezo:first-child { display: none }
#pCeg #cegesBlokk { margin-top: 0 !important }
#pMagan[hidden], #pCeg[hidden], #pSzCim[hidden], #pSzAzonosSor[hidden] { display: none !important }
body.tema-kg .kg-vevo { margin-bottom: 14px }
.kg-ki { color: var(--tinta-3, #6b7a90) }
.kg-ki-megj { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); background: var(--hatter); border-radius: 10px; padding: 8px 10px; margin: 2px 0 6px }
.kg-ki[hidden], .kg-ki-megj[hidden] { display: none !important }

/* a fejlec uvege gorgeteskor ne engedje at a tartalmat (Fo fejleszto atnezese, 2026-11-07): tomor feher, szuro nelkul */
body.tema-kg .tn-fej, body.tema-kg .tn-fej.gordult { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; transition: box-shadow .3s var(--lassu) }

/* ---------- Kosar (Adam 2026-11-07: "meg jobb legyen a kosar") ---------- */
body.tema-kg .kg-kt-fo { min-width: 0 }
body.tema-kg .kg-kt-meret { font-weight: 800; font-size: 15px; margin-top: 3px; color: var(--tinta) }
body.tema-kg .kg-kt-meret span { color: var(--tinta-2); font-weight: 700; margin-left: 4px }
body.tema-kg .kg-kt-adat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
body.tema-kg .kg-kt-ev { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--hatter); color: var(--tinta-2) }
body.tema-kg .kg-kt-ev.ev-tel { background: #E8F1FB; color: #1F5E99 }
body.tema-kg .kg-kt-ev.ev-nyar { background: #FFF3DC; color: #8A5400 }
body.tema-kg .kg-kt-ev.ev-negy { background: #EAF6EE; color: #1E6B3A }
body.tema-kg .kg-kt-eu { display: inline-flex; gap: 6px; flex-wrap: wrap }
body.tema-kg .kg-kt-eu > span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 8px; border-radius: 999px; border: 1px solid var(--vonal); background: #fff; color: var(--tinta-2) }
body.tema-kg .kg-kt-eu b { min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--tinta-3) }
body.tema-kg .kg-kt-eu b.zaj { background: var(--hatter); color: var(--tinta) }
body.tema-kg .kg-kt-eu b.eu-a { background: var(--eu-a) } body.tema-kg .kg-kt-eu b.eu-b { background: var(--eu-b) }
body.tema-kg .kg-kt-eu b.eu-c { background: var(--eu-c); color: #3A3600 } body.tema-kg .kg-kt-eu b.eu-d { background: var(--eu-d) } body.tema-kg .kg-kt-eu b.eu-e { background: var(--eu-e) }
body.tema-kg .kg-kt-ik { width: 14px; height: 14px; display: block; flex: 0 0 auto; --tni-vonal: 2; --tni-kitoltes: .3 }
body.tema-kg .kg-kt-allapot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-2) }
body.tema-kg .kg-kt-allapot > span { display: inline-flex; align-items: center; gap: 6px }
body.tema-kg .kg-kt-allapot i { width: 8px; height: 8px; border-radius: 50%; background: var(--nap-s) }
body.tema-kg .kg-kt-allapot .sajat { color: var(--zold) } body.tema-kg .kg-kt-allapot .sajat i { background: var(--zold); box-shadow: 0 0 0 3px var(--zold-h) }
body.tema-kg .kg-kt-allapot .kulso { color: var(--nap-s) }
/* -/+ lepteto */
body.tema-kg .kg-lep { display: inline-flex; align-items: center; height: 44px; border: 1.5px solid var(--vonal); border-radius: 999px; background: #fff; overflow: hidden }
body.tema-kg .kg-lep button { width: 44px; height: 100%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--tinta); transition: background .2s }
body.tema-kg .kg-lep button:hover:not(:disabled) { background: var(--hatter) }
body.tema-kg .kg-lep button:disabled { color: var(--vonal-e); cursor: default }
body.tema-kg .kg-lep svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round }
body.tema-kg .kg-lep output { min-width: 52px; text-align: center; font-weight: 800; font-size: 15px }
/* 4 db tipp: egysoros, kompakt sav a lepteto alatt, kis gombbal jobbra */
body.tema-kg .kg-negy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--kek-h); color: var(--kek); font-size: 13px; font-weight: 700; max-width: 360px }
body.tema-kg .kg-negy span { min-width: 0; line-height: 1.3 }
body.tema-kg .kg-negy button { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--kek); color: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap }
/* ingyenes szallitas sav */
body.tema-kg .kg-ingyen p { display: flex; align-items: center; gap: 10px }
body.tema-kg .kg-ingyen-ik { width: 22px; height: 22px; flex: 0 0 auto; color: var(--kek); --tni-vonal: 1.9; --tni-kitoltes: .2 }
body.tema-kg .kg-ingyen.kesz { border-color: rgba(30, 140, 70, .35); background: var(--zold-h) }
body.tema-kg .kg-ingyen.kesz p, body.tema-kg .kg-ingyen.kesz p b, body.tema-kg .kg-ingyen.kesz .kg-ingyen-ik { color: var(--zold) }
body.tema-kg .kg-ingyen.kesz .sav { background: rgba(255, 255, 255, .7) }
body.tema-kg .kg-ingyen.kesz .sav i { background: var(--zold) }
body.tema-kg .kg-idp { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; color: var(--zold); font-weight: 700 }
body.tema-kg .kg-idp-ik { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px }
/* fizetesi jelek, segitseg */
body.tema-kg .kg-fizjel { display: flex !important; gap: 6px; padding-top: 4px }
body.tema-kg .kg-fizjel img { width: 38px; height: 24px; display: block }
body.tema-kg .kg-segit { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--hatter); font-size: 13px; font-weight: 600; color: var(--tinta-2) }
body.tema-kg .kg-segit b { color: var(--tinta); white-space: nowrap }
body.tema-kg .kg-segit-ik { width: 22px; height: 22px; flex: 0 0 auto; color: var(--kek) }
/* visszavonas */
body.tema-kg .kg-visszavon { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--ej); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px -14px rgba(11, 19, 34, .6); animation: kgVvBe .4s var(--lassu) both; transition: opacity .4s, transform .4s }
body.tema-kg .kg-visszavon span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
body.tema-kg .kg-visszavon button { flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 10px; border: 0; background: #fff; color: var(--ej); font-weight: 800; cursor: pointer }
body.tema-kg .kg-visszavon.el { opacity: 0; transform: translate(-50%, 20px); pointer-events: none }
@keyframes kgVvBe { from { opacity: 0; transform: translate(-50%, 20px) } }
@media (max-width: 960px) { body.tema-kg .kg-visszavon { bottom: calc(96px + env(safe-area-inset-bottom)) } }
@media (max-width: 760px) { body.tema-kg .kg-visszavon { bottom: calc(var(--msav-m, 0px) + 92px + env(safe-area-inset-bottom)) } }
/* a tetel kepe felul, a cimmel egy vonalban (nem fuggolegesen kozepen egy magas kartyaban) */
body.tema-kg .kg-kt { align-items: start }
body.tema-kg .kg-kt .tnk-kep { align-self: start }
@media (max-width: 640px) {
  body.tema-kg .kg-kt { grid-template-columns: 104px minmax(0, 1fr) }
  body.tema-kg .kg-kt .tnk-kep { width: 104px; height: 104px }
  body.tema-kg .kg-kt .tnk-kep img { max-height: 96px }
  body.tema-kg .kg-kt .tnk-muv { gap: 10px }
  body.tema-kg .kg-negy { max-width: none }
}
/* kosar: harom egyenrangu atveteli kartya; a szerelesnel a szabad idopont */
body.tema-kg .kg-atv .valaszto > span:last-child { display: grid; gap: 2px }
body.tema-kg .kg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* Apple-eszkozon az Apple Pay (elore kivalasztva) az elso fizetesi mod */
body.tema-kg .valasztok [data-kg-applepay]:not([hidden]) { order: -1 }