/* GPC New Wave Miskolc — Kalkulátor-hub és a 3 új kalkulátor (összehasonlító / díj- /
   nyugdíj) saját stílusai.
   v1.0 — 2026-09-22 (web-robot [SUBROLE: landing])

   SZÁNDÉKOSAN KÜLÖN FÁJL a calculator.css-től: a Gyerekjövő-kalkulátor CSS-éhez
   (calculator.css) EGYETLEN sort sem adtunk hozzá és nem módosítottunk — nulla
   regressziós kockázat. Ahol közös vizuális nyelv kellett (kártyák, fülek, fő-
   eredmény doboz, tizedes-tipográfia), azt a MEGLÉVŐ calculator.css / brand.css
   osztályok újrahasználásával oldottuk meg (pl. .eurban-calc-box, .calc-fulek,
   .calc-ful, .calc-fo-eredmeny, .lead-modal-overlay) — csak az ide tartozó, ÚJ
   elemek (minta-adat badge, összehasonlító sorok, hub-kártyák) kaptak új
   osztályt, "kh-" előtaggal (kalkulátor-hub).

   Mobil-korlát öröklődik a projekt egészéből: 0 horizontális overflow 390px és
   360px szélességen — minden itteni elrendezés flex-wrap / grid minmax alapú,
   nincs fix, tört pixelnél nagyobb szélesség. */

/* --- Minta-adat figyelmeztető sáv ------------------------------------------------ */
.kh-minta-badge {
  background: rgba(219, 171, 50, 0.14);
  border: 1.5px dashed var(--gold-dark, #b8902a);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-body, #3a3a3a);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* --- Ellenőrzött/valós adat jelzés (megkülönböztetve a fenti minta-adat badge-től) */
.kh-valos-adat-jelzes {
  background: var(--beige, #f0e8d8);
  border: 1px solid var(--sand, #c8b89a);
  border-left: 3px solid var(--dark-3, #2f2f2f);
  border-radius: 6px;
  padding: .65rem .9rem;
  font-size: .82rem;
  color: var(--text-body, #3a3a3a);
  margin-bottom: .85rem;
  line-height: 1.5;
}
.kh-valos-adat-jelzes a { color: inherit; text-decoration: underline; }

/* --- Állapot-üzenetek ------------------------------------------------------------- */
.kh-toltes, .kh-hiba {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted, #6b6b6b);
  font-size: .95rem;
}
.kh-hiba { color: #991d1e; }

/* --- Bemeneti form ----------------------------------------------------------------*/
.kh-form { margin-bottom: 1.5rem; }
.kh-mezo { margin-bottom: 1.25rem; }
.kh-mezo:last-child { margin-bottom: 0; }
.kh-mezo > label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-body, #3a3a3a);
  margin-bottom: .5rem;
}
.kh-mezo input[type="number"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--white, #fff);
  border: 1.5px solid #d8d0c0;
  border-radius: 4px;
  color: var(--text-dark, #1e1e1e);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: .7rem .9rem;
  outline: none;
}
.kh-mezo input[type="number"]:focus {
  border-color: var(--red, #c02425);
  box-shadow: 0 0 0 3px rgba(192,36,37,0.1);
}

.kh-radio-sor, .kh-checkbox-sor { display: flex; flex-wrap: wrap; gap: .6rem .9rem; }
.kh-radio, .kh-checkbox {
  display: flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--text-body, #3a3a3a);
  cursor: pointer; white-space: nowrap;
}
.kh-radio input, .kh-checkbox input { accent-color: var(--red, #c02425); cursor: pointer; }

/* --- Rendező sáv -------------------------------------------------------------------*/
.kh-rendezo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1rem; font-size: .85rem; color: var(--text-muted, #6b6b6b);
}
.kh-rendez-gomb {
  background: var(--white, #fff);
  border: 1.5px solid #d8d0c0;
  border-radius: 20px;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-family: 'Poppins', sans-serif;
  color: var(--text-body, #3a3a3a);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.kh-rendez-gomb.aktiv {
  background: var(--red, #c02425);
  border-color: var(--red, #c02425);
  color: #fff;
  font-weight: 600;
}

/* --- Összehasonlító találati lista ------------------------------------------------ */
.kh-lista { display: flex; flex-direction: column; gap: .75rem; }
.kh-sor {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: #fff; border: 1.5px solid var(--beige-dark, #e2d5bd);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.kh-sor-kiemelt { border-color: var(--gold, #dbab32); box-shadow: 0 2px 14px rgba(219,171,50,0.18); }
.kh-sor-rang { font-weight: 700; color: var(--text-muted, #6b6b6b); min-width: 1.4em; }
.kh-sor-nev { font-weight: 600; color: var(--text-dark, #1e1e1e); flex: 1 1 140px; min-width: 0; }
.kh-tag-legjobb {
  display: inline-block; margin-left: .5rem; background: var(--gold, #dbab32); color: #1b1b1b;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 12px; padding: .15rem .55rem; vertical-align: middle;
}
.kh-sor-oszlop { display: flex; flex-direction: column; font-size: .85rem; min-width: 88px; }
.kh-oszlop-cimke { font-size: .7rem; color: var(--text-muted, #6b6b6b); text-transform: uppercase; letter-spacing: .03em; }
.kh-sor-cta { margin-left: auto; white-space: nowrap; }

@media (max-width: 640px) {
  .kh-sor { flex-direction: column; align-items: flex-start; }
  .kh-sor-cta { margin-left: 0; width: 100%; justify-content: center; }
  .kh-sor-oszlop { min-width: 45%; }
}

.kh-disclaimer {
  font-size: .8rem; color: var(--text-muted, #6b6b6b); line-height: 1.6;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--beige-dark, #e2d5bd);
}

/* Egykártyás sablon (2026-10-02, 5. kör): az adójóváírás-blokk MÁR a közös
   .eurban-calc-box kártyán BELÜL ül (nem saját dupla-keretes box), ezért a
   korábbi beágyazott .eurban-calc-box helyett egy felső elválasztó csík
   jelzi a szekció-váltást ugyanabban a kártyában. */
.kh-ado-box { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--beige-dark, #e2d5bd); }
.kh-ado-box p { color: var(--text-body, #3a3a3a); line-height: 1.65; margin-bottom: .75rem; }
.kh-ado-box p:last-child { margin-bottom: 0; }

/* --- Deviza-megoszlás sávok (megtakarítás-kalkulátor, 2026-10-02 5. kör) ----------
   Világos/bézs kártyán belüli változat — a korábbi kampányoldal sötét .bar-track/
   .bar-fill-ft/.bar-fill-eur-jének fényes-kártyás megfelelője. */
.mk-bar-track {
  background: var(--beige, #f0e8d8);
  border-radius: 4px;
  overflow: hidden;
  height: 20px;
}
.mk-bar-fill-ft {
  background: linear-gradient(90deg, #dbab32, #f0c94c);
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  min-width: 4px;
}
.mk-bar-fill-eur {
  background: linear-gradient(90deg, #c02425, #e2605f);
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  min-width: 4px;
}

/* --- Egységes kalkulátor-kártya segédelemek (2026-10-02, 5. kör) -----------------
   A díj-/nyugdíj-/megtakarítás-kalkulátor mostantól EGYETLEN .eurban-calc-box
   kártyán belül él, a Deviza Gyerekjövő motor elrendezését követve: fülek/inputok
   felül, dinamikus eredmény középen, egységes minta-adat + jogi disclaimer alul,
   statikusan (nem rendere­lődik újra minden inputváltáskor). */
.kh-card-also {
  margin-top: 1.75rem;
}

/* --- Kalkulátor-hub kártyák --------------------------------------------------------*/
/* 3 kártyás egysoros rács (web-robot [SUBROLE: landing], 2026-10-02, 9. kör — a díj-/
   fedezetkalkulátor-kártya törlése után 4->3 kártya maradt). 700px fölött fix 3 oszlop
   (egy sor, nincs lyukas 2+1), 700px alatt megmarad az auto-fit (1 oszlopban stabil,
   nem csordul túl keskeny mobilon). */
.kh-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 700px) {
  .kh-hub-grid { grid-template-columns: repeat(3, 1fr); }
}
.kh-hub-card {
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--beige-dark, #e2d5bd); border-radius: 14px;
  padding: 1.5rem; text-decoration: none; transition: border-color .18s, transform .18s;
}
.kh-hub-card:hover { border-color: var(--gold, #dbab32); transform: translateY(-2px); }
/* Cím-törés (Barni-visszajelzés, 2026-10-02 2. kör): az előző "overflow-wrap: break-word;
   word-break: break-word;" pár a kártya szélességéhez képest túl hosszú címeknél
   SZÓ KÖZEPÉN tört ("Díj-/fedezetkalkulát|or", "Megtakarítás-/nyu|gdíjkalkulátor"),
   mert a böngésző utolsó-eszközként tetszőleges pontot is elfogadott. Most csak a
   TERMÉSZETES töréspontoknál (szóköz, "-", explicit <wbr> a "-/" után a HTML-ben)
   törhet a cím — overflow-wrap/word-break: normal. Kiegészítve 240px->260px minmax
   kártyaszélesség és egy fokkal kisebb betűméret, hogy a leghosszabb cím
   ("Megtakarítás-/nyugdíjkalkulátor") két törésponttal (a "-" és a "/" után) is
   kényelmesen elférjen, túlfolyás nélkül. */
.kh-hub-card-cim {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-dark, #1e1e1e);
  margin-bottom: .5rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.kh-hub-card-leiras { font-size: .9rem; color: var(--text-muted, #6b6b6b); line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.kh-hub-card-cta { font-size: .85rem; font-weight: 600; color: var(--red, #c02425); }

/* --- Kalkulátor-wizard (2026-10-06, web-robot [SUBROLE: landing]) ------------------
   A korábbi 3-kártyás hub (fenti .kh-hub-*) helyére lépő, kérdésenkénti wizard.
   A .kh-hub-* osztályokat szándékosan NEM töröltük (zéró törlési kockázat, nincs már
   hivatkozás rájuk a kalkulatorok.html-ben, de más oldal esetleg visszanyúlhat). */
.kw-box { max-width: 100%; }
.kw-switch-row { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.kw-switch {
  display: inline-flex;
  border: 1.5px solid var(--beige-dark, #e2d5bd);
  border-radius: 999px;
  padding: 3px;
  background: var(--beige, #f0e8d8);
  gap: 2px;
}
.kw-switch-btn {
  border: none;
  background: none;
  border-radius: 999px;
  padding: .55rem 1.25rem;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-body, #3a3a3a);
  transition: background .15s ease, color .15s ease;
}
.kw-switch-btn:hover { color: var(--text-dark, #1e1e1e); }
.kw-switch-btn.aktiv { background: #fff; color: var(--red, #c02425); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (max-width: 420px) {
  .kw-switch-btn { padding: .5rem .85rem; font-size: .82rem; }
}

.kw-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--beige-dark, #e2d5bd);
}
.kw-step-chip {
  border: 1.5px solid var(--beige-dark, #e2d5bd);
  background: #fff;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .72rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  color: var(--text-muted, #6b6b6b);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kw-step-chip:hover { border-color: var(--gold, #dbab32); }
.kw-step-chip.aktiv { background: var(--red, #c02425); border-color: var(--red, #c02425); color: #fff; }

.kw-panel { min-height: 10rem; }
.kw-question {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark, #1e1e1e);
  margin-bottom: 1.1rem;
  line-height: 1.35;
}
.kw-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.kw-nav .btn-secondary, .kw-nav .btn-primary { flex: 0 0 auto; }
@media (max-width: 480px) {
  .kw-nav { flex-direction: column-reverse; align-items: stretch; }
  .kw-nav .btn-secondary, .kw-nav .btn-primary { width: 100%; justify-content: center; }
}
.kw-error {
  margin-top: .75rem;
  font-size: .85rem;
  color: #991d1e;
  min-height: 1.2em;
}
.kw-recap {
  font-size: .85rem;
  color: var(--text-muted, #6b6b6b);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--beige-dark, #e2d5bd);
}
.kw-recap strong { color: var(--text-dark, #1e1e1e); }
.kw-skip-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--gold-text-on-light, #8a6d1f);
  font-size: .85rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  padding: .6rem 0 0;
}
.kw-skip-link:hover { text-decoration: underline; }

/* --- Wizard v1.1 (2026-10-06): gazdag lépés-tartalom ------------------------------------
   Beviteli oszlop + élő előnézet-oldalsáv, haladás-sáv, gyors-választó chipek, nagy
   választókártyák. A korábbi (v1.0) üres lépések helyett — ld. kalkulator-wizard.js. */
.kw-panel { min-height: 16rem; }
.kw-progress { height: 5px; background: var(--beige, #f0e8d8); border-radius: 999px; overflow: hidden; margin-bottom: 1.25rem; }
.kw-progress span { display: block; height: 100%; background: var(--red, #c02425); border-radius: 999px; transition: width .25s ease; }
.kw-stepno { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text-on-light, #8a6d1f); margin-bottom: .4rem; }
.kw-help { font-size: .92rem; line-height: 1.65; color: var(--text-muted, #6b6b6b); margin: -.35rem 0 1.1rem; }
.kw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .kw-grid { grid-template-columns: minmax(0, 1fr); } }
.kw-main { min-width: 0; }
.kw-aside {
  background: var(--beige, #f0e8d8);
  border: 1.5px solid var(--beige-dark, #e2d5bd);
  border-radius: 8px;
  padding: 1.1rem 1.1rem .9rem;
  min-width: 0;
}
.kw-aside-cim { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #6b6b6b); margin-bottom: .65rem; }
.kw-aside .calc-fo-eredmeny { margin: 0 0 .75rem; padding: .9rem .75rem; box-shadow: none; background: #fff; }
.kw-aside .calc-ertek-nagy, .kw-aside .calc-fo-ertek { font-size: 1.9rem; }
.kw-aside .calc-fo-cimke { font-size: .66rem; }
.kw-aside .calc-fo-reszlet { font-size: .76rem; }
.kw-aside svg { max-width: 100%; height: auto; }
.kw-aside-sor { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; padding: .45rem 0; border-top: 1px solid var(--beige-dark, #e2d5bd); }
.kw-aside-sor strong { color: var(--red, #c02425); white-space: nowrap; }
.kw-aside-lab { font-size: .72rem; line-height: 1.5; color: var(--text-muted, #6b6b6b); font-style: italic; margin: .6rem 0 0; }
.kw-aside-ures { font-size: .88rem; color: var(--text-muted, #6b6b6b); }
.kw-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.kw-presets-cim { font-size: .78rem; color: var(--text-muted, #6b6b6b); margin-right: .15rem; }
.kw-preset {
  border: 1.5px solid var(--beige-dark, #e2d5bd); background: #fff; border-radius: 999px;
  padding: .3rem .8rem; font-size: .8rem; font-weight: 600; font-family: 'Poppins', sans-serif;
  color: var(--text-body, #3a3a3a); cursor: pointer;
}
.kw-preset:hover { border-color: var(--gold, #dbab32); background: #fffdf6; }
.kw-choices { display: grid; gap: .75rem; }
.kw-choice {
  text-align: left; display: flex; flex-direction: column; gap: .3rem; cursor: pointer;
  border: 1.5px solid var(--beige-dark, #e2d5bd); background: #fff; border-radius: 8px;
  padding: 1rem 1.1rem; font-family: 'Poppins', sans-serif; transition: border-color .15s, background .15s;
}
.kw-choice:hover { border-color: var(--gold, #dbab32); }
.kw-choice.aktiv { border-color: var(--red, #c02425); background: #fdf6f5; box-shadow: 0 0 0 1px var(--red, #c02425) inset; }
.kw-choice-cim { font-weight: 700; font-size: 1rem; color: var(--text-dark, #1e1e1e); }
.kw-choice.aktiv .kw-choice-cim { color: var(--red, #c02425); }
.kw-choice-leiras { font-size: .85rem; line-height: 1.55; color: var(--text-muted, #6b6b6b); }
.kw-steps { gap: .35rem; }
.kw-step-chip { white-space: nowrap; }

/* Csomag-választó (Deviza 65 / 100 / 150 + Szabad összeg) — gyerek-ág, havi mód */
.kw-csomagok { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.kw-csomag { padding: .8rem .9rem; }
.kw-csomag-def { display: block; margin-top: .3rem; font-size: .8rem; }
.kw-csomag.kiemelt:not(.aktiv) { border-color: var(--gold, #dbab32); }
.kw-szabad-wrap label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
@media (max-width: 380px) { .kw-csomagok { grid-template-columns: minmax(0, 1fr); } }