/* CSS Document */

/* ==========================================================
   CALCULINVEST — CALCULATOR LAYOUT
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

.calculator-page {
    padding:
        var(--ci-space-10)
        0
        var(--ci-space-16);
}

.calculator-container {
    width: min(
        var(--ci-calculator-width),
        calc(100% - 40px)
    );

    margin: 0 auto;
}


/* ----------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------- */

.calculator-breadcrumb {
    margin-bottom: var(--ci-space-5);

    color: var(--ci-color-text-muted);

    font-size: var(--ci-font-size-sm);
}

.calculator-breadcrumb a:hover {
    color: var(--ci-color-primary);
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.calculator-header {
    margin-bottom: var(--ci-space-8);
}

.calculator-category {
    margin-bottom: var(--ci-space-3);
}


/* ----------------------------------------------------------
   MAIN FORM
   ---------------------------------------------------------- */

.calculator-form {
    margin-top: var(--ci-space-8);
}

.calculator-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--ci-space-5)
        var(--ci-space-6);
}

.calculator-actions {
    margin-top: var(--ci-space-6);

    display: flex;

    justify-content: flex-end;
}


/* ----------------------------------------------------------
   RESULTS
   ---------------------------------------------------------- */

.calculator-results {
    margin-top: var(--ci-space-8);
}

.calculator-main-result {
    padding:
        var(--ci-space-8)
        var(--ci-space-6);

    text-align: center;

    background:
        var(--ci-color-primary-soft);

    border-radius: var(--ci-radius-md);
}

.calculator-main-result-label {
    color: var(--ci-color-text-muted);

    font-size: var(--ci-font-size-sm);

    margin-bottom: var(--ci-space-2);
}

.calculator-main-result-value {
    font-size: clamp(
        2rem,
        6vw,
        3.3rem
    );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.05em;

    color: var(--ci-color-text);
}

.calculator-main-result-unit {
    font-size: var(--ci-font-size-lg);

    font-weight: 600;

    color: var(--ci-color-text-muted);
}


/* ----------------------------------------------------------
   RESULT GRID
   ---------------------------------------------------------- */

.calculator-result-grid {
    margin-top: var(--ci-space-6);

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--ci-space-4);
}

.calculator-result-item {
    padding: var(--ci-space-4);

    background: var(--ci-color-surface-soft);

    border: 1px solid var(--ci-color-border-soft);

    border-radius: var(--ci-radius-md);
}

.calculator-result-label {
    color: var(--ci-color-text-muted);

    font-size: var(--ci-font-size-xs);

    margin-bottom: var(--ci-space-2);
}

.calculator-result-value {
    font-size: var(--ci-font-size-lg);

    font-weight: 750;

    letter-spacing: -0.02em;
}


/* ----------------------------------------------------------
   IMPORTANT RESULT
   ---------------------------------------------------------- */

.calculator-result-item-important {
    background: var(--ci-color-accent-soft);
}

.calculator-result-item-important
.calculator-result-value {
    color: var(--ci-color-accent);
}


/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */

.calculator-section {
    margin-top: var(--ci-space-8);
}

.calculator-section + .calculator-section {
    margin-top: var(--ci-space-6);
}


/* ----------------------------------------------------------
   METHODOLOGY
   ---------------------------------------------------------- */

.calculator-methodology {
    color: var(--ci-color-text-muted);

    font-size: var(--ci-font-size-sm);

    line-height: var(--ci-line-height-relaxed);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .calculator-container {
        width: calc(100% - 24px);
    }

    .calculator-page {
        padding-top: var(--ci-space-6);
    }

    .calculator-form-grid {
        grid-template-columns: 1fr;
    }

    .calculator-result-grid {
        grid-template-columns: 1fr;
    }

    .calculator-actions {
        justify-content: stretch;
    }

    .calculator-actions .ci-button {
        width: 100%;
    }
}

.ci-input-wrapper-error {
    border-color: var(--ci-color-danger, #b42318);
}

.ci-field-error {
    color: var(--ci-color-danger, #b42318);
    font-size: var(--ci-font-size-xs);
}

.calculator-form-error {
    margin-bottom: var(--ci-space-5);
}

.calculator-form[aria-busy="true"] {
    cursor: wait;
}

.calculator-form .ci-button:disabled {
    cursor: wait;
    opacity: 0.75;
}