/* ============================================================
   Окно «У вас большой переезд или малая перевозка?»

   Показывается в калькуляторе грузоперевозок, когда маршрут вышел короче
   100 км. Раньше на этом месте был отказ «работаем только по межгороду» —
   теперь развилка на нужный калькулятор (js/calc/gruz-redirect.js).

   Обе карточки намеренно равны по весу: человек и правда может не знать,
   переезд у него или перевозка, подталкивать к одному варианту нечестно.
   ============================================================ */
.gruz-redirect {
  /* Подзаголовка под вопросом больше нет (правка 01.08.2026), поэтому отступ
       до карточек держит сам заголовок. */
  /* Две равные колонки: одинаковая ширина и высота, кнопки на одном уровне. */
  /* Занимает свободное место, чтобы кнопки стояли на одной высоте. */
}
.gruz-redirect .modal-dialog {
  max-width: 720px;
  width: auto;
}
.gruz-redirect .modal-content {
  box-sizing: border-box;
  padding: 28px 28px 24px;
  border: 0;
  border-radius: 14px;
}
.gruz-redirect .modal-content *,
.gruz-redirect .modal-content *::before,
.gruz-redirect .modal-content *::after {
  box-sizing: inherit;
}
.gruz-redirect__close {
  position: absolute;
  top: 10px;
  right: 14px;
  opacity: 0.5;
  font-size: 28px;
  line-height: 1;
}
.gruz-redirect__close:hover,
.gruz-redirect__close:focus {
  opacity: 1;
}
.gruz-redirect__title {
  margin: 0 0 22px;
  padding-right: 24px;
  color: #333333;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.gruz-redirect__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
}
.gruz-redirect__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 22px 18px 18px;
  border: 2px solid #DCDCDC;
  border-radius: 12px;
  background: #fff;
  color: #333333;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.gruz-redirect__card:hover,
.gruz-redirect__card:focus {
  border-color: #235C33;
  box-shadow: 0 8px 22px rgba(35, 92, 51, 0.14);
  color: #333333;
  text-decoration: none;
  transform: translateY(-2px);
}
.gruz-redirect__card:focus-visible {
  outline: 3px solid #FFE500;
  outline-offset: 2px;
}
.gruz-redirect__card-title {
  color: #235C33;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}
.gruz-redirect__card-text {
  flex: 1 1 auto;
  color: #6B6B6B;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.gruz-redirect__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* тач-зона */
  margin-top: 4px;
  padding: 11px 20px;
  border-radius: 10px;
  background: #FFE500;
  color: #333333;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .gruz-redirect .modal-content {
    padding: 22px 16px 18px;
  }
  .gruz-redirect__title {
    font-size: 19px;
    margin-bottom: 16px;
  }
  .gruz-redirect__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gruz-redirect__card {
    padding: 18px 14px 14px;
  }
  .gruz-redirect__card-title {
    font-size: 18px;
  }
}
/* ============================================================
   Вместо цены — кнопка «Ваш запрос относится к другому тарифу»

   Доработка 10.08.2026 по замечанию заказчика. Раньше развилка была только
   предложением: за окном калькулятор грузоперевозок всё равно считал городскую
   перевозку и показывал «Итого: 112 Р». Закрыл окно — остался с этой цифрой,
   а она неверная по сути: такой тариф к городским переездам не применяется.

   Теперь цифры прячутся, а на их месте стоит кнопка, открывающая развилку
   заново. Ставит и снимает её js/calc/gruz-redirect.js.

   ПОЧЕМУ ОБНУЛЯЕМ ШРИФТ У РАМКИ. «Итого: 0 Р» — это два тега и голый текст
   между ними; текст классом не спрячешь. Поэтому размер шрифта обнуляется у
   всей рамки, а кнопке задаётся свой.

   ПОЧЕМУ !important. Цену оформляет правило `#calc-new .calc #gruz .row
   .price-wrap` — два идентификатора и три класса. Без !important оно перебивает
   что угодно разумное: в первом же скриншоте «ИТОГО:  Р» осталось на экране в
   полный рост. Тот же приём и по той же причине уже применён к надписи
   «Идет расчет» (.calc-price-quiet в site.css).

   ПОЧЕМУ display: none У ЦИФР, а не visibility. При visibility узлы остаются в
   потоке: строка высотой 24 px никуда не девается, кнопку сносит вниз, и рамка
   раздувается с 65 до 125 px — блок под ней прыгает. Замерено на скриншоте.
   Расчёту это не мешает: он пишет цифры через textContent, а не читает размеры.
   Отступы рамки в этом состоянии тоже уменьшаем — так высота с кнопкой в две
   строки выходит около 70 px против обычных 65 px, то есть на глаз никак.
   ============================================================ */
/* ============================================================
   Колонка цены: собственный отступ снизу

   Правка 11.08.2026 по двум замечаниям заказчика: «кнопка "Есть предложение
   дешевле" наезжает на другой элемент при появлении» и «кнопка "Итого: Р Ваш
   запрос относится к другому тарифу…" тоже наезжает на другой элемент».

   ПРИЧИНА ОДНА НА ДВА ЗАМЕЧАНИЯ. У колонки с ценой нет своего нижнего отступа.
   Под рамкой «Итого» пусто только потому, что соседняя колонка слева выше —
   зазор случайный. А кнопка «Заказать машину» в следующей строке ещё и поднята
   на 4 px (site.css: `#calc-new .calc #gruz .row .form-group .btn{margin-top:-4px}`).
   Значит любой блок, выросший под ценой, гарантированно упирается в неё.

   ЗАМЕРЕНО в браузере (Puppeteer, зазор = верх кнопки «Заказать» − низ колонки):
       обычный вид, рамка 65 px .................. +24 px
       кнопка «другой тариф», рамка 103 px ....... −4 px  (наложение)
       «Есть предложение дешевле» ................ −4 px  (наложение)
   Наложение всегда ровно 4 px и не растёт: колонки распирают строку, поэтому
   «съедается» именно поднятая кнопка. На глаз это выглядит как слипшиеся блоки —
   красная плашка лежит на жёлтой кнопке, а две жёлтых сливаются в одно пятно.

   ПОЧЕМУ 28 px. Нужен тот же зазор 24 px, что в обычном виде (чтобы вид без
   кнопок не поменялся вообще), плюс 4 px на подъём кнопки «Заказать»: 24 + 4.
   Проверено: в обычном виде колонка становится ровно такой же по высоте, как
   соседняя, и строка не растёт ни на пиксель.

   ПОЧЕМУ ОТ 601 px. Ниже этого предела колонки идут друг под другом, и там у
   кнопки «Заказать машину» свой отступ `margin-top: 60px` (site.css,
   @media max-width:600px) — наложения нет, а лишний отступ только раздувал бы
   мобильную вёрстку. 600 px — родной предел калькулятора, все его медиа-запросы
   стоят на нём же.

   ПОЧЕМУ НА КОЛОНКЕ, А НЕ НА КАЖДОЙ КНОПКЕ. Отступ на самих кнопках пришлось бы
   заводить трижды (кнопка тарифа, кнопка скидки, состояние отказа) и добавлять
   четвёртый раз при следующей доработке. Колонка же одна, и правило работает для
   любого содержимого — включая то, чего ещё нет.
   ============================================================ */
@media (min-width: 601px) {
  .calc-price-col {
    padding-bottom: 28px;
  }
}
/* Рамка «Итого: … Р», когда вместо цены стоит кнопка.
   Боковые отступы обязательны (правка 10.08.2026 по замечанию заказчика:
   «Она слепляется по бокам с контейнером цены, не красиво»). В site.css у рамки
   стоит `padding: 20px 0` — по бокам ноль, поэтому кнопка упиралась в пунктир,
   между ними оставался 1 пиксель. Перебиваем через !important: правило в
   site.css специфичнее (`#calc-new .calc #gruz .row .price-wrap`). */
.price-wrap.calc-other-tariff-on {
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 12px 16px !important;
}
.price-wrap.calc-other-tariff-on .price,
.price-wrap.calc-other-tariff-on .preprice {
  display: none !important;
}
/* Кнопка «Ваш запрос относится к другому тарифу».

   ЗАМЕТНОСТЬ (то же замечание заказчика: «нужно, чтобы она была более заметная
   для пользователя, чтобы он понял, куда нажимать, если случайно закрыл попап»).
   Было: жёлтый контур на тёмно-зелёном фоне — читалось как надпись, а не как
   кнопка. Стало:
     заливка фирменным жёлтым и тёмный текст — тот же акцент, которым набрана
         цена, поэтому взгляд попадает туда же, куда попадал за ценой;
     вторая строка «Нажмите, чтобы выбрать подходящий →» прямо говорит, что это
         кнопка и что будет после нажатия;
     мягкое свечение по краю вместо анимации. Анимацию сознательно НЕ делаю: у
         заказчика анимации Windows отключены, браузер сообщает
         prefers-reduced-motion: reduce, и мигание он всё равно не увидит —
         заметность обязана держаться на статике. */
.calc-other-tariff {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  /* тач-зона с запасом */
  max-width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #FFE500;
  box-shadow: 0 0 0 4px rgba(255, 229, 0, 0.18);
  color: #333333;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  text-align: center;
  text-transform: none;
  /* рамка стоит на uppercase */
  white-space: normal;
  cursor: pointer;
  /* Своя типографика: у рамки font-size: 0, наследовать нечего. */
  /* margin, а не flex-gap: gap в flex не понимают Safari до 14.1, а строки
       тогда слипаются — на телефонах заказчика это видно сразу. */
  /* Планшетная полоса Bootstrap: колонка `col-sm-4` здесь всего ~197 px, и на
       15 пикселях основной текст разваливался на четыре строки — кнопка
       превращалась в башню 146 px высотой. Замерено на 768 px. */
  /* Видимый контур для клавиатуры: на жёлтом фоне стандартный синий ободок
       браузера почти не читается. */
}
.calc-other-tariff.is-on {
  display: inline-flex;
}
.calc-other-tariff__text {
  display: block;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25 !important;
}
.calc-other-tariff__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  opacity: 0.72;
}
@media (min-width: 768px) and (max-width: 991px) {
  .calc-other-tariff {
    padding: 10px 10px;
  }
  .calc-other-tariff__text {
    font-size: 13px !important;
  }
  .calc-other-tariff__hint {
    font-size: 11px !important;
  }
}
.calc-other-tariff:hover {
  background: #d6c000;
  box-shadow: 0 0 0 6px rgba(255, 229, 0, 0.26);
}
.calc-other-tariff:focus {
  background: #d6c000;
  outline: 2px solid #fff;
  outline-offset: 2px;
}