/* ==========================================================
   MORTGAGE CALCULATOR
   V7.0
   PART 1
   RESET • VARIABLES • LAYOUT
========================================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===========================
   RESET
=========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#F7F5EF;

    color:#222;

    overflow-x:hidden;

    line-height:1.4;

}

/* ===========================
   VARIABLES
=========================== */

:root{

    --gold:#C79A2B;

    --gold-dark:#A67814;

    --gold-light:#F8E9C3;

    --white:#FFFFFF;

    --black:#1F1F1F;

    --gray:#737373;

    --border:#E7D7B4;

    --background:#F7F5EF;

    --purple:#7A5AF8;

    --purple-light:#EEE9FF;

    --radius:18px;

    --transition:.30s ease;

    --shadow:

        0 8px 25px rgba(0,0,0,.08);

}

/* ===========================
   WRAPPER
=========================== */

.mortgage-calculator-wrapper{

    width:100%;

    padding:20px;

}

/* ===========================
   MAIN CONTAINER
=========================== */

.calculator-container{

    max-width:1180px;

    width:100%;

    margin:auto;

    display:grid;

    grid-template-columns:1.65fr .95fr;

    gap:16px;

    align-items:start;

}

/* ===========================
   LEFT PANEL
=========================== */

.left-panel{

    background:#fff;

    border-radius:20px;

    padding:20px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

/* ===========================
   RIGHT PANEL
=========================== */

.right-panel{

    background:linear-gradient(

        180deg,

        #FFFDF8,

        #FCF8EF

    );

    border-radius:20px;

    padding:20px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    position:sticky;

    top:20px;

}

/* ===========================
   FORM
=========================== */

.calculator-form{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ===========================
   TWO COLUMN GRID
=========================== */

.row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}

/* ===========================
   COMMON
=========================== */

button{

    font-family:inherit;

}

input,

select{

    font-family:inherit;

}

/* ===========================
   SECTION SPACING
=========================== */

.section{

    margin-bottom:14px;

}
/* ==========================================================
   PART 2
   HEADER • PROGRESS
========================================================== */

/* ===========================
   Calculator Header
=========================== */

.calculator-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;

    padding-bottom:14px;

    border-bottom:1px solid var(--border);

}

/* ===========================
   Header Icon
=========================== */

.header-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-dark)
    );

    color:#fff;

    font-size:20px;

    flex-shrink:0;

    box-shadow:

        0 6px 18px rgba(199,154,43,.22);

}

/* ===========================
   Header Text
=========================== */

.header-text{

    flex:1;

}

.header-text h1{

    font-size:22px;

    font-weight:700;

    color:var(--black);

    margin-bottom:2px;

    line-height:1.2;

}

.header-text p{

    font-size:12px;

    color:var(--gray);

    line-height:1.5;

}

/* ===========================
   Progress Box
=========================== */

.progress-box{

    margin-bottom:14px;

}

/* ===========================
   Progress Labels
=========================== */

.progress-text{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:6px;

    font-size:12px;

}

.progress-text span{

    color:var(--gray);

}

.progress-text strong{

    color:var(--gold-dark);

    font-weight:600;

}

/* ===========================
   Progress Bar
=========================== */

.progress-bar{

    width:100%;

    height:6px;

    background:#EEE2C8;

    border-radius:30px;

    overflow:hidden;

}

/* ===========================
   Progress Fill
=========================== */

.progress-fill{

    width:45%;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-dark)
    );

    animation:progressAnimation 1s ease;

}

@keyframes progressAnimation{

    from{

        width:0;

    }

    to{

        width:45%;

    }

}
/* ==========================================================
   PART 3
   CALCULATOR TABS
========================================================== */

/* ===========================
   Calculator Tabs
=========================== */

.calculator-tabs{

    margin-bottom:14px;

}

/* Section Heading */

.calculator-tabs h3{

    font-size:15px;

    font-weight:600;

    color:var(--black);

    margin-bottom:10px;

}

/* ===========================
   Tab Container
=========================== */

.tab-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}

/* ===========================
   Tab Button
=========================== */

.tab-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    height:46px;

    padding:0 12px;

    border-radius:14px;

    border:1.5px solid var(--border);

    background:#FFFFFF;

    color:var(--gray);

    cursor:pointer;

    transition:all .30s ease;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}

/* Icon */

.tab-btn i{

    font-size:15px;

}

/* Hover */

.tab-btn:hover{

    border-color:var(--gold);

    color:var(--gold-dark);

    transform:translateY(-2px);

}

/* Active */

.tab-btn.active{

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:#FFFFFF;

    border-color:transparent;

    box-shadow:

        0 8px 20px rgba(199,154,43,.25);

}

.tab-btn.active i{

    color:#FFFFFF;

}

/* ===========================
   Common Section Titles
=========================== */

.section-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

}

.section-title i{

    color:var(--gold-dark);

    font-size:15px;

}

.section-title h4{

    font-size:14px;

    font-weight:600;

    color:var(--black);

}

/* Divider */

.section-divider{

    margin:14px 0;

    border:none;

    border-top:1px solid var(--border);

}
/* ==========================================================
   PART 4
   FORM • INPUTS • RESIDENCY • EMPLOYMENT
========================================================== */

/* ===========================
   Form Layout
=========================== */

.calculator-form{

    display:grid;

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

    gap:14px 18px;

    align-items:start;

}

/* Full Width Sections */

.form-group.full-width,

.products,

.loan-duration,

.info-box{

    grid-column:1 / -1;

}

/* ===========================
   Form Group
=========================== */

.form-group{

    margin:0;

}

.form-group label{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    font-weight:600;

    color:var(--black);

}

/* ===========================
   Inputs
=========================== */

.calculator-form input,

.calculator-form select{

    width:100%;

    height:42px;

    padding:0 14px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    font-size:13px;

    color:var(--black);

    outline:none;

    transition:.30s;

}

/* Placeholder */

.calculator-form input::placeholder{

    color:#B7B7B7;

}

/* Hover */

.calculator-form input:hover,

.calculator-form select:hover{

    border-color:var(--gold);

}

/* Focus */

.calculator-form input:focus,

.calculator-form select:focus{

    border-color:var(--gold);

    box-shadow:

        0 0 0 3px rgba(199,154,43,.12);

}

/* ===========================
   Select
=========================== */

.calculator-form select{

    cursor:pointer;

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C79A2B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 12px center;

    padding-right:40px;

}

/* ===========================
   Residency Buttons
=========================== */

.residency-tabs{

    display:grid;

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

    gap:8px;

}

.residency-tabs button{

    height:40px;

    border-radius:12px;

    border:1px solid var(--border);

    background:#fff;

    color:var(--gray);

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.residency-tabs button:hover{

    border-color:var(--gold);

}

.residency-tabs button.active{

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:#fff;

    border:none;

}

/* ===========================
   Double Inputs
=========================== */

.double-input{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}

/* ===========================
   Readonly Fields
=========================== */

input[readonly]{

    background:#FAFAFA;

    color:var(--gold-dark);

    font-weight:600;

}

/* ===========================
   Remove Number Arrows
=========================== */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}

input[type=number]{

    -moz-appearance:textfield;

}
/* ==========================================================
   PART 5
   MORTGAGE PRODUCTS • LOAN DURATION • INFO BOX
========================================================== */

/* ===========================
   Mortgage Products
=========================== */

.products{

    margin-top:6px;

}

.product-cards{

    display:grid;

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

    gap:10px;

}

/* Product Card */

.product{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:82px;

    padding:12px 10px;

    border-radius:14px;

    background:#fff;

    border:1px solid var(--border);

    cursor:pointer;

    transition:.30s;

}

.product:hover{

    transform:translateY(-2px);

    border-color:var(--gold);

    box-shadow:

        0 8px 20px rgba(199,154,43,.12);

}

/* Active */

.product.active{

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    border:none;

}

/* Interest */

.product strong{

    font-size:18px;

    font-weight:700;

    color:var(--gold-dark);

}

.product.active strong{

    color:#fff;

}

/* Text */

.product span{

    margin-top:3px;

    text-align:center;

    font-size:11px;

    line-height:1.3;

    color:var(--gray);

}

.product.active span{

    color:#fff;

}

/* Badge */

.badge{

    position:absolute;

    top:6px;

    right:6px;

    padding:2px 8px;

    border-radius:20px;

    background:#FFF6D9;

    color:var(--gold-dark);

    font-size:9px;

    font-weight:600;

}

.product.active .badge{

    background:#fff;

}

/* ===========================
   Loan Duration
=========================== */

.loan-duration{

    margin-top:12px;

}

/* Header */

.duration-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.duration-header h4{

    font-size:13px;

    font-weight:600;

    color:var(--black);

}

.duration-header span{

    padding:4px 10px;

    border-radius:20px;

    background:var(--gold-light);

    color:var(--gold-dark);

    font-size:11px;

    font-weight:600;

}

/* ===========================
   Slider
=========================== */

input[type="range"]{

    width:100%;

    height:4px;

    appearance:none;

    border-radius:20px;

    background:#E8DDBF;

    cursor:pointer;

}

/* Thumb */

input[type="range"]::-webkit-slider-thumb{

    appearance:none;

    width:16px;

    height:16px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    border:2px solid #fff;

    box-shadow:

        0 4px 12px rgba(199,154,43,.30);

}

input[type="range"]::-moz-range-thumb{

    width:16px;

    height:16px;

    border:none;

    border-radius:50%;

    background:var(--gold);

}

/* Values */

.duration-values{

    display:flex;

    justify-content:space-between;

    margin-top:6px;

}

.duration-values span{

    font-size:10px;

    color:var(--gray);

}

/* ===========================
   Information Box
=========================== */

.info-box{

    display:flex;

    gap:10px;

    align-items:flex-start;

    padding:12px;

    margin-top:12px;

    border-left:3px solid var(--gold);

    border-radius:12px;

    background:#FFFDF7;

    border:1px solid var(--border);

}

.info-box i{

    color:var(--gold-dark);

    font-size:16px;

    margin-top:2px;

}

.info-box p{

    font-size:11px;

    color:var(--gray);

    line-height:1.5;

}
/* ==========================================================
   PART 6
   RIGHT SUMMARY PANEL
========================================================== */

/* ===========================
   Summary Header
=========================== */

.summary-header{

    margin-bottom:14px;

    text-align:center;

}

.summary-header h2{

    font-size:22px;

    font-weight:700;

    color:var(--black);

    margin-bottom:4px;

}

.summary-header p{

    font-size:12px;

    color:var(--gray);

}

/* ===========================
   Home Affordability
=========================== */

.top-summary{

    margin-bottom:14px;

}

.top-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px;

    text-align:center;

    box-shadow:

        0 6px 18px rgba(0,0,0,.05);

}

.top-card small{

    display:block;

    font-size:11px;

    color:var(--gray);

    margin-bottom:6px;

}

.top-card h3{

    font-size:24px;

    color:var(--gold-dark);

    font-weight:700;

}

/* ===========================
   Summary Grid
=========================== */

.summary-cards{

    display:grid;

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

    gap:10px;

    margin-bottom:14px;

}

/* ===========================
   Summary Card
=========================== */

.summary-item{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:12px;

    min-height:70px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:.30s;

}

.summary-item:hover{

    transform:translateY(-2px);

    box-shadow:

        0 6px 18px rgba(0,0,0,.08);

}

.summary-item span{

    font-size:11px;

    color:var(--gray);

    margin-bottom:4px;

}

.summary-item strong{

    font-size:16px;

    color:var(--black);

    font-weight:700;

}

/* ===========================
   Total Mortgage Cost
=========================== */

.total-card{

    margin-bottom:14px;

    padding:18px;

    border-radius:16px;

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:#fff;

    text-align:center;

}

.total-card span{

    display:block;

    font-size:12px;

    opacity:.9;

    margin-bottom:6px;

}

.total-card h2{

    font-size:26px;

    font-weight:700;

}

/* ===========================
   Monthly Payment Highlight
=========================== */

.payment-highlight{

    margin-top:12px;

    padding:12px;

    border-radius:14px;

    background:#FFF7E4;

    border:1px solid var(--border);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.payment-highlight span{

    font-size:12px;

    color:var(--gray);

}

.payment-highlight strong{

    font-size:18px;

    color:var(--gold-dark);

}

/* ===========================
   Cost Breakdown
=========================== */

.cost-breakdown{

    margin-top:14px;

    background:#fff;

    border-radius:14px;

    border:1px solid var(--border);

    padding:14px;

}

.cost-breakdown h3{

    font-size:14px;

    margin-bottom:10px;

}

.cost-row{

    display:flex;

    justify-content:space-between;

    padding:8px 0;

    border-bottom:1px solid #EFE7D4;

}

.cost-row:last-child{

    border-bottom:none;

}

.cost-row span{

    font-size:11px;

    color:var(--gray);

}

.cost-row strong{

    font-size:13px;

    color:var(--black);

}
/* ==========================================================
   PART 7
   CHART • BUTTONS • ADVISOR CARD
========================================================== */

/* ===========================
   Mortgage Chart
=========================== */

.chart-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px;

    margin-top:14px;

    margin-bottom:14px;

    text-align:center;

}

.chart-card h3{

    font-size:14px;

    font-weight:600;

    color:var(--black);

    margin-bottom:10px;

}

/* Chart */

#mortgageChart{

    width:140px !important;

    height:140px !important;

    margin:auto;

    display:block;

}

/* ===========================
   Chart Legend
=========================== */

.chart-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:14px;

}

.chart-info div{

    background:#FAFAFA;

    border-radius:10px;

    padding:8px;

}

.chart-info span{

    display:block;

    font-size:10px;

    color:var(--gray);

}

.chart-info strong{

    font-size:13px;

    color:var(--black);

}

/* ===========================
   Summary Buttons
=========================== */

.summary-buttons{

    display:grid;

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

    gap:8px;

    margin-top:14px;

}

/* Primary Button */

.gold-btn{

    height:42px;

    border:none;

    border-radius:12px;

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:#fff;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.gold-btn:hover{

    transform:translateY(-2px);

}

/* Secondary Buttons */

.outline-btn{

    height:42px;

    border-radius:12px;

    border:1px solid var(--gold);

    background:#fff;

    color:var(--gold-dark);

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.outline-btn:hover{

    background:var(--gold-light);

}

/* ===========================
   Advisor Card
=========================== */

.advisor-card{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

    padding:12px;

    border-radius:14px;

    background:#FFFDF7;

    border:1px solid var(--border);

}

.advisor-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

        135deg,

        var(--gold),

        var(--gold-dark)

    );

    color:#fff;

    font-size:16px;

    flex-shrink:0;

}

.advisor-content{

    flex:1;

}

.advisor-content h4{

    font-size:13px;

    color:var(--black);

    margin-bottom:2px;

}

.advisor-content p{

    font-size:11px;

    color:var(--gray);

    line-height:1.4;

}
/* ==========================================================
   PART 8
   ANIMATIONS • RESPONSIVE • FINAL POLISH
========================================================== */

/* ===========================
   Hover Effects
=========================== */

.left-panel,
.right-panel,
.product,
.summary-item,
.top-card,
.chart-card,
.cost-breakdown,
.total-card{

    transition:all .25s ease;

}

.product:hover,
.summary-item:hover,
.top-card:hover,
.chart-card:hover,
.cost-breakdown:hover{

    transform:translateY(-2px);

}

.gold-btn:hover,
.outline-btn:hover{

    transform:translateY(-2px);

}

/* ===========================
   Fade Animation
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.left-panel{

    animation:fadeUp .5s ease;

}

.right-panel{

    animation:fadeUp .7s ease;

}

/* ===========================
   Desktop Optimization
=========================== */

@media (min-width:1400px){

    .calculator-container{

        max-width:1180px;

        gap:16px;

    }

    .left-panel,
    .right-panel{

        padding:18px;

    }

    .calculator-form{

        gap:12px;

    }

}

/* ===========================
   Laptop
=========================== */

@media(max-width:1200px){

    .calculator-container{

        grid-template-columns:1fr;

    }

    .right-panel{

        position:relative;

        top:0;

    }

}

/* ===========================
   Tablet
=========================== */

@media(max-width:992px){

    .calculator-form{

        grid-template-columns:1fr;

    }

    .summary-cards{

        grid-template-columns:1fr;

    }

    .product-cards{

        grid-template-columns:1fr;

    }

    .summary-buttons{

        grid-template-columns:1fr;

    }

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

    .calculator-header{

        flex-direction:column;

        text-align:center;

    }

    .tab-buttons{

        grid-template-columns:1fr;

    }

    .residency-tabs{

        grid-template-columns:1fr;

    }

    .row{

        grid-template-columns:1fr;

    }

    .double-input{

        grid-template-columns:1fr;

    }

    #mortgageChart{

        width:120px !important;

        height:120px !important;

    }

}

/* ===========================
   Small Mobile
=========================== */

@media(max-width:480px){

    .mortgage-calculator-wrapper{

        padding:12px;

    }

    .left-panel,
    .right-panel{

        padding:14px;

    }

    .header-text h1{

        font-size:18px;

    }

    .gold-btn,
    .outline-btn{

        height:40px;

        font-size:12px;

    }

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#F3F3F3;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--gold),

        var(--gold-dark)

    );

    border-radius:50px;

}
.validation-message{

    margin-top:15px;

    padding:12px;

    border-radius:10px;

    background:#ffe5e5;

    color:#c62828;

    font-size:14px;

    font-weight:600;

}
.comparison-card{

    margin-top:30px;

    background:#fff;

    border-radius:18px;

    padding:25px;

}

#comparisonTable{

    width:100%;

    border-collapse:collapse;

}

#comparisonTable th{

    background:#c9a227;

    color:#fff;

    padding:14px;

}

#comparisonTable td{

    padding:14px;

    border-bottom:1px solid #eee;

}

#comparisonTable tr:hover{

    background:#fafafa;

}