/* =========================================
   PRICING — árkalkulátor, modullista, összehasonlítás
   Külön réteg: csak az árazós oldalak töltik be (index + a kalkulátor-aloldalak).
   Minden érték tokenből — lásd DECISIONS.md D-034.
   ========================================= */

/* a saját display-t kapó elemeknél a [hidden] önmagában nem rejt (az UA-szabályt
   felülírja a display: inline-block/flex) — ezért itt kimondjuk */
.price-card [hidden],
.price-sticky[hidden] { display: none !important; }

.pricing-sub {
  text-align: center;
  font-size: var(--typo-h3-size);
  font-weight: 700;
  color: var(--color-neutral-87);
  margin: var(--section-gap) 0 var(--spacing-40);
}

/* ---------- b) fő árkártya ---------- */

.price-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* a hasábköz nagy, a sorköz nem: a váltó saját sorban ül a két hasáb fölött */
  column-gap: var(--space-fluid-md);
  row-gap: var(--spacing-24);
  align-items: start;
  max-width: var(--panel-md);
  margin: 0 auto;
  padding: var(--space-fluid-sm);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-32);
}

.price-card__controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* Számlázási váltó — szegmentált pill. A kártya TETEJÉN, középre zárva ül, a két
   hasáb fölött: ez a választás az egész kártyára hat (az árra és a megtakarításra
   is), nem csak a bal oszlop vezérlőire. */
.billing-toggle {
  grid-column: 1 / -1;
  justify-self: center;
  /* A váltó alatt ugyanakkora hely legyen, mint fölötte. Fölötte a kártya
     felső paddingja áll (--space-fluid-sm); alatta viszont a rács sorköze is
     hozzáadódik, ezért abból vonjuk le — így a KÉT LÁTHATÓ KÖZ egyezik, nem
     a két beírt szám. */
  margin-bottom: calc(var(--space-fluid-sm) - var(--spacing-24));
  position: relative;
  display: inline-flex;
  padding: var(--spacing-4);
  background: var(--surface-alt);
  border-radius: var(--radius-full);
}
/* A csúszó jelölő (transitions.dev „tabs sliding"). A helyét és szélességét a
   JS írja a MÉRT aktív szegmensből — CSS-ben nem lehet tudni, milyen széles a
   „Monthly" és milyen a „Annual −15%". A tween a CSS-é.

   Az időzítés a projekt saját tokenjeiből jön: a `--duration-fast` (250ms) és a
   `--ease-smooth-out` értéke betűre az, amit a skill is ad erre a mintára,
   ezért nem vezetünk be új motion-változót. */
.billing-toggle__pill {
  position: absolute;
  left: 0;
  top: var(--spacing-4);
  bottom: var(--spacing-4);
  width: 0;
  border-radius: var(--radius-full);
  background: var(--surface-default);
  box-shadow: var(--shadow-press-neutral-sm);
  transform: translateX(0);
  transition: transform var(--duration-fast) var(--ease-smooth-out),
              width var(--duration-fast) var(--ease-smooth-out);
  will-change: transform, width;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .billing-toggle__pill { transition: none; }
}

.billing-toggle__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-full);
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-neutral);
  transition: background-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.billing-toggle__btn:hover { color: var(--text-primary); }
/* az aktív szegmensnek már NINCS saját háttere: azt a csúszó pill viszi —
   különben a régi helyén is ott maradna egy fehér folt a mozgás alatt */
.billing-toggle__btn[aria-pressed="true"] { color: var(--text-primary); }
.billing-toggle__badge {
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-full);
  background: var(--brand-secondary);
  color: var(--color-secondary-90);
  font-size: var(--typo-caption-size);
}

/* ---------- mezők: csúszka + léptető ---------- */

/* a mező feje: címke + az AKTUÁLIS érték nagyban — a csúszkáról így leolvasható,
   hol tartunk, és desktopon a számbeviteli mezőre nincs is szükség */
.price-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}
/* Az érték a CÍMKÉVEL azonos tipográfiát visz (méret, sormagasság, vastagság):
   a kettő egy sorban ül, és eltérő mérettel a közös alapvonal is szétcsúszott.
   Egyetlen dolog más: a szín — az érték az erősebb szövegszín, hogy a
   címkétől megkülönböztethető maradjon. A tabular-nums azért kell, hogy
   csúszkázás közben ne ugráljon a szám szélessége. */
.price-field__value {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.price-field__label {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-neutral);
}
/* skálajelölések a csúszka alatt */
.price-field__ticks {
  position: relative;
  height: var(--size-16);
  margin-top: var(--spacing-4);
  list-style: none;
}
.price-field__ticks li {
  position: absolute;
  /* ugyanaz a képlet, mint a kitöltésnél: a címke oda kerül, ahol a fogantyú
     KÖZEPE áll annál az értéknél — nem a sáv nyers százalékára */
  left: calc(var(--range-h) / 2 + var(--tick-ratio, 0) * (100% - var(--range-h)));
  transform: translateX(-50%);
  font-size: var(--typo-caption-size);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-field__ticks li:first-child { transform: none; }
.price-field__ticks li[data-last] { transform: translateX(-100%); }

/* ---------- Csúszka ----------
   A sáv és a fogantyú EGYFORMA magas (--range-h): a fogantyú pontosan kitölti a
   sávot, tehát a teljes sávmagasság fogható felület. Korábban 8px sávon ült egy
   24px korong — ujjal ez a korong volt az egyetlen célpont, és mellé lehetett
   nyúlni. Ez a változtatás elsősorban ÉRINTÉSRE szól.

   A számolás csapdája, ami ezzel a mérettel válik láthatóvá: a fogantyú KÖZEPE
   soha nem ér a sáv széléig — minimumon a bal széltől a fogantyú felével beljebb
   áll, maximumon ugyanennyivel a jobb szél előtt. A bejárható út tehát nem a sáv
   teljes szélessége, hanem `100% - --range-h`. Ha a kitöltést egyszerű
   százalékkal rajzolnánk, a színhatár 24px-szel elcsúszna a fogantyútól a
   szélek felé (a régi 12px-es korongnál ez még alig látszott, 24px-nél már
   feltűnő). Ezért a JS UNITLESS ARÁNYT ír (0…1), a helyet pedig ez a képlet adja:

       --range-h / 2  +  arány × (100% - --range-h)

   Ugyanez a képlet igazítja a skálacímkéket, hogy a „100k" tényleg ott legyen,
   ahol a fogantyú közepe áll annál az értéknél. */

.price-field__range {
  display: block;
  width: 100%;
  height: var(--range-h);
  appearance: none;
  background: transparent;
  cursor: pointer;
  /* a fogantyú középpontjának helye a sávon belül */
  --fill-x: calc(var(--range-h) / 2 + var(--fill-ratio, 0) * (100% - var(--range-h)));
}

/* A sáv: teljes magasságú pirula. A megtett rész halvány márkaszín, a hátralévő
   semleges — a telített márkaszínt a fogantyú viszi, így az mindkét oldalon
   elüt a háttértől (ha a sáv is telített lila lenne, a fogantyú eltűnne benne). */
.price-field__range::-webkit-slider-runnable-track {
  height: var(--range-h);
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--brand-primary-subtle) 0 var(--fill-x),
    var(--surface-neutral) var(--fill-x) 100%);
}
.price-field__range::-moz-range-track {
  height: var(--range-h);
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--brand-primary-subtle) 0 var(--fill-x),
    var(--surface-neutral) var(--fill-x) 100%);
}

.price-field__range::-webkit-slider-thumb {
  appearance: none;
  width: var(--range-h);
  height: var(--range-h);
  /* nincs eltolás: a sáv és a fogantyú egyforma magas */
  margin-top: 0;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  border: 0;
  box-shadow: var(--shadow-press-primary-sm);
}
.price-field__range::-moz-range-thumb {
  width: var(--range-h);
  height: var(--range-h);
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  border: 0;
  box-shadow: var(--shadow-press-primary-sm);
}
/* Hoveres nagyítás NINCS: ekkora fogantyú a sávból lógna ki tőle, és a fogható
   felület amúgy is a teljes sáv — nem kell külön jelezni, hol lehet megfogni. */
.price-field__range:focus-visible { outline: none; }
.price-field__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--border-focus); }
.price-field__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--border-focus); }

/* ---------- eredmény ---------- */

.price-card__result {
  padding-left: clamp(var(--spacing-24), 3vw, var(--spacing-40));
  border-left: 1px solid var(--border-default);
  /* Az eredmény-oszlop KÖZÉPRE zárt — és ezt a komponens mondja ki, nem az
     oldal. Eddig sehol nem volt leírva: az ár-oldalon a `section.hero`, a
     features-en a `.container` `text-align: center`-je szivárgott le ide, a
     FŐOLDALON viszont nincs ilyen ős, ezért ugyanaz a kártya ott balra zártan
     állt. Három oldalon két különböző megjelenés, egyetlen komponensből —
     pontosan az a hiba, amit a „egy szabály egy helyen" kizár. Mobilon eddig
     külön médialekérdezés mondta ki ugyanezt; az most fölöslegessé vált. */
  text-align: center;
}
/* A sáv a nagy összeg FÖLÖTT áll: megmondja, mire vonatkozik az ár, mielőtt a szám
   következik (spec 1.1/b — sávos árazásnál a sávot is ki kell írni). */
.price-card__tier {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-neutral);
  margin-bottom: var(--spacing-8);
}
.price-card__amount {
  font-size: var(--typo-price-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--typo-title-tracking);
  color: var(--brand-primary);
}
.price-card__amount span {
  font-size: var(--typo-body-size);
  font-weight: 700;
  color: var(--text-neutral);
  letter-spacing: 0;
}
.price-card__per {
  margin-top: var(--spacing-8);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--text-neutral);
}
.price-card__saving {
  margin-top: var(--spacing-12);
  padding: var(--spacing-8) var(--spacing-12);
  display: inline-block;
  border-radius: var(--radius-8);
  background: var(--brand-secondary-subtle);
  color: var(--color-secondary-90);
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
}
.price-card__quote {
  margin-top: var(--spacing-8);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--text-neutral);
  max-width: 38ch;
}
.price-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-24);
  /* Középre zárva MINDEN nézetben: az eredmény-oszlop többi eleme (sáv-sor, ár,
     per-fő díj, jegyzet) is középre zárt, tehát a CTA balra zárása egy külön
     kivétel volt — és külön mobil-szabályt is igényelt. Egy logika, minden
     töréspontra. */
  justify-content: center;
  /* A gomb a SAJÁT magasságát viszi, nem a soréit. Alapértelmezett `stretch`
     mellett a „Book a demo" a mellette álló, magasabb blokkhoz (gomb + alatta
     a bolti linkek) nyúlt: mérve 83,5px a másik 56px-e mellett, pedig
     mindkettő ugyanaz a --lg méret. A gombkomponens hibátlan volt — a sor
     igazítása nyújtotta meg. */
  align-items: flex-start;
}
/* a badge-sor a kártya alatt, középre — a kártya kerete fölött nem, alatta ül */
.price-card__stores-label {
  margin-top: var(--space-fluid-sm);
  text-align: center;
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  font-weight: 700;
  color: var(--text-neutral);
}
.price-card__stores { justify-content: center; margin-top: var(--spacing-12); }

.price-card__note {
  margin-top: var(--spacing-16);
  font-size: var(--typo-caption-size);
  color: var(--text-tertiary);
}

/* átvezetés a főoldalról a pricing oldalra (a modullista és az összehasonlítások ott élnek) */

/* ---------- c) modullista ---------- */

.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-24) var(--spacing-40);
  list-style: none;
}
.module { display: flex; gap: var(--spacing-12); }
.module__check {
  flex-shrink: 0;
  width: var(--size-24);
  height: var(--size-24);
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.module__check svg { width: var(--icon-xs); height: var(--icon-xs); }
.module__title {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  font-weight: 700;
  color: var(--text-primary);
}
.module__desc {
  font-size: var(--typo-small-size);
  line-height: var(--typo-small-line);
  color: var(--text-neutral);
}

/* ---------- d) mostani működés vs Medalyst ----------
   A két tábla EGY vizuális nyelvet beszél: ez a blokk a `.compare` (funkció-
   összehasonlítás) eltartásait, tipográfiáját és színezését veszi át — fejléc a
   halvány felületen, a Medalyst-oszlop teli lilán, azonos cellamagassággal. */

.vs-table {
  max-width: var(--panel-md);
  margin: 0 auto;
  /* UGYANAZ a külső keret, mint a funkció-összehasonlításon (.compare-wrap):
     1px, --border-default, 24-es rádiusz. Eddig csak a rádiusz volt meg, keret
     nélkül — ezért nézett ki másképp a két blokk, pedig a belső eltartások,
     tipográfia és sorelválasztók már azonosak voltak. */
  border: 1px solid var(--border-default);
  border-radius: var(--radius-24);
  overflow: hidden;
}
.vs-table__head,
.vs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.vs-table__head p,
.vs-row__now,
.vs-row__new {
  padding: var(--spacing-16) var(--spacing-24);
}
/* fejléc — mint a .compare thead th */
.vs-table__head p {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  font-size: var(--typo-small-size);
  font-weight: 500;
  color: var(--text-neutral);
  background: var(--surface-alt);
}
.vs-table__head p:last-child,
.vs-row__new {
  background: var(--brand-primary);
  color: var(--color-white);
}
/* sorok — mint a .compare tbody td */
.vs-row__now,
.vs-row__new {
  font-size: var(--typo-small-size);
  line-height: var(--typo-body-line);
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-default);
}
.vs-row__now { color: var(--text-primary); }
.vs-row__new {
  background: var(--brand-primary);
  color: var(--color-white);
  font-weight: 500;
  border-bottom-color: var(--color-white-a20);
}
.vs-table__head p:last-child { border-bottom: 1px solid var(--color-white-a20); }
.vs-row:last-child .vs-row__now,
.vs-row:last-child .vs-row__new { border-bottom: none; }

/* ---------- e) versenytárs-tábla ---------- */

.rivals { max-width: var(--panel-md); margin: 0 auto; }
/* Az első oszlop szélessége adott; a fix elrendezés miatt a maradék 60%-on a
   szolgáltató-oszlopok egyenlően osztoznak — akárhány van belőlük. */
.compare--rivals th:first-child,
.compare--rivals td:first-child { width: 40%; }
.compare--rivals .compare__logo { height: var(--icon-lg); }
.rivals__source {
  margin-top: var(--spacing-16);
  font-size: var(--typo-caption-size);
  line-height: 1.5;
  color: var(--text-tertiary);
  text-align: center;
}
.rivals__source a { color: var(--text-link); text-decoration: underline; }
.rivals__source a:hover { color: var(--text-link-pressed); }

/* ---------- Reszponzív ---------- */

@media (max-width: 960px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .price-card { grid-template-columns: 1fr; }
  .price-card__result {
    padding-left: 0;
    padding-top: var(--spacing-24);
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }
}

@media (max-width: 720px) {
  /* a saját display-t kapó elemeknél a [hidden] önmagában nem rejt (az UA-szabályt
   felülírja a display: inline-block/flex) — ezért itt kimondjuk */
.price-card [hidden],
.price-sticky[hidden] { display: none !important; }

.pricing-sub { margin-top: var(--spacing-40); }
  .modules { grid-template-columns: 1fr; }


  /* A vs-tábla MOBILON IS kéthasábos marad. Korábban kártyapárokra bomlott
     (a „most" doboz fölött, a „Medalysttel" alatta) — így viszont elveszett az
     összehasonlítás lényege: a két állítás nem egymás MELLETT állt, hanem
     egymás alatt, és a lap egy értelmezhetetlen sávsorozattá vált.
     A kéthasábos elrendezés megmarad; a szedés kisebb, hogy elférjen. */
  .vs-table__head p,
  .vs-row__now,
  .vs-row__new {
    padding: var(--spacing-12);
    font-size: var(--typo-caption-size);
    line-height: var(--typo-small-line);
  }
}

/* ---------- Mobil összegsáv (spec 1.2: az összeg maradjon látható) ----------
   A kártyán belüli sticky eltakarta volna a csúszkát és a léptetőket, ezért az
   összeg az oldal aljára tapadó sávba kerül. Csak akkor jelenik meg, amikor a
   pricing szekcióban vagyunk, de a fő árkártya már kigörgött — így soha nem
   duplikálja a látható árat. */
.price-sticky {
  position: fixed;
  left: var(--bleed-inset);
  right: var(--bleed-inset);
  bottom: var(--bleed-inset);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  translate: 0 var(--size-16);
  transition: opacity var(--duration-fast) var(--ease-smooth-out),
              translate var(--duration-fast) var(--ease-smooth-out);
}
.price-sticky.is-visible { opacity: 1; translate: 0 0; }
.price-sticky__amount {
  font-size: var(--typo-h3-size);
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand-primary);
}
.price-sticky__tier {
  font-size: var(--typo-caption-size);
  color: var(--text-neutral);
}

@media (max-width: 720px) {
  .price-sticky { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .price-sticky { transition: none; }
}

/* ---------- Alkalmazás-letöltés CTA ----------
   Egy gomb + alatta a két bolt. Mobilon a JS a platform boltjára állítja a gombot
   és elrejti a listát; desktopon mindkét bolt látszik (ott nem tippelhetünk). */
.app-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
}