/* ═══════════════════════════════════════════════════════════════
   mi-theme.css — Multi-1 (Mono Editorial · мини-старт)
   ШАГ 1: только палитра + шрифты + hover-анимации.
   НИКАКИХ radius / height / padding / font-size / layout.
   Весь контент остаётся виден.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 0. Шрифты ─── */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ─── 1. Mono Editorial — палитра + базовые токены ─── */
:root{
    --mi-white:         #FFFFFF;
    --mi-off-white:     #FAFAF7;
    --mi-carbon:        #0A0A0A;
    --mi-text-soft:     #525252;
    --mi-text-mute:     #A3A3A3;
    --mi-border:        #E5E5E5;
    --mi-surface-mute:  #EFEFEF;
    --mi-surface-dark:  #18181B;
    --mi-red:           #DC2626;
    --mi-red-hover:     #B91C1C;

    --mi-font-body: "Manrope", Arial, sans-serif;
    --mi-font-head: "Manrope", Arial, sans-serif;
    --mi-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Перекрытие 22 шаблонных vitmp-токенов (vitmp inline-style требует !important) */
    --primary:                        #DC2626 !important;
    --secondary:                      #525252 !important;
    --primary-color:                  #DC2626 !important;
    --secondary-color:                #525252 !important;
    --body-text-color:                #0A0A0A !important;
    --body-bg-color:                  #FFFFFF !important;
    --body-bg-secondary-color:        #FAFAF7 !important;
    --card-color:                     #f5f5f5 !important;
    --header-bg-color:                #FFFFFF !important;
    --header-text-color:              #0A0A0A !important;
    --main-btn-color:                 #0A0A0A !important;
    --main-btn-text-color:            #FFFFFF !important;
    --secondary-btn-color:            #FFFFFF !important;
    --secondary-btn-text-color:       #0A0A0A !important;
    --mark-link-bg-color:             #FFFFFF !important;
    --mark-link-border-color:         #E5E5E5 !important;
    --mark-link-text-color:           #0A0A0A !important;
    --hero-banner-color:              rgba(0,0,0,.55) !important;
    --hero-banner-text-color:         #FFFFFF !important;
    --banner-color:                   #0A0A0A !important;
    --promo-credit-banner-bg-color:   #0A0A0A !important;
    --promo-credit-banner-text-color: #FFFFFF !important;
    --term-block-number-bg-color:     #DC2626 !important;
    --term-block-number-text-color:   #FFFFFF !important;
}

/* ─── 2. Шрифты — глобальная замена Mulish → Manrope ─── */
body,
input, button, textarea, select,
.btn,
p, li, td, th, label, span,
h1, h2, h3, h4, h5, h6,
.btn.btn_megasave p,
.btn.btn_megasave span{
    font-family: var(--mi-font-body) !important;
}
/* Цифры/мета/цены/телефон — IBM Plex Mono */
.catalog-item__pricing-new,
.catalog-item__pricing-old,
.models-carousel__pricing-main,
.car-price,
a[href^="tel:"],
.term-block-number,
.mi-meta{
    font-family: var(--mi-font-mono) !important;
}

/* ─── 3. Хардкод-цвета шаблона, которые :root не достанет ─── */
/* Popup-форма (старый rgba синий) */
.popup-preset__form{ background: rgba(10,10,10,.88) !important; }
.popup-preset__form-fields-button{ color: var(--mi-carbon) !important; background-color: var(--mi-white) !important; }
.popup-preset__form-fields-button:hover{
    background-color: var(--mi-red) !important;
    color: var(--mi-white) !important;
}
.popup-preset__form-fields-button:hover *{ color: var(--mi-white) !important; fill: var(--mi-white) !important; }
.popup-preset__form-fields-confidentiality a{ color: var(--mi-red) !important; }
.popup-preset__input{ background-color: rgba(255,255,255,.08) !important; color: var(--mi-white) !important; }
.popup-preset__input::placeholder{ color: rgba(255,255,255,.5) !important; }

/* .popup-preset__wrap — vitmp синий gradient #6E96E3 → carbon с red-glow
   в правом нижнем углу (как у .model-total). */
.popup-preset__wrap{
    background: radial-gradient(circle at 100% 100%, var(--mi-red) 0%, var(--mi-carbon) 60%) !important;
}
/* Инпуты внутри popup-preset__wrap: чёткий белый текст на тёмном wrap. */
.popup-preset__wrap .popup-preset__input,
.popup-preset__wrap .app-input,
.popup-preset__wrap input[type="text"],
.popup-preset__wrap input[type="tel"],
.popup-preset__wrap input[type="email"]{
    background-color: rgba(255,255,255,.12) !important;
    color: var(--mi-white) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}
.popup-preset__wrap .popup-preset__input::placeholder,
.popup-preset__wrap .app-input::placeholder,
.popup-preset__wrap input::placeholder{
    color: rgba(255,255,255,.7) !important;
}

/* .popup-income-statements .popup-preset__form — vitmp использует синий
   linear-gradient rgba(0,57,166,.3). Перекрываем на carbon. */
.popup-income-statements .popup-preset__form{
    background: rgba(10,10,10,.55) !important;
    backdrop-filter: blur(15px) !important;
}
/* Инпуты внутри popup-income-statements: усиливаем контраст текста,
   чтобы он не сливался с полупрозрачным светлым фоном. */
.popup-income-statements .popup-preset__input,
.popup-income-statements .app-input{
    background-color: rgba(255,255,255,.15) !important;
    color: var(--mi-white) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
}
.popup-income-statements .popup-preset__input::placeholder,
.popup-income-statements .app-input::placeholder{
    color: rgba(255,255,255,.7) !important;
}

/* Кредит-цена + black-friday — синий → carbon/red */
.credit-form__main-step-text-price{ color: var(--mi-red) !important; }
.black_friday__text{ color: var(--mi-red) !important; }

/* Quiz-баннер: розово-оранжевый градиент → carbon */
.quiz-banner-compact{ background: var(--mi-carbon) !important; }

/* ─── 4. Глобальные мелочи ─── */
html{ scroll-behavior: smooth; }
::selection{ background: var(--mi-red); color: var(--mi-white); }

/* ─── 5. Hover-анимации (без изменения геометрии) ─── */

/* Универсальный transition для интерактива */
a,
.btn, button,
input, select, textarea,
.car-card, .car-item, .catalog-item,
.mark-link, .mark-card, .brand-card,
.bank-card, .stock-card, .service-card,
.comps-info__item,
.about-card,
.swiper-pagination-bullet{
    transition:
        color .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .28s ease,
        filter .25s ease,
        opacity .25s ease !important;
}

/* Ссылки: carbon → red */
a{ color: var(--mi-carbon); }
a:hover{ color: var(--mi-red) !important; }

/* Кнопки: подавляем шаблонный filter:opacity, даём мягкий lift */
.btn:hover{
    filter: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(10,10,10,.10) !important;
}
.btn:active{
    filter: none !important;
    transform: translateY(0) !important;
}

/* Primary-кнопка: вспышка red на hover (carbon → red flash) */
.btn.btn_primary:hover{
    background-color: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(220,38,38,.30) !important;
}
.btn.btn_primary:hover,
.btn.btn_primary:hover *{
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Карточки авто / марок / банков / акций / сервисов / comps — lift + red border + soft shadow */
.car-card:hover, .car-item:hover, .catalog-item:hover,
.mark-link:hover, .mark-card:hover, .brand-card:hover,
.bank-card:hover, .stock-card:hover, .service-card:hover,
.comps-info__item:hover, .about-card:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(10,10,10,.10) !important;
    border-color: var(--mi-red) !important;
}

/* Swiper-карусели обрезают hover-lift и box-shadow карточек по верту/вниз.
   По вертикали разрешаем выход за рамки, по горизонтали оставляем clip,
   чтобы соседние слайды не вызывали горизонтальный скролл страницы. */
.catalog-carousel.swiper,
.brands-carousel.swiper,
.banks-carousel.swiper,
.marks-carousel.swiper,
.models-carousel.swiper,
.stocks-carousel.swiper,
.services-carousel.swiper,
.comps-carousel.swiper,
.about-carousel.swiper{
    overflow-x: hidden !important;
    overflow-y: visible !important;
}
.catalog-carousel .swiper-wrapper,
.brands-carousel .swiper-wrapper,
.banks-carousel .swiper-wrapper,
.marks-carousel .swiper-wrapper,
.models-carousel .swiper-wrapper,
.stocks-carousel .swiper-wrapper,
.services-carousel .swiper-wrapper,
.comps-carousel .swiper-wrapper,
.about-carousel .swiper-wrapper{
    padding: 6px 0 36px !important;
}
/* Карусельные кнопки prev/next должны быть над слайдами и кликабельны */
.catalog-carousel__prev,
.catalog-carousel__next,
.swiper-button-prev,
.swiper-button-next{
    z-index: 5 !important;
    pointer-events: auto !important;
}

/* Лого внутри карточек марок — мягкий zoom на hover.
   Сразу принудим opacity:1 — шаблон ставит lazy { opacity: 0 } и иногда не снимает. */
.mark-link__icon,
.mark-link img,
.mark-card img,
.brand-card img,
.bank-card__logo,
.bank-card img,
.bank-card svg{
    transition: transform .35s ease, filter .25s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.mark-link:hover .mark-link__icon,
.mark-link:hover img,
.mark-card:hover img,
.brand-card:hover img,
.bank-card:hover .bank-card__logo,
.bank-card:hover img{
    transform: scale(1.06);
}

/* Hero-слайды: центрируем по горизонтали + лёгкий zoom на hover */
.hero-carousel__slide{
    background-position: center center !important;
    background-size: cover !important;
    transition: filter .4s ease !important;
}
.hero-carousel__slide:hover{ filter: brightness(1.03); }

/* Swiper pagination bullets — red активный */
.swiper-pagination-bullet-active{
    background: var(--mi-red) !important;
}

/* Focus-ring единый (a11y) */
.btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible{
    outline: 2px solid var(--mi-red);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.2 — три точечных фикса (по списку пользователя)
   ═══════════════════════════════════════════════════════════════ */

/* (1) Credit-banner: текст белый на белом — заливаем bg carbon.
       ВАЖНО: background-color (не shorthand!) — иначе сотрём шаблонные
       background-image (картинка машины справа). */
.credit-banner,
.credit-banner__container,
.section-credit-banner .container .credit-banner,
.promo-credit-banner{
    background-color: var(--mi-carbon) !important;
    color: var(--mi-white) !important;
}
/* Mirror шаблонной композиции (update.css :122-185), только синий → carbon.
   Desktop (≥1025): машина слева-центр (contain), carbon-плашка справа 42-64%, текст в 480px right */
@media (min-width: 1025px){
    .promo-credit-banner{
        background-image:
            linear-gradient(to left, var(--mi-carbon) 42%, rgba(10,10,10,0) 64%),
            url('../img/promo-credit-banner-asset.webp') !important;
        background-position: center, calc(80% - 27rem) !important;
        background-repeat: no-repeat, no-repeat !important;
        background-size: cover, contain !important;
    }
}
/* Mobile/tablet (≤1024): машина сверху (cover), padding-top 46% — место под фото, текст ниже */
@media (max-width: 1024px){
    .promo-credit-banner{
        background-image: url('../img/promo-credit-banner-asset.webp') !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
        padding-top: 46% !important;
    }
}
.credit-banner *,
.credit-banner__title,
.credit-banner__text,
.promo-credit-banner *{
    color: var(--mi-white) !important;
}

/* (2) Заголовки секций — выровнять «Акции и спецпредложения»
       и остальные H2 в один размер/стиль */
.section-header__heading,
.section-heading__text,
.section-header h2,
.section-heading h2{
    font-family: var(--mi-font-head) !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--mi-carbon) !important;
}
@media (max-width: 768px){
    .section-header__heading,
    .section-heading__text,
    .section-header h2,
    .section-heading h2{
        font-size: 24px !important;
    }
}

/* (3) Header__top — тот же Manrope что и header__main (mono убран выше).
       На всякий случай явно ставим Manrope на оба и их детей. */
.header__top, .header__top *,
.header__main, .header__main *{
    font-family: var(--mi-font-body) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.3 — точечные фиксы видимости (белый-на-белом)
   ═══════════════════════════════════════════════════════════════ */

/* Карточки на белом body теряются — добавляем 1px hairline border (sharp, Mono-стиль).
   ВАЖНО: .service-card НЕ включён — шаблон рисует его тёмным с белым текстом,
   обработаем отдельно ниже. */
.car-card,
.car-item,
.catalog-item,
.models-carousel__item,
.mark-link,
.mark-card,
.brand-card,
.bank-card,
.stock-card,
.about-card{
    background: var(--mi-white) !important;
    border: 1px solid var(--mi-border) !important;
}
/* .comps-info__item НЕ включён — у него свой layout внутри
   градиентной коробки .comps-info (без фона/border на item). */

/* Инпуты форм теряются на белом — 1px border + лёгкий off-white fill */
.main-form-input,
.main-form-textarea,
.main-form-select,
input.form-control,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
textarea.form-control,
select,
select.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    background: var(--mi-off-white) !important;
    border: 1px solid var(--mi-border-strong, #D4D4D4) !important;
    color: var(--mi-carbon) !important;
}
.main-form-input::placeholder,
input.form-control::placeholder,
textarea::placeholder,
textarea.form-control::placeholder{
    color: var(--mi-text-mute) !important;
}
/* Focus — red hairline */
.main-form-input:focus,
.main-form-input:focus-visible,
.main-form-textarea:focus,
.main-form-select:focus,
input.form-control:focus,
input:focus,
textarea:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus{
    border-color: var(--mi-red) !important;
    background: var(--mi-white) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.5 — .service-card (Услуги): сохранить inline background-image,
   положить dark gradient overlay, текст белый поверх
   ═══════════════════════════════════════════════════════════════ */
.service-card{
    /* НЕ трогаем shorthand background — иначе сотрём inline image */
    background-color: var(--mi-carbon) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Dark overlay для читаемости белого текста на фото */
.service-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.82) 100%);
    pointer-events: none;
    z-index: 1;
    transition: background .3s ease;
}
/* Контент над overlay */
.service-content,
.service-card__title,
.service-card__desc{
    position: relative !important;
    z-index: 2 !important;
}
.service-card *,
.service-card__title,
.service-card__desc,
.service-content,
.service-card a,
.service-card p,
.service-card span,
.service-card h3,
.service-card h4{
    color: var(--mi-white) !important;
}
/* Hover — мягкий lift + red border + чуть прозрачнее overlay (фото становится ярче) */
.service-card:hover{
    border-color: var(--mi-red) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(10,10,10,.30) !important;
}
.service-card:hover::after{
    background: linear-gradient(180deg, rgba(10,10,10,.10) 0%, rgba(10,10,10,.40) 60%, rgba(10,10,10,.72) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.4 — credit-banner CTA: акцентная red + инверсия на hover
   ═══════════════════════════════════════════════════════════════ */

.credit-banner .btn,
.credit-banner a.btn,
.promo-credit-banner .btn,
.promo-credit-banner a.btn{
    background: var(--mi-red) !important;
    border: 1px solid var(--mi-red) !important;
    color: var(--mi-white) !important;
    box-shadow: none !important;
}
.credit-banner .btn *,
.promo-credit-banner .btn *{ color: var(--mi-white) !important; }

.credit-banner .btn:hover,
.credit-banner a.btn:hover,
.promo-credit-banner .btn:hover,
.promo-credit-banner a.btn:hover{
    background: var(--mi-white) !important;
    border-color: var(--mi-white) !important;
    color: var(--mi-red) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(255,255,255,.20) !important;
    filter: none !important;
}
.credit-banner .btn:hover *,
.promo-credit-banner .btn:hover *{ color: var(--mi-red) !important; }

/* Hero-картинки заменены ПРЯМО в index.html (надёжнее CSS-override).
   См. inline style на .hero-carousel__slide → storage/collections/index-slider/mi-hero-*.png */

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.6 — header nav: active/clicked пункт меню = red (как hover)
   ═══════════════════════════════════════════════════════════════ */

/* Hover (на всякий случай явно — у нас уже есть глобал a:hover) */
.header__nav-item:hover,
.mobile-menu__nav-item:hover{
    color: var(--mi-red) !important;
}

/* Active (момент клика — :active pseudo-class) */
.header__nav-item:active,
.mobile-menu__nav-item:active,
.header__nav-item:focus,
.mobile-menu__nav-item:focus{
    color: var(--mi-red) !important;
}

/* Active page (BEM-modifier .--active в шаблоне vitmp) */
.header__nav-item.\--active,
.header__nav-item.is-active,
[class*="header__nav-item"][class*="--active"],
.mobile-menu__nav-item.\--active,
.mobile-menu__nav-item.is-active,
[class*="mobile-menu__nav-item"][class*="--active"]{
    color: var(--mi-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.7 — Deal-badge + контур акционной карточки → red accent
   Шаблон рисует pink #DD4C70 — меняем на наш --mi-red.
   ═══════════════════════════════════════════════════════════════ */

/* Контур карточки с акцией */
.car-card.deal,
.car-card.has-deal,
.car-item.deal,
.catalog-item.deal{
    border: 2px solid var(--mi-red) !important;
}
/* Hover-усиление — мягкое red-glow вместо обычного */
.car-card.deal:hover,
.car-card.has-deal:hover,
.car-item.deal:hover,
.catalog-item.deal:hover{
    border-color: var(--mi-red) !important;
    box-shadow: 0 14px 32px rgba(220,38,38,.18) !important;
}

/* Сам бейдж */
.deal-badge{
    background: var(--mi-red) !important;
}
.deal-badge__text{
    color: var(--mi-white) !important;
    font-family: var(--mi-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1.8 — Кнопки в car-card: чистая инверсия на hover
   .btn_primary  carbon-bg + white  →  white-bg + carbon (Купить в кредит)
   .btn_outline  white-bg + carbon  →  carbon-bg + white (Обмен авто)
   ═══════════════════════════════════════════════════════════════ */

/* PRIMARY: carbon → white inversion */
.car-card .btn.btn_primary,
.car-card__buttons .btn.btn_primary,
.car-item .btn.btn_primary,
.catalog-item .btn.btn_primary,
.models-carousel__item .btn.btn_primary{
    background: var(--mi-carbon) !important;
    border: 1px solid var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    box-shadow: none !important;
}
.car-card .btn.btn_primary span,
.car-card__buttons .btn.btn_primary span,
.car-item .btn.btn_primary span,
.catalog-item .btn.btn_primary span,
.models-carousel__item .btn.btn_primary span{
    color: var(--mi-white) !important;
}

.car-card .btn.btn_primary:hover,
.car-card__buttons .btn.btn_primary:hover,
.car-item .btn.btn_primary:hover,
.catalog-item .btn.btn_primary:hover,
.models-carousel__item .btn.btn_primary:hover{
    background: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-white) !important;
    filter: none !important;
    box-shadow: 0 8px 22px rgba(220,38,38,.28) !important;
}
.car-card .btn.btn_primary:hover span,
.car-card__buttons .btn.btn_primary:hover span,
.car-item .btn.btn_primary:hover span,
.catalog-item .btn.btn_primary:hover span,
.models-carousel__item .btn.btn_primary:hover span{
    color: var(--mi-white) !important;
}

/* OUTLINE: white → carbon inversion (зеркало primary) */
.car-card .btn.btn_outline,
.car-card__buttons .btn.btn_outline,
.car-item .btn.btn_outline,
.catalog-item .btn.btn_outline,
.models-carousel__item .btn.btn_outline{
    background: var(--mi-white) !important;
    border: 1px solid var(--mi-carbon) !important;
    color: var(--mi-carbon) !important;
}
.car-card .btn.btn_outline span,
.car-card__buttons .btn.btn_outline span,
.car-item .btn.btn_outline span,
.catalog-item .btn.btn_outline span,
.models-carousel__item .btn.btn_outline span{
    color: var(--mi-carbon) !important;
}

.car-card .btn.btn_outline:hover,
.car-card__buttons .btn.btn_outline:hover,
.car-item .btn.btn_outline:hover,
.catalog-item .btn.btn_outline:hover,
.models-carousel__item .btn.btn_outline:hover{
    background: var(--mi-carbon) !important;
    border-color: var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    filter: none !important;
}
.car-card .btn.btn_outline:hover span,
.car-card__buttons .btn.btn_outline:hover span,
.car-item .btn.btn_outline:hover span,
.catalog-item .btn.btn_outline:hover span,
.models-carousel__item .btn.btn_outline:hover span{
    color: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2.1 — Header dark (carbon, не глубокий) + phone CTA inversion
   ═══════════════════════════════════════════════════════════════ */

/* Body хедера и верхняя/нижняя полосы — графитный #18181B (не pure black) */
.app-header,
.header,
.header__top,
.header__main{
    background: var(--mi-surface-dark) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Весь текст в шапке — белый + единый вес 500 (унификация) */
.app-header, .app-header *,
.header, .header *,
.header__top, .header__top *,
.header__main, .header__main *,
.header__inner, .header__inner *,
.header__aside, .header__aside *,
.header__aside-info,
.header__nav, .header__nav *,
.header__nav-item,
.header__phone, .header__phone *,
.header__main a[href^="tel:"],
.header__main a[href^="tel:"] *{
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* На hover/active — цветовой индикатор: текст становится red */
.header__nav-item{
    transition: color .2s ease !important;
}
.header__nav-item::after{ content: none !important; display: none !important; }

.header__nav-item:hover,
.header__nav-item:active,
.header__nav-item:focus,
.header a:hover,
.header a:focus,
.header__top a:hover,
.header__main a:hover,
.header__nav-item.\--active,
.header__nav-item.is-active,
[class*="header__nav-item"][class*="--active"]{
    color: var(--mi-red) !important;
}

/* Phone CTA — акцентный red, на hover инверсия */
.header__phone,
.header__main a[href^="tel:"]{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    border: 1px solid var(--mi-red) !important;
    color: #FFFFFF !important;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .15s ease !important;
}
.header__phone *,
.header__main a[href^="tel:"] *{
    color: #FFFFFF !important;
}

.header__phone:hover,
.header__main a[href^="tel:"]:hover{
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-red) !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}
.header__phone:hover *,
.header__main a[href^="tel:"]:hover *{
    color: var(--mi-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2.2 — Кнопка "Показать все авто" (.comps-info__button)
   Red акцент + чистая инверсия на hover (текст всегда виден)
   ═══════════════════════════════════════════════════════════════ */
.comps-info__button .btn,
.comps-info__button a.btn,
.comps-info__button a{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    border: 1px solid var(--mi-red) !important;
    color: var(--mi-white) !important;
}
.comps-info__button .btn *,
.comps-info__button a.btn *,
.comps-info__button a *{ color: var(--mi-white) !important; }

.comps-info__button .btn:hover,
.comps-info__button a.btn:hover,
.comps-info__button a:hover{
    background: var(--mi-white) !important;
    background-color: var(--mi-white) !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-red) !important;
    filter: none !important;
    transform: translateY(-2px) !important;
}
.comps-info__button .btn:hover *,
.comps-info__button a.btn:hover *,
.comps-info__button a:hover *{ color: var(--mi-red) !important; }

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2.3 — Footer dark (carbon #18181B) + red CTA inversion
   Зеркалит хедер: nav red underline + два phone/CTA с инверсией
   ═══════════════════════════════════════════════════════════════ */

/* Body футера — графитный #18181B */
.app-footer,
.app-footer .footer,
.app-footer .footer__main,
.app-footer .footer__text,
.app-footer .container{
    background: var(--mi-surface-dark) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Весь текст в футере — белый + единый вес 500 (унификация) */
.app-footer, .app-footer *,
.footer-contacts, .footer-contacts *,
.footer-contacts__item,
.footer-nav, .footer-nav *,
.footer-nav__item,
.footer-terms, .footer-terms *,
.footer-terms__link,
.footer-cb, .footer-cb *,
.footer__text, .footer__text *{
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* Footer-nav: цветовой индикатор red на hover/active (без underline) */
.footer-nav__item,
.footer-terms__link{
    transition: color .2s ease !important;
}
.footer-nav__item::after,
.footer-terms__link::after{ content: none !important; display: none !important; }

.footer-nav__item:hover,
.footer-nav__item:focus,
.footer-nav__item.\--active,
.footer-nav__item.is-active,
[class*="footer-nav__item"][class*="--active"],
.footer-terms__link:hover,
.footer-terms__link:focus{
    color: var(--mi-red) !important;
}

/* Phone CTA в футере — red акцент + инверсия на hover */
.footer-cb .btn.btn_outline_phone,
.footer-cb a[href^="tel:"],
.footer-contacts a[href^="tel:"]{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    border: 1px solid var(--mi-red) !important;
    color: #FFFFFF !important;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .15s ease !important;
}
.footer-cb .btn.btn_outline_phone *,
.footer-cb a[href^="tel:"] *,
.footer-contacts a[href^="tel:"] *{ color: #FFFFFF !important; }

.footer-cb .btn.btn_outline_phone:hover,
.footer-cb a[href^="tel:"]:hover,
.footer-contacts a[href^="tel:"]:hover{
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-red) !important;
    transform: translateY(-2px) !important;
    filter: none !important;
}
.footer-cb .btn.btn_outline_phone:hover *,
.footer-cb a[href^="tel:"]:hover *,
.footer-contacts a[href^="tel:"]:hover *{ color: var(--mi-red) !important; }

/* "Обратный звонок" CTA — также red + инверсия (зеркало phone) */
.footer-cb .btn.btn_primary{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    border: 1px solid var(--mi-red) !important;
    color: #FFFFFF !important;
}
.footer-cb .btn.btn_primary *{ color: #FFFFFF !important; }

.footer-cb .btn.btn_primary:hover{
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-red) !important;
    transform: translateY(-2px) !important;
    filter: none !important;
}
.footer-cb .btn.btn_primary:hover *{ color: var(--mi-red) !important; }

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2.5 — Hero CTA hover: red + white
   ═══════════════════════════════════════════════════════════════ */
.hero-carousel__btn .btn:hover,
.hero-carousel__btn a.btn:hover,
.hero-carousel__btn a:hover{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-white) !important;
    transform: translateY(-2px) !important;
    filter: none !important;
    box-shadow: 0 8px 22px rgba(220,38,38,.30) !important;
}
.hero-carousel__btn .btn:hover *,
.hero-carousel__btn a.btn:hover *,
.hero-carousel__btn a:hover *{
    color: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2.6 — .questions__asset: показывать целиком (contain) на carbon
   ═══════════════════════════════════════════════════════════════ */
.questions__asset{
    content: url("../img/mi-questions-asset.jpg") !important;
    object-fit: contain !important;
    background: var(--mi-white) !important;
    width: 100% !important;
    height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 3 — Mobile fixes (топ-3 от QA)
   ═══════════════════════════════════════════════════════════════ */

/* (1) Header overflow на узких мобилах (iPhone SE 375, маленькие android'ы) */
@media (max-width: 500px){
    .header__inner{ gap: 12px !important; }
    .header__logo-image,
    .header__logo img{ max-width: 140px !important; height: auto !important; }
    /* Скрываем top-bar aside (время работы, адрес) ниже 500 — на узком не вмещается */
    .header__aside,
    .header__aside-info{ display: none !important; }
}

/* Мобильный header (≤768): top-bar мельче, phone CTA компактнее + nowrap */
@media (max-width: 768px){
    .header__inner{ gap: 12px !important; }
    .header__top, .header__top *{ font-size: 11px !important; }
    /* Phone CTA в шапке — компактный, на одной строке всегда */
    .header__phone,
    .header__main a[href^="tel:"]{
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 var(--mi-s-12) !important;
        font-size: 12px !important;
        gap: var(--mi-s-4) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .header__phone *,
    .header__main a[href^="tel:"] *{
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    /* Иконку телефона уменьшаем если есть */
    .header__phone svg,
    .header__main a[href^="tel:"] svg{
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
}

/* На совсем узких (≤390) — оставляем только иконку, цифры скрыть */
@media (max-width: 390px){
    .header__phone,
    .header__main a[href^="tel:"]{
        padding: 0 var(--mi-s-8) !important;
        gap: 0 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        overflow: hidden !important;
    }
    /* Скрываем текст номера, оставляем только svg-иконку */
    .header__phone > span,
    .header__phone > *:not(svg),
    .header__main a[href^="tel:"] > span,
    .header__main a[href^="tel:"] > *:not(svg){
        display: none !important;
    }
}

/* Бургер-иконка — белая на тёмном хедере (шаблон ставит #0E0E13 SVG, не видна) */
@media (max-width: 1024px){
    .header__open-menu{
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 20 20" fill="none"><path fill="%23FFFFFF" fill-rule="evenodd" d="M19 4a1 1 0 01-1 1H2a1 1 0 010-2h16a1 1 0 011 1zm0 6a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 7a1 1 0 100-2H2a1 1 0 100 2h16z"/></svg>') !important;
        background-color: transparent !important;
        background-size: 24px 24px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: 0 !important;
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        cursor: pointer !important;
    }
}

/* Мобильное меню (drawer) — тёмный фон + белый текст */
.mobile-menu,
.mobile-menu.\--active{
    background: #18181B !important;
    background-color: #18181B !important;
    color: var(--mi-white) !important;
}
.mobile-menu *,
.mobile-menu__nav,
.mobile-menu__nav *,
.mobile-menu__nav-item,
.mobile-menu__contacts,
.mobile-menu__contacts *,
.mobile-menu__contacts-item,
.mobile-menu__link,
.mobile-menu__link *,
.quiz-banner-compact,
.quiz-banner-compact *,
.quiz-content,
.benefit-text-compact,
.discount-highlight{
    color: var(--mi-white) !important;
    font-weight: 500 !important;
}
/* Active пункт и hover — red */
.mobile-menu__nav-item:hover,
.mobile-menu__nav-item.\--active,
.mobile-menu__nav-item.is-active,
[class*="mobile-menu__nav-item"][class*="--active"]{
    color: var(--mi-red) !important;
}
/* Tel-ссылка в меню — red акцент */
.mobile-menu__link,
.mobile-menu__link span{
    color: var(--mi-red) !important;
    font-weight: 700 !important;
    font-family: var(--mi-font-mono) !important;
}
/* Quiz-баннер внутри drawer — carbon → red accent */
.quiz-banner-compact{
    background: var(--mi-carbon) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}
.discount-highlight{ color: var(--mi-red) !important; font-weight: 700 !important; }

/* (2) Banks-grid на мобиле: 2-3 колонки, белый фон карточки, лого fit */
@media (max-width: 768px){
    .banks-grid{
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--mi-s-12) !important;
    }
    .bank-card{
        height: 64px !important;
        padding: var(--mi-s-8) !important;
    }
    .bank-card__logo,
    .bank-card img{
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: scale-down !important;
        display: block !important;
        opacity: 1 !important;
        filter: none !important;
        visibility: visible !important;
    }
}
@media (max-width: 480px){
    .banks-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* (3) Car-card на мобиле: height: auto, контент не обрезается */
@media (max-width: 768px){
    .car-card,
    .car-item,
    .catalog-item{
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .car-card__thumb,
    .car-card__thumb-img{
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
    }
    /* Кнопки в столбец на узком (не помещаются в ряд) */
    .car-card__buttons{
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mi-s-8) !important;
    }
    .car-card__buttons .btn{
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 3.1 — Кнопки переключения каталога (prev/next)
   Шаблон ставит var(--secondary) — у нас не определена → серый круг,
   белая стрелка плохо видна. Делаем carbon-bg + red на hover.
   ═══════════════════════════════════════════════════════════════ */

.catalog-carousel__prev,
.catalog-carousel__next,
.swiper-button-prev,
.swiper-button-next{
    background-color: var(--mi-carbon) !important;
    border: 1px solid var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    opacity: 1 !important;
    transition: background-color .22s ease, border-color .22s ease, transform .15s ease !important;
}
.catalog-carousel__prev:hover,
.catalog-carousel__next:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover{
    background-color: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
    transform: translateY(-2px) !important;
    filter: none !important;
}
.catalog-carousel__prev.swiper-button-disabled,
.catalog-carousel__next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled{
    background-color: rgba(10,10,10,.25) !important;
    border-color: rgba(10,10,10,.25) !important;
    cursor: not-allowed !important;
}

/* Для default swiper-button-prev/next (если без catalog-carousel__) шаблон рисует
   стрелку через ::after с font-family swiper-icons. Делаем её белой. */
.swiper-button-prev::after,
.swiper-button-next::after{
    color: var(--mi-white) !important;
    font-size: 16px !important;
}

/* Стрелки SVG в .catalog-carousel__prev/__next — HTTrack испортил xmlns
   (./.../www.w3.org/2000/svg.html) → SVG невалиден, стрелка не рисуется.
   Перекрываем валидным data URI. */
.catalog-carousel__prev{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15" fill="none"><path d="M2.59986 8.31919C2.50613 8.22623 2.43174 8.11563 2.38097 7.99377C2.3302 7.87191 2.30406 7.7412 2.30406 7.60919C2.30406 7.47718 2.3302 7.34647 2.38097 7.22462C2.43174 7.10276 2.50613 6.99215 2.59986 6.89919L7.18986 2.31919C7.28359 2.22623 7.35798 2.11563 7.40875 1.99377C7.45952 1.87191 7.48566 1.7412 7.48566 1.60919C7.48566 1.47718 7.45952 1.34647 7.40875 1.22461C7.35798 1.10275 7.28359 0.992154 7.18986 0.899191C7.0025 0.71294 6.74905 0.608398 6.48486 0.608398C6.22067 0.608398 5.96722 0.71294 5.77986 0.899191L1.18986 5.48919C0.628058 6.05169 0.3125 6.81419 0.3125 7.60919C0.3125 8.40419 0.628058 9.16669 1.18986 9.72919L5.77986 14.3192C5.96612 14.5039 6.21752 14.6081 6.47986 14.6092C6.61147 14.61 6.74193 14.5847 6.86377 14.535C6.9856 14.4852 7.09642 14.4119 7.18986 14.3192C7.28359 14.2262 7.35798 14.1156 7.40875 13.9938C7.45952 13.8719 7.48566 13.7412 7.48566 13.6092C7.48566 13.4772 7.45952 13.3465 7.40875 13.2246C7.35798 13.1028 7.28359 12.9922 7.18986 12.8992L2.59986 8.31919Z" fill="white"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.catalog-carousel__next{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15" fill="none"><path d="M6.3998 5.48919L1.8098 0.899191C1.62244 0.71294 1.36899 0.608398 1.1048 0.608398C0.840616 0.608398 0.587165 0.71294 0.399802 0.899191C0.306074 0.992154 0.23168 1.10275 0.180911 1.22461C0.130142 1.34647 0.104004 1.47718 0.104004 1.60919C0.104004 1.7412 0.130142 1.87191 0.180911 1.99377C0.23168 2.11563 0.306074 2.22623 0.399802 2.31919L4.9998 6.89919C5.09353 6.99215 5.16793 7.10276 5.21869 7.22462C5.26946 7.34647 5.2956 7.47718 5.2956 7.60919C5.2956 7.7412 5.26946 7.87191 5.21869 7.99377C5.16793 8.11563 5.09353 8.22623 4.9998 8.31919L0.399802 12.8992C0.211499 13.0862 0.105184 13.3403 0.104246 13.6057C0.103308 13.871 0.207825 14.1259 0.394803 14.3142C0.581781 14.5025 0.835903 14.6088 1.10127 14.6097C1.36663 14.6107 1.6215 14.5062 1.8098 14.3192L6.3998 9.72919C6.96161 9.16669 7.27716 8.40419 7.27716 7.60919C7.27716 6.81419 6.96161 6.05169 6.3998 5.48919Z" fill="white"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   Rules — узкая колонка карточек (–20% ширины: 685 → 548)
   + фон секции: целиком вписать isometric-render слева,
     без обрезки (заменили cover → contain), на белом подложке
   ═══════════════════════════════════════════════════════════════ */
.rules{
    background: var(--mi-white) url("../img/rules-section-bg.webp") left center / 55% auto no-repeat !important;
}
.rules::after{
    background: url("../img/rules-section-bg.webp") left center / 55% auto no-repeat !important;
}
.rules::before{
    background-color: var(--mi-white) !important;
}
.rules__inner{
    max-width: 548px !important;
}
/* Мобайл: возвращаем поведение media.css (картинка-полоса 220px по центру
   сверху, контент ниже), мой left/55%-override на десктопе ломал адаптив. */
@media (max-width: 1024px){
    .rules{
        background: var(--mi-white) !important;
        padding: calc(220px + 12px) 16px 24px !important;
    }
    .rules::after{
        background: url("../img/rules-section-bg.webp") center / cover no-repeat !important;
        height: 220px !important;
        width: calc(100% - 32px) !important;
        left: 16px !important;
        top: 0 !important;
    }
    .rules__inner{
        max-width: 100% !important;
        margin: 0 !important;
    }
}
.rules__inner .rule-block{
    background: var(--mi-surface-mute) !important;
}
/* .label-icon: vitmp по умолчанию красит её через var(--secondary),
   inline-style страницы может вернуть синий #6E96E3. Перекрываем явно. */
.label-icon{
    background: var(--mi-text-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Pagination next — фикс битого SVG из app.css (HTTrack испортил
   xmlns: "../../../www.w3.org/2000/svg.html" → стрелка не рисуется,
   виден только серый круг). Перекрываем валидным data URI.
   ═══════════════════════════════════════════════════════════════ */
.pagination__item.--active,
a.pagination__item.--active{
    background: var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    border-color: var(--mi-carbon) !important;
}

.pagination__next::after{
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15" fill="none"><path d="M6.3998 5.48919L1.8098 0.899191C1.62244 0.71294 1.36899 0.608398 1.1048 0.608398C0.840616 0.608398 0.587165 0.71294 0.399802 0.899191C0.306074 0.992154 0.23168 1.10275 0.180911 1.22461C0.130142 1.34647 0.104004 1.47718 0.104004 1.60919C0.104004 1.7412 0.130142 1.87191 0.180911 1.99377C0.23168 2.11563 0.306074 2.22623 0.399802 2.31919L4.9998 6.89919C5.09353 6.99215 5.16793 7.10276 5.21869 7.22462C5.26946 7.34647 5.2956 7.47718 5.2956 7.60919C5.2956 7.7412 5.26946 7.87191 5.21869 7.99377C5.16793 8.11563 5.09353 8.22623 4.9998 8.31919L0.399802 12.8992C0.211499 13.0862 0.105184 13.3403 0.104246 13.6057C0.103308 13.871 0.207825 14.1259 0.394803 14.3142C0.581781 14.5025 0.835903 14.6088 1.10127 14.6097C1.36663 14.6107 1.6215 14.5062 1.8098 14.3192L6.3998 9.72919C6.96161 9.16669 7.27716 8.40419 7.27716 7.60919C7.27716 6.81419 6.96161 6.05169 6.3998 5.48919Z" fill="white"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: var(--mi-carbon) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Model page — приводим хардкоды app.css к токенам палитры
   ═══════════════════════════════════════════════════════════════ */
.model-page__colors-item{
    border-color: var(--mi-border) !important;
}
.model-total__future del,
.model-total__future-value,
.model-total__future-value.credit,
.model-total__future-title,
.model-total__title{
    font-family: var(--mi-font-body) !important;
}
/* del: некорректное strikethrough → line-through */
.model-total__future del{
    text-decoration: line-through !important;
    text-decoration-line: line-through !important;
}
/* Выравниваем цену и подпись в одной строке по НИЖНЕМУ краю */
.model-total__future .price_content{
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   Modifications (backend.css) — bootstrap-палитра → Mono Editorial.
   Перекрываем фон/текст/бордеры на токены, тень — на нашу editorial.
   ═══════════════════════════════════════════════════════════════ */
.modifications-block{
    background: var(--mi-surface-mute) !important;
}
.modifications-block__title,
.modification-card__name,
.spec-group__title{
    color: var(--mi-carbon) !important;
    font-family: var(--mi-font-head) !important;
}
.modification-card{
    background: var(--mi-white) !important;
    box-shadow: 0 14px 32px rgba(10,10,10,.10) !important;
}
.modification-card__header{
    background: var(--mi-white) !important;
    border-bottom-color: var(--mi-border) !important;
}
.modification-card__compare,
.spec-item__label{
    color: var(--mi-text-soft) !important;
}
.spec-group{
    background: var(--mi-surface-mute) !important;
}
.spec-group__title{
    border-bottom-color: var(--mi-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Inputs — текст должен быть видимым на белом фоне.
   .app-input наследует color от родителя, на тёмных секциях
   получался белый текст на белом фоне. Принудим carbon-текст.
   Модалка mega-sale имеет более специфичный селектор и сохранит белый.
   ═══════════════════════════════════════════════════════════════ */
.app-input{
    color: var(--mi-carbon) !important;
}
.app-input::placeholder{
    color: var(--mi-text-mute) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mega-sale — заменяем чужой розовый #DD4C70 на акцент --mi-red
   ═══════════════════════════════════════════════════════════════ */
.modal-mega-sale .title__wrapper .h2,
.modal-mega-sale .title__wrapper h2,
.btn.btn_megasave span{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
}

/* btn_primary.btn_megasave в статике: фон carbon, текст white.
   Перекрывает любые vitmp/inline синие токены. */
.btn.btn_primary.btn_megasave,
.btn.btn_megasave{
    background: var(--mi-carbon) !important;
    color: var(--mi-white) !important;
    border: 1px solid;
}

/* ═══════════════════════════════════════════════════════════════
   .mod-check__button__more / .model-opt-item__button — белая кнопка
   с явным carbon-бордером (по умолчанию визуально сливалась с фоном)
   ═══════════════════════════════════════════════════════════════ */
.btn.btn_white.mod-check__button__more,
.btn.btn_white.model-opt-item__button,
.mod-check__button__more,
.model-opt-item__button{
    border: 1px solid var(--mi-carbon) !important;
}
/* hover: оставляем белый фон, только цвет бордера/текста чуть глубже */
.btn.btn_white.mod-check__button__more:hover,
.btn.btn_white.model-opt-item__button:hover,
.mod-check__button__more:hover,
.model-opt-item__button:hover{
    background: var(--mi-white) !important;
    background-color: var(--mi-white) !important;
    color: var(--mi-carbon) !important;
    border-color: var(--mi-carbon) !important;
}

/* ═══════════════════════════════════════════════════════════════
   btn_white_outline.init-modal — на hover инверсия: белый фон + carbon текст
   ═══════════════════════════════════════════════════════════════ */
.btn.btn_white_outline.init-modal:hover{
    background: var(--mi-white) !important;
    border-color: var(--mi-white) !important;
    color: var(--mi-carbon) !important;
}
.btn.btn_white_outline.init-modal:hover,
.btn.btn_white_outline.init-modal:hover *{
    color: var(--mi-carbon) !important;
    fill: var(--mi-carbon) !important;
}

/* ═══════════════════════════════════════════════════════════════
   btn_white.init-modal — на hover: red-фон + белый текст
   ═══════════════════════════════════════════════════════════════ */
.btn.btn_white.init-modal:hover{
    background: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
    color: var(--mi-white) !important;
}
.btn.btn_white.init-modal:hover,
.btn.btn_white.init-modal:hover *{
    color: var(--mi-white) !important;
    fill: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   .mod-check__title — приводим к Mono Editorial: Manrope head,
   carbon-цвет, плотный editorial-вес и tight letter-spacing.
   ═══════════════════════════════════════════════════════════════ */
.mod-check__title,
.complectation__title{
    font-family: var(--mi-font-head) !important;
    color: var(--mi-carbon) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
}
.mod-check__desc,
.label-desc,
.label-name{
    font-family: var(--mi-font-body) !important;
}

/* ═══════════════════════════════════════════════════════════════
   .mod-check__dropdown-list / .discount__options — синий #0039A6
   на акцент --mi-red. Заодно правим иконку chevron и фон поповера.
   ═══════════════════════════════════════════════════════════════ */
.mod-check__dropdown-list__minimal-price,
.mod-check__checklist__price-top,
.mod-check__checklist__price-bottom,
.mod-check__checklist__value{
    color: var(--mi-red) !important;
    font-family: var(--mi-font-body) !important;
}
.mod-check__checkbox input[type="checkbox"]:checked + label{
    background-color: var(--mi-red) !important;
    border-color: var(--mi-red) !important;
}
.mod-check__dropdown-list,
.discount__options{
    background: var(--mi-white) !important;
    border: 1px solid var(--mi-border) !important;
}
.mod-check__dropdown-icon::before,
.mod-check__dropdown-icon.active::before{
    background-color: var(--mi-red) !important;
}

/* .mod-check__old — Mulish → Manrope, серый #B4B4B4 → --mi-text-mute */
.mod-check__old{
    font-family: var(--mi-font-body) !important;
    color: var(--mi-text-mute) !important;
}

/* .sale-block — чужой #f24942 (оранжево-красный) → акцент --mi-red */
.car-card__thumb .sale-block,
.model-page__preview .sale-block,
.sale-block{
    background: var(--mi-red) !important;
    color: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   .modal__offer__badge__date — чужой #DD4C70 → --mi-red
   ═══════════════════════════════════════════════════════════════ */
.modal__offer__badge{
    background-image: url("../img/webp/popup-badge.webp") !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
    background-color: var(--mi-carbon) !important;
}
.modal__offer__badge__date{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
    color: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   .model-total — carbon-фон с red-glow в правом нижнем углу.
   Заменяет однотонный var(--primary) красный.
   ═══════════════════════════════════════════════════════════════ */
.model-total{
    background: radial-gradient(circle at 100% 100%, var(--mi-red) 0%, var(--mi-carbon) 60%) !important;
}
.model-total__future-value.credit{
    background: var(--mi-carbon) !important;
    background-color: var(--mi-carbon) !important;
    color: var(--mi-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   .comps-info__content / .comps-info__item — отключаем hover-анимацию
   (lift/shadow/border) для контента инфо-блока сравнения
   ═══════════════════════════════════════════════════════════════ */
.comps-info__content,
.comps-info__item{
    transition: none !important;
}
.comps-info__content:hover,
.comps-info__item:hover{
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   .callback-button__icon — фон круглого индикатора телефонной кнопки
   в фирменный --mi-red. HTTrack испортил xmlns внутри data-URI SVG,
   поэтому иконка не отрисовывалась — перекрываем валидным SVG.
   ═══════════════════════════════════════════════════════════════ */
.callback-button__icon{
    background: var(--mi-red) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 0 48 48" width="48"><path d="M0 0h48v48h-48z" fill="none"/><path fill="white" d="M13.25 21.59c2.88 5.66 7.51 10.29 13.18 13.17l4.4-4.41c.55-.55 1.34-.71 2.03-.49 1.24.74 4.65 1.14 7.14 1.14 1.11 0 2 .89 2 2v7c0 1.11-.89 2-2 2-18.78 0-34-15.22-34-34 0-1.11.9-2 2-2h7c1.11 0 2 .89 2 2 0 2.49.4 4.9 1.14 7.14.22.69.06 1.48-.49 2.03l-4.4 4.42z"/></svg>') center / 27px no-repeat !important;
    border-radius: 50% !important;
}

/* ═══════════════════════════════════════════════════════════════
   .main-form-checkbox__text — гиперссылка внутри (политика) была
   чёрной, переводим на акцент --mi-red.
   ═══════════════════════════════════════════════════════════════ */
.main-form-checkbox__text a,
.main-form-checkbox__text a:link,
.main-form-checkbox__text a:visited{
    color: var(--mi-red) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.main-form-checkbox__text a:hover{
    color: var(--mi-red-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Cookie modal — vendor использует синий #0d6efd для прогресс-бара
   и ссылок. Перекрываем на акцент --mi-red через CSS-переменные,
   которые объявлены в cookieModal.css как fallback.
   ═══════════════════════════════════════════════════════════════ */
.cookie,
.cookie__card,
.cookie__close-progress{
    --cookie-progress-color: var(--mi-red);
    --cookie-progress-bg: var(--mi-surface-mute);
    --cookie-link-color: var(--mi-red);
    --cookie-color: var(--mi-carbon);
    --cookie-bg: var(--mi-white);
    --cookie-font: var(--mi-font-body);
}
.cookie__close-progress-bar{
    background: var(--mi-red) !important;
    background-color: var(--mi-red) !important;
}
.cookie__close-progress{
    color: var(--mi-red) !important;
    background: var(--mi-surface-mute) !important;
}
.cookie__text a{
    color: var(--mi-red) !important;
}

/* d-flex+overflow-auto: внутренние отступы под hover-lift и red glow .btn,
   чтобы box-shadow не клипался верхней/нижней границей скролл-контейнера */
.d-flex.overflow-auto{
    padding: 14px 10px !important;
}

/* ───────────────────────────────────────────────
   quiz.html — приводим Bootstrap-палитру quiz/style.css
   к нашей фирменной carbon + red. Override на :root,
   так как BS-токены объявлены глобально на :root в quiz.
   На остальных страницах сайта Bootstrap не подключён,
   так что блок без сайд-эффектов.
   ─────────────────────────────────────────────── */
:root{
    --bs-primary: #DC2626;
    --bs-primary-rgb: 220, 38, 38;
    --bs-primary-text-emphasis: #B91C1C;
    --bs-primary-bg-subtle: #FCE7E7;
    --bs-primary-border-subtle: #F5B5B5;

    --bs-dark: #0A0A0A;
    --bs-dark-rgb: 10, 10, 10;
    --bs-dark-text-emphasis: #525252;
    --bs-dark-bg-subtle: #EFEFEF;
    --bs-dark-border-subtle: #E5E5E5;
}

/* btn-dark в quiz: вместо серого Bootstrap #212529 → carbon, red hover */
.btn.btn-dark,
.main .btn-dark{
    background-color: #0A0A0A !important;
    border-color: #0A0A0A !important;
    color: #FFFFFF !important;
}
.btn.btn-dark *,
.main .btn-dark *{
    color: #FFFFFF !important;
}
.btn.btn-dark:hover,
.main .btn-dark:hover,
.btn.btn-dark:focus,
.main .btn-dark:focus,
.btn.btn-dark:active,
.main .btn-dark:active{
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}
.btn.btn-dark:hover *,
.main .btn-dark:hover *,
.btn.btn-dark:focus *,
.main .btn-dark:focus *,
.btn.btn-dark:active *,
.main .btn-dark:active *{
    color: #FFFFFF !important;
}

/* Иконки ::before в header quiz зашиты как inlined SVG с stroke='%23176888'
   (старый bs-primary teal). Перекрываем полным SVG с stroke='%23DC2626'. */
.header__info-address::before{
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z' stroke='%23DC2626' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22C16 18 20 14.4183 20 10C20 5.58172 16.4183 2 12 2C7.58172 2 4 5.58172 4 10C4 14.4183 8 18 12 22Z' stroke='%23DC2626' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.header__info-phone::before{
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0497 6C15.0264 6.19057 15.924 6.66826 16.6277 7.37194C17.3314 8.07561 17.8091 8.97326 17.9997 9.95M14.0497 2C16.0789 2.22544 17.9713 3.13417 19.4159 4.57701C20.8606 6.01984 21.7717 7.91101 21.9997 9.94M10.2266 13.8631C9.02506 12.6615 8.07627 11.3028 7.38028 9.85323C7.32041 9.72854 7.29048 9.66619 7.26748 9.5873C7.18576 9.30695 7.24446 8.96269 7.41447 8.72526C7.46231 8.65845 7.51947 8.60129 7.63378 8.48698C7.98338 8.13737 8.15819 7.96257 8.27247 7.78679C8.70347 7.1239 8.70347 6.26932 8.27247 5.60643C8.15819 5.43065 7.98338 5.25585 7.63378 4.90624L7.43891 4.71137C6.90747 4.17993 6.64174 3.91421 6.35636 3.76987C5.7888 3.4828 5.11854 3.4828 4.55098 3.76987C4.2656 3.91421 3.99987 4.17993 3.46843 4.71137L3.3108 4.86901C2.78117 5.39863 2.51636 5.66344 2.31411 6.02348C2.08969 6.42298 1.92833 7.04347 1.9297 7.5017C1.93092 7.91464 2.01103 8.19687 2.17124 8.76131C3.03221 11.7947 4.65668 14.6571 7.04466 17.045C9.43264 19.433 12.295 21.0575 15.3284 21.9185C15.8928 22.0787 16.1751 22.1588 16.588 22.16C17.0462 22.1614 17.6667 22 18.0662 21.7756C18.4263 21.5733 18.6911 21.3085 19.2207 20.7789L19.3783 20.6213C19.9098 20.0898 20.1755 19.8241 20.3198 19.5387C20.6069 18.9712 20.6069 18.3009 20.3198 17.7333C20.1755 17.448 19.9098 17.1822 19.3783 16.6508L19.1835 16.4559C18.8339 16.1063 18.6591 15.9315 18.4833 15.8172C17.8204 15.3862 16.9658 15.3862 16.3029 15.8172C16.1271 15.9315 15.9523 16.1063 15.6027 16.4559C15.4884 16.5702 15.4313 16.6274 15.3644 16.6752C15.127 16.8453 14.7828 16.904 14.5024 16.8222C14.4235 16.7992 14.3612 16.7693 14.2365 16.7094C12.7869 16.0134 11.4282 15.0646 10.2266 13.8631Z' stroke='%23DC2626' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}

/* Прячем/перекрашиваем inline-radial-gradient с синим #1e4c62
   на скрытых блоках quiz — он переопределён только inline-стилем,
   так что показываем при необходимости через override .display фона. */
[style*="#1e4c62"]{
    background: linear-gradient(135deg, #1F1F1F 0%, #0A0A0A 100%) !important;
}

/* ───────────────────────────────────────────────
   quiz.html — фон шапки карточки в фирменной палитре
   carbon #0A0A0A с тёплым тональным переходом и
   тонким красным акцентом сверху-справа.
   Override синего двойного-градиента из quiz/style.css.
   ─────────────────────────────────────────────── */
.main__card-header{
    background:
        radial-gradient(60% 80% at 78% 20%, rgba(220,38,38,.22), transparent 60%),
        linear-gradient(135deg, #1F1F1F 0%, #0A0A0A 100%) !important;
    color: var(--mi-white, #FFFFFF) !important;
}
.main__card-header h1,
.main__card-header .fs-1,
.main__card-header .fs-4{
    color: var(--mi-white, #FFFFFF) !important;
}

/* "Вернуться в каталог" (.sh-addons__offset) не должна липнуть к соседним
   кнопкам, моделям и карточкам авто в каталоге, особенно на узких/мобильных
   вьюпортах, где .section-header заворачивается в две строки. */
.section-header{ row-gap: 12px; }
.section-header__addons .btn.sh-addons__offset{
    margin-left: auto;
}
@media (max-width: 1280px){
    .section-header__addons.sh-addons{
        width: 100%;
        margin-top: 12px;
        margin-bottom: 24px;
    }
    .section-header__addons .btn.sh-addons__offset{
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THEME-INJECT:mi — конец mi-theme.css
   ═══════════════════════════════════════════════════════════════ */