/* Mortgage Calculator Pro - MortgageRatesCalc.online */
#mcp-wrap { font-family: 'Segoe UI', Arial, sans-serif; max-width: 1100px; margin: 0 auto; color: #0d1f3c; }
#mcp-wrap * { box-sizing: border-box; }
#mcp-wrap h1,#mcp-wrap h2,#mcp-wrap h3,#mcp-wrap h4 { margin:0; padding:0; }

/* HERO */
.mcp-hero { background: linear-gradient(135deg,#0a2540 0%,#1a3a5c 60%,#1e4a8a 100%); padding:44px 24px 72px; text-align:center; border-radius:14px 14px 0 0; position:relative; overflow:hidden; }
.mcp-hero::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; border:40px solid rgba(200,145,42,.12); pointer-events:none; }
.mcp-badge { display:inline-block; background:rgba(200,145,42,.18); border:1px solid rgba(200,145,42,.4); color:#f5bc45; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 18px; border-radius:20px; margin-bottom:16px; }
.mcp-h1 { font-size:clamp(26px,4.5vw,48px); color:#fff; line-height:1.15; margin-bottom:12px; font-weight:700; }
.mcp-h1 span { color:#f5bc45; }
.mcp-tagline { color:rgba(255,255,255,.72); font-size:15px; max-width:500px; margin:0 auto 20px; line-height:1.7; }
.mcp-hstats { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.mcp-sv { font-size:19px; font-weight:700; color:#f5bc45; display:block; }
.mcp-sl { font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; }

/* TABS */
.mcp-tabs { display:flex; background:#fff; border:1px solid #dde3ed; border-bottom:none; overflow-x:auto; scrollbar-width:none; }
.mcp-tabs::-webkit-scrollbar { display:none; }
.mcp-tab { flex:1; min-width:130px; padding:14px 10px; font-size:12.5px; font-weight:500; color:#8492a6; border:none; background:transparent; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; text-align:center; font-family:inherit; transition:color .2s,border-color .2s; }
.mcp-tab:hover { color:#0a2540; }
.mcp-tab-active { color:#0a2540 !important; border-bottom-color:#c8912a !important; font-weight:700 !important; }

/* CARD */
.mcp-card { background:#fff; border:1px solid #dde3ed; border-top:none; border-radius:0 0 14px 14px; box-shadow:0 8px 40px rgba(10,37,64,.13); padding:28px; }

/* PANELS */
.mcp-panel { display:none; }
.mcp-panel-active { display:block !important; }

/* GRID */
.mcp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:680px){ .mcp-grid2 { grid-template-columns:1fr; } }
.mcp-span2 { grid-column:1/-1; }
.mcp-slabel { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8492a6; padding-bottom:10px; border-bottom:1px solid #dde3ed; margin-bottom:2px; }
.mcp-mt8 { margin-top:8px; }
.mcp-mt14 { margin-top:14px; }

/* FIELDS */
.mcp-field { display:flex; flex-direction:column; gap:6px; }
.mcp-field-end { justify-content:flex-end; }
.mcp-label { font-size:12.5px; font-weight:600; color:#4a5568; }
.mcp-iw { display:flex; align-items:center; border:1.5px solid #dde3ed; border-radius:10px; overflow:hidden; background:#f6f8fc; transition:border-color .2s,box-shadow .2s; }
.mcp-iw:focus-within { border-color:#2563a8; background:#fff; box-shadow:0 0 0 3px rgba(37,99,168,.10); }
.mcp-pre,.mcp-suf { padding:0 12px; font-size:14px; font-weight:600; color:#4a5568; user-select:none; flex-shrink:0; }
.mcp-input { flex:1; border:none; background:transparent; padding:12px 8px; font-size:15px; font-family:inherit; font-weight:500; color:#0d1f3c; outline:none; min-width:0; width:100%; }
.mcp-range { width:100%; accent-color:#0a2540; cursor:pointer; margin-top:2px; }
.mcp-rl { display:flex; justify-content:space-between; font-size:11px; color:#8492a6; margin-top:2px; }
.mcp-hint { font-size:11px; color:#8492a6; line-height:1.5; }
.mcp-hint-pad { padding:8px 0; }
.mcp-select { width:100%; border:1.5px solid #dde3ed; border-radius:10px; padding:12px 36px 12px 14px; font-size:14px; font-family:inherit; font-weight:500; color:#0d1f3c; background:#f6f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; transition:border-color .2s; }
.mcp-select:focus { border-color:#2563a8; background-color:#fff; }

/* BUTTON */
.mcp-btn { width:100%; padding:16px; background:linear-gradient(135deg,#0a2540,#2563a8); color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:700; font-family:inherit; cursor:pointer; letter-spacing:.02em; transition:opacity .2s,transform .1s; }
.mcp-btn:hover { opacity:.9; }
.mcp-btn:active { transform:scale(.99); }

/* RESULTS */
.mcp-results { display:none; margin-top:24px; }
.mcp-results-show { display:block !important; animation:mcpFadeUp .35s ease; }
@keyframes mcpFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* BANNER */
.mcp-banner { background:linear-gradient(135deg,#0a2540,#1a3a5c); border-radius:14px; padding:22px 18px; display:grid; gap:14px; margin-bottom:16px; }
.mcp-banner-4col { grid-template-columns:repeat(4,1fr); }
.mcp-banner-3col { grid-template-columns:repeat(3,1fr); }
.mcp-banner-2col { grid-template-columns:1fr 1fr; }
@media(max-width:600px){ .mcp-banner-4col { grid-template-columns:repeat(2,1fr); } .mcp-banner-3col { grid-template-columns:1fr 1fr; } }
.mcp-ri { text-align:center; }
.mcp-rl2 { font-size:10px; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.mcp-rv { font-size:24px; font-weight:700; color:#fff; line-height:1; }
.mcp-rv-gold { color:#f5bc45; }
.mcp-rv-sm { font-size:19px; }

/* PITI GRID */
.mcp-piti-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
@media(max-width:580px){ .mcp-piti-grid { grid-template-columns:repeat(2,1fr); } }
.mcp-pc { background:#f6f8fc; border:1px solid #dde3ed; border-radius:10px; padding:12px; text-align:center; }
.mcp-pcl { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8492a6; margin-bottom:5px; }
.mcp-pcv { font-size:16px; font-weight:700; color:#0a2540; }

/* BREAKDOWN */
.mcp-bkbox { background:#f6f8fc; border:1px solid #dde3ed; border-radius:14px; padding:18px; margin-bottom:14px; }
.mcp-bktitle { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8492a6; margin-bottom:12px; }
.mcp-bar-track { display:flex; height:12px; border-radius:6px; overflow:hidden; margin-bottom:10px; }
.mcp-bar-pi  { background:#0a2540; height:100%; transition:width .4s; }
.mcp-bar-tax { background:#c8912a; height:100%; transition:width .4s; }
.mcp-bar-ins { background:#e07b39; height:100%; transition:width .4s; }
.mcp-bar-pmi { background:#5a8fa8; height:100%; transition:width .4s; }
.mcp-legend { display:flex; gap:14px; flex-wrap:wrap; }
.mcp-li { display:flex; align-items:center; gap:6px; font-size:12px; color:#4a5568; }
.mcp-ld { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.mcp-ld-navy   { background:#0a2540; }
.mcp-ld-gold   { background:#c8912a; }
.mcp-ld-orange { background:#e07b39; }
.mcp-ld-blue   { background:#5a8fa8; }

/* AMORT */
.mcp-amort-wrap { background:#fff; border:1px solid #dde3ed; border-radius:14px; overflow:hidden; margin-bottom:14px; }
.mcp-amort-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#f6f8fc; border-bottom:1px solid #dde3ed; }
.mcp-amort-title { font-size:14px; font-weight:600; color:#0d1f3c; }
.mcp-togbtn { font-size:12px; color:#2563a8; background:none; border:1px solid #dde3ed; padding:5px 13px; border-radius:8px; cursor:pointer; font-family:inherit; transition:all .2s; }
.mcp-togbtn:hover { background:#0a2540; color:#fff; border-color:#0a2540; }
.mcp-amort-table { display:none; overflow-x:auto; max-height:340px; overflow-y:auto; }
.mcp-amort-open { display:block !important; }
.mcp-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.mcp-table thead th { padding:10px 14px; text-align:right; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8492a6; background:#f6f8fc; border-bottom:1px solid #dde3ed; position:sticky; top:0; }
.mcp-table thead th:first-child { text-align:left; }
.mcp-table tbody tr { border-bottom:1px solid #f0f3f8; }
.mcp-table tbody tr:hover { background:#f4f7ff; }
.mcp-table tbody td { padding:9px 14px; text-align:right; color:#4a5568; }
.mcp-table tbody td:first-child { text-align:left; font-weight:600; color:#0d1f3c; }
.mcp-td-int { color:#c8912a; font-weight:600; }
.mcp-td-bal { color:#0a2540; font-weight:600; }

/* TIP */
.mcp-tip { background:#eef7f2; border-left:4px solid #1a7f5a; border-radius:0 10px 10px 0; padding:13px 16px; font-size:13px; color:#1a4a35; line-height:1.65; }

/* COMPARE TABLE */
.mcp-cmp-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:4px; }
.mcp-cmp-table th { padding:10px 14px; text-align:right; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#8492a6; border-bottom:1px solid #dde3ed; }
.mcp-cmp-table th:first-child { text-align:left; }
.mcp-cmp-table td { padding:10px 14px; text-align:right; border-bottom:1px solid #f0f3f8; color:#4a5568; }
.mcp-cmp-table td:first-child { text-align:left; color:#0d1f3c; font-weight:500; }
.mcp-best { color:#1a7f5a !important; font-weight:700 !important; }
.mcp-worst { color:#c0392b !important; }

/* STRIP */
.mcp-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media(max-width:680px){ .mcp-strip { grid-template-columns:1fr; } }
.mcp-sc { background:#fff; border:1px solid #dde3ed; border-radius:14px; padding:20px; }
.mcp-icon { font-size:24px; margin-bottom:8px; }
.mcp-sc h3 { font-size:14px; font-weight:700; color:#0d1f3c; margin-bottom:5px; }
.mcp-sc p { font-size:12.5px; color:#4a5568; line-height:1.6; }

/* AUTHOR */
.mcp-author { background:#0a2540; border-radius:14px; padding:22px 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; }
.mcp-avatar { width:52px; height:52px; border-radius:50%; background:#c8912a; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#0a2540; flex-shrink:0; }
.mcp-author-name { font-size:15px; font-weight:700; color:#fff; margin-bottom:4px; }
.mcp-author-bio { font-size:12.5px; color:rgba(255,255,255,.58); line-height:1.5; margin:0; }

/* DISCLAIMER */
.mcp-disc { font-size:11.5px; color:#8492a6; text-align:center; line-height:1.7; margin-top:14px; padding:0 8px; }