:root{
--bg:#F8F7F3;
--card:#ffffff;
--text:#232323;
--text2:#6A6A6A;
--gold:#B79A67;
--goldHover:#A98A57;
--border:#E6E2DA;
--shadow:0 20px 60px rgba(0,0,0,.08);
}
.mortgage{
display:grid;
grid-template-columns:1fr 430px;
gap:60px;
max-width:1200px;
margin:auto;
padding:60px;
background:var(--bg);
border-radius:32px;
font-family:Inter,Arial,sans-serif;
}
.left label{
display:block;
margin-top:30px;
margin-bottom:10px;
font-size:15px;
font-weight:600;
color:var(--text);
}
.left input[type=text]{
width:100%;
padding:18px 22px;
font-size:34px;
font-weight:600;
background:white;
border:1px solid var(--border);
border-radius:18px;
color:var(--text);
}
input[type=range]{
accent-color:var(--gold);
width:100%;
}
.programs{
display:flex;
gap:12px;
margin-top:18px;
flex-wrap:wrap;
}
.prog{
padding:14px 22px;
background:white;
border:1px solid var(--border);
border-radius:14px;
cursor:pointer;
transition:.25s;
font-size:15px;
}
.prog:hover{
border-color:var(--gold);
}
.prog.active{
background:var(--gold);
color:white;
border-color:var(--gold);
}
.right{
background:white;
border-radius:30px;
padding:40px;
box-shadow:var(--shadow);
}
.right h3{
font-size:18px;
font-weight:500;
color:var(--text2);
margin:0;
}
.pay{
font-size:56px;
font-weight:700;
margin:20px 0 35px;
color:var(--gold);
line-height:1;
}
.line{
display:flex;
justify-content:space-between;
padding:18px 0;
border-bottom:1px solid var(--border);
color:var(--text);
}
.line span:last-child{
font-weight:600;
}
.income{
margin:30px 0;
padding:20px;
border-radius:18px;
background:#F5F2EC;
}
.income b{
font-size:28px;
display:block;
margin-top:8px;
color:var(--gold);
}
.btn{
display:block;
margin-top:35px;
padding:18px;
background:var(--gold);
border-radius:16px;
color:white;
text-decoration:none;
text-align:center;
font-weight:600;
transition:.25s;
}
.btn:hover{
background:var(--goldHover);
transform:translateY(-2px);
}