/* Late payment interest calculator (page-specific). Uses site variables from style.css. */
.calc{background:#fff;border:2px solid var(--acc);border-radius:var(--r);padding:20px 22px;margin:24px 0}
.calc fieldset{border:0;padding:0;margin:0 0 16px}
.calc legend{font-weight:700;margin-bottom:8px}
.calc .row{margin:0 0 14px}
.calc label{display:block;font-weight:600;margin-bottom:4px}
.calc .radio label{display:inline;font-weight:400;margin:0 16px 0 6px}
.calc input[type=text],.calc input[type=number],.calc input[type=date]{font:inherit;padding:10px 12px;border:1px solid #b9c0cf;border-radius:8px;min-height:44px;width:100%;max-width:320px;box-sizing:border-box;background:#fff}
.calc input:focus{outline:3px solid var(--acc);outline-offset:1px}
.calc .hint{font-size:14px;color:var(--mut);margin:4px 0 0}
.calc button{font:inherit;cursor:pointer}
.calc-result{margin-top:18px;padding:16px 18px;background:#f7f9ff;border:1px solid var(--line);border-radius:var(--r)}
.calc-result:focus{outline:3px solid var(--acc);outline-offset:2px}
.calc-result dl{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:6px 16px;margin:0}
.calc-result dt{font-weight:600}.calc-result dd{margin:0}
.calc-result dt.total,.calc-result dd.total{font-size:1.15em;font-weight:700}
.calc-error,.calc-warn{background:var(--warn);border:1px solid var(--warnline);border-radius:8px;padding:10px 12px;margin:0 0 12px}
@media (max-width:560px){.calc-result dl{grid-template-columns:1fr}.calc-result dd{margin-bottom:8px}}