/* Benefit calculator ("Kolik vám Doruč vrátí") - homepage component + /play variants.
 * All classes .bcalc-* prefixed. Layout variants: .bcalc--split, .bcalc--compact,
 * .bcalc--receipt. Logic in assets/js/benefit-calc.js (data-bcalc hooks).
 */

.bcalc-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
}

.bcalc {
    width: 100%;
    max-width: 1080px;
}

/* ---- panels ---- */

.bcalc-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: var(--space-xl);
}

.bcalc-panel-h {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

/* ---- input fields ---- */

.bcalc-field { margin-bottom: var(--space-lg); }
.bcalc-field:last-child { margin-bottom: 0; }

.bcalc-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.bcalc-field-row label {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
}

.bcalc-val {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 17px;
    color: var(--gold);
    white-space: nowrap;
}

.bcalc-hint {
    font-size: 12.5px;
    color: var(--light);
    margin-top: var(--space-xs);
}

.bcalc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 99px;
    outline: none;
    cursor: pointer;
    --calc-pct: 50%;
    background: linear-gradient(to right,
        var(--gold-dark), var(--gold) var(--calc-pct),
        var(--border-2) var(--calc-pct), var(--border-2));
}

.bcalc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--gold-dark), 0 4px 14px rgba(212, 172, 13, 0.35);
    transition: transform 0.12s ease;
}

.bcalc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.bcalc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--gold-dark);
    cursor: pointer;
}

/* ---- result hero ---- */

.bcalc-hero {
    background:
        radial-gradient(400px 200px at 50% 0%, rgba(142, 68, 173, 0.18), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.bcalc-hero-top {
    padding: var(--space-xl);
    text-align: center;
    border-bottom: 1px dashed var(--border-2);
}

.bcalc-hero-label {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-sm);
}

.bcalc-num {
    font-size: clamp(40px, 8vw, 64px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fff 20%, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bcalc-unit {
    font-size: 0.4em;
    font-weight: 600;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    margin-left: 6px;
}

.bcalc-sub {
    margin-top: var(--space-sm);
    font-size: 14.5px;
    color: var(--muted);
}

.bcalc-sub b { color: #5EE0A0; font-weight: 700; }
.bcalc-sub--neg b { color: var(--gold); }

/* ---- breakdown ---- */

.bcalc-breakdown { padding: var(--space-lg) var(--space-xl) var(--space-xl); }

.bcalc-layer {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.bcalc-layer--hard { color: var(--gold); }
.bcalc-layer--soft { color: var(--primary-l); }

.bcalc-note {
    font-size: 12.5px;
    color: var(--light);
    margin-bottom: var(--space-sm);
}

.bcalc-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}

.bcalc-line:last-child { border-bottom: none; }

.bcalc-line .bcalc-name { font-size: 14px; color: var(--text); }

.bcalc-line .bcalc-name span {
    display: block;
    font-size: 12px;
    color: var(--light);
    margin-top: 2px;
}

.bcalc-amt {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15.5px;
    white-space: nowrap;
}

.bcalc-amt--hard { color: var(--gold); }
.bcalc-amt--soft { color: var(--primary-l); }

.bcalc-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px var(--space-md);
    margin-top: var(--space-xs);
    border-radius: 12px;
    background: rgba(249, 231, 159, 0.07);
    border: 1px solid rgba(212, 172, 13, 0.35);
}

.bcalc-subtotal .bcalc-name { font-weight: 600; font-size: 14.5px; }

.bcalc-subtotal .bcalc-amt { font-size: 18px; font-weight: 800; color: var(--gold); }

.bcalc-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--space-md);
    margin-top: var(--space-xs);
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.bcalc-cost .bcalc-name, .bcalc-cost .bcalc-amt { font-size: 14px; color: var(--muted); }

.bcalc-divider { height: 1px; background: var(--border-2); margin: var(--space-lg) 0; }

.bcalc-softbox {
    padding: var(--space-md);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(142, 68, 173, 0.08), transparent);
    border: 1px solid rgba(165, 105, 189, 0.25);
}

.bcalc-foot {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--light);
    line-height: 1.6;
}

.bcalc-foot b { color: var(--muted); }

.bcalc-cta-row { text-align: center; margin-top: var(--space-lg); }

.bcalc-cta-note {
    font-size: 12.5px;
    color: var(--light);
    margin-top: var(--space-sm);
}

.bcalc-flash { animation: bcalc-flash 0.4s ease; }

@keyframes bcalc-flash {
    0% { color: #fff; }
    100% { }
}

@media (prefers-reduced-motion: reduce) {
    .bcalc-flash { animation: none; }
}

/* ==== V1: split - inputs left, result right ==== */

.bcalc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: stretch;
}

/* Left panel fills the full row height (set by the result card) and lets
   flexbox distribute the leftover space evenly between the sliders, so both
   columns always end on the same line - no magic margins. */
.bcalc-split .bcalc-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bcalc-split .bcalc-field { margin-bottom: 0; }

@media (max-width: 840px) {
    .bcalc-split { grid-template-columns: 1fr; }
    .bcalc-split .bcalc-field { margin-bottom: var(--space-lg); }
    .bcalc-split .bcalc-field:last-child { margin-bottom: 0; }
}

.bcalc-lead {
    font-size: 15px;
    color: var(--muted);
    max-width: 52ch;
    margin-bottom: var(--space-xl);
}

/* ==== V2: compact single card, progressive disclosure ==== */

.bcalc--compact { max-width: 620px; margin: 0 auto; }

.bcalc--compact .bcalc-hero { margin-bottom: var(--space-lg); }

.bcalc--compact .bcalc-breakdown { padding: var(--space-md) var(--space-xl); }

.bcalc-more { margin-top: var(--space-lg); }

.bcalc-more summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-l);
    list-style: none;
    user-select: none;
}

.bcalc-more summary::-webkit-details-marker { display: none; }

.bcalc-more summary::after { content: ' ▾'; font-size: 11px; }

.bcalc-more[open] summary::after { content: ' ▴'; }

.bcalc-more summary:hover { color: var(--gold); }

.bcalc-more .bcalc-field:first-of-type { margin-top: var(--space-lg); }

/* ==== V3: receipt - big number, inputs grid, paper breakdown ==== */

.bcalc--receipt { max-width: 760px; margin: 0 auto; text-align: center; }

.bcalc--receipt .bcalc-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
    text-align: left;
    margin: var(--space-xl) 0;
}

@media (max-width: 640px) {
    .bcalc--receipt .bcalc-inputs { grid-template-columns: 1fr; }
}

.bcalc-receipt {
    text-align: left;
    background: linear-gradient(180deg, rgba(249, 231, 159, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(212, 172, 13, 0.25);
    border-radius: 16px 16px 0 0;
    padding: var(--space-lg) var(--space-xl);
    position: relative;
}

.bcalc-receipt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background: linear-gradient(-45deg, transparent 8px, rgba(212, 172, 13, 0.25) 0) 0 0 / 16px 100%,
        linear-gradient(45deg, transparent 8px, rgba(212, 172, 13, 0.25) 0) 8px 0 / 16px 100%;
    background-repeat: repeat-x;
}

.bcalc-receipt .bcalc-line { border-bottom-style: dashed; }