/* Калькулятор: стили Astry из prototype/calculator.css.

   Взяты только правила `.calculator-*`: остальное её файла — переменные темы,
   сброс, шапка, подвал, `.callout`, `.consent`, `.contact-card`, `.button`,
   `.country-strip` — у нас уже есть в styles.css, она же их и рисовала.
   Правила показа состояний (`display: none` с переключателем радиокнопками)
   не переносились: состояние выбирает сервер, а не человек на макете. */
.calculator-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; padding-block: 1.5rem 2.5rem; }
.calculator-heading p { color: var(--muted); align-self: end; }
.calculator-eyebrow { display: block; margin-bottom: 1rem; color: var(--muted); font-size: 1rem; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-bottom: 3rem; }
.calculator-form { display: grid; gap: 1.5rem; min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.calculator-form h2 { font-size: 1.5rem; }
.calculator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.calculator-field { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.calculator-field__hint { color: var(--muted); }
.calculator-field__error { display: none; color: var(--danger); }
.calculator-field input:user-invalid { border-color: var(--danger); }
.calculator-field input:user-invalid ~ .calculator-field__error { display: block; }
/* Ошибку с сервера показываем всегда: она пришла на разбор ответа, а не на ввод */
.calculator-field--wrong input, .calculator-field--wrong select { border-color: var(--danger); }
.calculator-field--wrong .calculator-field__error { display: block; }
.calculator-key-fields { border: 1px solid var(--brand); border-left-width: .25rem; padding: 1.5rem; background: var(--surface-soft); }
.calculator-key-fields > p { color: var(--muted); margin-bottom: 1rem; }
.calculator-form__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* У Astry размер значков задавал общий сброс `svg`, который мы не переносили:
   без него стрелка в кнопке растягивается на всю её ширину */
.calculator-form__actions svg, .calculator-state svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.calculator-state--empty svg, .calculator-state--loading svg { width: 2.5rem; height: 2.5rem; }
.calculator-form__note { color: var(--muted); }
.calculator-answer { min-width: 0; scroll-margin-top: 1.5rem; }
.calculator-answer__label { margin-bottom: 1rem; color: var(--muted); }
.calculator-state--empty svg, .calculator-state--loading svg { margin-bottom: 1.5rem; color: var(--brand-strong); }
.calculator-result { border: 1px solid var(--line); border-top: .25rem solid var(--brand); border-radius: var(--radius); padding: 1.5rem; }
.calculator-result__total { font-size: 3rem; font-weight: 650; line-height: 1.2; margin-block: 1rem; overflow-wrap: anywhere; }
.calculator-result__context { color: var(--muted); margin-bottom: 1.5rem; }
.calculator-result__lines { margin: 0; }
.calculator-result__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding-block: 1rem; border-top: 1px solid var(--line); align-items: start; }
.calculator-result__row dt { min-width: 0; color: var(--muted); }
.calculator-result__row dd { margin: 0; font-weight: 600; white-space: nowrap; }
.calculator-result__rate { color: var(--muted); font-size: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.calculator-state--missing, .calculator-state--unavailable { border-left-color: var(--warning); }
.calculator-lead { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 1000px) {
  .calculator-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .calculator-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calculator-heading { padding-block: 1rem 1.5rem; }
  .calculator-fields { grid-template-columns: 1fr; gap: 1rem; }
  .calculator-form, .calculator-key-fields, .calculator-result { padding: 1rem; }
  .calculator-form { gap: 1rem; }
  .calculator-result__total { font-size: 2rem; }
  .calculator-result__row { grid-template-columns: 1fr; gap: .5rem; }
  .calculator-form__actions { flex-direction: column; }
}

/* 🔴 Поля расчёта жили на умолчаниях браузера: внутренние отступы 1 и 2 пикселя.
   Задаём свои, кратные восьми, — как у остальных полей темы */
.calculator-field input, .calculator-field select, .calculator-field textarea { padding: .5rem 1rem; }
.round3-remaining .calculator-page { padding-bottom: 3rem; }
.round3-remaining .calculator-heading { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0 0 1rem; padding-block: .5rem 1rem; }
.round3-remaining .calculator-heading h1 { margin: 0; font-family: var(--m12-font-display); font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.round3-remaining .calculator-heading__lead { max-width: 65ch; margin: .5rem 0 0; color: var(--muted); font-size: 1.125rem; }
.round3-remaining .calculator-layout { grid-template-columns: minmax(0, 1.2fr) minmax(18.75rem, .8fr); gap: 2rem; align-items: start; padding-bottom: 0; }
.round3-remaining .calculator-form { gap: 1rem; min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-panel); }
.round3-remaining .calculator-fields { gap: 1rem; }
.round3-remaining .calculator-fields--vehicle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.round3-remaining .calculator-fields--specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.round3-remaining .calculator-field { gap: .5rem; min-width: 0; font-size: 1rem; }
.round3-remaining .calculator-field__label, .round3-remaining .calculator-field > span:first-child { color: var(--ink); font-weight: 600; }
.round3-remaining .calculator-field input, .round3-remaining .calculator-field select { width: 100%; min-width: 0; min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }
.round3-seven-plus .calculator-page .calculator-form .calculator-field input, .round3-seven-plus .calculator-page .calculator-form .calculator-field select { box-sizing: border-box; padding: .5rem 1rem; }
.round3-remaining .calculator-field input::placeholder { color: var(--muted); opacity: 1; }
.round3-remaining .calculator-field input:focus-visible, .round3-remaining .calculator-field select:focus-visible, .round3-remaining .calculator-country-option input:focus-visible + span { outline: .1875rem solid var(--focus); outline-offset: .125rem; }
.round3-remaining .calculator-field__hint { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.round3-remaining .calculator-field__error { color: var(--danger); font-size: 1rem; }
.round3-remaining .calculator-field--wrong input, .round3-remaining .calculator-field--wrong select { border-color: var(--danger); }
.round3-remaining .calculator-field--wrong .calculator-field__error { display: block; }
.round3-remaining .country-strip { min-width: 0; margin: 0; padding: 0; border: 0; }
.round3-seven-plus .calculator-page .calculator-form fieldset.country-strip { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.round3-remaining .country-strip legend { margin-bottom: .5rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.round3-remaining .calculator-country-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.round3-remaining .calculator-country-option { position: relative; display: flex; min-width: 0; min-height: 3rem; align-items: center; cursor: pointer; }
.round3-seven-plus .calculator-page .calculator-form .country-strip .calculator-country-option { min-height: 3rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
.round3-remaining .calculator-country-option input { position: absolute; width: .0625rem; height: .0625rem; opacity: 0; }
.round3-remaining .calculator-country-option span { display: flex; width: 100%; min-height: 3rem; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); }
.round3-seven-plus .calculator-page .calculator-form .country-strip .calculator-country-option span { flex-wrap: nowrap; }
.round3-remaining .calculator-country-option b { color: var(--muted); font-size: 1rem; }
.round3-remaining .calculator-country-option input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.round3-remaining .calculator-manual-fallback { margin-top: 0; }
.round3-remaining .calculator-manual-fallback summary { min-height: 2.75rem; padding-block: .5rem; color: var(--ink); font-size: 1rem; text-decoration: underline; text-underline-offset: .1875rem; cursor: pointer; }
.round3-remaining .calculator-manual-fallback .calculator-field__label { display: block; margin-bottom: .5rem; }
.round3-remaining .calculator-form__actions { align-items: center; gap: 1rem; }
.round3-remaining .calculator-form__actions .button { min-height: 3.5rem; padding-inline: 1.5rem; }
.round3-remaining .calculator-form__actions > .button { min-height: 3.5rem; flex: 0 0 auto; }
.round3-legacy.round3-seven-plus .calculator-form__actions > .button { flex: 0 0 auto; }
.round3-legacy.round3-seven-plus .calculator-form__actions > .button:first-child { box-sizing: border-box; height: 3.5rem; min-height: 3.5rem; padding-block: .5rem; }
.round3-remaining .calculator-reset { min-height: 2.75rem; padding: .5rem 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: .1875rem; cursor: pointer; }
.round3-remaining .calculator-reset:hover { color: var(--brand-strong); }
.round3-remaining .calculator-form__note { margin: 0; color: var(--muted); font-size: 1rem; }
.round3-remaining .calculator-answer { min-width: 0; scroll-margin-top: 1.5rem; }
.round3-legacy.round3-seven-plus .calculator-answer { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.round3-remaining .calculator-answer__label { margin: 1.5rem 0 1rem; color: var(--muted); font-size: 1rem; }
.round3-remaining .calculator-state--empty { padding: 1.5rem; border: 1px dashed var(--line); border-radius: 1rem; background: transparent; }
.round3-remaining .calculator-state--empty h2 { margin-bottom: .5rem; font-size: 1.25rem; }
.round3-remaining .calculator-state--empty p { max-width: 48ch; color: var(--muted); }
.round3-remaining .calculator-state.calculator-result { padding: 1.5rem; border: 1px solid var(--line); border-top: .25rem solid var(--brand); border-radius: 1rem; background: var(--panel); }
.round3-legacy.round3-seven-plus .calculator-result h2 { font-size: 1.5rem; }
.round3-remaining .calculator-result__total { margin-block: 1rem; font-family: var(--m12-font-display); font-size: 2.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.round3-remaining .calculator-result__context, .round3-remaining .calculator-result__rate { color: var(--muted); }
.round3-remaining .calculator-result__row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.round3-remaining .calculator-result__row dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.round3-remaining .calculator-result__rate { padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1rem; }
.round3-remaining .calculator-lead { display: grid; gap: 1rem; margin-top: 1.5rem; }
.round3-legacy.round3-seven-plus .calculator-lead .consent { display: flex; min-height: 2.75rem; align-items: flex-start; gap: 1rem; padding: .5rem 0; color: var(--ink); font-size: 1rem; }
.round3-legacy.round3-seven-plus .calculator-lead .consent input { width: 1.5rem; height: 1.5rem; min-height: 1.5rem; margin: 0; flex: 0 0 1.5rem; }
.round3-remaining .calculator-privacy { display: flex; min-height: 2.75rem; align-items: center; color: var(--ink); font-size: 1rem; text-decoration: underline; text-underline-offset: .1875rem; }
.round3-remaining .calculator-privacy:hover { color: var(--brand-strong); }
.round3-remaining .calculator-examples { margin-top: 3rem; }
.round3-remaining .calculator-examples .car-grid > .car > a { text-decoration: none; }
.round3-seven-plus .calculator-page .calculator-examples .car-action { font-size: 1rem; font-weight: 600; }
.round3-remaining .calculator-examples h2 { margin-bottom: 1.5rem; font-family: var(--m12-font-display); font-size: 1.75rem; font-weight: 700; }

@media (max-width: 1000px) {
  .round3-remaining .calculator-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .round3-remaining .calculator-fields--specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round3-remaining .calculator-answer__label { margin-top: .5rem; }
}
@media (max-width: 640px) {
  .round3-remaining .calculator-page { padding-bottom: 2rem; }
  .round3-remaining .calculator-heading { padding-block: .5rem 1rem; }
  .round3-remaining .calculator-heading h1 { font-size: 1.75rem; }
  .round3-remaining .calculator-form { gap: 1rem; padding: 1rem; }
  .round3-remaining .calculator-fields--vehicle, .round3-remaining .calculator-fields--specs { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .round3-remaining .calculator-country-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round3-remaining .calculator-form__actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .round3-remaining .calculator-form__actions .button { min-height: 3.5rem; flex: 0 0 auto; justify-content: center; }
  .round3-legacy.round3-seven-plus .calculator-form__actions > .button:first-child { box-sizing: border-box; height: 3.5rem; min-height: 3.5rem; padding-block: .5rem; flex: 0 0 auto; }
  .round3-remaining .calculator-reset { align-self: center; }
  .round3-remaining .calculator-result, .round3-remaining .calculator-state--empty { padding: 1rem; }
  .round3-remaining .calculator-result__total { font-size: 1.75rem; }
  .round3-remaining .calculator-result__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .round3-remaining .calculator-examples { margin-top: 2rem; }
  .round3-remaining .calculator-examples h2 { margin-bottom: 1rem; font-size: 1.5rem; }
}