/**
 * Kreatívoldal — Weboldal árkalkulátor
 * Csak a Tailwind CDN-nel le nem fedett apró finomságok.
 * A színek/gombok a style.css márka-tokeneket használják.
 */

/* Lépésváltás finom belépő animáció */
#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); }
}

/* Kártya-gombok: a Paytone One heading font ne öröklődjön a gombszövegre */
#kalk-app button {
    font-family: "Pavanam", sans-serif;
}

/* Kiválasztott kártya enyhe kiemelése (a Tailwind ring mellé) */
#kalk-app [data-type].border-primary,
#kalk-app [data-q].border-primary {
    transform: translateY(-2px);
}

/* Élő ársáv ne takarja ki magát mobilon a billentyűzet felett */
@media (max-width: 640px) {
    #kalk-livebar { position: static; }
}

/* Fókusz-állapot akadálymentességhez */
#kalk-app button:focus-visible,
#kalk-form input:focus-visible,
#kalk-form textarea:focus-visible {
    outline: 2px solid #38B6FF;
    outline-offset: 2px;
}

/* ==========================================================================
   MÁRKA-SZÍNEK GARANTÁLTAN
   A Tailwind CDN a JS-be injektált elemekre nem mindig generálja a custom
   színeket (from-primary, bg-accent-yellow...), a style.css pedig a .bg-primary-t
   gombként stílusozza. Ezért a színes blokkok saját, explicit CSS-t kapnak.
   ========================================================================== */
.kalk-hero-box {
    background: linear-gradient(135deg, #004AAD, #003580) !important;
    color: #ffffff !important;
}
.kalk-hero-box * { color: #ffffff !important; }

.kalk-livebar {
    background: linear-gradient(90deg, #004AAD, #003580) !important;
    color: #ffffff !important;
}
.kalk-livebar .kalk-live-label { color: rgba(255, 255, 255, .7) !important; }
.kalk-livebar #kalk-live-range { color: #ffffff !important; }

.kalk-cta {
    background: #FFD43D !important;
    color: #0f172a !important;
    transition: all .25s ease;
}
.kalk-cta:hover { background: #ffffff !important; color: #0f172a !important; }

.kalk-submit {
    background: #004AAD !important;
    color: #ffffff !important;
    transition: all .25s ease;
}
.kalk-submit:hover { background: #003580 !important; }

.kalk-info {
    background: #eaf6ff !important;
    border: 1px solid rgba(56, 182, 255, .35) !important;
    color: #334155 !important;
}
.kalk-info .material-symbols-outlined { color: #38B6FF !important; }

/* "Legtöbbet választott" badge */
.kalk-badge { background: #FFD43D !important; color: #0f172a !important; }

/* "Típus módosítása" gomb — kicsit nagyobb, jól tapintható */
.kalk-back {
    font-size: 1rem;
    font-weight: 600;
    color: #475569 !important;
    border: 2px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.55rem 1rem;
    transition: all .2s ease;
}
.kalk-back:hover {
    color: #004AAD !important;
    border-color: #38B6FF;
    background: #f8fafc;
}
.kalk-back .material-symbols-outlined { font-size: 22px; }

/* "Mit tartalmaz" lista pipa ikonja */
.kalk-check {
    color: #16a34a !important;
    font-size: 22px;
    line-height: 1.4;
    flex: 0 0 auto;
}

/* Lépésjelző (progress) — a .bg-primary gomb-stílus elkerülésére saját osztályok */
.kalk-step-on  { background: #004AAD !important; color: #ffffff !important; }
.kalk-step-off { background: #e2e8f0 !important; color: #64748b !important; }
.kalk-line-on  { background: #004AAD !important; }
.kalk-line-off { background: #e2e8f0 !important; }