/* ─────────────────────────────────────────────────────────
   Калькуляторы-лид-магниты. Общий файл на все: у М2 (удержания
   площадки) и будущих калькуляторов одни и те же элементы —
   ползунок, крупная цифра результата, строка вывода.

   Отдельным файлом, а не в style.css: тот собирается из исходников,
   рядом лежит .map, и прямая правка затрётся при следующей сборке.
   Подключается через $pageCss в inc/head.php — asset() добавляет
   метку версии, иначе nginx держит css месяц.
   ───────────────────────────────────────────────────────── */

.calc {
  background: #fff;
  border: 1px solid #e5e2dc;
  border-radius: 10px;
  padding: 28px;
}
@media (max-width: 575px) {
  .calc { padding: 20px; }
}

.calc__field { margin-bottom: 22px; }
.calc__field:last-of-type { margin-bottom: 0; }

.calc__label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

/* Значение ползунка рядом с подписью: цифра должна быть видна там же,
   где её меняют, иначе приходится искать её глазами в результате. */
.calc__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calc__hint {
  display: block;
  font-size: 13px;
  color: #76766f;
  margin-top: 6px;
  line-height: 1.45;
}

/* Селектор с типом элемента, а не один класс: в style.css есть
   input[type=text] с font-size 14px и height 45px (строка 62). У него
   специфичность выше одного класса, и поле оборота выглядело бы как
   обычный инпут темы — 14 пикселей вместо 20 и обрезанная высота.
   height: auto возвращает управление высотой паддингу. */
input.calc__money {
  width: 100%;
  height: auto;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 12px 14px;
  border: 1px solid #d3cfc6;
  border-radius: 7px;
  background: #fbfaf8;
}
input.calc__money:focus {
  outline: 2px solid #a63d2f;
  outline-offset: 1px;
  border: 1px solid #a63d2f;
  background: #fff;
}

/* Ползунки. Оформляются вручную в обоих движках: по умолчанию они
   выглядят по-разному в Safari и Chrome, а тут их два рядом. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e5e2dc;
  margin: 10px 0 0;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a63d2f;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(23, 23, 26, .3);
  cursor: pointer;
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a63d2f;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(23, 23, 26, .3);
  cursor: pointer;
  border-color: #fff;
}
.calc__range:focus-visible { outline: 2px solid #a63d2f; outline-offset: 4px; }

.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #76766f;
  margin-top: 4px;
}

/* ── Результат ─────────────────────────────────────────── */
.calc-out {
  border-top: 1px solid #e5e2dc;
  margin-top: 26px;
  padding-top: 24px;
}
.calc-out__rows {
  display: grid;
  gap: 0;
  margin: 0 0 20px;
}
.calc-out__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f0eee9;
}
.calc-out__row:last-child { border-bottom: 0; }
.calc-out__row dt {
  font-weight: 400;
  color: #4a4a46;
  font-size: 15px;
  margin: 0;
}
.calc-out__row dd {
  margin: 0;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Главная цифра — удержание за год: она и есть аргумент. */
.calc-out__row--lead dd { font-size: 27px; letter-spacing: -.02em; }
.calc-out__row--lead dt { font-weight: 600; color: #17171a; }

.calc-out__note {
  font-size: 14.5px;
  color: #76766f;
  line-height: 1.5;
  margin: 0;
}
/* Предупреждение вместо результата: когда переезд не окупается или
   оборот не введён. Тон спокойный — это не ошибка ввода. */
.calc-out__warn {
  background: #fbeeeb;
  border: 1px solid rgba(166, 61, 47, .3);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #8a3125;
  margin: 0 0 16px;
}