/* ==========================================================================
   Stasacucine — calculator.css
   Kalkulator wyceny (kroki generowane w js/calculator.js).
   ========================================================================== */

@layer components {

    .calculator-layout { display: grid; gap: clamp(1.75rem, 4vw, 4rem); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); align-items: start; }
    @media (max-width: 999.98px) { .calculator-layout { grid-template-columns: 1fr; } }

    .calculator-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
    @media (max-width: 999.98px) { .calculator-intro { position: static; } }
    .calculator-intro .section-title { text-align: left; }
    .calculator-intro .section-subtitle { margin-bottom: 0; }
    .calculator-intro .eyebrow { margin-bottom: 1.1rem; }

    .calc-perks { display: grid; gap: 0.75rem; margin: 2rem 0; list-style: none; padding: 0; }
    .calc-perks li { display: flex; align-items: center; gap: 0.9rem; color: var(--text-2); font-size: var(--fs-sm); }
    .calc-perks .perk-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hi); font-size: 0.9rem; }

    .calc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
    .stat-box { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
    .stat-number { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; color: var(--accent-hi); line-height: 1.1; }
    .stat-label { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

    /* --- Karta z kreatorem --- */
    .calculator-container {
        position: relative;
        scroll-margin-top: calc(var(--header-h) + 1rem);
        padding: clamp(1.25rem, 3vw, 2.25rem);
        border: 1px solid var(--line-strong);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, var(--surface-2), var(--surface));
        box-shadow: var(--shadow-2);
    }
    .calculator-progress { margin-bottom: 1.75rem; }
    .progress-bar { height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
    .progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); transition: width 0.5s var(--ease); }
    .progress-text { display: flex; gap: 0.35rem; margin-top: 0.7rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--text-2); }
    .remaining-questions { font-weight: 500; color: var(--text-3); }

    .calculator-step { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
    .calculator-step.active { display: block; animation: step-in 0.4s var(--ease); }
    @keyframes step-in { from { opacity: 0; translate: 16px 0; } }
    .step-title { margin-bottom: 0.4rem; font-size: var(--fs-h3); }
    .step-subtitle { margin-bottom: 1.4rem; color: var(--text-2); font-size: var(--fs-sm); }
    .step-title + :is(.options-grid, .checkbox-grid, .budget-slider-container, .field, .dimension-input-section) { margin-top: 1.4rem; }

    /* --- Karty wyboru (radio) --- */
    .options-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
    .option-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        padding: 1.3rem 1rem 1.15rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface-2);
        text-align: center;
        cursor: pointer;
        transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur);
    }
    .option-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
    .option-card:has(:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
    .option-card:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
    .option-card:has(:checked)::after {
        content: "\2713";
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        display: grid;
        place-items: center;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
        background: var(--accent);
        color: var(--on-accent);
        font-size: 0.75rem;
        font-weight: 700;
    }
    @media (max-width: 559.98px) {
        .calculator-container { padding: 1.1rem; }
        .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
        .option-card { padding: 1rem 0.6rem 0.9rem; }
        .checkbox-grid { grid-template-columns: 1fr; }
    }
    .option-card.is-required { animation: nudge 0.5s var(--ease) 2; border-color: var(--err); }
    .option-icon { font-size: 1.6rem; color: var(--accent); line-height: 1; margin-bottom: 0.3rem; }
    .option-title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
    .option-desc { font-size: 0.78rem; line-height: 1.45; color: var(--text-3); }
    @keyframes nudge { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

    /* --- Karty wielokrotnego wyboru (checkbox) --- */
    .checkbox-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
    .checkbox-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface-2);
        font-size: var(--fs-sm);
        font-weight: 500;
        cursor: pointer;
        transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease);
    }
    .checkbox-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
    .checkbox-card:has(:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
    .checkbox-card:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
    .checkbox-card .option-icon { margin: 0; font-size: 1.15rem; width: 1.5rem; text-align: center; }
    .checkbox-card::after {
        content: "";
        margin-left: auto;
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        transition: background-color var(--dur), border-color var(--dur);
    }
    .checkbox-card:has(:checked)::after {
        content: "\2713";
        display: grid;
        place-items: center;
        border-color: var(--accent);
        background: var(--accent);
        color: var(--on-accent);
        font-size: 0.75rem;
        font-weight: 700;
    }
    .checkbox-grid.is-required .checkbox-card { border-color: var(--err); animation: nudge 0.5s var(--ease) 2; }

    /* --- Wymiary --- */
    .dimension-input-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
    .step-title + .dimension-input-section, .step-subtitle + .dimension-input-section { margin-top: 0; padding-top: 0; border-top: 0; }
    .dimension-label-header { margin-bottom: 0.8rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
    .dimension-inputs-row { display: flex; align-items: flex-end; gap: 0.9rem; }
    .dimension-x { padding-bottom: 0.8rem; color: var(--text-3); }
    .dimension-field { position: relative; flex: 1 1 0; max-width: 16rem; display: flex; flex-direction: column; gap: 0.4rem; }
    .dimension-field label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
    .dimension-field--wide { max-width: none; }
    .dimension-field .input { padding-right: 3rem; }
    .unit-label { position: absolute; right: 1rem; bottom: 0.85rem; font-size: var(--fs-xs); color: var(--text-3); pointer-events: none; }
    .dimension-hint, .budget-hint { display: flex; gap: 0.6rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-3); }
    .dimension-hint i, .budget-hint i { color: var(--accent); margin-top: 0.15rem; }
    .dimension-field .input[type=number] { appearance: textfield; -moz-appearance: textfield; }

    /* --- Budżet --- */
    .budget-inputs-row { display: flex; align-items: flex-end; gap: 0.9rem; margin-bottom: 2rem; }
    .budget-inputs-dash { padding-bottom: 0.8rem; color: var(--text-3); }
    .budget-input-group { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 0.4rem; }
    .budget-input-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
    .budget-input-group .input { padding-right: 3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .budget-currency { position: absolute; right: 1rem; bottom: 0.85rem; font-size: var(--fs-sm); color: var(--text-3); pointer-events: none; }
    .budget-input-group .input[type=number] { appearance: textfield; -moz-appearance: textfield; }
    .budget-input-group .input::-webkit-outer-spin-button, .budget-input-group .input::-webkit-inner-spin-button,
    .dimension-field .input::-webkit-outer-spin-button, .dimension-field .input::-webkit-inner-spin-button { appearance: none; margin: 0; }

    .budget-slider-track-wrapper { padding: 0 0.85rem; }
    .budget-slider-track { position: relative; height: 1.75rem; --lo: 0%; --hi: 100%; }
    .budget-slider-track::before {
        content: "";
        position: absolute;
        inset: 50% 0 auto;
        height: 6px;
        translate: 0 -50%;
        border-radius: var(--r-pill);
        background: var(--surface-3);
    }
    .budget-slider-range {
        position: absolute;
        top: 50%;
        left: var(--lo);
        right: calc(100% - var(--hi));
        height: 6px;
        translate: 0 -50%;
        border-radius: var(--r-pill);
        background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
    }
    .budget-slider {
        position: absolute;
        inset: 0 -0.85rem;
        width: calc(100% + 1.7rem);
        height: 100%;
        margin: 0;
        appearance: none;
        background: transparent;
        pointer-events: none;
    }
    .budget-slider::-webkit-slider-runnable-track { appearance: none; background: transparent; height: 100%; }
    .budget-slider::-moz-range-track { background: transparent; height: 100%; }
    .budget-slider::-webkit-slider-thumb {
        appearance: none;
        width: 1.65rem;
        height: 1.65rem;
        margin-top: 0.05rem;
        border: 3px solid var(--on-accent);
        border-radius: 50%;
        background: var(--accent-hi);
        box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgb(0 0 0 / 0.5);
        cursor: grab;
        pointer-events: auto;
        transition: scale var(--dur) var(--ease);
    }
    .budget-slider::-moz-range-thumb {
        width: 1.2rem;
        height: 1.2rem;
        border: 3px solid var(--on-accent);
        border-radius: 50%;
        background: var(--accent-hi);
        box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgb(0 0 0 / 0.5);
        cursor: grab;
        pointer-events: auto;
    }
    .budget-slider:hover::-webkit-slider-thumb { scale: 1.12; }
    .budget-slider:active::-webkit-slider-thumb { cursor: grabbing; }
    .budget-slider:focus-visible { outline: none; }
    .budget-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
    .budget-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
    .budget-slider-labels { display: flex; justify-content: space-between; margin-top: 0.4rem; margin-inline: -0.85rem; padding-inline: 0.15rem; font-size: 0.72rem; color: var(--text-3); }

    /* --- Opis --- */
    .char-counter { margin-top: 0.4rem; text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

    /* --- Formularz kontaktowy (ostatni krok) --- */
    .calc-recap { margin-bottom: 1.6rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
    .calc-recap-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
    .calc-recap-list { display: grid; gap: 0.15rem; list-style: none; padding: 0; }
    .calc-recap-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
    .calc-recap-list li:last-child { border-bottom: 0; }
    .calc-recap-q { color: var(--text-3); }
    .calc-recap-a { font-weight: 600; text-align: right; }
    .calc-recap-hint { margin-top: 0.7rem; font-size: var(--fs-xs); color: var(--text-3); }
    @media (max-width: 519.98px) { .calc-recap-list li { grid-template-columns: 1fr; gap: 0.1rem; } .calc-recap-a { text-align: left; } }

    .calc-contact { display: grid; gap: 1.1rem; }
    .urgency-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .urgency-chip {
        min-height: 2.5rem;
        padding: 0.45rem 1rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        font-size: var(--fs-sm);
        transition: border-color var(--dur), background-color var(--dur), color var(--dur);
    }
    .urgency-chip:hover { border-color: var(--accent); }
    .urgency-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

    .location-input-wrapper { position: relative; }
    .location-suggestions {
        position: absolute;
        inset: calc(100% + 0.35rem) 0 auto;
        z-index: 20;
        max-height: 16rem;
        overflow-y: auto;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface-3);
        box-shadow: var(--shadow-2);
    }
    .location-suggestions[hidden] { display: none; }
    .location-suggestion-item { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
    .location-suggestion-item:last-child { border-bottom: 0; }
    .location-suggestion-item:hover, .location-suggestion-item:focus-visible { background: var(--accent-soft); outline: none; }
    .location-suggestion-item i { margin-top: 0.25rem; color: var(--accent); }
    .location-name { font-weight: 600; font-size: var(--fs-sm); }
    .location-details { font-size: var(--fs-xs); color: var(--text-3); }
    .location-status { padding: 0.85rem 1rem; font-size: var(--fs-sm); color: var(--text-3); }

    /* --- Nawigacja i komunikaty --- */
    .calculator-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
    .calculator-navigation .spacer { flex: 1; }
    @media (max-width: 519.98px) {
        .calculator-navigation .btn { flex: 1 1 0; padding-inline: 1rem; }
    }

    .validation-error-container { display: flex; gap: 0.8rem; margin-top: 1.25rem; padding: 0.95rem 1.1rem; border: 1px solid var(--err); border-radius: var(--r-md); background: var(--err-soft); animation: step-in 0.3s var(--ease); }
    .validation-error-container i { margin-top: 0.2rem; color: var(--err); }
    .validation-error-container ul { padding-left: 1.1rem; font-size: var(--fs-sm); }
    .validation-error-container strong { display: block; margin-bottom: 0.25rem; color: var(--err); font-size: var(--fs-sm); }

    .calc-success { display: grid; justify-items: center; gap: 0.9rem; padding: clamp(1.5rem, 5vw, 3rem) 0.5rem; text-align: center; animation: step-in 0.4s var(--ease); }
    .calc-success .tick { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ok); color: var(--ink-950); font-size: 2rem; }
    .calc-success h3 { font-size: var(--fs-h3); }
    .calc-success p { max-width: 30rem; color: var(--text-2); }
}