/* ===== Мобильные исправления вёрстки =====
   Отдельный файл, чтобы не конфликтовать с правками подрядчика.
   Подключается последним, правит только мобильные ширины. */

@media (max-width: 767px) {

    /* --- Экраны входа и восстановления пароля (welcome/passwordrecovery) --- */
    .zl__welcome {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100svh; /* запасной вариант выше: старые iOS не знают svh */
    }
    .zl__welcome-block {
        min-width: 0;
        width: 100%;
    }
    .zl__welcome-info {
        position: static;
        height: auto;
        padding: 30px 15px;
    }
    .zl__welcome-infoblock {
        width: 100%;
    }
    .zl__welcome-tile {
        width: auto;
        max-width: 300px;
        margin: 0 auto 40px;
        flex-direction: column;
        align-items: center;
    }
    .zl__welcometile {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 150px;
        margin-bottom: 16px;
    }
    .zl__welcometile-text {
        position: static;
        width: auto;
        margin-top: 14px;
    }
    .zl__welcome-logo-footer {
        margin-left: 0;
        text-align: center;
    }
    .zl__welcome-content {
        height: auto;
    }
    .zl__welcome-slider,
    .zl__welcome-img {
        height: 60vh;
        height: 60svh;
    }
    /* Компенсация отрицательных отступов Bootstrap .row внутри формы входа */
    .zl__welcome-shortcode {
        max-width: 100%;
        padding: 0 15px;
    }

    /* --- Калькулятор хранения: поле ввода --- */
    /* Подпись «кг» стояла абсолютом слева и отъедала место у числа, а само
       поле в ширину 100% сжималось до сорока пикселей — пятизначное значение
       (максимум 10000) не помещалось. Подпись уводим вправо, поле считаем
       по border-box. */
    .zl__storagecalc-сargo-input.zl__input-range {
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }
    .zl__storagecalc-сargo-input-text {
        box-sizing: border-box;
        width: calc(100% - 30px);
        max-width: 100%;
    }
    .zl__storagecalc-сargo-input.kg span,
    .zl__storagecalc-сargo-input.m3 span {
        left: auto;
        right: 12px;
    }

    /* --- Модалки направлений (ЛК): фиксированные 380px --- */
    .zl__modal-direction-search,
    .zl__modal-input-icon {
        width: 100%;
        max-width: 100%;
    }

    /* --- Широкие таблицы в контенте (тарифы, страхование) --- */
    /* Таблица тарифов — 513px при экране 360px. Правило overflow-x: clip
       ниже убирает прокрутку всей страницы, поэтому без собственной
       прокрутки у таблицы правые колонки были бы просто обрезаны
       и недостижимы. Даём прокрутку самой таблице. */
    figure.wp-block-table,
    .zl__page-content .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    figure.wp-block-table > table,
    .zl__page-content .wp-block-table > table {
        min-width: 100%;
    }
}

@media (max-width: 575px) {
    .zl__welcome-slider,
    .zl__welcome-img {
        height: 45vh;
        height: 45svh;
    }
}

@media (max-width: 479px) {
    /* --- Блок «4 вида грузового транспорта» (тарифы на авто) --- */
    /* Картинка 400px шире круга 320px и сдвинута на -40px, значит карточке
       нужно не меньше 400px, а экрану — не меньше 430px: контейнер съедает
       по 15px с каждой стороны. Колонки WordPress встают в столбик до 782px,
       поэтому с 430px и выше карточка занимает всю ширину и места хватает.
       Прежний порог 767px ужимал картинку и там, где она помещалась целиком. */
    .block__cargo-transport-img {
        width: 320px;
        max-width: 100vw;
        transform: none;
    }
}

/* --- Виджет Битрикс24 и другие сторонние скрипты: их fixed-блоки шире экрана.
   Запрещаем горизонтальную прокрутку страницы. Именно clip, а не hidden:
   clip не создаёт контейнер прокрутки и потому не ломает position: sticky
   (в теме он есть — .sticky-top в расчёте стоимости заказа). --- */
html,
body {
    overflow-x: clip;
}
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}