/* ================================================================
   Roofer calculators — общие стили (индустриальный стиль сайта).
   Подключается всеми калькуляторами как первый CSS, частный CSS
   калькулятора (e.g. roof/style.css) идёт следом.
   Имена .calc / .calc__* нейтральные — переиспользуются всеми.
   ================================================================ */

/* hidden важен: специфичность класса перебивает атрибут [hidden]. */
.calc [hidden] { display: none !important; }

.calc {
    --calc-paper:    var(--paper, #F4F1EA);
    --calc-paper-2:  var(--paper-2, #EDE9DF);
    --calc-ink:      var(--ink, #0E0E0E);
    --calc-ink-2:    var(--ink-2, #1A1D22);
    --calc-orange:   var(--orange, #ED7423);
    --calc-orange-deep: var(--orange-deep, #C25618);
    --calc-mark:     var(--mark, #FFD500);
    --calc-good:     var(--good, #18A957);
    --calc-line-soft: rgba(14,14,14,0.18);
    --calc-radius:   var(--radius-lg, 6px);
    --calc-radius-sm: var(--radius, 4px);
    --calc-font-ui:      var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    --calc-font-display: var(--font-display, 'Archivo Black', system-ui, sans-serif);
    --calc-font-mono:    var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);

    background: var(--calc-paper);
    border: 1.5px solid var(--calc-ink);
    border-radius: var(--calc-radius);
    color: var(--calc-ink);
    font-family: var(--calc-font-ui);
    box-shadow: 6px 6px 0 var(--calc-ink);
}

/* ===== Шаги ===== */

.calc__steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1.5px solid var(--calc-ink);
    background: var(--calc-paper-2);
}

.calc__step {
    position: relative;
    padding: 18px 22px 18px 64px;
    font-family: var(--calc-font-display);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(14,14,14,0.45);
    line-height: 1.25;
    border-right: 1.5px dashed var(--calc-line-soft);
}

.calc__step:last-child { border-right: 0; }

.calc__step::before {
    content: attr(data-step-label);
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--calc-paper);
    border: 1.5px solid var(--calc-line-soft);
    border-radius: 4px;
    font-family: var(--calc-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: rgba(14,14,14,0.45);
    letter-spacing: 0;
}

.calc__step.is-active {
    color: var(--calc-ink);
    background: var(--calc-paper);
}
.calc__step.is-active::before {
    background: var(--calc-orange);
    border-color: var(--calc-ink);
    color: #fff;
}

.calc__step.is-done {
    color: var(--calc-ink);
    background: var(--calc-paper);
}
.calc__step.is-done::before {
    background: var(--calc-ink);
    border-color: var(--calc-ink);
    color: var(--calc-paper);
}

@media (max-width: 720px) {
    .calc__step { padding: 14px 14px 14px 52px; font-size: 10px; }
    .calc__step::before { width: 28px; height: 28px; left: 14px; font-size: 11px; }
}

/* ===== Body ===== */

.calc__body {
    padding: 36px 32px;
}

.calc__pane {
    position: relative;
}

.calc__pane + .calc__pane:not([hidden]) {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1.5px dashed var(--calc-ink);
}

.calc__section + .calc__section {
    margin-top: 36px;
}

.calc__section-title {
    margin: 0 0 18px;
    font-family: var(--calc-font-display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--calc-ink);
}

.calc__hint {
    margin: -8px 0 16px;
    font-family: var(--calc-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(14,14,14,0.6);
}

/* ===== Кнопки ===== */

.calc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    font-family: var(--calc-font-ui);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    color: var(--calc-ink);
    border: 2px solid var(--calc-ink);
    border-radius: var(--calc-radius-sm);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
    white-space: nowrap;
    line-height: 1.1;
}

.calc__btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--calc-ink);
}

.calc__btn--primary {
    background: var(--calc-orange);
    border-color: var(--calc-orange);
    color: #fff;
}
.calc__btn--primary:hover { box-shadow: 4px 4px 0 var(--calc-ink); }

.calc__btn:disabled,
.calc__btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.calc__actions {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .calc__btn { padding: 12px 18px; font-size: 12px; flex: 1 1 auto; }
    .calc__actions { gap: 10px; }
}

/* ===== Системные блоки ===== */

.calc__error {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--calc-paper-2);
    border: 1.5px solid var(--calc-orange-deep);
    border-radius: var(--calc-radius-sm);
    font-size: 14px;
    color: var(--calc-orange-deep);
    font-weight: 600;
}

.calc__loading {
    text-align: center;
    padding: 48px 20px;
    font-family: var(--calc-font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(14,14,14,0.5);
}

/* Мелкие утилиты внутри калькулятора (не путать с .mono сайта) */
.calc__mono {
    font-family: var(--calc-font-mono);
    letter-spacing: 0.02em;
}