/* GPC New Wave Miskolc — Eurban Gyerekjövő kalkulátor stílusok
   v2.0 — 2026-08-11 (EUR-bázis + HUF mellérendelés, két számítási mód, idővonal) */

.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; }
}

/* --- 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; }
}
.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: .15rem; }
.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); }
.calc-ertek-masodlagos {
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-muted);
}
.calc-fo-reszlet {
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- 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;
}

/* --- 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;
}
.eurban-calc-card-fv {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: .35rem;
}
.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; }