.mg-mortgage {
max-width: 500px;
padding: 30px;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
font-family: Arial, sans-serif;
}
.mg-mortgage h2 {
margin-bottom: 20px;
font-size: 24px;
font-weight: 700;
}
.mg-mortgage label {
display: block;
margin-top: 15px;
font-weight: 600;
}
.mg-mortgage input {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 16px;
}
.mg-mortgage button {
width: 100%;
margin-top: 25px;
background: #ffc800;
color: #000;
padding: 15px;
border: none;
font-size: 17px;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
}
.mg-mortgage button:hover {
background: #ffdb4d;
}
.mg-results {
margin-top: 25px;
font-size: 17px;
}
function calcMortgage() {
const price = +document.getElementById("price").value;
const initial = +document.getElementById("initial").value;
const rate = +document.getElementById("rate").value / 100 / 12;
const months = +document.getElementById("months").value;
const credit = price - initial;
const payment = credit * (rate * Math.pow(1 + rate, months)) / (Math.pow(1 + rate, months) - 1);
const total = payment * months;
const overpay = total - credit;
document.getElementById("credit").innerHTML = credit.toLocaleString();
document.getElementById("monthPay").innerHTML = Math.round(payment).toLocaleString();
document.getElementById("overpay").innerHTML = Math.round(overpay).toLocaleString();
document.getElementById("total").innerHTML = Math.round(total).toLocaleString();
}