/* Mortgage calculator presentation; calculation logic remains in HTML. */
:root{--navy:#0f172a;--gold:#c5a059;--slate:#64748b;--bg:#f8fafc;--success:#10b981;--danger:#ef4444;--white:#ffffff}
.calculator-page{font-family:'Inter',sans-serif;background:var(--bg);color:var(--navy);padding:0;font-size:13px;line-height:1.5}

/* LAYOUT FIX: Wrapper to contain the sticky sidebar limits */
.calculator-page .page-wrapper { max-width: 1150px; margin: 0 auto; padding:48px 20px 0; }

.calculator-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 30px;
    margin-bottom: 40px; /* Space before the About section */
}

.panel{background:var(--white);padding:25px;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,0.05)}

/* SIDEBAR FIX: The sticky element will now stop at the bottom of .calculator-grid */
.result-panel{
    background:var(--navy);
    color:var(--white);
    padding:30px;
    border-radius:20px;
    position: sticky;
    top: 20px;
    height: fit-content;
}

.mode-switch{display:flex;background:#e2e8f0;padding:4px;border-radius:50px;width:100%;max-width:400px;cursor:pointer;position:relative;margin:0 auto 30px auto}
.mode-btn{flex:1;text-align:center;padding:12px;font-weight:800;font-size:0.75rem;z-index:2;transition:0.3s;text-transform:uppercase;color:var(--slate)}
.mode-slider{position:absolute;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--navy);border-radius:50px;transition:0.3s;z-index:1;left:4px}.active-text{color:var(--white)!important}
h3{font-size:0.9rem;border-left:4px solid var(--gold);padding-left:10px;text-transform:uppercase;margin:25px 0 15px 0;letter-spacing:1px}
.input-group{margin-bottom:18px}
label{display:block;font-weight:700;color:var(--slate);margin-bottom:6px;font-size:0.75rem;text-transform:uppercase}
input[type=number], select{width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;font-weight:600}
input[type=range]{width:100%;accent-color:var(--gold);margin-top:8px}
.val-hl{float:right;color:#76531c;font-weight:800;font-size:0.95rem}
.main-val{font-size:2.8rem;font-weight:800;color:var(--gold);text-align:center;margin-bottom:5px; letter-spacing:-1px}
.ltv-badge{text-align:center; margin-bottom:20px; font-weight:800; text-transform:uppercase; font-size:0.7rem; letter-spacing:1px; padding:4px 0; border-radius:4px}
.badge-insured{background:rgba(239,68,68,0.2); color:var(--danger); border:1px solid var(--danger)}
.badge-conv{background:rgba(16,185,129,0.2); color:var(--success); border:1px solid var(--success)}
.ratio-row{display:flex;justify-content:space-between;margin-bottom:25px;text-align:center;gap:15px}
.ratio-item{flex:1;background:rgba(255,255,255,0.05);padding:15px;border-radius:12px}
.ratio-val{display:block;font-size:1.6rem;font-weight:800;margin-bottom:2px}
.ratio-sub{font-size:0.7rem;opacity:0.6;font-weight:600}
.freq-card{background:rgba(255,255,255,0.03);border-radius:12px;padding:12px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.08)}
.freq-card.active{background:rgba(255,255,255,0.08);border-color:var(--gold)}
.freq-header{display:flex;align-items:center;gap:10px;cursor:pointer}
.freq-payment{margin-left:auto;font-weight:800;color:var(--gold);font-size:1.1rem;display:none}
.savings-box{margin-top:8px;padding:8px;background:rgba(16,185,129,0.15);border-radius:6px;color:var(--success);font-weight:700;font-size:0.75rem;display:none}
.active .freq-payment, .active .savings-box{display:block}
.hide{display:none}
#criticalError{display:none;position:fixed;inset:0;background:var(--danger);color:white;z-index:1000;flex-direction:column;justify-content:center;align-items:center;text-align:center}

.seo-content{padding:40px; background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; color: #334155;}
.seo-content h2 {color: var(--navy); font-size: 1.5rem; margin-bottom: 20px;}
.seo-content p {margin-bottom: 15px; font-size: 14px;}

@media (max-width: 900px) {
    .calculator-grid { grid-template-columns: 1fr; }
    .result-panel { position: static; }
}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c5a059;outline-offset:3px}