/**
 * Kreatívoldal — Weboldal árkalkulátor, 2026-os dizájnrendszer.
 *
 * A kalkulátor HTML-jét az assets/kalkulator.js generálja a régi színosztályokkal
 * (bg-white, text-slate-*, border-slate-*, text-primary). Az árlogikához nem nyúlunk,
 * ezért ezeket itt, a #kalk-app-on belül fordítjuk le a színszerepekre (src/tailwind.css),
 * így a kalkulátor világos és sötét módban is a dizájnt követi.
 */

#kalk-app > div { animation: kalk-fade-in .35s ease; }
@keyframes kalk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#kalk-app, #kalk-app button, #kalk-app input, #kalk-app textarea { font-family: "Bricolage Grotesque", sans-serif; }

/* A régi osztályok → színszerepek. !important: a régi style.css !important-tal erőlteti a fehéret és a slate színeket. */
#kalk-app .bg-white { background: var(--surface) !important; }
#kalk-app .text-slate-900, #kalk-app .text-slate-800 { color: var(--ink) !important; }
#kalk-app .text-slate-700, #kalk-app .text-slate-600 { color: var(--ink2) !important; }
#kalk-app .text-slate-500, #kalk-app .text-slate-400 { color: var(--muted) !important; }
#kalk-app .text-slate-300 { color: var(--line) !important; }
#kalk-app .border-slate-200, #kalk-app .border-slate-300 { border-color: var(--line) !important; }
#kalk-app .border-slate-400, #kalk-app .hover\:border-slate-400:hover { border-color: var(--ink) !important; }
#kalk-app .text-primary, #kalk-app .text-highlight { color: var(--accent) !important; }
#kalk-app .border-primary { border-color: var(--btn) !important; }
#kalk-app .hover\:border-highlight:hover { border-color: var(--ink) !important; }
#kalk-app .ring-primary\/20 { --tw-ring-color: color-mix(in srgb, var(--btn) 25%, transparent) !important; }
#kalk-app .border-primary\/20 { border-color: var(--line) !important; }
#kalk-app .text-accent-red { color: var(--error) !important; }
#kalk-app .font-heading { font-weight: 700; letter-spacing: -0.02em; }
#kalk-app h2 { letter-spacing: -0.03em; }

/* Kártyák: a terv lekerekítése és kitöltése */
#kalk-app [data-type], #kalk-app [data-q] { border-radius: 18px; padding: 18px; }
#kalk-app button[class*="bg-white"][class*="border"] { border: 2px solid var(--line) !important; }
#kalk-app button[class*="bg-white"][class*="border"]:hover { border-color: var(--ink) !important; background-color: var(--surface) !important; box-shadow: none; }
#kalk-app [data-type].border-primary, #kalk-app [data-q].border-primary { background: var(--soft) !important; border-color: var(--btn) !important; transform: translateY(-2px); }

/* Jelölőnégyzet a többválasztós kérdéseknél (a check_box ikon nincs a téma ikonfontjában). */
#kalk-app .kalk-cb { flex: none; width: 22px; height: 22px; border: 2px solid var(--fieldBd); border-radius: 6px; display: grid; place-items: center; }
#kalk-app .kalk-cb.is-on { background: var(--btn); border-color: var(--btn); }
#kalk-app .kalk-cb.is-on::after { content: "✓"; color: var(--onBtn); font-size: 14px; font-weight: 700; line-height: 1; }

/* Mezők */
#kalk-form input[type="text"], #kalk-form input[type="email"], #kalk-form input[type="tel"], #kalk-form textarea {
    background: var(--surface); color: var(--ink); border-color: var(--fieldBd); border-radius: 14px; min-height: 56px; font-size: 17px;
}
#kalk-form textarea { min-height: 120px; }
#kalk-form input::placeholder, #kalk-form textarea::placeholder { color: var(--muted); opacity: 1; }
#kalk-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--btn); }
#kalk-app button:focus-visible, #kalk-form input:focus-visible, #kalk-form textarea:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--btn);
}

/* Lépésjelző */
#kalk-app .kalk-step-on  { background: var(--btn); color: var(--onBtn); }
#kalk-app .kalk-step-off { background: var(--soft); color: var(--muted); }
#kalk-app .kalk-line-on  { background: var(--btn); }
#kalk-app .kalk-line-off { background: var(--line); }

/* Élő ársáv, eredmény, gombok */
#kalk-app .kalk-livebar { background: var(--ctaBg); color: var(--ctaInk); border-radius: 20px; }
#kalk-app .kalk-livebar .kalk-live-label { color: var(--ctaInk); opacity: .75; }
#kalk-app .kalk-livebar #kalk-live-range { color: var(--ctaInk); }
@media (max-width: 640px) { #kalk-app #kalk-livebar { position: static; } }

#kalk-app .kalk-hero-box { background: var(--ctaBg); color: var(--ctaInk); border-radius: 28px; }
#kalk-app .kalk-hero-box * { color: var(--ctaInk); }

#kalk-app .kalk-cta { background: #FFD43D; color: #16181D; border-radius: 16px; height: 56px; transition: background .2s; }
#kalk-app .kalk-cta:hover { background: #FFE27A; }

#kalk-app .kalk-submit { background: var(--btn); color: var(--onBtn); border-radius: 16px; height: 56px; transition: background .2s; }
#kalk-app .kalk-submit:hover { background: var(--btnHover); }
#kalk-app #kalk-back-config { border-radius: 16px; height: 56px; }

#kalk-app .kalk-info { background: var(--soft); border: 0; color: var(--ink2); border-radius: 16px; }
#kalk-app .kalk-info .material-symbols-outlined { color: var(--accent); }

#kalk-app .kalk-badge { background: #FFD43D; color: #16181D; }

#kalk-app .kalk-back {
    font-size: 1rem; font-weight: 600; color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px; padding: 0.5rem 1rem; transition: background .2s, color .2s;
}
#kalk-app .kalk-back:hover { background: var(--ink); color: var(--bg); }
#kalk-app .kalk-back .material-symbols-outlined { font-size: 22px; }

#kalk-app .kalk-check { color: var(--accent); font-size: 22px; line-height: 1.4; flex: 0 0 auto; }