/* dev.css — все наши доработки и исправления по сайту. style.css не трогаем.
   Файл лежит в public/assets/ и не версионируется, подключается с ?v=filemtime. */

/* Блок модельного ряда на главной: контейнер счётчика акции.
   В style.css правило висит на #getting-started, но карточек в блоке столько,
   сколько активных кузовов, поэтому id заменён на класс js-countdown
   (инициализация — initCountdown() в dev.js). Без этого правила счётчик
   разъезжается в столбик. */
.car__types-form-counter-inner .js-countdown {
    display: flex;
    align-items: center;
}

/* Кнопка сравнения комплектаций неактивна, пока не выбрана ни одна:
   иначе клик молча ничего не делает и выглядит поломкой. Состояние ставит
   initComplectationCompare() в dev.js через aria-disabled. */
.js-btn-compare-complectation[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

/* --- Страница сравнения комплектаций (/auto/compare) ----------------------
   Свои стили страница носит внутри вьюшки template-compare: инлайновый <style>
   в секции контента, то есть ниже этого файла по документу. Поэтому правила
   здесь идут с лишним классом-предком .main--compare — при равном весе они бы
   иначе проиграли тому блоку. */

/* Плашка стояла var(--colorItem), а на этом сайте это #090909 — выходила
   глухо-чёрной, цена красным по чёрному не читалась. Берём тот же серый, что
   у .packaging__title на странице кузова: там такая же плашка комплектации. */
.main--compare .compare-page .resp-table__header {
    background: #DBDBDB;
    color: var(--textColor);
}

/* .resp-table__col из библиотеки — flex-строка, поэтому название комплектации
   и цена вставали рядом и цена ломалась на две строки. */
.main--compare .compare-page .resp-table__header .resp-table__col {
    flex-direction: column;
}
.main--compare .compare-page .resp-table__header .resp-table__col span {
    white-space: nowrap;
}

/* style.css сайта задаёт .swiper-button-prev/next { position: static } — там
   стрелки стоят в ряд под слайдером — и грузится после swiper, поэтому в шапке
   таблицы обе стрелки сваливались в левый верхний угол плашки друг под другом.
   Библиотека рассчитывает на абсолютное позиционирование: top, transform и
   left/right: -16px у неё уже прописаны. */
.main--compare .compare-page .resp-table__header .resp-table__prev,
.main--compare .compare-page .resp-table__header .resp-table__next {
    position: absolute;
}

/* Песочный #E3DCD3 — из палитры сайта-эталона, здесь нейтральный серый. */
.main--compare .compare-page .resp-table__row-heading {
    background: #EAEFEF;
}

/* Одна комплектация: библиотека вешает --one-column и перекраивает раскладку
   под себя — сдвигает шапку на calc(15% + 20px) и сужает левую колонку до 15%,
   из-за чего названия параметров рвутся на четыре строки, а галочка перестаёт
   совпадать с заголовком (у шапки свои left/width: 30%/70%). Держим те же 30%. */
@media (min-width: 769px) {
    .main--compare .compare-page .resp-table.--one-column .resp-table__header-swiper {
        padding-left: 0;
    }
    .main--compare .compare-page .resp-table.--one-column .resp-table__row-content-heading {
        flex: 0 0 30%;
    }
    .main--compare .compare-page .resp-table.--one-column .resp-table__row-content {
        gap: 0;
    }
}

/* Мобильная, одна комплектация: строки библиотека раскладывает вертикально во
   всю ширину, а шапка оставалась сдвинутой на 40% — название и цена уезжали к
   правому краю плашки. Отдаём плашке всю ширину, заголовок встаёт по центру,
   ровно над галочкой. Брейкпоинт 768px — тот же, что у библиотеки. */
@media (max-width: 768px) {
    .main--compare .compare-page .resp-table.--one-column .resp-table__header-swiper {
        left: 0;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Контейнер на телефоне занимает почти всю ширину, и вынос стрелок на -16px
       обрезался краем экрана — держим их внутри плашки. */
    .main--compare .compare-page .resp-table__header .resp-table__prev {
        left: 2px;
    }
    .main--compare .compare-page .resp-table__header .resp-table__next {
        right: 2px;
    }
}

/* --- Страница «Правовая информация» (/terms) ------------------------------
   Перенесено с сайта-эталона, где эти правила лежат отдельным info.css.
   Всё заключено внутрь .row_politic намеренно: .hidden, .mb-3, .text-x0 и
   прочие — утилитарные имена, глобально их вешать нельзя, разъедутся другие
   блоки сайта. */
.row_politic {
    display: flex;
}
.row_politic ul {
    list-style: initial;
    padding: 25px;
}
.row_politic li {
    position: relative;
    padding-top: 5px;
}
.row_politic ul ul {
    list-style: square;
}
.row_politic ul ul ul {
    list-style: circle;
}
.row_politic .column_politic_30 {
    background: #f8f8f8;
    padding: 10px;
    min-height: 100vh;
    flex: 30%;
}
.row_politic .column_politic_70 {
    background: #fff;
    min-height: 100vh;
    padding: 10px;
    flex: 70%;
}
.row_politic .menu-info__content {
    padding: 50px;
    position: relative;
    max-height: none;
    background: none;
    overflow: visible;
}
.row_politic .text-x0 {
    font-size: 25px;
}
.row_politic .text-x4 {
    font-size: 35px;
    line-height: 114%;
    letter-spacing: -0.02em;
    font-weight: 700;
    padding-bottom: 50px;
    display: block;
}
.row_politic .text-x5 {
    font-size: 25px;
    padding: 25px;
}
.row_politic .text-s2i, .row_politic .text-s2i-b {
    font-size: 15px;
    line-height: 167%;
}
.row_politic .text-s2i {
    font-weight: 400;
}
.row_politic .color-black, .row_politic .color-primary-black {
    color: #05141f;
}
.row_politic .color-dark-gray {
    color: #697279;
}
.row_politic .mb-0 {
    margin-bottom: 30px;
}
.row_politic .mb-3 {
    margin-bottom: 15px;
}
.row_politic .mb-4 {
    margin-bottom: 20px;
}
.row_politic .mb-6 {
    margin-bottom: 30px;
    padding: 25px;
}
.row_politic .section-break {
    margin: 20px 0 15px;
    border: 1px solid #05141f;
}
.row_politic .nuxt-link-active {
    font-weight: bold;
}
.row_politic .btn-politic {
    cursor: pointer;
}
.row_politic .hidden {
    display: none;
}

@media (max-width: 600px) {
    .row_politic .column_politic_30 {
        display: none;
    }
    .row_politic .politic {
        display: contents;
    }
    .row_politic .section-break {
        display: block;
    }
}

/* --- Подсветка незаполненных полей ----------------------------------------
   Класс has-error вешает markInvalidFields() в dev.js. У .input__prem в
   style.css border: none, поэтому рамку рисуем внутренней тенью — обычная
   рамка сдвинула бы поле на 2px. У согласия класс висит на label: сам чекбокс
   скрыт (opacity: 0), видно только .main-form-checkbox-checkmark. */
.input__prem.has-error {
    box-shadow: inset 0 0 0 2px #d92d20;
}
.input__prem.has-error:focus {
    box-shadow: inset 0 0 0 2px #b42318;
}
.main-form-checkbox.has-error .main-form-checkbox-checkmark {
    border-color: #d92d20;
    box-shadow: 0 0 0 1px #d92d20;
}

/* Селекты прячет select2 и рисует свою кнопку следующим элементом. */
select.has-error + .select2 .select2-selection {
    box-shadow: inset 0 0 0 2px #d92d20;
}
/* --- Фон слайда верхнего баннера ------------------------------------------
   Слайды приходят из коллекции, поэтому фон лежит картинкой в разметке.
   Под градиентом .intro__slider-item::after (у него z-index: 1) и под
   содержимым .intro__slider-item-inner (z-index: 2). */
.intro__slider-item .intro__slider-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.intro__slider-item .intro__slider-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}