/*
   Блок «Предварительный расчет» — общий для калькулятора переезда и
   калькулятора грузоперевозок (правка 15.08.2026).

   Отдельный файл, а не site.less: тот давно не компилируется (ParseError на
   EOF), правки в него не попадают. Так же вынесены calc-mini-map, calc-redirect
   и calc-promo. Рядом лежит скомпилированный calc-price-box.css — правите одно,
   правьте и второе.

   Раньше эти же стили стояли инлайном прямо в разметке калькулятора переезда
   (style="border: 2px dashed #fff; ..."). Инлайн-стили в проекте запрещены, а
   главное — так их нельзя было переиспользовать во втором калькуляторе, чего и
   просил заказчик: «форматирование поля расчетной цены должно быть такое же как
   в калькуляторе переездов».
*/
.calc-price-box {
  /* flex-колонка с выравниванием по центру — правка 16.08.2026 по замечанию
       заказчика: «когда стоит цена без скидки (нет зачёркнутой цены), она не
       очень красиво прижимается к низу, а нужно, чтобы центровалась по
       вертикали». Раньше строка со старой ценой всегда занимала место, и без
       скидки в середине рамки висела пустота, а цена оказывалась внизу.
       Теперь пустой строки нет, а высоту держит min-height (см. ниже) —
       содержимое стоит ровно по центру и в том, и в другом случае. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  border: 2px dashed #fff;
  border-radius: 8px;
  background: transparent;
  text-align: center;
  font-family: Montserrat, sans-serif;
  box-sizing: border-box;
  /* Строка со старой (зачёркнутой) ценой. Когда скидки нет — убирается
       совсем (display), а не остаётся невидимой (visibility, как было до
       16.08.2026): иначе она держала пустое место в середине рамки и цена
       съезжала вниз.
       Высота рамки при этом не прыгает — её держит min-height ниже. То есть
       требование «высота как после расчёта» выполняется по-прежнему, просто
       другим способом. */
  /* Галочка «с НДС» — только у грузового тарифа переезда.

       Правка 16.08.2026: «если это калькулятор, в котором видно регулирование
       опции с НДС, тогда сделать, чтобы всё это умещалось в 150 px».
       Мерил — было 178 px, и лишние 40 из них давал ЧУЖОЙ отступ: у обёртки
       поля (.form-group) в стилях калькулятора стоит margin-top: 40px, он там
       нужен для полей формы, но внутри рамки расчёта не к месту. Гасим его
       только здесь, у соседей ничего не меняется. Стало 145 px. */
}
.calc-price-box__title {
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}
.calc-price-box__old {
  font-size: 22px;
  line-height: 1.3;
  color: #888;
  text-decoration: line-through;
}
.calc-price-box__old.is-off {
  display: none;
}
.calc-price-box__new {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: #FFE500;
}
.calc-price-box__nds {
  /* 8 px — как в образце, который выбрал заказчик (отступ слота под
           ценой). Было 6 px. */
  margin-top: 8px;
  text-align: center;
}
.calc-price-box__nds .form-group {
  margin: 0 !important;
}
.calc-price-box__nds label {
  margin-bottom: 0;
}
/* ═══ «с НДС» — вариант 07 «Фирменная галочка» ════════════════════════════════
   Выбор заказчика от 16.08.2026 из десяти показанных вариантов. Смысл варианта:
   это та же самая галочка, что и была, но в цветах калькулятора — жёлтый
   квадрат вместо серо-зелёного системного. Минимум правок, привычный жест.

   Размеры и цвета взяты из образца один в один: квадрат 21×21, скругление 5 px,
   рамка 2 px жёлтым, в выключенном состоянии внутри пусто; включённая —
   залита жёлтым, галочка тёмно-зелёная (#1B4527); подпись 14 px, вес 500,
   между квадратом и подписью 10 px.

   РАЗМЕТКУ НЕ ТРОГАЕМ. В образце это была кнопка с aria-pressed, но в живом
   калькуляторе стоит НАСТОЯЩИЙ <input type="checkbox">, и на него завязаны две
   вещи: расчёт цены (Calc.js читает $('#pereezdcalcform-nds').is(':checked')) и
   пересчёт по событию change (common.js). Подменять его кнопкой значит писать
   свой JS и держать два источника правды о состоянии. Поэтому вид меняем
   стилями, а поведение остаётся родным — заодно работают клавиатура и
   экранный диктор, чего у кнопки с aria-pressed не было бы даром.

   ПРО ДЛИННЫЙ СЕЛЕКТОР. Общие правила калькулятора в site.css написаны через
   два идентификатора (`#calc-new .calc #gruz .row .form-group input[type=checkbox]…`),
   и коротким селектором их не перебить. Повторяем ту же цепочку и добавляем
   свои классы — так правило выигрывает по специфичности честно, а не через
   !important, и не зависит от порядка подключения файлов. */
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group {
  /* ПО ЦЕНТРУ, как в образце. Замечание заказчика от 16.08.2026: «чекбокс не
       отцентрован, как в том примере».

       Так и было: у .form-group в стилях калькулятора выравнивание по ПРАВОМУ
       краю, и оно перебивало text-align: center у блока НДС — своё содержимое
       группа выравнивает сама. Замерено на 1440 px: центр рамки 1115, центр
       заголовка и цены 1115, а центр галочки 1188 — на 73 px правее. */
  text-align: center;
  /* Сам чекбокс НЕ ТРОГАЕМ: в site.css он уведён за экран (left: -9999px),
       а нажатие ловит подпись через label[for] — ровно так же, как у соседних
       галочек «Необходима погрузка» и «Необходима выгрузка».

       Пробовал вернуть его на место квадрата (прозрачным, поверх) ради рамки
       фокуса — и получил ровно то, чего нельзя допускать: прозрачное поле
       накрыло часть подписи и стало перехватывать нажатия. Замерено: обычный
       клик по галочке переставал её переключать, работал только принудительный.
       Ради украшения ломать единственное действие этого элемента нельзя,
       поэтому вернул как было. */
  /* Квадрат. В site.css он абсолютный (left: 0; top: 0) — здесь возвращаем в
       поток, чтобы подпись вставала рядом сама, через gap, а не через
       padding-left на глаз. */
  /* Галочка. Рисуется двумя сторонами рамки, повёрнутыми на 45° — тем же
       приёмом, что и все галочки калькулятора; меняем только размер, цвет и
       место, потому что квадрат стал больше и переехал в поток. */
  /* Рамка фокуса — для тех, кто ходит по форме с клавиатуры. Само поле за
       экраном и обвести его нельзя, поэтому обводим квадрат: человек видит,
       где он сейчас находится. */
}
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group label.checkbox-form {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
}
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:checked + label.checkbox-form:before,
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:not(:checked) + label.checkbox-form:before {
  position: static;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border: 2px solid #FFE500;
  border-radius: 5px;
  background-color: transparent;
  transition: background-color 0.16s ease;
}
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:checked + label.checkbox-form:before {
  background-color: #FFE500;
}
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:checked + label.checkbox-form:after,
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:not(:checked) + label.checkbox-form:after {
  left: 5px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid #1B4527;
  border-bottom: 2.5px solid #1B4527;
  border-radius: 1px;
  transform: rotate(-45deg);
}
#calc-new .calc #gruz .row .calc-price-box .calc-price-box__nds .form-group input[type="checkbox"]:focus-visible + label.checkbox-form:before {
  outline: 2px solid #FFE500;
  outline-offset: 2px;
}
/* Начальная высота рамки — 120 px (правка 16.08.2026: «начальный размер блока
   предварительного расчёта пусть будет 120 px», а мини-карта рядом равняется
   на него). Высота именно минимальная, а не жёсткая: с галочкой «с НДС»
   содержимого больше, и рамка честно вырастает до 145 px — заказчик разрешил
   «150 или чуть больше, если 150 мало».

   Только для широких экранов: на телефоне рамка идёт во всю ширину, содержимое
   и так занимает почти столько же, а лишняя пустота на маленьком экране дорога.
   Порог 768 px — с него начинается «десктопная» раскладка калькулятора. */
@media (min-width: 768px) {
  .calc-price-box {
    min-height: 120px;
  }
  /* Рамка с галочкой «с НДС». Её содержимое в самом полном виде — заголовок,
       зачёркнутая цена, расчётная цена и сама галочка — занимает 121 px, то
       есть рамка получается 145 px. Задаём эту высоту сразу, чтобы она не
       подрастала на 24 px в момент, когда появляется зачёркнутая цена: рядом
       стоит карта, и она повторяла бы этот скачок.
       Заказчик разрешил «150 px или чуть больше, если 150 мало» — 145 в этот
       предел укладывается. */
  .calc-price-box--nds {
    min-height: 145px;
  }
}
/* Служебная строка «Итого: … Р», в которую пишет Calc.js. На экране её нет:
   цифры из неё зеркалит js/calc/price-box.js, уже с разделителями тысяч.
   Раньше в калькуляторе переезда она пряталась инлайновым style="display:none",
   теперь — классом, одинаково в обоих калькуляторах.
   Узел НЕ удаляем и не переименовываем: на него завязаны Calc.SetPrice,
   наблюдатели кнопок «Есть предложение дешевле» и мини-карта. */
.calc .price-wrap.calc-price-raw {
  display: none !important;
}
/* Состояние «Ваш запрос относится к другому тарифу» (грузоперевозки).
   Вместо цифр в рамке стоит кнопка развилки — цифры на это время убираем.
   Раньше то же самое делалось обнулением font-size у рамки «Итого» (голый
   текст «Итого:» классом не спрятать), но здесь голого текста нет: каждая
   строка — свой узел, и её можно просто убрать. */
.calc-price-box.calc-other-tariff-on {
  padding: 12px 16px;
}
.calc-price-box.calc-other-tariff-on > .calc-price-box__title,
.calc-price-box.calc-other-tariff-on > .calc-price-box__old,
.calc-price-box.calc-other-tariff-on > .calc-price-box__new,
.calc-price-box.calc-other-tariff-on > .calc-price-box__nds {
  display: none !important;
}
/* В грузоперевозках рамка стоит в колонке заданной ширины (col-sm-4). Пусть
   занимает её целиком, как занимала прежняя строка «Итого», — иначе кнопка
   «Есть предложение дешевле» под ней оказывается шире самой рамки. */
.calc-price-col > .calc-price-box {
  width: 100%;
}
/* Планшет 768–991: колонка расчёта в грузоперевозках всего 197 px — надпись
   «Предварительный расчет:» в неё не влезает и переносится на две строки, из-за
   чего рамка на 16 px выше такой же в переезде. Заказчик просил одинаковый вид.

   Уменьшать шрифт бесполезно: замерено, что даже 14 px дают 195 px при
   доступных 177. Поэтому на этих ширинах колонке расчёта отдаём 5/12 вместо
   4/12, а соседней (с картой) — 7/12. Получается 271 px под рамку: надпись
   помещается в строку целиком, а карте остаётся 349 px — с запасом над тем
   порогом, ниже которого Яндекс убирает свою кнопку. */
@media (min-width: 768px) and (max-width: 991px) {
  .calc .calc-lead-col {
    width: 58.33333333%;
  }
  .calc .calc-price-col {
    width: 41.66666667%;
  }
  /* И ещё один пиксель шрифта: замерено, что надписи нужно 219 px, а в
       расширенной колонке помещается 209. На 15 px она укладывается в строку
       (глазом разницы с 16 px нет), и рамка становится ровно такой же высоты,
       как в переезде. Одной шириной колонки обойтись не вышло: чтобы дать
       219 px, колонку пришлось бы растить до половины строки — тогда карте
       осталось бы меньше, чем нужно её собственной атрибуции. */
  .calc-price-col > .calc-price-box .calc-price-box__title {
    font-size: 15px;
  }
}
/* Телефон: рамка растягивается на всю ширину колонки — так же, как это делает
   вёрстка калькулятора переезда на ≤500 px. Иначе рамка стоит по содержимому и
   на узком экране смотрится приклеенной к левому краю. */
@media (max-width: 600px) {
  .calc-price-box {
    width: 100%;
  }
}
/* ── Заголовок формы над полями «Ваше имя» и «Телефон» ──────────────────────
   Тоже общий на два калькулятора: заказчик просил, чтобы в грузоперевозках
   надпись была «точно такая же, как в калькуляторе переездов». Раньше эти
   правила стояли инлайном в разметке переезда, а в грузоперевозках надпись
   жила внутри .text-block со своим оформлением (.calc-lead-heading) — то есть
   выглядела иначе.

   Цвет БЕЛЫЙ — замечание заказчика от 15.08.2026: «эта надпись сероватая, а
   должна быть того же цвета (белая), как и все остальные надписи, например
   „Откуда“». Было #d7d7d7 — светло-серый, на зелёном фоне заметно тусклее
   подписей полей, у которых в site.css задан #FFF.

   Селектор из двух классов, а не один .calc-form-title: так правило заведомо
   сильнее общих правил калькулятора для абзацев (.calc p) и не зависит от
   порядка подключения файлов. */
.calc .calc-form-title {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 130%;
  margin: 10px 0 15px 0;
}
@media (max-width: 500px) {
  /* На узком экране заголовок стоит по центру — так он вёл себя в переезде
       (правило .calc-form-wrapper{text-align:center} в стилях вьюхи), и в
       грузоперевозках должно быть так же. */
  .calc .calc-form-wrapper {
    text-align: center;
  }
  .calc .calc-form-title {
    display: inline-block;
    text-align: center;
  }
}