/* ============================================
   Investment Calculator page
   /investments/calculator/
   ============================================ */

/* --- Hero banner --- */
.inv-calculator-bg {
    background: #eef4fb url("../images/banners/investment_calculator.png") no-repeat center right;
    background-size: cover;
}

@media (max-width: 767px) {
    .inv-calculator-bg {
        background-position: 70% center;
    }
}

/* --- Section headings --- */
.inv-calc-heading {
    text-align: center;
    margin: 60px auto 40px;
    max-width: 640px;
}

    .inv-calc-heading p {
        color: #5f5f5f;
        margin-top: 12px;
    }

/* --- Calculator wrapper (light blue container) --- */
.inv-calc-wrapper {
    background: #eaf4fd;
    border-radius: 24px;
    padding: 40px 32px;
    margin-bottom: 80px;
}

.inv-calc-intro {
    color: #343c3d;
    margin-bottom: 24px;
    max-width: 420px;
}

/* --- Calculator card --- */
.inv-calc-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 143, 0.06);
}

    .inv-calc-card h3 {
        margin: 0 0 20px;
    }

.inv-calc-field {
    margin-bottom: 22px;
}

    .inv-calc-field label {
        display: block;
        color: #343c3d;
        margin-bottom: 8px;
    }

    .inv-calc-field input[type="text"] {
        width: 100%;
        height: 48px;
        padding: 0 14px;
        border: 1px solid #ccd6dd;
        border-radius: 6px;
        font-size: 16px;
        color: #00008f;
    }

        .inv-calc-field input[type="text"]:focus {
            outline: none;
            border-color: #00008f;
        }

.inv-calc-error {
    display: block;
    color: #c91432;
    font-size: 13px;
    margin-top: 6px;
    min-height: 16px;
}

/* --- Sliders --- */
.inv-calc-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .inv-calc-slider input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        flex: 1;
        width: 100%;
        height: 4px;
        border-radius: 999px;
        background: #ccd6dd;
        outline: none;
    }

        .inv-calc-slider input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #00008f;
            border: 0;
            cursor: pointer;
        }

        .inv-calc-slider input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #00008f;
            border: 0;
            cursor: pointer;
        }

.inv-calc-slider-value {
    width: 58px;
    padding: 6px 8px;
    border: 1px solid #ccd6dd;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #343c3d;
    background: #fff;
    -moz-appearance: textfield;
}

    .inv-calc-slider-value:focus {
        outline: none;
        border-color: #00008f;
    }

    .inv-calc-slider-value::-webkit-outer-spin-button,
    .inv-calc-slider-value::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* --- Result panel (dark blue) --- */
.inv-calc-result {
    background: #00006d;
    background: linear-gradient(160deg, #1f1f9c 0%, #00006d 60%, #000055 100%);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Empty state shows until the first calculation; JS adds .has-result */
/* The SVG asset is the full panel design (navy bg + texture + illustration),
   so it fills the panel edge-to-edge and the caption is overlaid on it */
.inv-calc-result:not(.has-result) {
    padding: 0;
}

.inv-calc-empty {
    position: relative;
    flex: 1;
    min-height: 420px;
}

    .inv-calc-empty img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }

.inv-calc-result .inv-calc-result-totals,
.inv-calc-result .inv-calc-chart,
.inv-calc-result .white-btn {
    display: none;
}

.inv-calc-result.has-result .inv-calc-empty {
    display: none;
}

.inv-calc-result.has-result .inv-calc-result-totals {
    display: flex;
}

.inv-calc-result.has-result .inv-calc-chart {
    display: block;
}

.inv-calc-result.has-result .white-btn {
    display: flex;
}

.inv-calc-result-totals {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.inv-calc-total span {
    display: block;
    margin-bottom: 4px;
}

/* Per the design: invested block is green, future-value block is white */
.inv-calc-total:first-child span,
.inv-calc-total:first-child b {
    color: #7ee7c4;
}

.inv-calc-total:last-child span,
.inv-calc-total:last-child b {
    color: #ffffff;
}

    .inv-calc-total b small {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: normal;
    }

.inv-calc-chart {
    position: relative;
    flex: 1;
    min-height: 260px;
    margin-bottom: 20px;
}

    .inv-calc-chart canvas {
        max-width: 100%;
    }

.inv-calc-result .white-btn {
    background: #ffffff;
    color: #00008f;
    text-align: center;
    border-radius: 6px;
}

    .inv-calc-result .white-btn span {
        color: #00008f;
    }

/* --- Testimonials --- */
.inv-calc-testimonials {
    margin-bottom: 90px;
}

.inv-testimonial-card {
    background: #eaf4fd;
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .inv-testimonial-card > p {
        color: #343c3d;
        margin-bottom: 18px;
    }

.inv-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .inv-testimonial-author img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ccd6dd;
        object-fit: cover;
    }

    .inv-testimonial-author b {
        display: block;
        color: #00008f;
    }

    .inv-testimonial-author span {
        color: #5f5f5f;
    }

/* --- Responsive --- */
@media (max-width: 767px) {
    .inv-calc-wrapper {
        padding: 24px 16px;
    }

    .inv-calc-result {
        margin-top: 24px;
        height: auto;
    }

    .inv-calc-chart {
        min-height: 220px;
    }
}