/* ============================================================
   Világos téma (2026-10-24) — Laci: „nagyon sötét, komor”.
   A paletta forrása a könyvborító: menta + krém papír + navy betű,
   arany CTA. Egyetlen sötét sáv marad szándékosan (.honest, a
   „legőszintébb” blokk), hogy legyen ritmus és kontraszt.
   A sections.css után töltődik, csak felülír, és CSAK a <html class="tema-b"> változatban
   él (A/B teszt, a fejben lévő sorsoló dönt).
   ============================================================ */

.tema-b {
  --sky: #EAF6F2;          /* halvány menta háttér */
  --cream: #FBF8F2;        /* meleg papír */
  --line: rgba(12, 27, 42, .12);
  --text-on-light-soft: #4B5C6B;
}

/* ---------- nav: világos hero fölött sötét betű ---------- */
.tema-b .nav { --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); }
.tema-b .nav.scrolled { background: rgba(251, 248, 242, .94); box-shadow: 0 1px 0 var(--line); }
.tema-b .nav-links a:not(.btn):hover { color: var(--teal-deep); }
@media (max-width: 880px) {
  .tema-b .nav-links { background: var(--cream); }
}

/* ---------- hero ---------- */
.tema-b .hero {
  --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft);
  background:
    radial-gradient(70% 80% at 85% 30%, rgba(169, 231, 214, .55), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(242, 169, 60, .14), transparent 60%),
    var(--cream);
}
.tema-b .hero-bg { display: none; }
.tema-b .hero h1 { color: var(--ink); }
.tema-b .hero h1 em, .tema-b .hero .lead strong { color: var(--teal-deep); }
.tema-b .hero-eyebrow { color: var(--teal-deep); }
.tema-b .hero-trust svg { color: var(--teal); }
.tema-b .hero .btn-ghost { color: var(--ink); border-color: rgba(12, 27, 42, .3); }
.tema-b .hero .btn-ghost:hover { border-color: var(--ink); }
.tema-b .book { filter: drop-shadow(0 34px 38px rgba(12, 27, 42, .28)); }

/* ---------- trükk-kvíz: fehér kártya ---------- */
.tema-b .quiz { background: #fff; color: var(--ink); --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); border: 1px solid var(--line); }
.tema-b .quiz-head h3, .tema-b .quiz-q { color: var(--ink); }
.tema-b .quiz-head h3 em { color: var(--teal-deep); }
.tema-b .quiz-progress span { background: rgba(12, 27, 42, .12); }
.tema-b .quiz-answers button { border-color: rgba(12, 27, 42, .18); background: var(--cream); }
.tema-b .quiz-answers button:hover:not(:disabled) { border-color: var(--teal); background: var(--mint-soft); }

/* ---------- vágy + kalkulátor ---------- */
.tema-b .desire { background: var(--sky); --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); }
.tema-b .desire h2 { color: var(--ink); }
.tema-b .scene h3 { color: var(--teal-deep); }
.tema-b .calc { background: #fff; border-color: var(--line); box-shadow: var(--shadow-1); }
.tema-b input[type="range"]::-webkit-slider-thumb { border-color: var(--white); }

/* ---------- ajánlat: garancia-doboz világosan ---------- */
.tema-b .guarantee { background: var(--mint-soft); --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); }

/* ---------- rendelés: krém háttér, fehér űrlapkártya ---------- */
.tema-b .order { background: var(--paper-2); --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); }
.tema-b .order h2, .tema-b .of-summary h3, .tema-b .bumps-head h3, .tema-b .bc-name, .tema-b .bc-price { color: var(--ink); }
.tema-b .order-step + .order-step::before { color: rgba(12, 27, 42, .35); }
.tema-b .order-form-card { background: #fff; border-color: var(--line); box-shadow: var(--shadow-2); }
.tema-b .of-group input[type="text"], .tema-b .of-group input[type="email"], .tema-b .of-group input[type="tel"], .tema-b .of-group select, .tema-b .of-group textarea { background: var(--cream); border-color: rgba(12, 27, 42, .2); }
.tema-b .of-group input:focus, .tema-b .of-group select:focus, .tema-b .of-group textarea:focus { background: #fff; border-color: var(--teal); }
.tema-b .of-group input::placeholder, .tema-b .of-group textarea::placeholder { color: rgba(75, 92, 107, .6); }
.tema-b .of-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231F7265' stroke-width='2'/%3E%3C/svg%3E"); }
.tema-b .of-summary { background: var(--sky); border-color: rgba(31, 114, 101, .25); }
.tema-b .of-row { border-bottom-color: rgba(12, 27, 42, .12); }
.tema-b .of-row.disc .v, .tema-b .bumps-head p strong { color: var(--teal-deep); }
.tema-b .of-row.total .v { color: var(--gold-deep); }
.tema-b .base-cart { background: var(--mint-soft); border-color: rgba(31, 114, 101, .35); }
.tema-b .of-status.err { color: #B8401E; }

/* ---------- zárás ---------- */
.tema-b .final { background: var(--sky); --text-inv: var(--ink); --text-inv-soft: var(--text-on-light-soft); border-top: 0; }
.tema-b .final h2 { color: var(--ink); }

/* A világos szekciókon belül a „fehér” betű navy, a „menta” kiemelés mély teal lesz.
   A menta HÁTTEREK (lépés-számok, pipák) explicit hexet kapnak, hogy ne sötétedjenek. */
.tema-b .quiz, .tema-b .desire, .tema-b .guarantee, .tema-b .order, .tema-b .final { --white: var(--ink); --mint: var(--teal-deep); }
.tema-b .order-step b, .tema-b .bc-check { background: #A9E7D6; }
.tema-b .floatbar { --white: #fff; --mint: #A9E7D6; }
.tema-b .final h2 em { color: var(--teal-deep); }

/* Arany SZÖVEG világos háttéren kevés kontrasztú (#F2A93C) → mélyebb arany. Gomb/pötty marad. */
.tema-b .calc-row.hi .val, .tema-b .quiz-score, .tema-b .guarantee h3, .tema-b .of-row.total .v, .tema-b .of-status, .tema-b .bump-price, .tema-b .of-extras .of-row.extra .v, .tema-b .of-addon .of-addon-price, .tema-b .of-addon .of-addon-arrow { color: #A8650C; }

/* ---------- A/B: változat-specifikus elemek ---------- */
.csak-b { display: none !important; }
.tema-b .csak-a { display: none !important; }
.tema-b .csak-b { display: block !important; }

/* hero: fotókártya a 3D könyv mögött, a könyv a bal alsó sarkába lóg */
.tema-b .book-stage { position: relative; align-items: flex-end; padding: 0 0 6% 0; }
.tema-b .hero-foto {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(2deg);
  width: min(78%, 400px); aspect-ratio: 4 / 5; margin: 0;
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); border: 6px solid #fff;
}
.tema-b .hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 0; }
.tema-b .book-stage .book { position: relative; z-index: 2; --bw: clamp(190px, 17vw, 240px); margin: 34% 46% 0 0; }
.tema-b .book-badge { top: auto; bottom: -18px; right: -30px; transform: rotate(-6deg); }
@media (max-width: 880px) {
  .tema-b .book-stage { min-height: 380px; padding: 0; justify-content: flex-start; }
  .tema-b .hero-foto { width: 64%; max-width: 280px; right: 2%; }
  .tema-b .book-stage .book { --bw: clamp(130px, 34vw, 180px); margin: 160px 0 0 6%; }
}

/* kinek szól: arcsor */
.tema-b .who-arcok { display: flex !important; justify-content: center; width: 100%; margin-bottom: 6px; }
.tema-b .who-arcok img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow-1); margin-left: -12px; object-fit: cover; }
.tema-b .who-arcok img:first-child { margin-left: 0; }

/* tartalom: olvasós fotó */
.tema-b .tools-foto { margin: 0 0 clamp(30px, 4vw, 50px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.tema-b .tools-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 760px) { .tema-b .tools-foto img { aspect-ratio: 4 / 3; } }

/* zárás: fotó a cím fölött */
.tema-b .final-foto { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 46px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.tema-b .final-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- ajánlat-A/B (2026-10-24): az éppen nem érvényes ajánlat szövegei rejtve ---------- */
.ajanlat-ingyen .csak-ketto, .ajanlat-ketto .csak-ingyen { display: none !important; }
html:not(.ajanlat-ingyen):not(.ajanlat-ketto) .csak-ketto { display: none !important; }
.ajanlat-sor { margin: 0 0 18px; font: 500 1.05rem/1.5 var(--font-ui); color: var(--text-inv); }
.ajanlat-sor strong { color: var(--gold); }
.tema-b .ajanlat-sor strong { color: #A8650C; }