/* ==========================================================================
   Wealth Building Financial — /calculators/
   Loaded only on the calculators page (see layouts/partials/headers.html).
   ========================================================================== */

/* Calculator Page Components */
.calculator-card {
    padding: 40px 30px;
}

.calculator-icon {
    margin-bottom: 25px;
}

.calculator-card h3 {
    color: var(--color-text);
    margin-bottom: 20px;
    font-weight: 600;
}

.calculator-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

.calculator-card .btn-template-main {
    display: table;
    margin: 0 auto;
}

.calculator-section {
    margin-top: 40px;
}

.calculator-panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    padding: 35px;
}

.calculator-panel h2,
.panel-header h2 {
    color: var(--color-text);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

.calculator-panel .lead,
.panel-header .lead {
    color: var(--color-text-muted);
    font-size: 16px;
    margin-bottom: 25px;
}

.calculator-form .help-block {
    color: var(--color-muted-2);
    font-size: 12px;
}

.calculator-form .calculator-error {
    color: #a94442;
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0 0;
}

.calculator-form .has-error label {
    color: #a94442;
}

.calculator-form .has-error .form-control {
    border-color: #a94442;
}

.calculator-form .has-error .form-control:focus {
    border-color: #a94442;
    box-shadow: 0 0 0 0.2rem rgba(169, 68, 66, 0.2);
}

.tax-checkbox .help-block {
    margin-top: 5px;
}

.calculator-results {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 25px;
    box-shadow: none;
}

.calculator-results h3 {
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-strong);
}

.result-row:last-child {
    border-bottom: none;
}

.result-row span {
    color: var(--color-text-muted);
}

.result-row strong {
    color: var(--color-text);
    font-size: 18px;
}

.result-row-primary strong {
    color: var(--color-secondary);
    font-size: 24px;
}

.result-row strong.result-shortfall {
    color: #a94442;
}

.result-row strong.result-surplus {
    color: var(--color-success);
}

.small-note {
    color: var(--color-muted-2);
    font-size: 12px;
    margin-top: 15px;
}

/* What a calculator does NOT tell you. This sits directly under the panel
   heading rather than in fine print at the foot of the page, because the
   limitation matters most before someone reads a number off the screen. */
.calculator-caveat {
    margin: 14px 0 0;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-info) 8%, white);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted-3);
}

.calculator-caveat i {
    color: var(--color-info);
    margin-right: 6px;
}

/* Result-panel follow-up: where to go once you have the number. */
.calculator-cta {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-muted-2);
}

.calculator-cta i {
    color: var(--color-secondary);
    margin-right: 6px;
}

.info-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 30px;
    margin-top: 40px;
    box-shadow: var(--shadow-sm);
}

.info-box h3 {
    color: var(--color-muted-3);
    margin-bottom: 15px;
    font-weight: 600;
}

.info-box h3 i {
    color: var(--color-info);
    margin-right: 10px;
}

.info-box p {
    color: var(--color-muted-2);
    line-height: 1.6;
    margin: 0 0 12px;
}

.info-box p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .calculator-picker {
        display: flex;
        gap: 14px;
        margin-left: -15px;
        margin-right: -15px;
        overflow-x: auto;
        padding: 0 15px 14px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .calculator-picker > [class*="col-"] {
        float: none;
        flex: 0 0 180px;
        padding: 0;
        scroll-snap-align: start;
    }

    .calculator-picker .calculator-card {
        height: 100%;
        margin: 0;
        padding: 22px 16px;
    }

    .calculator-picker .calculator-icon {
        height: 52px;
        margin-bottom: 14px;
        width: 52px;
    }

    .calculator-picker .calculator-icon i {
        font-size: 22px;
    }

    .calculator-picker .calculator-card h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .calculator-picker .calculator-card p {
        display: none;
    }

    .calculator-picker .calculator-card .btn-template-main {
        font-size: 13px;
        padding: 10px 12px;
        width: 100%;
    }

    .calculator-picker .calculator-card.is-active {
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 2px rgba(26, 156, 140, 0.16);
    }

    .calculators-enhanced .calculator-section {
        display: none;
    }

    .calculators-enhanced .calculator-section.is-active {
        display: block;
    }
}

@media (max-width: 480px) {
    .result-row {
        display: block;
    }

    .result-row strong {
        display: block;
        margin-top: 4px;
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .result-row-primary strong {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .calculator-panel {
        padding: 25px;
    }

    .calculator-results {
        margin-top: 25px;
    }

    .info-box {
        padding: 20px;
        margin-top: 30px;
    }
}