/* ══════════════════════════════════════════════════════════════════════════
   fpe-arany.css — arany megerosites-nyelv (#d9a544), 2026-07-25 (b-kor)

   Miert kulon fajl: a CTA-gomb osztalyok 30+ HTML-ben, egyenkent, inline
   <style> blokkban vannak definialva. Egy kozos, UTOLSONAK betoltott lap
   egy helyen tartja a szabalyt — es egyben visszavonhato, ha nem valik be.
   Kotelezo: a <link> a </head> ELE keruljon, MINDEN mas stilus utan.

   Forras: 20_UI_Design_Iranyelvek_2026-07-23.md 3. es 4. pont.

   ELTERES A 3. PONTTOL, SZANDEKOSAN — a color:#f3dfb0 NINCS ratolva a kitoltott
   (kek hatteru) gombokra. Az iranyelv ezt sotet felulethez irta (.fpe-ut kartya
   #1a1d2e-n). Kitoltott #2472a4 gombon a #f3dfb0 kontrasztja 3,63:1 lenne —
   a mai feher szovege 5,29:1. A WCAG AA hatar normal meretu szovegre 4,5:1,
   tehat az iranyelv szó szerinti alkalmazasa itt rontana. Ezert a kitoltott
   gomb szovege marad, es a megerosites a keret + glow + arany film.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --fpe-arany: #d9a544;
  --fpe-arany-halo: rgba(217, 165, 68, .4);
}

/* ── 1. ELSODLEGES CTA-GOMBOK ─────────────────────────────────────────────
   A kettozott osztalynev (.x.x) szandekos: igy (0,2,0) helyett (0,3,0) a
   specificitas, es a szabaly akkor is nyer, ha az oldal sajat CSS-e
   `.section-card .submit-btn:hover` alakban, magasabb sullyal definialta.
   ────────────────────────────────────────────────────────────────────────── */

.btn-primary.btn-primary,
.submit-btn.submit-btn,
.btn-submit.btn-submit,
.gf-submit-btn.gf-submit-btn,
.bonus-submit.bonus-submit,
.cta-btn.cta-btn,
.cta-button.cta-button,
.download-btn.download-btn,
.nav-btn-next.nav-btn-next,
.fpe-next-btn.fpe-next-btn,
.cta-arany.cta-arany {
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease,
              background .2s ease, opacity .2s ease;
}

/* Megerosites: hover (eger) es focus-visible (billentyuzet) */
.btn-primary.btn-primary:not([disabled]):hover,
.btn-primary.btn-primary:not([disabled]):focus-visible,
.submit-btn.submit-btn:not([disabled]):hover,
.submit-btn.submit-btn:not([disabled]):focus-visible,
.btn-submit.btn-submit:not([disabled]):hover,
.btn-submit.btn-submit:not([disabled]):focus-visible,
.gf-submit-btn.gf-submit-btn:not([disabled]):hover,
.gf-submit-btn.gf-submit-btn:not([disabled]):focus-visible,
.bonus-submit.bonus-submit:not([disabled]):hover,
.bonus-submit.bonus-submit:not([disabled]):focus-visible,
.cta-btn.cta-btn:not([disabled]):hover,
.cta-btn.cta-btn:not([disabled]):focus-visible,
.cta-button.cta-button:not([disabled]):hover,
.cta-button.cta-button:not([disabled]):focus-visible,
.download-btn.download-btn:not([disabled]):hover,
.download-btn.download-btn:not([disabled]):focus-visible,
.nav-btn-next.nav-btn-next:not([disabled]):hover,
.nav-btn-next.nav-btn-next:not([disabled]):focus-visible,
.fpe-next-btn.fpe-next-btn:not([disabled]):hover,
.fpe-next-btn.fpe-next-btn:not([disabled]):focus-visible,
.cta-arany.cta-arany:not([disabled]):hover,
.cta-arany.cta-arany:not([disabled]):focus-visible {
  border-color: var(--fpe-arany);
  outline: none;
  /* Az elso, inset ertek egy attetszo arany film a MEGLEVO hatter FOLOTT —
     igy a kek (vagy a .cta-btn gradiense) nem tunik el, csak megerosodik. */
  box-shadow:
    inset 0 0 0 999px rgba(217, 165, 68, .15),
    0 0 0 1px var(--fpe-arany-halo),
    0 0 20px rgba(217, 165, 68, .38);
}

/* Erintes/kattintas pillanata — erosebb halo + enyhe benyomas.
   A .fpe-arany-tap osztalyt a fpe-arany.js teszi ra 180ms-ra a
   touchend/pointerup esemenyen, mert erintokepernyon nincs :hover. */
.btn-primary.btn-primary:not([disabled]):active,
.btn-primary.btn-primary.fpe-arany-tap,
.submit-btn.submit-btn:not([disabled]):active,
.submit-btn.submit-btn.fpe-arany-tap,
.btn-submit.btn-submit:not([disabled]):active,
.btn-submit.btn-submit.fpe-arany-tap,
.gf-submit-btn.gf-submit-btn:not([disabled]):active,
.gf-submit-btn.gf-submit-btn.fpe-arany-tap,
.bonus-submit.bonus-submit:not([disabled]):active,
.bonus-submit.bonus-submit.fpe-arany-tap,
.cta-btn.cta-btn:not([disabled]):active,
.cta-btn.cta-btn.fpe-arany-tap,
.cta-button.cta-button:not([disabled]):active,
.cta-button.cta-button.fpe-arany-tap,
.download-btn.download-btn:not([disabled]):active,
.download-btn.download-btn.fpe-arany-tap,
.nav-btn-next.nav-btn-next:not([disabled]):active,
.nav-btn-next.nav-btn-next.fpe-arany-tap,
.fpe-next-btn.fpe-next-btn:not([disabled]):active,
.fpe-next-btn.fpe-next-btn.fpe-arany-tap,
.cta-arany.cta-arany:not([disabled]):active,
.cta-arany.cta-arany.fpe-arany-tap {
  border-color: var(--fpe-arany);
  transform: scale(.985);
  box-shadow:
    inset 0 0 0 999px rgba(217, 165, 68, .22),
    0 0 0 1px rgba(217, 165, 68, .6),
    0 0 26px rgba(217, 165, 68, .5);
}

/* Letiltott gomb soha nem ad megerosito jelet. */
.btn-primary[disabled],
.submit-btn[disabled],
.btn-submit[disabled],
.gf-submit-btn[disabled],
.cta-btn[disabled],
.cta-button[disabled],
.nav-btn-next[disabled] {
  box-shadow: none;
  transform: none;
}

/* ── 1/b. MASODLAGOS ES LEPTETO GOMBOK ────────────────────────────────────
   2026-07-26 (UI 2B kor, 39-es fajl 2.5): a `.btn-opt`, `.btn-back` es
   `.nav-btn` osztaly is megkapja az arany megerosites-nyelvet.

   SZANDEKOS ELTERES AZ 1. PONTTOL: itt NINCS `inset 0 0 0 999px` arany film.
   Az 1. pont gombjai a DONTEST viszik (kuldes, ajanlat, tovabb) — ott a tomor
   arany film helyenvalo. Ezek viszont masodlagos vezerlok: a `.btn-back`
   visszafele visz, a `.btn-opt` egy valasztas EGYIK lehetosege. Ha ugyanolyan
   hangosan villannanak, mint a kuldes gomb, a megerosites-nyelv elveszitene a
   jelentesét — mindenre ugyanaz a jel semmit nem jelent. Ezert csak keret +
   halo + halvany arany tint.

   A `.btn-opt.selected` allapot (tomor kek hatter) NEM valtozik: a kivalasztas
   allapot-jelzes, az arany pedig pillanatnyi visszajelzes. A ketto nem
   keveredik, mert az arany csak hoveren/tapen/fokuszon el.
   ────────────────────────────────────────────────────────────────────────── */

.btn-opt.btn-opt,
.btn-back.btn-back,
.nav-btn.nav-btn {
  transition: box-shadow .2s ease, border-color .2s ease, color .2s ease,
              background .2s ease, transform .15s ease;
}

.btn-opt.btn-opt:not([disabled]):hover,
.btn-opt.btn-opt:not([disabled]):focus-visible,
.btn-back.btn-back:not([disabled]):hover,
.btn-back.btn-back:not([disabled]):focus-visible,
.nav-btn.nav-btn:not([disabled]):hover,
.nav-btn.nav-btn:not([disabled]):focus-visible {
  border-color: var(--fpe-arany);
  outline: none;
  box-shadow: 0 0 0 1px var(--fpe-arany-halo), 0 0 16px rgba(217, 165, 68, .30);
}

/* Erintes/kattintas pillanata. A .fpe-arany-tap osztalyt a fpe-arany.js
   teszi ra 180 ms-ra — erintokepernyon nincs :hover, tehat enelkul a mobil
   latogato (a forgalom tobbsege) soha nem latna visszajelzest. */
.btn-opt.btn-opt:not([disabled]):active,
.btn-opt.btn-opt.fpe-arany-tap,
.btn-back.btn-back:not([disabled]):active,
.btn-back.btn-back.fpe-arany-tap,
.nav-btn.nav-btn:not([disabled]):active,
.nav-btn.nav-btn.fpe-arany-tap {
  border-color: var(--fpe-arany);
  background: rgba(217, 165, 68, .16);
  transform: scale(.985);
  box-shadow: 0 0 0 1px rgba(217, 165, 68, .6), 0 0 22px rgba(217, 165, 68, .42);
}

/* A `.nav-btn-next` az 1. pont listajan is rajta van (tomor arany film),
   es ott is kell maradnia: az a "Kovetkezo" gomb, tehat dontesi elem.
   A fenti, halkabb szabaly ne vegye vissza tole a filmet. */
.nav-btn-next.nav-btn-next:not([disabled]):hover,
.nav-btn-next.nav-btn-next:not([disabled]):focus-visible {
  box-shadow:
    inset 0 0 0 999px rgba(217, 165, 68, .15),
    0 0 0 1px var(--fpe-arany-halo),
    0 0 20px rgba(217, 165, 68, .38);
}
.nav-btn-next.nav-btn-next:not([disabled]):active,
.nav-btn-next.nav-btn-next.fpe-arany-tap {
  background: none;
  box-shadow:
    inset 0 0 0 999px rgba(217, 165, 68, .22),
    0 0 0 1px rgba(217, 165, 68, .6),
    0 0 26px rgba(217, 165, 68, .5);
}

.btn-opt[disabled], .btn-back[disabled], .nav-btn[disabled] {
  box-shadow: none;
  transform: none;
}


/* ── 2. KALKULATOR KITOLTESI SAV ──────────────────────────────────────────
   Nem az eredmenyt mutatja, hanem azt, hogy hany bemenetet erintett mar meg
   a latogato ebben a csoportban. A markupot a fpe-arany.js szurja be.
   ────────────────────────────────────────────────────────────────────────── */

.fpe-kitoltes {
  margin: 0 0 14px;
}

.fpe-kitoltes-fej {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text-muted, #a3abb9);
}

.fpe-kitoltes-szam {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.fpe-kitoltes-sin {
  position: relative;
  height: 4px;
  border-radius: 999px;
  /* Arany tonusu sin, NEM feher-attetszo: a kalkulatorok egy resze (pl.
     befektetes-, csok-kalkulator) vilagos temaban indul, ott a feher sav
     lathatatlan lenne a majdnem-feher kartyan. Igy mindket temaban latszik. */
  background: rgba(217, 165, 68, .22);
  overflow: hidden;
}

.fpe-kitoltes-toltet {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 165, 68, .55), var(--fpe-arany));
  box-shadow: 0 0 10px rgba(217, 165, 68, .45);
  transition: width .4s ease;
}

/* Kesz allapot: a sav es a felirat is aranyra valt. */
.fpe-kitoltes.kesz .fpe-kitoltes-fej {
  color: var(--fpe-arany);
}

/* ── 3. MOZGASCSOKKENTES ──────────────────────────────────────────────────
   Aki kikapcsolta az animaciot, annak a szin/keret megmarad (az hordozza az
   informaciot), csak a mozgas es a szeles-atmenet all le.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn-primary.btn-primary,
  .submit-btn.submit-btn,
  .btn-submit.btn-submit,
  .gf-submit-btn.gf-submit-btn,
  .bonus-submit.bonus-submit,
  .cta-btn.cta-btn,
  .cta-button.cta-button,
  .download-btn.download-btn,
  .nav-btn-next.nav-btn-next,
  .fpe-next-btn.fpe-next-btn,
  .cta-arany.cta-arany,
  .btn-opt.btn-opt,
  .btn-back.btn-back,
  .nav-btn.nav-btn {
    transition: none;
  }

  .btn-primary.btn-primary:not([disabled]):active,
  .submit-btn.submit-btn:not([disabled]):active,
  .btn-submit.btn-submit:not([disabled]):active,
  .gf-submit-btn.gf-submit-btn:not([disabled]):active,
  .bonus-submit.bonus-submit:not([disabled]):active,
  .cta-btn.cta-btn:not([disabled]):active,
  .cta-button.cta-button:not([disabled]):active,
  .download-btn.download-btn:not([disabled]):active,
  .nav-btn-next.nav-btn-next:not([disabled]):active,
  .fpe-next-btn.fpe-next-btn:not([disabled]):active,
  .cta-arany.cta-arany:not([disabled]):active,
  .btn-opt.btn-opt:not([disabled]):active,
  .btn-back.btn-back:not([disabled]):active,
  .nav-btn.nav-btn:not([disabled]):active {
    transform: none;
  }

  .fpe-kitoltes-toltet {
    transition: none;
  }
}

/* ── 4. NYOMTATAS ─────────────────────────────────────────────────────────
   A tobb kalkulator nyomtathato osszegzest ad — a kitoltesi sav ott zaj.
   ────────────────────────────────────────────────────────────────────────── */

@media print {
  .fpe-kitoltes { display: none !important; }
}