/* ============================================================
   Multi-2 Premium Dark Editorial — theme.css
   HTML/JS не трогаем. Backend инжектит inline <style> с :root
   после нашего файла — используем !important на legacy-токенах.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* === Multi-2 Premium Dark tokens (prefix m2) === */
    --m2-bg-base:        #0E1115;
    --m2-bg-elev-1:      #161A20;
    --m2-bg-elev-2:      #1D222A;
    --m2-bg-header:      rgba(14,17,21,0.85);
    --m2-surface:        #FFFFFF;

    --m2-hairline:       #2A2F37;
    --m2-hairline-soft:  #1F242B;

    --m2-text:           #F2F3F5;
    --m2-text-soft:      #A3ACB9;
    --m2-text-mute:      #6D7381;
    --m2-text-on-accent: #0E1115;

    --m2-accent:         #C99A4B;
    --m2-accent-hover:   #D9AE63;
    --m2-accent-soft:    rgba(201,154,75,0.12);
    --m2-accent-glow:    rgba(201,154,75,0.28);
    --m2-danger:         #D96B1C;

    --m2-r-sm: 2px;
    --m2-r-md: 4px;
    --m2-r-lg: 8px;

    --m2-shadow-card:  0 1px 0 #2A2F37, 0 24px 48px -16px rgba(0,0,0,0.55);
    --m2-shadow-hover: 0 1px 0 #C99A4B, 0 32px 64px -16px rgba(0,0,0,0.75);

    /* === Override legacy tokens (важно: !important перебивает inline <style>) === */
    --bg-main-color: #0E1115 !important;
    --bg-header-top: #0E1115 !important;
    --main-text-color: #F2F3F5 !important;

    --primary-color: #C99A4B !important;
    --primary: #C99A4B !important;
    --bg-card: linear-gradient(135deg, #1D222A 16.83%, #0E1115 100%) !important;

    --btn-outline-color: #C99A4B !important;
    --btn-outline-hover-color: #0E1115 !important;
    --btn-outline-bg: transparent !important;

    --btn-primary-color: #0E1115 !important;
    --btn-primary-bg-hover: #D9AE63 !important;

    --secondary-text-color: #F2F3F5 !important;

    --bg-car-card: #1D222A !important;
    --bg-input: #161A20 !important;
    --bg-form-wrapper: #161A20 !important;

    --mark-color: #A3ACB9 !important;
    --mark-color-count: #6D7381 !important;
    --breadscrumb-last-text-color: #A3ACB9 !important;

    /* cookieModal */
    --cookie-bg: #0E1115 !important;
    --cookie-color: #F2F3F5 !important;
    --cookie-link-color: #C99A4B !important;
    --cookie-progress-bg: #161A20 !important;
    --cookie-progress-color: #C99A4B !important;

    /* === Type-scale (Premium Dark Tech) === */
    --m2-font-display: "Space Grotesk", "Inter", "Montserrat", system-ui, sans-serif;
    --m2-font-body:    "Inter", "Montserrat", system-ui, -apple-system, Arial, sans-serif;
}

/* === Типографика: Space Grotesk + Inter (tech premium) === */

.section-header {
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 72px;
}

.section-header__title {
    font-family: var(--m2-font-display);
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--m2-text);
    position: relative;
    padding-top: 24px;
    margin: 0;
    max-width: 22ch;
}

.section-header__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 1px;
    background: var(--m2-accent);
}

/* H1 — крупнее на каталоге/главной */
h1.section-header__title {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.025em;
    max-width: 24ch;
}

/* Inline-spans внутри заголовка — приглушённый текст */
.section-header__title span {
    color: var(--m2-text-soft) !important;
}

/* H3-ки карточек/блоков */
h3, .h3 {
    font-family: var(--m2-font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Body baseline */
body {
    font-family: var(--m2-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Шаг 3: car-card, marks, type-card — hairlines + hover === */

/* Карточки авто */
.car-card {
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-lg);
    background: var(--m2-bg-elev-2);
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}

.car-card__content {
    padding: 24px;
    background: transparent;
}

.car-card__title {
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--m2-text);
}

.car-card__count {
    color: var(--m2-text-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
}

.car-card__price-value {
    font-family: var(--m2-font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--m2-accent);
    font-feature-settings: "tnum" 1;
}

/* Цена не переносится (в исходнике тот же приём — .nowrap в dev.css);
   при нехватке места вниз уходит целый кредит-блок, а не символ ₽ */
.car-card__price-value,
.car-card__price-old,
.car-card__price-credit {
    white-space: nowrap;
}
.car-card__price {
    flex-wrap: wrap;
    gap: 4px 8px;
}
/* На узких экранах возвращаем размеры исходника (media.css:1300, 1313),
   иначе наши 22px/13px не влезают в карточку и провоцируют переносы */
@media (max-width: 472px) {
    .car-card__content {
        padding: 16px 8px; /* как в исходнике (media.css:1310) — иначе контенту тесно */
    }
    .car-card__price-value {
        font-size: 14px;
    }
    .car-card__actions .btn {
        font-size: 10px !important;
        white-space: nowrap;
        padding: 0 8px;
        letter-spacing: 0.05em;
    }
}

.car-card__price-old {
    color: var(--m2-text-mute) !important;
    font-weight: 400;
}

.car-card__price-credit {
    color: var(--m2-text-soft);
}

.car-card:hover {
    border-color: var(--m2-accent);
    transform: translateY(-4px);
    box-shadow: var(--m2-shadow-hover);
}

.car-card .btn.btn_outline_dark {
    color: var(--m2-text);
    border-color: var(--m2-hairline);
}
.car-card:hover .btn.btn_outline_dark {
    border-color: var(--m2-accent);
}

/* Плитка брендов */
.marks__inner {
    background: var(--m2-bg-elev-1);
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-lg);
}

.mark-link {
    transition: transform .3s ease;
}
.mark-link:hover {
    transform: translateY(-2px);
}
.mark-link__icon {
    filter: invert(1) grayscale(1) brightness(.95);
    opacity: .8;
    transition: opacity .3s ease, filter .3s ease;
}
.mark-link:hover .mark-link__icon {
    opacity: 1;
    filter: invert(1) grayscale(1) brightness(1);
}
.mark-link__title {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--m2-text-soft) !important;
}
.mark-link:hover .mark-link__title {
    color: var(--m2-accent) !important;
}
.mark-link__title span:last-child {
    color: var(--m2-text-mute) !important;
}

/* Плитки типов кузова */
.type-card {
    background: var(--m2-bg-elev-1);
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-lg);
    transition: border-color .35s ease, transform .35s ease;
}
.type-card:hover {
    filter: none;
    border-color: var(--m2-accent);
    transform: translateY(-2px);
}
.type-card__icon {
    filter: invert(1) grayscale(1) brightness(.95);
    opacity: .75;
    transition: opacity .3s ease;
}
.type-card:hover .type-card__icon {
    opacity: 1;
}
.type-card__title {
    color: var(--m2-text-soft);
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* === Шаг 4: header — sticky+blur, brass nav, hairline === */

.app-header {
    background: var(--m2-bg-header);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
}

.header__top {
    background: transparent !important;
    border-bottom: 1px solid var(--m2-hairline-soft);
    padding: 18px 0;
}

.header__nav {
    background: transparent !important;
    padding: 16px 0;
    border-bottom: 1px solid var(--m2-hairline-soft);
    gap: 48px;
}

.header__nav-item {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--m2-text-soft);
    padding: 6px 0;
    transition: color .25s ease;
}

.header__nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--m2-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.header__nav-item:hover {
    color: var(--m2-text);
}

.header__nav-item:hover::after,
.header__nav-item.--active::after {
    transform: scaleX(1);
}

.header__nav-item.--active {
    color: var(--m2-accent);
    text-decoration: none; /* гасим родной underline из app.css — иначе двойная линия с ::after */
}

/* Иконка телефона рядом с номером — заменим SVG fill на brass */
.header__info {
    background-image: url('data:image/svg+xml,<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00138 0.835938C3.95796 0.835938 0.668043 4.12585 0.668043 8.16469C0.64146 14.0726 7.72271 18.9713 8.00138 19.1693C8.00138 19.1693 15.3613 14.0726 15.3347 8.16927C15.3347 4.12585 12.0448 0.835938 8.00138 0.835938ZM8.00138 11.8359C5.97554 11.8359 4.33471 10.1951 4.33471 8.16927C4.33471 6.14344 5.97554 4.5026 8.00138 4.5026C10.0272 4.5026 11.668 6.14344 11.668 8.16927C11.668 10.1951 10.0272 11.8359 8.00138 11.8359Z" fill="%23C99A4B"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--m2-text);
}

/* Header CTA-кнопка (callback) — компактная outline brass */
.header__grid-col .btn,
.header__grid-col .btn.btn_outline {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    height: 40px;
    border-radius: var(--m2-r-md);
    border-width: 1px !important;
}
.header__grid-col .btn.btn_outline:hover {
    background-color: var(--m2-accent) !important;
    color: var(--m2-text-on-accent) !important;
    box-shadow: 0 0 0 4px var(--m2-accent-glow);
}

/* Логотип "Auto Center" — графитово-латунный, без перекраски */
.header__logo-image {
    filter: brightness(1.05);
}

/* === Шаг 5: формы и кнопки — refine === */

/* Inputs */
.app-input {
    height: 56px;
    border-radius: var(--m2-r-md);
    border: 1px solid var(--m2-hairline);
    background: var(--m2-bg-elev-1);
    color: var(--m2-text);
    font-size: 15px;
    padding: 0 20px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.app-input::placeholder {
    color: var(--m2-text-mute);
    letter-spacing: 0.01em;
}

.app-input:focus,
.app-input:focus-visible {
    border-color: var(--m2-accent);
    box-shadow: 0 0 0 4px var(--m2-accent-soft);
    outline: none;
}

.app-input.error {
    border-color: var(--m2-danger);
}

/* Textarea — тот же стиль, что и .app-input */
.app-textarea {
    border-radius: var(--m2-r-md);
    border: 1px solid var(--m2-hairline);
    background: var(--m2-bg-elev-1);
    color: var(--m2-text);
    font-size: 15px;
    padding: 15px 20px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.app-textarea::placeholder {
    color: var(--m2-text-mute);
    letter-spacing: 0.01em;
}

.app-textarea:focus,
.app-textarea:focus-visible {
    border-color: var(--m2-accent);
    box-shadow: 0 0 0 4px var(--m2-accent-soft);
    outline: none;
}

.app-textarea.error {
    border-color: var(--m2-danger);
}

/* Чекбокс privacy — brass-checkmark */
.main-form-checkbox__checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-sm);
    background: var(--m2-bg-elev-1);
    transition: border-color .2s ease, background .2s ease;
}
.main-form-checkbox:hover .main-form-checkbox__checkmark {
    border-color: var(--m2-accent);
}
.main-form-checkbox__input:checked ~ .main-form-checkbox__checkmark {
    border-color: var(--m2-accent);
    background: var(--m2-accent-soft);
}
.main-form-checkbox__checkmark:after {
    background-image: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.83464 0.5L3.2513 5.08333L1.16797 3" stroke="%23C99A4B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>') !important;
}
.main-form-checkbox__text {
    color: var(--m2-text-soft);
    font-size: 11px;
    letter-spacing: 0.02em;
}
.main-form-checkbox__text a {
    color: var(--m2-text);
}

/* Select2 — встроим в тёмную палитру */
.select2-container .select2-selection--single {
    background: var(--m2-bg-elev-1) !important;
    border: 1px solid var(--m2-hairline) !important;
    border-radius: var(--m2-r-md) !important;
    height: 56px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--m2-text) !important;
    line-height: 56px !important;
    padding: 0 20px !important;
    font-size: 15px;
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--m2-accent) !important;
    box-shadow: 0 0 0 4px var(--m2-accent-soft);
}
.select2-dropdown {
    background: var(--m2-bg-elev-2) !important;
    border: 1px solid var(--m2-hairline) !important;
    border-radius: var(--m2-r-md) !important;
    overflow: hidden;
}
.select2-container--default .select2-results__option {
    color: var(--m2-text-soft);
    padding: 12px 20px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--m2-accent-soft) !important;
    color: var(--m2-accent) !important;
}

/* Кнопки — refine, glow halo */
.btn {
    border-radius: var(--m2-r-md);
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    height: 52px;
    padding: 0 28px;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn.btn_outline {
    border: 1px solid var(--m2-accent);
    color: var(--m2-accent);
}
.btn.btn_outline:hover {
    background-color: var(--m2-accent);
    color: var(--m2-text-on-accent);
    box-shadow: 0 0 0 4px var(--m2-accent-glow);
}
.btn.btn_primary {
    background: var(--m2-accent);
    color: var(--m2-text-on-accent);
    border: 1px solid var(--m2-accent);
}
.btn.btn_primary:hover {
    background: var(--m2-accent-hover);
    border-color: var(--m2-accent-hover);
    color: var(--m2-text-on-accent); /* app.css на hover ставит var(--primary) — латунь на латуни */
    box-shadow: 0 0 0 4px var(--m2-accent-glow);
}

/* Большие заголовки на промо-блоках (credit/tradein hero) */
.credit-offer__title,
.tradein-offer__title,
.app-promo__title,
[class*="-offer__title"] {
    font-family: var(--m2-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(40px, 5vw, 64px) !important;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--m2-text);
    text-transform: none;
}

/* Карточки промо-секций (credit-offer, gifts) — fonted */
.app-section.section-credit-offer,
.app-section.section-gifts {
    border-top: 1px solid var(--m2-hairline-soft);
    border-bottom: 1px solid var(--m2-hairline-soft);
}

/* Карточки банков-партнёров — invert logo, dark surface */
.bank-card {
    background: var(--m2-bg-elev-1) !important;
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-md);
    transition: border-color .25s ease, transform .25s ease;
}
.bank-card:hover {
    border-color: var(--m2-accent);
    transform: translateY(-2px);
}
.bank-card__logo {
    filter: grayscale(1) invert(1) brightness(.95) !important;
    opacity: .8;
    transition: opacity .25s ease;
}
.bank-card:hover .bank-card__logo {
    opacity: 1;
}

/* Кнопка вторичная (.btn_secondary) — dark muted */
.btn.btn_secondary {
    background: var(--m2-bg-elev-2) !important;
    color: var(--m2-text) !important;
    border: 1px solid var(--m2-hairline);
}
.btn.btn_secondary:hover {
    background: var(--m2-bg-elev-1) !important;
    border-color: var(--m2-accent);
}

/* === Каталог: кнопки карточек по нижней линии сетки ===
   Оригинал выравнивает actions только в mobile media query;
   на десктопе карточка — block, кнопки гуляют по высоте. */
.car-card {
    display: flex;
    flex-direction: column;
}
.car-card__thumb {
    flex-shrink: 0;
}
.car-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.car-card__actions {
    margin-top: auto;
}

/* === Меню «Каталог» (dropdown): hover-подсветка в фирменной латуни ===
   Оригинал красит SVG в оранжевый жёстко зашитой filter-цепочкой.
   Эта цепочка даёт ровно #C99A4B (подобрана эмпирически). */
.catalog-menu__item:hover svg,
.catalog-menu .mark-link:hover .mark-link__icon {
    filter: brightness(0) saturate(100%) invert(64%) sepia(100%) saturate(369%) hue-rotate(-14deg) brightness(95%) contrast(65%);
}

/* Сетка марок в меню: app.css ставит padding:0 !important, а тема
   рисует рамку .marks__inner — контент упирался в контур */
.catalog-menu .marks__inner {
    padding: 24px 28px !important;
}

/* Гео-пин в контактах меню — в оригинале inline SVG с fill #F08436 */
.catalog-menu__address::before {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0014 1.83594C6.95796 1.83594 3.66804 5.12585 3.66804 9.16469C3.64146 15.0726 10.7227 19.9713 11.0014 20.1693C11.0014 20.1693 18.3613 15.0726 18.3347 9.16927C18.3347 5.12585 15.0448 1.83594 11.0014 1.83594ZM11.0014 12.8359C8.97554 12.8359 7.33471 11.1951 7.33471 9.16927C7.33471 7.14344 8.97554 5.5026 11.0014 5.5026C13.0272 5.5026 14.668 7.14344 14.668 9.16927C14.668 11.1951 13.0272 12.8359 11.0014 12.8359Z' fill='%23C99A4B'/%3E%3C/svg%3E%0A");
}

/* === Credit-benefits: контекстные иконки в фирменной латуни ===
   В оригинале у всех трёх пунктов одна галочка в оранжевом круге. */
.credit-benefits__item {
    border-color: var(--m2-hairline);
    border-radius: var(--m2-r-lg);
    background: var(--m2-bg-elev-1);
}
/* 1. Автокредит по паспорту и правам — документ */
.credit-benefits__item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Crect x='21' y='16' width='18' height='27' rx='2' stroke='%23F2F3F5' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M26 23h8M26 28h8M26 33h5' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M26 38h4' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 2. Обмен старого авто — стрелки обмена */
.credit-benefits__item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Cpath d='M21 27c1.5-5 6.5-8 11.5-7 3 0.6 5.5 2.4 7 5' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M40 19v6h-6' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39 33c-1.5 5-6.5 8-11.5 7-3-0.6-5.5-2.4-7-5' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M20 41v-6h6' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 3. Рассрочка, выгода — процент */
.credit-benefits__item:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Cpath d='M23 37L37 23' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='25' r='3.5' stroke='%23C99A4B' stroke-width='2'/%3E%3Ccircle cx='35' cy='35' r='3.5' stroke='%23C99A4B' stroke-width='2'/%3E%3C/svg%3E");
}

/* === Futures: иконки fu-item — латунный круг + светлый глиф ===
   Inline-SVG в HTML с stroke #F08436; CSS-stroke перебивает атрибут */
.fu-item__icon-svg rect {
    stroke: var(--m2-accent);
}
.fu-item__icon-svg path,
.fu-item__icon-svg circle {
    stroke: var(--m2-text);
}

/* === Credit-offer futures: контекстные иконки (латунь) ===
   В оригинале обе строки — одинаковая галочка в оранжевом круге */
/* 1. Одобрение 90% — процент */
.credit-offer__futures-item:nth-child(1)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Cpath d='M23 37L37 23' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='25' r='3.5' stroke='%23C99A4B' stroke-width='2'/%3E%3Ccircle cx='35' cy='35' r='3.5' stroke='%23C99A4B' stroke-width='2'/%3E%3C/svg%3E");
}
/* 2. Кредит за 10 минут — секундомер */
.credit-offer__futures-item:nth-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Ccircle cx='30' cy='32' r='10' stroke='%23F2F3F5' stroke-width='2'/%3E%3Cpath d='M30 26v6l4 3' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27 18h6M30 18v4' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* === Stocks page: карточки акций — тёмная поверхность вместо #f7f7f7 === */
.stock-card {
    background: var(--m2-bg-elev-2);
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-lg);
}

.stock-card__content {
    color: var(--m2-text);
}

.stock-card__title {
    font-family: var(--m2-font-display);
    color: var(--m2-text);
}

.stock-description {
    color: var(--m2-text-soft);
}

.stock-date__share {
    color: var(--m2-accent);
}

/* === Credit-page: fp-car-data__bottom — в app.css захардкожен #fff === */
.credit-page .fp-car-data__bottom {
    background: var(--m2-bg-elev-1);
    border: 1px solid var(--m2-hairline);
}

/* === fp-car-data (tradein / credit-flow): в app.css захардкожен #fff === */
.fp-car-data {
    background: var(--m2-bg-elev-2);
    border: 1px solid var(--m2-hairline);
}

/* === Hero-слайдер: одинаковая высота баннеров + кнопки на одной линии ===
   Слайды по умолчанию высотой в свой контент (391/419/364px) — растягиваем
   flex-stretch'ем до самого высокого, кнопки прижимаем к низу. */
.hero-carousel .swiper-slide.hero-carousel__slide {
    height: auto;
}
.hero-carousel__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.hero-carousel__buttons {
    margin-top: auto;
}

/* === Extra-futures («Необходимые документы», tradein): контекстные иконки ===
   В исходнике все 4 карточки — одинаковая оранжевая галочка (extra-future-icon.svg).
   Заменяем content'ом по смыслу: паспорт / ПТС / СТС / доверенность, латунный круг.
   flex-shrink страхует от раздувания при lazy-загрузке loader.svg. */
.extra-futures-card__icon {
    flex-shrink: 0;
}

/* 1. Паспорт гражданина РФ */
.extra-futures .extra-futures-card:nth-child(1) .extra-futures-card__icon {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Crect x='21' y='16' width='18' height='28' rx='2' stroke='%23F2F3F5' stroke-width='2'/%3E%3Ccircle cx='30' cy='26' r='3.5' stroke='%23C99A4B' stroke-width='2'/%3E%3Cpath d='M25 36h10' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2. ПТС — документ с автомобилем */
.extra-futures .extra-futures-card:nth-child(2) .extra-futures-card__icon {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Crect x='20' y='15' width='20' height='30' rx='2' stroke='%23F2F3F5' stroke-width='2'/%3E%3Cpath d='M24 21h12M24 25h12' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M25 38v-2.5c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2V38' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M23.5 38h13' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 3. СТС — пластиковая карточка */
.extra-futures .extra-futures-card:nth-child(3) .extra-futures-card__icon {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Crect x='17' y='21' width='26' height='18' rx='2' stroke='%23F2F3F5' stroke-width='2'/%3E%3Ccircle cx='24' cy='28' r='2.5' stroke='%23C99A4B' stroke-width='2'/%3E%3Cpath d='M31 27h8M31 31h8M21 35h13' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4. Генеральная доверенность — документ с подписью */
.extra-futures .extra-futures-card:nth-child(4) .extra-futures-card__icon {
    content: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='58' height='58' rx='29' stroke='%23C99A4B' stroke-width='2'/%3E%3Crect x='20' y='15' width='20' height='30' rx='2' stroke='%23F2F3F5' stroke-width='2'/%3E%3Cpath d='M24 21h12M24 25h12M24 29h8' stroke='%23F2F3F5' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24 39c1.5-2.5 2.5 1 4-1s2.5 1 5-1.5' stroke='%23C99A4B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* === Credit-offer: цветовое выделение формы заявки ===
   Латунная рамка + мягкое свечение + тёплый градиент-тинт поверх elev-1. */
.credit-offer__form.wrapped-form,
.questions__form.wrapped-form {
    background: linear-gradient(160deg, rgba(201, 154, 75, 0.10) 0%, var(--m2-bg-elev-1) 42%);
    border: 1px solid rgba(201, 154, 75, 0.45);
    box-shadow: 0 0 0 4px var(--m2-accent-soft), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

/* Ретина-ассет кредитного блока (файл 1380×864 = 2×): рендерим в прежних 690px */
.credit-offer__asset {
    width: 690px;
    max-width: 100%;
}

/* === Cookie-плашка: на <575px в cookieModal.css нет position:fixed,
   и она (первый ребёнок body) продавливает шапку вниз. Прижимаем к низу. === */
@media (max-width: 574.98px) {
    .cookie {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        z-index: 9999;
    }
}

/* === MOBILE-FIX: backdrop-filter на .app-header делает его containing block
   для fixed-потомков → .header__top (fixed, media.css:201) прилипал не к
   viewport, а к шапке (+68px body-padding = дыра сверху). На мобиле снимаем
   blur с обёртки и отдаём его самому fixed-элементу вместе с фоном. === */
@media (max-width: 1024px) {
    .app-header {
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }
    .header__top {
        background: var(--m2-bg-header) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%);
                backdrop-filter: blur(16px) saturate(140%);
    }
}

/* === arrow-right-link: глиф стрелки в app.css захардкожен #F08436 → латунь === */
.arrow-right-link:after {
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 8H15M15 8L8 1M15 8L8 15" stroke="%23C99A4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* === header__worktime --active: мягкий пульс зелёной точки (как у callback-виджета) === */
.header__worktime.--active::before {
    animation: m2-worktime-pulse 2s infinite ease-out;
}
@keyframes m2-worktime-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(101, 226, 95, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(101, 226, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(101, 226, 95, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .header__worktime.--active::before { animation: none; }
}

/* === Quiz-баннер (мобильное меню): в dev.css красно-оранжевый градиент
   #ff6b6b→#ff8e53 с розовым пульсом — переводим в латунь дизайн-системы,
   текст тёмный как у btn_primary. === */
.quiz-banner-compact {
    background: linear-gradient(135deg, var(--m2-accent) 0%, var(--m2-accent-hover) 100%);
    color: var(--m2-text-on-accent);
    border-radius: var(--m2-r-md);
    box-shadow: 0 4px 10px var(--m2-accent-glow);
    animation-name: m2-quiz-pulse;
}
.quiz-banner-compact:hover {
    color: var(--m2-text-on-accent);
    box-shadow: 0 6px 15px var(--m2-accent-glow);
}
.quiz-banner-compact .discount-highlight {
    color: var(--m2-text-on-accent);
}
.quiz-banner-compact .quiz-icon {
    filter: brightness(0);
    opacity: 0.85;
}
@keyframes m2-quiz-pulse {
    0%   { box-shadow: 0 0 0 0 var(--m2-accent-glow); }
    70%  { box-shadow: 0 0 0 8px rgba(201, 154, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 154, 75, 0); }
}

/* === credit-terms__asset: файл перегенерирован в 2× (1008×788 вместо 504×394),
   а в app.css width:auto → рендер в натуральную величину, выходит за фрейм.
   Возвращаем размер контейнера оригинала, 2× остаётся на ретину. === */
.credit-terms__asset {
    width: 504px;
    max-width: 100%;
    height: auto;
}

/* === Model-page: подложка чуть светлее базового чёрного ===
   Секция лежала прямо на --m2-bg-base (#0E1115) — тёмные свотчи цвета
   и тёмная форма терялись. Поднимаем контент на elev-1-панель. */
.section-model-page .model-page {
    background: var(--m2-bg-elev-1);
    border: 1px solid var(--m2-hairline);
    border-radius: var(--m2-r-lg);
    padding: 32px;
}

/* форма внутри панели — ступень выше, чтобы не сливалась с подложкой */
.section-model-page .model-page .wrapped-form {
    background: var(--m2-bg-elev-2);
    border: 1px solid var(--m2-hairline);
}

/* свотчи цвета: hairline-обводка, чтобы тёмные цвета читались */
.model-page__colors-item {
    border: 1px solid var(--m2-hairline);
    box-shadow: inset 0 0 0 2px var(--m2-bg-elev-1);
}

@media (max-width: 768px) {
    .section-model-page .model-page {
        padding: 16px;
    }
}

/* === Формы credit-page / fp-form: то же латунное выделение, что у
   credit-offer__form (градиент-тинт + рамка 0.45 + мягкое свечение). === */
.credit-page__form-card,
.fp-form__steps {
    background: linear-gradient(160deg, rgba(201, 154, 75, 0.10) 0%, var(--m2-bg-elev-1) 42%);
    border: 1px solid rgba(201, 154, 75, 0.45);
    box-shadow: 0 0 0 4px var(--m2-accent-soft), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
    border-radius: 20px;
}

/* у fp-form__steps в доноре нет собственного фона и отступов — добавляем */
.fp-form__steps {
    padding: 32px;
}

@media (max-width: 768px) {
    .fp-form__steps {
        padding: 16px;
    }
}

/* === Бейдж оффера в модалках: то же латунное выделение, что у
   credit-page__form-card (градиент-тинт + рамка 0.45 + свечение),
   радиус меньше — элемент компактнее; текст светлый для читаемости. === */
.modal__offer__badge {
    background: linear-gradient(160deg, rgba(201, 154, 75, 0.12) 0%, var(--m2-bg-elev-1) 55%);
    border: 1px solid rgba(201, 154, 75, 0.45);
    box-shadow: 0 0 0 4px var(--m2-accent-soft);
    border-radius: 12px;
    color: var(--m2-text);
    padding: 12px 16px;
    margin: 12px 0 16px;
    line-height: 1.35;
    padding-left: 100px;
}
.modal__offer__badge .percent {
    color: var(--m2-accent);
}

@media (max-width: 768px) {
    .modal__offer__badge {
        padding-left: unset
    }
}