/* Saldering-calculator: bouwt voort op ev-laadplanner.css, alleen de verschillen. */

/* Een jaaropwek heeft vier cijfers, de laadplanner twee. */
.saldering-page .energy-input input { width: 190px; }

.saldering-page .advice-copy h2 .per-jaar {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: #c5c5c5;
  margin-top: 6px;
}

.saldering-page #advice-sub { margin: 10px 0 0; font-size: 12px; color: #b7bdb7; }

.saldering-page .energy-token > span { font-size: 22px; white-space: nowrap; }

.saldering-extra label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.saldering-extra .unit-input { width: 130px; flex: none; margin-top: 0; }

.jaarrekening {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}
.jaarrekening > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff08;
}
.jaarrekening dt { font-size: 11px; color: #b3b8b3; }
.jaarrekening dd {
  margin: 4px 0 0;
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.jaarrekening dd .terug, .comparison .terug {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--green);
}

.saldering-noot { font-size: 12px; color: #aab6ad; margin: 14px 0 18px; line-height: 1.6; }

@media (max-width: 440px) {
  .saldering-page .energy-input input { width: 160px; font-size: 48px; }
  .jaarrekening { grid-template-columns: 1fr; }
  .jaarrekening > div { display: flex; justify-content: space-between; align-items: baseline; }
  .jaarrekening dd { margin: 0; font-size: 18px; }
}