/* Стили калькулятора переезда (modules/calc/widgets/views/calc_pereezd_new.php).
   До ТЗ 4 (23.10.2026) стояли блоком <style> прямо в HTML страницы; текст перенесён без
   изменений. Теперь это файл: браузер скачивает его один раз и берёт из кэша.
   Подключается там же, где был блок: CustomView::registerCssFileInPlace — в той же очереди <head>,
   поэтому порядок правил на странице не изменился. Исходник — calc-pereezd.less (CSS = LESS). */
/* Баг5: ползунки этажей (bootstrap-slider) на тач-устройствах. Их тач-события
       навешаны как passive:true и не могут отменить прокрутку страницы, поэтому при
       перетаскивании палец скроллил страницу, а ползунок «сбрасывался». touch-action:none
       говорит браузеру не скроллить при касании ползунка → drag работает. На desktop
       (мышь) свойство инертно. */
.calc .slider,
.calc .slider-track,
.calc .slider-handle {
  touch-action: none;
}
.dop-uslug {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0%;
  color: #FFE500;
}
.dop-uslug-flex {
  display: flex;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}
.yellow_line {
  height: 1px;
  width: 35%;
  background: #ffe924;
}
.row.additional {
  display: none;
}
.plashka1 {
  width: 10px;
  height: 5px;
  background-image: url(/image/plashki/vniz.svg);
}
.plashka1.open {
  width: 10px;
  height: 5px;
  background-image: url(/image/plashki/vverh.svg);
}
.row.additional.open {
  display: block;
}
/* Специальное правило для надписи "Или закажите на сайте" – перебивает глобальный .calc p */
.calc p.order-on-site-text {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
/* Заголовок формы над полями «Ваше имя» и «Телефон» оформляется в
       css/calc-price-box.less — там же, где рамка расчёта. Он теперь общий с
       калькулятором грузоперевозок (заказчик просил одинаковый вид), и держать
       его стили в одной вьюхе значило бы, что во второй он выглядит иначе.
       Там же объяснено, почему цвет стал белым вместо #d7d7d7. */
/* Строка «Предварительный расчет» и обёртка расчёта. Раньше эти правила
       стояли инлайном прямо в разметке (style="display:flex; ..."), а инлайн-
       стили в проекте запрещены — перенесены сюда без изменений.
       justify-content: flex-end — расчёт прижат вправо, слева остаётся свободное
       место: там стоит мини-карта маршрута (см. css/calc-mini-map.less). */
.budget-calc-row {
  margin: 20px 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.budget-calc-right-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* ─── Заголовок формы: два места, одно видно ────────────────────────────
       Слева от расчёта (.budget-calc-lead) — когда карты там нет: вкладка
       «Город и область» или мини-карта выключена в админке. Вид тот же, что был
       до карты: крупный белый текст по центру свободного места.
       Своей строкой над полями (.calc-form-wrapper) — когда место занято картой.

       Класс .calc-has-minimap вешает js/calc/mini-map.js, и только когда
       карточка ДЕЙСТВИТЕЛЬНО видна. Поэтому состояние «карты нет» здесь —
       состояние по умолчанию: без скрипта и без мини-карты калькулятор выглядит
       ровно так, как выглядел раньше. */
.budget-calc-lead {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 15px;
}
.calc-contacts-heading {
  margin: 0;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.calc .calc-form-wrapper {
  display: none;
}
.calc.calc-has-minimap .calc-form-wrapper {
  display: block;
}
.calc.calc-has-minimap .budget-calc-lead {
  display: none;
}
/* Телефон и планшет до 768 px: заголовок всегда над полями. В строке
       расчёта он там ни к чему — колонки идут в столбик, и заголовок оказался бы
       над ценой, а не над полями, которые он подписывает.

       !important здесь обязателен и он не от лени: ниже, в @media ≤500px, у
       калькулятора есть своё правило «.budget-calc-row > div{display:flex
       !important}» — оно распространяется на ВСЕ прямые дочерние блоки строки,
       включая наш. Без !important заголовок показывался бы в обоих местах
       сразу (замерено на 375 px: видны обе копии). */
@media (max-width: 767px) {
  .calc .budget-calc-lead,
  .calc.calc-has-minimap .budget-calc-lead {
    display: none !important;
  }
  .calc .calc-form-wrapper,
  .calc.calc-has-minimap .calc-form-wrapper {
    display: block;
  }
}
/* Скрытие блока старой цены переехало в css/calc-price-box.less и делается
       теперь через visibility, а не display: строка должна занимать место даже
       когда её не видно, иначе рамка расчёта прыгает в высоте, а вместе с ней и
       мини-карта, которая под эту высоту подгоняется (правка 15.08.2026). */
/* Иконки молнии: десктопная видна, мобильная скрыта по умолчанию */
.desktop-lightning {
  display: inline;
}
.mobile-lightning {
  display: none;
}
@media (max-width: 500px) {
  .dop-uslug {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #FFE500;
  }
  .dop-uslug-flex {
    display: flex;
    justify-content: center;
    align-content: flex-end;
    align-items: center;
    margin: 10px 0px 20px 0px;
  }
  .yellow_line {
    display: none;
  }
  .row.additional {
    display: none;
  }
  .plashka1 {
    margin: 0.3em;
    width: 10px;
    height: 5px;
    background-image: url(/image/plashki/vniz.svg);
  }
  .plashka1.open {
    width: 10px;
    height: 5px;
    background-image: url(/image/plashki/vverh.svg);
  }
  .row.additional.open {
    display: block;
  }
  .budget-calc-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px;
  }
  .budget-calc-row > div {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding-right: 0 !important;
    justify-content: center !important;
    display: flex !important;
  }
  .budget-calc-row > div > div {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
  }
  .budget-calc-row > div:last-child {
    align-items: center;
  }
  /* .row у bootstrap несёт клирфикс-псевдоэлементы (::before/::after,
           content:" "), а в flex-контейнере они становятся ПОЛНОЦЕННЫМИ flex-
           элементами: с order:0 они уехали бы вперёд колонки, и каждый добавил
           бы лишние 15px (gap). Клирфикс здесь не нужен (внутри строки нет
           float-ов), поэтому просто убираем его.

           Правила порядка (.budget-calc-row > div:first-child{order:2} и пара к
           нему) отсюда убраны вместе с заголовком: менять местами больше нечего,
           в строке осталась одна колонка — расчёт. Заголовок формы вернулся на
           своё место, в строку прямо над полями. */
  .budget-calc-row::before,
  .budget-calc-row::after {
    display: none !important;
  }
  .calc-form-wrapper {
    text-align: center !important;
  }
  .calc-form-title {
    display: inline-block !important;
    text-align: center !important;
  }
  #per-calc .form-group {
    margin-bottom: 6px !important;
  }
  /* На мобильных показываем мобильную иконку, скрываем десктопную */
  .desktop-lightning {
    display: none;
  }
  .mobile-lightning {
    display: block;
    text-align: center;
    margin: 5px 0;
  }
}
/* 501–600px: в calc.less есть старое ОБЩЕЕ правило грузового калькулятора
       «#calc-new .calc #gruz .row:nth-child(5){display:flex;flex-wrap:wrap-reverse}»
       (@media max-width:600px). Наша строка «Не подошел бюджет? / Предварительный
       расчет» лежит внутри #gruz и случайно является 5-м .row, поэтому попадала под
       этот селектор. wrap-reverse укладывает перенесённые элементы ВВЕРХ — и в
       диапазоне ~501–575px «Предварительный расчет» оказывался НАД инфо-блоком.
       Чужое правило не трогаем (оно нужно другим блокам #gruz) — точечно возвращаем
       обычный wrap: если по ширине не помещается рядом, расчёт уходит ВНИЗ.
       ≤500px здесь ничего не меняет: там flex-direction:column и переносов нет.
       row-gap — потому что gap:15px объявлен только в @media ≤500px, и в диапазоне
       501–600px перенесённый расчёт вплотную слипался с инфо-блоком (зазор 0).
       Именно row-gap, а не gap: он задаёт расстояние ТОЛЬКО между перенесёнными
       строками (и между элементами колонки при ≤500px). Взяли бы gap — добавился бы
       ещё и column-gap, и в режиме «рядом» зазор стал бы 30px вместо нынешних 15px
       (там его уже даёт padding-right:15px левой обёртки). */
@media (max-width: 600px) {
  .budget-calc-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 15px !important;
  }
}
/* ═══ Скидка на попутное авто: ссылка-кнопка + всплывающее окно ═══════════
       Инфо-блок «Не подошел бюджет? / ЗАКАЖИТЕ ПОПУТНОЕ АВТО СО СКИДКОЙ ДО -30%»
       убран из калькулятора и перенесён во всплывающее окно
       #budget-discount-modal. Открывает его красная ссылка-кнопка под
       «Предварительным расчетом» — только в калькуляторе переезда и только на
       вкладке «Межгород» (класс .is-off навешивает JS ниже).
       Освободившееся слева место какое-то время занимал заголовок формы; с
       15.08.2026 он вернулся на своё исходное место над полями, а слева от
       расчёта теперь может стоять мини-карта маршрута.

       ВАЖНО: анимации вариантов НАМЕРЕННО не обёрнуты в
       @media (prefers-reduced-motion: reduce). У заказчика в Windows выключена
       анимация интерфейса, браузер отдаёт reduce, и такой медиазапрос уже
       однажды полностью погасил эффекты кнопки «Позвонить» (см. site.css). */
/* Строка, убранная из калькулятора, но оставленная в DOM: надпись «Или
       закажите на сайте» (воровала место и давала лишний отступ).
       Удалять узлы .row нельзя: вёрстка калькулятора в calc.css завязана на
       #calc-new .calc #gruz .row:nth-child(N), а display:none нумерацию
       :nth-child не меняет.
       Прячем строку ЦЕЛИКОМ, а не внутренний <p>: у пустой строки остались бы
       её собственные отступы. Селектор с id — чтобы гарантированно перебить
       «.calc-form-title{display:inline-block!important}» из @media ≤500px выше. */
#calc-new .calc #gruz .row.calc-row-hidden,
.calc .row.calc-row-hidden {
  display: none !important;
}
/* Вкладки «Межгород» / «Город и область»: вторая переносилась на 2–3 строки
       на десктопных ширинах до 1200px (на 992–1199 — в две строки, на 768–991 —
       в три), из-за чего вкладки становились разной высоты.
       Причина — боковые поля кнопки 45px. Сама кнопка display:block, её ширину
       задаёт колонка, а НЕ padding, поэтому поля просто съедали место под текст:
       на 992px внутренняя ширина оставалась 105px при длине надписи 153px.
       Уменьшаем поля — на размер самой кнопки это не влияет вообще, зато тексту
       хватает места. white-space:nowrap — страховка от переноса.
       На 768–991px колонка (140px) уже самой надписи, одними полями не обойтись,
       поэтому там вкладкам отдаётся больше ширины за счёт пустых колонок по краям. */
@media (min-width: 768px) {
  #calc-new .calc .calcs .subcalc {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #calc-new .calc .calcs > div:nth-child(1),
  #calc-new .calc .calcs > div:nth-child(4) {
    width: 16.66666667%;
  }
  #calc-new .calc .calcs > div:nth-child(2),
  #calc-new .calc .calcs > div:nth-child(3) {
    width: 33.33333333%;
  }
}
/* Подсказка «Откуда и куда — один и тот же город»: появляется, когда
       калькулятор сам открыл вкладку «Город и область»
       (см. public_html/js/calc/same-city.js).
       Правило [hidden] прописано явно и ПЕРВЫМ: display:flex ниже иначе
       перебил бы браузерное [hidden]{display:none} и подсказка висела бы
       всегда. Цвета — жёлтый акцент калькулятора на его зелёном фоне. */
.calc-same-city-note[hidden] {
  display: none !important;
}
.calc-same-city-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #FFE500;
  border-radius: 10px;
  background: rgba(255, 229, 0, 0.12);
  color: #FFF;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}
.calc-same-city-note__text {
  flex: 1 1 auto;
}
.calc-same-city-note__close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFE500;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.calc-same-city-note__close:hover,
.calc-same-city-note__close:focus {
  color: #FFF;
}
@media (max-width: 600px) {
  .calc-same-city-note {
    font-size: 14px;
    line-height: 19px;
    padding: 10px 12px;
  }
}
/* Правая колонка: расчёт + ссылка-кнопка под ним.
       grid с одной колонкой шириной max-content: ширину колонки задаёт самый
       широкий элемент (блок «Предварительный расчет»), а элементы по умолчанию
       растягиваются на всю колонку — так кнопка получает ровно ширину блока с
       расчётом на ЛЮБОЙ ширине экрана. justify-content: center нужен для ≤500px,
       где calc-правило «.budget-calc-row > div > div{width:100%!important}»
       растягивает саму обёртку: колонка остаётся по содержимому и стоит по центру. */
.budget-calc-right {
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
}
/* Обёртка кнопки. Кнопка показывается ТОЛЬКО когда выполнены оба условия:
         .is-off    снимается — открыта вкладка «Межгород» (следит registerJs ниже);
         .is-empty  снимается — предварительный расчёт больше нуля (этим ведает
                    js/calc/price-box.js, там же, где рамка получает цифры).
       Прячем не через display:none, а схлопыванием max-height + opacity —
       так кнопка ПОЯВЛЯЕТСЯ ПЛАВНО и при этом в скрытом состоянии не занимает
       места (пустого отступа под расчётом нет). max-height с запасом: кнопка
       ~40px, на узких экранах с переносом текста ~60px. */
.calc-discount-cta {
  display: block;
  width: 100%;
  max-height: 100px;
  margin-top: 12px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}
.calc-discount-cta.is-off,
.calc-discount-cta.is-empty {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Кнопка «Есть предложение дешевле» (утверждённый вариант 10.0 — без анимации):
       красная плашка с пунктирной рамкой во всю ширину блока «Предварительный
       расчет» (ширину даёт grid у .budget-calc-right, см. выше). */
.cdl-coupon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  color: #fff;
  background-color: #FD1D1D;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  font-family: Montserrat, "Proxima Nova Rg", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cdl-coupon:hover,
.cdl-coupon:focus {
  color: #fff;
  background-color: #E00000;
  text-decoration: none;
  outline: none;
}
/* ─── Всплывающее окно с промо-блоком ───────────────────────────────────
       Стили переехали в public_html/css/calc-promo.less (правка 10.08.2026,
       второй список задач). Причина: заказчик попросил такое же окно и в
       калькуляторе ГРУЗОПЕРЕВОЗОК при маршруте дальше 500 км, а держать сотню
       строк вёрстки и стилей в двух вьюхах — значит развести два источника
       правды. Теперь разметка окна в общем партиале
       modules/calc/widgets/views/_promo_budget.php, стили — в calc-promo.less,
       и партиал сам их подключает. Здесь не осталось ничего про окно. */
/* ═══ Вкладка «Город и область»: своё предложение ═══════════════════════
       Кнопка выглядит ровно так же, как на «Межгороде» (тот же .cdl-coupon) —
       по требованию заказчика. Отличается действие (окно про тариф «Буряков —
       Экспресс») и условие показа: открыта вкладка «Город и область».

       Правка 03.08.2026. По умолчанию кнопка СКРЫТА, показывает её только
       класс .is-shown — его вешает скрипт через 0,75 секунды после открытия
       вкладки. Раньше видимостью управляли два «отрицательных» класса
       (.is-off по вкладке и .is-empty по сумме расчёта), и кнопка не
       появлялась, если расчёт не дошёл до цены: на «Городе и области» цена
       считается через ymaps.route, а этот вызов иногда не отвечает — тогда
       сумма остаётся 0 и кнопка молчала. Предложение про экспресс от суммы не
       зависит, поэтому теперь оно завязано только на вкладку.

       Появление намеренно небыстрое (.5s) и снизу вверх: человек видит, что
       предложение «нашлось» после короткого поиска, а не мигнуло сразу. */
.calc-express-cta {
  display: block;
  width: 100%;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease;
}
.calc-express-cta.is-shown {
  max-height: 100px;
  margin-top: 12px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* У заказчика в Windows отключены анимации — браузер в таком режиме сообщает
       prefers-reduced-motion: reduce. Убирать плавность целиком нельзя: именно
       её и просили, а на машине заказчика мы бы её и не увидели. Поэтому
       оставляем мягкое проявление (только прозрачность), а движение —
       выезд снизу и раскрытие по высоте — выключаем: неприятны как раз они.
       Задержка 0,75 с живёт в скрипте и от режима не зависит. */
@media (prefers-reduced-motion: reduce) {
  .calc-express-cta {
    transform: none;
    transition: opacity 0.5s ease;
  }
  .calc-express-cta.is-shown {
    transform: none;
  }
}
/* Окно «У вас малая перевозка?». Оформление намеренно ДРУГОЕ, чем у окна
       «Не подошел бюджет?»: там зелёный градиент во всю плашку, здесь светлая
       карточка с жёлтой лентой-шапкой — тариф «Экспресс» отдельная услуга, и
       путать их не надо. Селекторы длинные по той же причине, что и у соседа:
       перебиваем общее правило .modal .modal-dialog .modal-content из site.css. */
.modal.express-offer-modal .modal-dialog {
  max-width: 560px;
  display: flex;
  align-items: center;
  min-height: calc(100% - 60px);
  margin: 30px auto;
}
.modal.express-offer-modal .modal-dialog .modal-content {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 0 0 24px;
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-family: Montserrat, "Proxima Nova Rg", Arial, sans-serif;
}
.modal.express-offer-modal .close {
  position: absolute;
  top: 8px;
  right: 14px;
  color: #235C33;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.55;
  text-shadow: none;
  z-index: 2;
}
.modal.express-offer-modal .close:hover,
.modal.express-offer-modal .close:focus {
  color: #235C33;
  opacity: 1;
}
/* Жёлтая лента-шапка со значком и названием тарифа. */
.eom__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 46px;
  background: linear-gradient(90deg, #FFE500 0%, #FFD400 100%);
  color: #235C33;
}
.eom__ribbon svg {
  display: block;
}
.eom__brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Текст в окне один (правка 03.08.2026), поэтому нижний отступ у него
       больше — раньше это место занимал пояснительный абзац .eom__text. */
.eom__lead {
  margin: 22px 24px 20px;
  color: #235C33;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.eom__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 24px;
}
.eom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  padding: 11px 26px;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: Montserrat, "Proxima Nova Rg", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eom__btn--main {
  background: #235C33;
  border-color: #235C33;
  color: #fff;
}
.eom__btn--main:hover,
.eom__btn--main:focus {
  background: #1B4827;
  border-color: #1B4827;
  color: #fff;
  text-decoration: none;
  outline: none;
}
.eom__btn--ghost {
  background: #fff;
  border-color: #235C33;
  color: #235C33;
}
.eom__btn--ghost:hover,
.eom__btn--ghost:focus {
  background: rgba(35, 92, 51, 0.08);
  color: #235C33;
  text-decoration: none;
  outline: none;
}
@media (max-width: 767px) {
  .modal.express-offer-modal .modal-dialog {
    min-height: calc(100% - 20px);
    margin: 10px;
  }
}
@media (max-width: 500px) {
  /* Правое поле больше левого не делаем — ленту держим симметричной, но
           запас под крестик нужен обеим сторонам, иначе на 320px он наезжает
           на слово «ЭКСПРЕСС». */
  .eom__ribbon {
    gap: 10px;
    padding: 16px 46px;
  }
  .eom__brand {
    font-size: 16px;
  }
  .eom__lead {
    font-size: 19px;
    margin: 18px 16px 18px;
  }
  .eom__actions {
    padding: 0 16px;
  }
  .eom__btn {
    flex: 1 1 100%;
    font-size: 15px;
  }
}