@import url('/content/calculator/styles.css?v=12');

#buildings-calculator .calculator-hero {
    gap: 36px;
}

#buildings-calculator .builder-stack {
    grid-template-areas:
        "config params"
        "config summary"
        ". submit";
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.5fr);
    align-items: start;
    column-gap: 22px;
    row-gap: 18px;
}

#buildings-calculator #building-step-1 {
    grid-area: config;
}

#buildings-calculator #building-step-2 {
    grid-area: params;
}

#buildings-calculator #building-step-3 {
    grid-area: summary;
    grid-template-columns: 1fr;
    gap: 14px;
}

#buildings-calculator #building-step-1 .params-layout--compact {
    grid-template-columns: 1fr;
    gap: 18px;
}

#buildings-calculator #building-step-1 .params-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#buildings-calculator #building-step-1 .param-grid {
    grid-template-columns: 1fr;
}

#buildings-calculator .params-layout--compact {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

#buildings-calculator .constructor-note {
    margin: 0;
    color: rgba(17, 24, 39, 0.72);
}

#buildings-calculator .field-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#buildings-calculator .field-group + .field-group {
    margin-top: 18px;
}

#buildings-calculator .field-group-title {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(17, 24, 39, 0.56);
}

#buildings-calculator .summary-list:empty::before {
    content: '';
}

#buildings-calculator .preview-card img {
    object-fit: contain;
}

#buildings-calculator #building-step-3 .section-lead {
    margin-bottom: 0;
}

#buildings-calculator #building-step-3 .summary-price {
    margin-top: 12px;
    font-size: clamp(26px, 3vw, 38px);
}

#buildings-calculator #building-step-3 .summary-list {
    margin-top: 14px;
    gap: 10px;
}

#buildings-calculator .form-submit {
    grid-area: submit;
}

@media (max-width: 1100px) {
    #buildings-calculator .builder-stack {
        grid-template-areas: none;
        grid-template-columns: 1fr;
    }

    #buildings-calculator #building-step-1,
    #buildings-calculator #building-step-2,
    #buildings-calculator #building-step-3,
    #buildings-calculator .form-submit {
        grid-area: auto;
    }
}

@media (max-width: 900px) {
    #buildings-calculator .params-layout--compact {
        grid-template-columns: 1fr;
    }
}