@import url("_pages-common.css");
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px var(--va-col-gap); align-items: start; }
.calc__form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--va-col-gap); }
.calc__form .field--wide { grid-column: 1 / -1; }
.calc__form select.field__input { appearance: none; background: transparent; color: inherit; }
.calc__form select.field__input option { color: var(--va-ink); }
.calc__out { position: sticky; top: calc(var(--va-header-h) + 16px); display: grid; gap: 22px; padding: clamp(22px, 2.4vw, 40px); border: 1px solid var(--line); border-radius: 6px; }
.calc__total { font: 300 var(--va-fs-h2)/.9 var(--va-font-display); font-variant-numeric: tabular-nums; }
.calc__total.is-request { font-size: var(--va-fs-h2); font-weight: 300; }
.calc__lines td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.calc__lines .calc__note { display: block; margin-top: 4px; font-size: var(--va-fs-micro); color: var(--mute); overflow-wrap: anywhere; }
.calc__flags { display: grid; gap: 6px; font-size: var(--va-fs-small); color: var(--mute); }
.calc__out[aria-busy="true"] .calc__total { opacity: .45; }
.calc [hidden] { display: none !important; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__out { position: static; } }
@media (max-width: 480px) { .calc__form { grid-template-columns: 1fr; } }