/* GPC New Wave Miskolc — Deviza Gyerekjövő kalkulátor stílusok
   v3.0 — 2026-08-13 (három pénznem: euró/dollár/forint, oldal-szintű váltó, hero-rotátor)
   v3.1 — 2026-09-22 (Barni-visszajelzés: "a tizedesek nem jól érhetőek, formai
          revíziót kérek, legyen gusztább" — tizedes-tipográfia (.calc-tizedes),
          tabular-nums a számjegyes elemeken, a másodlagos érték és a
          forgatókönyv-ráta vizuális hierarchiájának finomítása. Lásd
          calculator.js v3.1 a formázási bugfixet.) */

/* --- Rotáló hero-szó ------------------------------------------------------------ */
.deviza-rotator {
  display: inline-block;
  min-width: 5.5ch;                 /* megakadályozza, hogy a sor ugráljon váltáskor */
  color: #dbab32;
  transition: opacity .26s ease, transform .26s ease;
}
.deviza-rotator.valt { opacity: 0; transform: translateY(-.18em); }
@media (prefers-reduced-motion: reduce) {
  .deviza-rotator { transition: none; }
}
.deviza-rotator-sor {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #c8b89a;
  margin-top: .35rem;
}
/* Képernyőolvasónak szánt, vizuálisan rejtett változat (a rotátor aria-hidden). */
.deviza-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eurban-calc-box {
  background: #fff;
  border: 2px solid var(--beige-dark);
  border-radius: 14px;
  padding: 1.75rem;
}
@media (max-width: 560px) {
  .eurban-calc-box { padding: 1.25rem 1rem; }
}

/* --- Szám-tipográfia (v3.1) ------------------------------------------------------
   Minden számjegyes kijelzőn tabular-nums, hogy az értékek frissüléskor ne
   "ugráljanak" oldalra (a számjegyek egyenlő szélesek maradnak). A tizedesrész
   (a szamFormatHtml()/szazalekFormatHtml() JS-oldali span-ja) vizuálisan
   visszafogottabb: kisebb és halványabb, hogy az EGÉSZ RÉSZ domináljon és a
   szám egy pillantásra olvasható legyen — ez volt Barni "a tizedesek nem jól
   érhetőek" visszajelzésének magva. */
.calc-tizedes {
  font-size: .82em;
  font-weight: 500;
  opacity: .68;
  letter-spacing: -.01em;
}
.calc-ertek, .calc-ertek-masodlagos,
.eurban-calc-card-fv, .eurban-calc-card-detail,
.calc-deviza-info strong, .csomag-deviza-info strong,
.eurban-calc-disclaimer strong,
.calc-preset span, .calc-preset strong,
.calc-fo-reszlet, .calc-mikro,
.calc-input-deviza input, .calc-input-huf {
  font-variant-numeric: tabular-nums;
}

/* --- Pénznem-váltó -------------------------------------------------------------- */
.calc-deviza-sor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--beige-dark);
}
.calc-deviza-valaszto {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.calc-deviza-valto {
  display: inline-flex;
  border: 1.5px solid var(--beige-dark);
  border-radius: 999px;
  padding: 3px;
  background: var(--beige);
}
.calc-deviza-gomb {
  border: none;
  background: none;
  border-radius: 999px;
  padding: .38rem 1rem;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  /* AA: a --text-muted (#6b6b6b) a beige (#f0e8d8) pilulán csak 4,37:1 — bukja a
     WCAG AA-t 13px-es szövegen. A --text-body (#3a3a3a) ugyanitt 9,4:1. */
  color: var(--text-body);
  line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.calc-deviza-gomb:hover { color: var(--text-dark); }
.calc-deviza-gomb.aktiv {
  background: #fff;
  color: var(--red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.calc-deviza-info {
  flex: 1 1 17rem;
  margin: 0;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: right;
}
.calc-deviza-info strong { color: var(--gold-text-on-light); font-weight: 600; }
@media (max-width: 720px) {
  .calc-deviza-sor { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .calc-deviza-info { text-align: left; }
}
/* 3 pénznemnél a pilula-sor 390px-en is elfér, de kis kijelzőn kap tördelést. */
@media (max-width: 400px) {
  .calc-deviza-gomb { padding: .38rem .7rem; font-size: .78rem; }
}

/* --- Pénznem-váltó a csomag-szekcióban (Gyerekjövő oldal) ----------------------- */
.csomag-deviza-sor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 .5rem;
}
/* AA: ez a szekció BEIGE (#f0e8d8) háttéren ül, ahol a --text-muted (#6b6b6b) csak
   4,37:1 — bukja az AA-t. A --text-body (#3a3a3a) ugyanitt 9,4:1. */
.csomag-deviza-sor .calc-preset-cimke { color: var(--text-body); }
.csomag-deviza-info {
  max-width: 40rem;
  margin: .35rem auto 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--text-body);
  text-align: center;
}
.csomag-deviza-info strong { color: var(--gold-text-on-light); font-weight: 600; }

/* --- Csomag-presetek ------------------------------------------------------------ */
.calc-preset-sor {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.calc-preset-cimke {
  font-family: 'Poppins', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.calc-preset-gombok { display: flex; gap: .6rem; flex-wrap: wrap; }
.calc-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  border: 1.5px solid var(--beige-dark);
  background: #fff;
  border-radius: 8px;
  padding: .5rem .85rem;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  line-height: 1.25;
  transition: border-color .15s ease, background .15s ease;
}
.calc-preset strong { font-size: .82rem; color: var(--text-dark); font-weight: 600; }
.calc-preset span { font-size: .72rem; color: var(--text-muted); }
.calc-preset:hover { border-color: var(--gold); }
.calc-preset.aktiv {
  border-color: var(--gold);
  background: rgba(219, 171, 50, 0.09);
}
.calc-preset.aktiv strong { color: var(--gold-dark); }

/* --- Mód-fülek ------------------------------------------------------------------ */
.calc-fulek {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--beige-dark);
  margin-bottom: 1.5rem;
}
.calc-ful {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: .6rem 1.1rem;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: .87rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .15s ease, border-color .15s ease;
}
.calc-ful:hover { color: var(--text-dark); }
.calc-ful.aktiv { color: var(--red); border-bottom-color: var(--red); }

/* --- Inputok -------------------------------------------------------------------- */
.calc-inputok {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 720px) {
  .calc-inputok { grid-template-columns: 1fr; }
}
/* 2 oszlopos variáns (Barni-visszajelzés, 2026-10-02, 5. kör — a Deviza-sablon
   egységesítése a díjkalkulátorra is): a díjkalkulátornak egyszerre csak 2
   aktív mezője van (életkor + fedezet VAGY havi díj), a 3-as rács 1 árva üres
   cellát hagyna. Ugyanaz a vizuális nyelv (input+mértékegység, segédszöveg),
   csak kevesebb oszloppal. */
.calc-inputok-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
  .calc-inputok-2 { grid-template-columns: 1fr; }
}
.calc-input-deviza { position: relative; display: flex; align-items: center; }
.calc-input-deviza input { width: 100%; padding-right: 3.6rem; }
.calc-deviza-jel {
  position: absolute;
  right: .9rem;
  pointer-events: none;
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gold-dark);
}
.calc-deviza-jel-szoveg { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.calc-jel-rovid input { padding-right: 3.6rem; }
.calc-jel-hosszu input { padding-right: 6.2rem; }

.calc-input-huf {
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--text-muted);
  min-height: 1.1em;
}
.calc-input-huf.calc-hiba { color: var(--red); }

/* --- Fő eredmény ---------------------------------------------------------------- */
.calc-fo-eredmeny {
  margin-top: 1.75rem;
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  background: var(--beige);
  border: 1.5px solid var(--beige-dark);
  text-align: center;
}
.calc-fo-cimke {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.calc-fo-ertek { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.calc-ertek {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--red);
  line-height: 1.15;
}
.calc-ertek-nagy { font-size: clamp(1.9rem, 5vw, 2.6rem); }
/* A fő-érték tizedese (ha egyszer megjelenne) a nagy méretben is visszafogott
   maradjon, ne az egész-rész léptékét kövesse. */
.calc-ertek .calc-tizedes { font-size: .58em; }
/* A pénznem-jel (€/$/Ft) a fő számérték mellett: kisebb, sans-serif, félkövér
   helyett medium súly — a szám domináljon, a jel csak kísérje. */
.calc-ertek-jel {
  font-family: 'Poppins', sans-serif;
  font-size: .48em;
  font-weight: 600;
  opacity: .78;
  letter-spacing: .01em;
  margin-left: .12em;
}
.calc-ertek-masodlagos {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Poppins', sans-serif;
  font-size: .86rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: .92;
}
.calc-fo-reszlet {
  margin-top: .85rem;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Számtörés-fix (Barni-visszajelzés, 2026-10-02, 3. kör): a szamFormat() az ezres-elválasztó
   nem törhető szóközét (U+00A0/U+202F) szándékosan sima, TÖRHETŐ szóközre cseréli (lásd
   calculator.js), ezért keskeny kártyákon/kis szélességen a böngésző a szám KÖZEPÉN törhet
   ("3 600 | 000 Ft"). A JS-formázó függvényhez nem nyúlunk (más oldalakon/kontextusban
   indokolt volt a törhető szóköz) — helyette minden olyan elemet, ami EGY formázott
   pénzösszeget (vagy ráta-/mértékegység-kísérőjét) jelenít meg, `white-space: nowrap`-pal
   zárunk le, hogy a szóköz csak a LABEL és az ÉRTÉK közt, vagy szavak közt törhessen, a
   számjegy-csoportok közt soha. Minden kalkulátor ugyanezt a néhány osztályt használja
   (calculator.js, nyugdij-kalkulator.js, dijkalkulator.js), így egy helyen javítva mind az
   5 kalkulátoron érvényes. */
.calc-ertek,
.calc-ertek-masodlagos,
.eurban-calc-card-fv,
.eurban-calc-card-detail strong,
.calc-fo-reszlet strong {
  white-space: nowrap;
}

/* --- Idővonal-grafikon ---------------------------------------------------------- */
.calc-idovonal { margin-top: 1.5rem; }
.calc-idovonal-fejlec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.calc-idovonal-cim {
  font-family: 'Poppins', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.calc-jelmagyarazat { display: flex; gap: .9rem; flex-wrap: wrap; }
.calc-jel-elem {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: var(--text-muted);
}
.calc-jel-elem i {
  width: 13px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}
.calc-jel-toke { background: rgba(219, 171, 50, 0.45); border: 1px solid #b8902a; }
.calc-jel-hozam { background: rgba(192, 36, 37, 0.13); border: 1px dashed #c02425; }
.calc-idovonal svg { width: 100%; height: 170px; display: block; overflow: visible; }
.calc-svg-tick {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  fill: #8a7a5c;
}

/* --- Mikro-üzenet ("ha korábban kezdi") ----------------------------------------- */
.calc-mikro {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--gold);
  background: rgba(219, 171, 50, 0.07);
  border-radius: 0 6px 6px 0;
  font-size: .86rem;
  line-height: 1.65;
  color: #6b5c3e;
}
.calc-mikro strong { color: var(--gold-dark); }

/* --- Info-box (díjátvállalás) --------------------------------------------------- */
.calc-info-box {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--beige-dark);
  border-radius: 8px;
  background: #fdfcfa;
}
.calc-info-cim {
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .4rem;
}
.calc-info-box p {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.calc-info-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .65rem;
  font-family: 'Poppins', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.calc-info-link:hover { color: var(--red-dark); text-decoration: underline; }
.calc-info-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- CTA ------------------------------------------------------------------------ */
.calc-cta {
  margin-top: 1.5rem;
  width: 100%;
  justify-content: center;
}

/* --- Üzenet / validáció --------------------------------------------------------- */
.calc-uzenet {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--beige);
  font-size: .88rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Modell-forgatókönyvek (csak sign-off után látszik) ------------------------- */
.calc-szekcio-cim {
  margin-top: 1.75rem;
  margin-bottom: .75rem;
  font-family: 'Poppins', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.eurban-calc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) {
  .eurban-calc-cards { grid-template-columns: 1fr; }
}
.eurban-calc-card {
  border: 2px solid var(--beige-dark);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.eurban-calc-card.kiemelt {
  border-color: var(--gold);
  background: rgba(219, 171, 50, 0.05);
}
.eurban-calc-card-label {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
/* A rátajelölés melletti "(4,0%/év)" — korábban inline style="opacity:.6" volt,
   most osztályba emelve; enyhén kisebb is, hogy egyértelműen másodlagos infó
   maradjon a forgatókönyv-címke mellett, ne versenyezzen vele. */
.calc-rata-info {
  font-size: .92em;
  font-weight: 400;
  opacity: .62;
  text-transform: none;
  letter-spacing: normal;
}
.eurban-calc-card-fv {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: .4rem;
  line-height: 1.2;
}
.eurban-calc-card-detail {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.calc-modell-lab {
  margin-top: .85rem;
  font-size: .76rem;
  font-style: italic;
  line-height: 1.65;
  color: #a0907a;
}

/* --- Disclaimer ----------------------------------------------------------------- */
.eurban-calc-disclaimer {
  margin-top: 1.5rem;
  border: 1.5px solid rgba(192, 36, 37, 0.3);
  background: rgba(192, 36, 37, 0.05);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  font-size: .8rem;
  color: #7a2020;
  line-height: 1.65;
}
.eurban-calc-disclaimer p { margin: 0 0 .5rem; }
.eurban-calc-disclaimer p:last-child { margin-bottom: 0; }