/* ───────────── Mortgage-Calculator Layout ───────────── */
.container {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  max-width:1200px;
  margin:30px auto;
  background:#fff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.left,
.right { flex:1; min-width:300px; }

/* ───────────── Header / Logo ───────────── */
.header {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
}

.header i      { font-size:40px; color:#007bff; }
.header-title  { font-size:24px; font-weight:bold; color:#007bff; line-height:1.2; }
.header-title span { display:block; font-size:32px; color:#003366; }

/* ───────────── Form Elements ───────────── */
h2           { color:#003366; margin:0 0 10px; }
label        { display:block; margin-top:10px; font-weight:bold; }

input {
  width:80%;
  padding:6px;
  margin-top:5px;
  font-size:14px;
}

/* ───────────── Tabs (Payment / Amortization) ───────────── */
.tabs a {
  cursor:pointer;
  padding:10px 16px;
  color:#009fdb;
  font-weight:bold;
  text-decoration:none;
}

.tabs a.active { border-bottom:2px solid #009fdb; }

/* ───────────── Tables / Scroll Box ───────────── */
.table-scroll { overflow-x:auto; max-width:100%; }

table          { width:100%; border-collapse:collapse; }
th, td         { border:1px solid #ccc; padding:8px; text-align:right; }
th             { background:#eef9ff; color:#003366; }

.amortization-intro { font-size:.95em; color:#555; margin-bottom:10px; }

/* ───────────── Tab Fade-in Effect ───────────── */
.tab-content          { display:none; opacity:0; transition:opacity .3s ease; }
.tab-content.active   { display:block; opacity:1; }

/* ───────────── Responsive (≤ 768 px) ───────────── */
@media (max-width:768px){
  .container { flex-direction:column; padding:20px; }
  input      { width:100% !important; font-size:16px; }
  .left,
  .right     { min-width:100%; }
  table      { display:block; overflow-x:auto; white-space:nowrap; }
}
/* Shared button style */
button {
  background-color: #009fdb;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin: 20px auto;
}

button:hover {
  background-color: #007bb8;
}

/* Shared footer style */
footer, .footer {
  text-align: center;
  padding: 15px;
  background-color: #f1f1f1;
  font-size: 0.9em;
  color: #777;
}