/* Эталонный чат-лендинг — десктоп.
   Шрифт из общего хранилища: подключается одной строкой ниже.
   Палитра вынесена в переменные — при копировании меняется здесь. */
@import url('/_shared/fonts/tenet-sans.css');

:root {
    --font: 'TENET Sans', Arial, Helvetica, sans-serif;
    --font-heading: var(--font);   /* theme.font_heading; не задан — заголовки шрифтом текста */
    --bg: #eef1f5;
    --surface: #ffffff;
    --ink: #1c1f24;
    --ink-soft: #6b7280;
    --brand: #1f4e9c;
    --brand-ink: #ffffff;
    --bot-bubble: #f1f3f7;
    --user-bubble: #1f4e9c;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(20, 30, 50, .10);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* перекрывает прокрутку от стартового transform у .chat и .promo */
    overflow-x: hidden;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

/* Фоновое изображение: фиксировано, под всем контентом (как в референсе) */
/* Фон задаётся из конфига (HERO_BG) — здесь только запасной градиент.
   Ссылка на файл тут дала бы 404 у копии, где своя картинка. */
.bg {
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(160deg, #2b4a7e 0%, #4a6c9e 45%, #8fa3bd 100%) top center / cover no-repeat;
}
/* Затемняющая вуаль, чтобы текст читался поверх любого фото */
.bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,22,44,.45) 0%, rgba(10,22,44,.25) 45%, rgba(240,243,248,.92) 100%);
}

.container { width: min(1180px, 100% - 48px); margin-inline: auto; }

/* ---------- шапка ---------- */
.header { background: transparent; color: #fff; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.header__logo { font-size: 20px; font-weight: 700; }
.header__sub { font-size: 13px; opacity: .8; }
.header__contacts { text-align: right; }
.header__phone { display: block; font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; }
.header__phone:hover { opacity: .85; }
.header__worktime { font-size: 13px; opacity: .8; }

/* ---------- основной блок ---------- */
/* Высота чата вычисляется в JS (fitChatHeight): экран − шапка − промо.
   Так чат упирается в низ экрана при любой высоте окна, а промо не смещается.
   Flex-раскладка с распоркой не используется — она не давала точного результата. */
.main { padding: 0; }
/* display:flow-root — чтобы верхний margin-block промо НЕ схлопывался наружу
   (иначе отступ от шапки пропадает и расчёт --chat-top врёт) */
.main .container { max-width: 820px; display: flow-root; }

.promo {
    text-align: center; color: #fff; margin-block: 60px; flex: none;
    /* плавное появление при загрузке страницы */
    opacity: 0; transform: translateY(-14px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.promo.is-shown { opacity: 1; transform: none; }
.promo__title { font-family: var(--font-heading); margin: 0 0 12px; font-size: 40px; line-height: 1.15; font-weight: 700; text-shadow: 0 2px 18px rgba(8,18,38,.35); }
.promo__text { margin: 0 auto; font-size: 17px; opacity: .92; max-width: 52ch; }
.promo__adv { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.promo__adv li { position: relative; padding-left: 30px; }
/* Иконка своя у каждого пункта — задаётся классом в разметке */
.promo__adv li { display: flex; gap: 12px; align-items: flex-start; padding-left: 0; }
.promo__adv .ico { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 1px; }

/* ---------- чат ---------- */
.chat {
    display: flex; flex-direction: column;   /* .chatcont растёт, реквизиты внизу */
    /* Высота задана ДО выполнения JS — иначе при загрузке появляется скролл,
       который исчезает после fitChatHeight(), и страница дёргается.
       --chat-top: шапка (~70) + промо с margin-block 60px (60+106+60 = 226) = 296px.
       Значение подобрано по фактическим стилям, скрипт уточняет его после отрисовки —
       расхождение минимально, скачка высоты не видно. */
    min-height: max(320px, calc(100svh - var(--chat-top, 296px)));
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 30px 60px rgba(8,18,38,.22);
    overflow: hidden;
    /* плавное появление при загрузке */
    /* Появление БЕЗ сдвига вниз: translateY(40px) удлинял страницу на 40px
       до конца анимации — появлялся скролл, который потом исчезал. */
    opacity: 0; transform: scale(.985); transform-origin: bottom center;
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.chat.is-ready { opacity: 1; transform: none; }
.chat__header { padding: 14px 18px; background: var(--brand); color: var(--brand-ink); }
.chat__top { display: flex; align-items: center; gap: 12px; }
/* Как и .mesimg: силуэт в CSS, без файла — иначе копия ловит 404.
   Фото заказчика подставляется из конфига (MANAGER_PHOTO). */
.chat__avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    background: #fff center/cover no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23e8ecf3'/%3E%3Ccircle cx='21' cy='16.5' r='6.6' fill='%23aab4c4'/%3E%3Cpath d='M7 38c2-7.4 7.4-11.3 14-11.3S33 30.6 35 38Z' fill='%23aab4c4'/%3E%3C/svg%3E");
}
.chat__name { font-weight: 700; }
.chat__role { font-size: 13px; opacity: .85; }

/* min-height НЕ задаём: пустой чат должен быть минимальным и стоять у нижнего края.
   По мере появления сообщений блок растёт вниз, страница скроллится. */
.chatcont { padding: 20px 24px 24px; }   /* без flex-роста: пустота под сообщениями не нужна */

.message {
    display: flex; gap: 10px; margin-bottom: 16px;
    opacity: 0; transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.mesbot  { transform: translateX(-28px); }
/* justify-content и transform в ОДНОМ правиле: раздельные объявления .mesuser
   перетирали друг друга и ломали анимацию выезда */
.mesuser { transform: translateX(28px); justify-content: flex-end; }
.message.is-shown { opacity: 1; transform: none; }

/* Аватар по умолчанию — силуэт прямо в CSS, без обращения к файлу:
   при копировании шаблона img/bot.svg может не быть, и в консоли ловился 404.
   Реальное фото подставляется из конфига (MANAGER_PHOTO). */
.mesbot .mesimg {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: var(--bot-bubble) center/cover no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23dfe4ec'/%3E%3Ccircle cx='17' cy='13.5' r='5.4' fill='%23aab4c4'/%3E%3Cpath d='M5.5 31c1.6-6 6-9.2 11.5-9.2S26.9 25 28.5 31Z' fill='%23aab4c4'/%3E%3C/svg%3E");
}

/* Аватар — только у первой реплики серии: повтор у каждого вопроса выглядит
   как робот, а не как переписка с человеком. */
.mesbot + .mesbot .mesimg { display: none; }
.mesbot + .mesbot { padding-left: 44px; margin-top: -8px; }   /* 34px аватар + 10px gap */
.mesuser + .mesuser { margin-top: -8px; }
.mesbot + .mesbot .mestext  { border-radius: 6px 16px 16px 6px; }
.mesuser + .mesuser .mestext { border-radius: 16px 6px 6px 16px; }

/* Пузырь сообщения: длинный ответ переносится, а не обрезается.
   min-width: 0 обязателен — без него flex-элемент не даёт тексту переноситься. */
.mestext {
    padding: 11px 15px; border-radius: 16px 16px 16px 4px;
    background: #fff; box-shadow: 0 2px 10px rgba(16,30,54,.06);
    min-width: 0; width: fit-content;
    overflow-wrap: break-word;   /* anywhere рвал слова посреди фразы */
}
.mesuser .mestext {
    background: var(--user-bubble); color: #fff;
    border-radius: 16px 16px 4px 16px; box-shadow: 0 4px 14px rgba(31,78,156,.25);
}
/* Контейнер сообщения тоже должен уметь сжиматься */
/* Ширину ограничивает КОНТЕЙНЕР, а не сам пузырь: так текст переносится
   внутри отведённой ширины, а короткие реплики не растягиваются. */
.mescont { min-width: 0; max-width: 70%; }


/* «печатает…» */
.dots { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: 0 2px 10px rgba(16,30,54,.06); }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.4s cubic-bezier(.45,0,.55,1) infinite; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 70%, 100% { opacity: .22; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* кнопки-ответы */
.butblock, .autoblock, .colorblock, .phoneblock {
    opacity: 0; transform: translateY(14px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.butblock.is-shown, .autoblock.is-shown, .colorblock.is-shown, .phoneblock.is-shown {
    opacity: 1; transform: none;
}
.butblock { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px 44px; }

/* Множественный выбор — список с чекбоксами в столбик (MW 2026-09-22).
   Строкой «таблетками» неясно, что можно отметить несколько. */
.butblock--multi { display: grid; gap: 0; max-width: 460px; }
.butblock--multi .butlink {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left; font-size: 15px;
    padding-inline: 0; padding-block: 7px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--ink);
}
/* квадратик-чекбокс рисуем псевдоэлементом: разметку JS не меняем */
.butblock--multi .butlink::before {
    content: ''; flex: none; width: 19px; height: 19px;
    border: 2px solid #c7ced9; border-radius: 5px; background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
/* Общее .butlink:hover (ниже по файлу) делает фон брендовым, а текст белым —
   в списке с чекбоксами это давало нечитаемый текст. Перебиваем явно. */
.butblock--multi .butlink:hover:not(.butlink--submit) {
    background: transparent; color: var(--brand); transform: none;
}
.butblock--multi .butlink:hover:not(.butlink--submit)::before { border-color: var(--brand); }
.butblock--multi .butlink.is-picked { background: transparent; color: var(--ink); }
.butblock--multi .butlink.is-picked::before {
    background: var(--brand) no-repeat center/12px 12px;
    border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* «Готово» — обычная кнопка, без чекбокса, с отступом от списка */
.butblock--multi .butlink--submit {
    justify-self: start; margin-top: 10px; width: auto;
    padding: 9px 20px; border: 1px solid var(--brand); border-radius: 20px;
    background: var(--brand); color: var(--brand-ink); font-weight: 600;
}
.butblock--multi .butlink--submit::before { content: none; }
.butblock--multi .butlink--submit:hover { background: var(--brand); opacity: .9; }
.butlink {
    font: inherit; font-size: 15px; padding: 9px 16px; cursor: pointer;
    border: 1px solid var(--brand); border-radius: 20px;
    background: rgba(255,255,255,.7); color: var(--brand);
    transition: background .2s ease, color .2s ease, transform .15s ease, opacity .3s ease;
}
.butlink:hover { background: var(--brand); color: #fff; transform: translateY(-1px); }
.butlink:active { transform: translateY(0) scale(.98); }
.butlink.is-picked { background: var(--brand); color: #fff; }
.butlink--submit { border-style: dashed; }
.butlink--send { width: 100%; background: var(--brand); color: #fff; padding: 13px; border-radius: 10px; font-weight: 700; }
.butlink[disabled] { opacity: .6; cursor: default; }

/* каталог моделей */
/* Заголовок категории — на всю ширину сетки, над карточками (иначе занимает одну ячейку) */
.autocat { grid-column: 1 / -1; font-weight: 600; color: var(--ink-soft); font-size: 14px; margin: 4px 0 -2px; }
.autoblock { display: grid; grid-template-columns: repeat(auto-fill, minmax(199px, 1fr)); gap: 10px; margin: 0 0 16px 44px; align-items: stretch; }
.autocard {
    font: inherit; text-align: left; cursor: pointer; padding: 12px;
    border: 1px solid #e3e7ee; border-radius: 12px; background: #fff;
    display: grid; gap: 5px; align-content: start;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.autocard:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(31,78,156,.16); transform: translateY(-3px); }
.autocard__img { width: 100%; height: 120px; object-fit: contain; }
.autocard__name { font-weight: 700; }
.autocard__price { font-size: 13px; color: var(--ink-soft); }
.autocard__profit { font-size: 13px; color: #1a7f37; }

/* цвета */
.colorblock { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px 44px; }
.colorcard { font: inherit; cursor: pointer; background: none; border: 0; display: grid; justify-items: center; gap: 5px; width: 76px;
    transition: transform .2s cubic-bezier(.22,.61,.36,1), opacity .3s ease; }
.colorcard:hover { transform: translateY(-2px); }
.colorcard__dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d5dae3; display: block;
    box-shadow: 0 3px 10px rgba(16,30,54,.12); transition: box-shadow .2s ease; }
.colorcard__img { width: 64px; height: 40px; object-fit: contain; }
.colorcard__name { font-size: 12px; color: var(--ink-soft); text-align: center; }
.colorcard:hover .colorcard__name { color: var(--brand); }

/* форма телефона */
.phoneblock { display: grid; gap: 10px; margin: 0 0 14px 44px; max-width: 400px; }
.phoneblock input[type="tel"], .phoneblock input[type="text"] {
    font: inherit; padding: 13px 18px; border: 1px solid #d5dae3;
    border-radius: 26px; width: 100%; background: #fff;
}
.phoneblock input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.inperror { border-color: #d33 !important; }
.errorphone, .errorname { color: #d33; font-size: 14px; }
.policy { font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; align-items: flex-start; }
.policy a { color: var(--brand); }

/* Согласие на обработку данных: системный чекбокс выглядит по-разному
   в каждом браузере, поэтому свой — квадратик рисуется псевдоэлементом. */
.consent { display: block; position: relative; cursor: pointer; user-select: none; }
.consent__input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__text {
    display: inline-block; position: relative; padding-left: 26px;
    font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.consent__text::before {
    content: ''; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid #c7ced9; background: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.consent__input:checked + .consent__text::before {
    background: var(--brand) no-repeat center/10px 10px;
    border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* видимый фокус с клавиатуры — иначе поле недоступно без мыши */
.consent__input:focus-visible + .consent__text::before { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent__text a { color: var(--brand); }
.consent:hover .consent__text::before { border-color: var(--brand); }

/* ---------- модальное окно ---------- */
.dialog {
    border: 0; border-radius: var(--radius); padding: 28px; max-width: 420px; width: calc(100% - 32px);
    box-shadow: var(--shadow); text-align: center;
    /* position: fixed, а не relative: у модалки в top layer relative ставит её в начало
       документа, и фокус на «×» при showModal() уносит прокрутку страницы вверх. */
    position: fixed;
}
.dialog::backdrop { background: rgba(8, 18, 38, .55); animation: dlgFade .3s ease; }
.dialog[open] { animation: dlgIn .35s cubic-bezier(.22,.61,.36,1); }
@keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.dialog__title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.dialog__text { color: var(--ink-soft); margin-bottom: 20px; }

/* ---------- подвал ---------- */
/* Реквизиты — внутри блока чата, отделены линией */
/* Прижат к низу блока чата: margin-top: auto забирает свободное место,
   когда сообщений мало. При этом .chatcont НЕ растягивается (flex: 1 1 auto у него
   давал пустоту между сообщениями и реквизитами). */
.chat__legal {
    margin-top: auto;
    display: grid; gap: 3px; padding: 14px 24px 18px;
    border-top: 1px solid rgba(16,30,54,.08);
    font-size: 11.5px; line-height: 1.45; color: var(--ink-soft);
}
.chat__legal a { color: inherit; }

/* ---------- компактная шапка (выезжает при прокрутке) ---------- */
.minihead {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transform: translateY(-100%);
    pointer-events: none;            /* скрытая шапка не должна ловить клики */
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(8,18,38,.12);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.minihead.is-shown { transform: none; pointer-events: auto; }
.minihead__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: min(820px, 100% - 32px); margin-inline: auto; padding: 10px 0;
}
.minihead__brand { font-weight: 700; font-size: 15px; color: var(--ink); }
.minihead__phone { font-weight: 700; font-size: 17px; color: var(--brand); text-decoration: none; white-space: nowrap; }
.minihead__phone:hover { opacity: .8; }

/* ---------- состояния выбора (перевыбор разрешён) ---------- */
/* Блок ответов остаётся после выбора: пользователь может передумать.
   Выбранный вариант подсвечен, остальные приглушены. */
.butblock.is-answered .butlink:not(.is-picked),
.autoblock.is-answered .autocard:not(.is-picked),
.colorblock.is-answered .colorcard:not(.is-picked) { opacity: .45; }

.butblock.is-answered .butlink:hover,
.autoblock.is-answered .autocard:hover,
.colorblock.is-answered .colorcard:hover { opacity: 1; }

.autocard.is-picked { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.colorcard.is-picked .colorcard__dot { box-shadow: 0 0 0 3px var(--brand); }
.colorcard.is-picked .colorcard__name { color: var(--brand); font-weight: 700; }

/* Подсказка «можно изменить» у отвеченного блока */
.butblock.is-answered::after,
.autoblock.is-answered::after,
.colorblock.is-answered::after {
    content: 'Можно выбрать другой вариант';
    display: block; width: 100%; order: 99;
    font-size: 12px; color: var(--ink-soft); margin-top: 2px;
}
.autoblock.is-answered, .colorblock.is-answered { position: relative; }

/* ---------- УТП в шапке чата ---------- */
.advantages {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.22);
}
.advantage {
    display: flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 0;
    cursor: pointer; border: 0; background: none; padding: 4px 0; text-align: left;
    color: inherit; font: inherit;
    transition: opacity .2s ease, transform .2s ease;
}
.advantage:hover { opacity: .82; transform: translateY(-1px); }
.advantage:active { transform: translateY(0); }
.advantage:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.advantage__img { flex: none; filter: brightness(0) invert(1); opacity: .9; margin-top: 1px; }
/* Иконка из общего спрайта /_shared/img/adv-sprite.svg.
   stroke=currentColor внутри symbol — цвет наследуется от текста,
   поэтому на красной шапке иконка белая, на светлой — тёмная. */
/* Иконка из инлайн-спрайта. Размер задаётся вложенному svg: сам span —
   только обёртка. stroke=currentColor внутри symbol наследует цвет текста. */
/* Иконка в круглой подложке: на цветной шапке белый круг с брендовой
   иконкой читается лучше, чем контурная иконка прямо на фоне. */
.advantage__ico {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 8px;
    background-color: #fff; border-radius: 100%;
}
.advantage__ico svg { width: 100%; height: 100%; display: block; color: var(--brand); }
.advantage__text { min-width: 0; overflow-wrap: anywhere; white-space: normal; font-size: 13.5px; line-height: 1.45; }

/* Плашка под шапкой */
.purchase {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 13px 18px; border: 0; cursor: pointer;
    font: 700 13.5px/1.35 var(--font); color: var(--brand); text-align: center;
    background: rgba(31,78,156,.09);
    border-bottom: 1px solid rgba(31,78,156,.12);
    transition: background .2s ease, color .2s ease;
}
.purchase:hover { background: var(--brand); color: #fff; }
.purchase:active { background: #1a4485; }
.purchase:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.purchase__arrow { font-size: 16px; transition: transform .2s cubic-bezier(.22,.61,.36,1); }
.purchase:hover .purchase__arrow { transform: translateX(4px); }

/* ---------- инфо-кнопка (условия кредита, дисклеймеры) ---------- */
.infobtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; padding: 0; vertical-align: middle;
    font: 700 11px/1 var(--font); cursor: pointer;
    color: currentColor; background: transparent;
    border: 1px solid currentColor; border-radius: 50%; opacity: .65;
}
.infobtn:hover, .infobtn:focus-visible { opacity: 1; }
.advantage .infobtn { color: #fff; cursor: help; }   /* значок кликается отдельно: описание; само преимущество открывает форму */
.advantage--static { cursor: pointer; }

/* ---------- карточка модели: цена, выгода, платёж ---------- */
.autocard { position: relative; padding-top: 14px; }
.autocard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.autocard__badge {
    position: absolute; top: -8px; left: 10px; z-index: 1;
    padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; color: #fff; background: #d9432f;
}
/* галочка выбранной модели */
.autocard__mark {
    position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
    border-radius: 50%; border: 1px solid #d5dae3; background: #fff; transition: .15s;
}
.autocard.is-picked .autocard__mark {
    border-color: var(--brand); background: var(--brand)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.autocard__price { font-size: 15px; font-weight: 700; color: var(--ink); }
.autocard__profit {
    font-size: 12.5px; color: #1a7f37; font-weight: 700;
    background: rgba(26,127,55,.10); border-radius: 6px; padding: 2px 6px; justify-self: start;
}
.autocard__payment { font-size: 12.5px; color: var(--ink-soft); }
/* Подарок прижат к низу карточки: grid-row 1fr забирает остаток высоты,
   поэтому карточки с подарком и без него одинаковой высоты. */
.autocard__gift {
    font-size: 12px; color: #8a5a00; background: rgba(214,158,46,.14);
    border-radius: 6px; padding: 3px 7px; justify-self: start;
    align-self: end; margin-top: auto;
}
/* Ровный низ у всех карточек независимо от числа строк */
.autocard { align-content: stretch; }
.autocard__payment { margin-top: auto; }

/* ---------- фаза 6b: вид карточек каталога (theme.card_view) ----------
   Классы на <html> ставит index.php; без них — прежний вид (фото вписано, 120px). */
/* edge — фото в край карточки, 4:3 */
.cards-edge .autocard { padding: 0 0 12px; overflow: hidden; gap: 4px; }
.cards-edge .autocard__img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 4px; }
.cards-edge .autocard > span:not(.autocard__badge):not(.autocard__mark) { margin: 0 12px; }
.cards-edge .autocard__profit, .cards-edge .autocard__gift { justify-self: start; }
.cards-edge .autocard:not(:has(.autocard__img)) { padding-top: 14px; }   /* позиция без фото — текст не прилипает к краю */
/* cover — фото на всю карточку, название и цена поверх на затемнении */
.cards-cover .autocard { padding: 0 0 12px; min-height: 200px; overflow: hidden; border: 0; background: var(--brand); color: #fff; align-content: end; gap: 3px; }
.cards-cover .autocard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cards-cover .autocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%); pointer-events: none; }
.cards-cover .autocard > span:not(.autocard__badge):not(.autocard__mark) { position: relative; z-index: 1; margin: 0 12px; }
.cards-cover .autocard__name, .cards-cover .autocard__price { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cards-cover .autocard__payment { color: rgba(255,255,255,.85); margin-top: 0; }
.cards-cover .autocard__profit { background: rgba(255,255,255,.18); color: #fff; }
.cards-cover .autocard__gift { background: rgba(255,255,255,.18); color: #fff; margin-top: 0; }
.cards-edge .autocard__badge, .cards-cover .autocard__badge { top: 8px; left: 8px; z-index: 2; }
.cards-edge .autocard__mark, .cards-cover .autocard__mark { z-index: 2; }
.cards-edge .autocard.is-picked, .cards-cover .autocard.is-picked { box-shadow: 0 0 0 3px var(--brand); }

/* ---------- фаза 6b: логотип на тёмной шапке десктопа (theme.logo_on_dark) ---------- */
.logo-dark-white .header__logo-img { filter: brightness(0) invert(1); }
.logo-dark-plate .header__logo-img { background: #fff; border-radius: 8px; padding: 5px 9px; }

/* ---------- модалка условий ---------- */
.dialog--info { max-width: 480px; text-align: left; }
.dialog--info .dialog__text { font-size: 14px; line-height: 1.5; max-height: 55vh; overflow-y: auto; }
.dialog--info .butlink { margin-top: 18px; }


/* Пользователь просил меньше анимации — уважаем настройку ОС */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .chat, .promo, .message, .butblock, .autoblock, .colorblock, .phoneblock { opacity: 1 !important; transform: none !important; }
}

/* ---------- модалка с формой обратного звонка ---------- */
.dialog--form { max-width: 420px; text-align: left; }
.dialog--form .dialog__title { text-align: center; }
.dialog--form .dialog__text { text-align: center; font-size: 14px; }
.callback-form { display: grid; gap: 10px; margin-top: 18px; }
.callback-form input[type="tel"], .callback-form input[type="text"] {
    font: inherit; padding: 12px 14px; border: 1px solid #d5dae3; border-radius: 10px; width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.callback-form input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,78,156,.15);
}
.callback-form .policy { font-size: 12.5px; }

/* ---------- мобильная шапка (на десктопе скрыта) ---------- */
.mhead { display: none; }
.header__close { display: none; }
.overlay { display: none; }

/* --- Шапка: логотипы и точки продаж (MW 2026-09-22) ----------------------
 * Структура как .logogrid в референсе promo.tenet-kanavto.ru:
 *     [лого] [лого] | НАЗВАНИЕ САЛОНА
 * Разделитель — border-left У ТЕКСТА, а не между логотипами.
 */
.header__brand.logogrid { display: flex; align-items: center; gap: 16px; }
.header__logos { display: flex; align-items: center; gap: 14px; }
/* высота фиксирована, ширина по пропорции: логотипы приходят разных размеров */
.header__logo-img { height: 34px; width: auto; max-width: 150px; display: block; }

.header__logotext { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.header__logotext span {
  display: block; font-size: 13px; font-weight: 400;
  opacity: .8; text-transform: none; letter-spacing: 0;
}
/* разделитель появляется, только когда слева есть логотип */
.header__logotext.has-logo { border-left: 1px solid rgba(255,255,255,.3); padding-left: 16px; }

.header__address { font-size: 13px; opacity: .85; margin-bottom: 2px; }

.points { position: relative; display: inline-block; text-align: right; }
.points__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; font-size: 13px; opacity: .85;
}
.points__btn:hover { opacity: 1; }
.points__arrow {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform .15s;
}
.points__btn[aria-expanded="true"] .points__arrow { transform: rotate(180deg); }
.points__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; min-width: 260px;
  background: #fff; color: #1b2434; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.points__item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px;
}
.points__item:hover { background: #eef2f8; }
.points__item b { display: block; font-size: 13px; }
.points__item span { display: block; font-size: 13px; opacity: .75; }

@media (max-width: 900px) {
  .header__brand.logogrid { gap: 12px; }
  .header__logo-img { height: 28px; max-width: 120px; }
  .header__logotext.has-logo { padding-left: 12px; }
  .points__list { min-width: 220px; }
}

/* ---------- фаза 8: свободный диалог с ассистентом (assistant.mode = hybrid) ---------- */
.freeform { display: flex; gap: 8px; margin: 4px 0 16px 44px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.freeform.is-shown { opacity: 1; transform: none; }
.freeform__input { flex: 1; min-width: 0; border: 1.5px solid #d9dfe8; border-radius: 22px; padding: 10px 16px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; outline: none; }
.freeform__input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.freeform__send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 16px; cursor: pointer; }
.freeform__send:hover { filter: brightness(1.08); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px 44px; opacity: 0; transition: opacity .35s ease; }
.chips.is-shown { opacity: 1; }
/* 30.09.2026 (etalon-ai-15): залитые кнопки выглядели уже нажатыми. Варианты шага — контур фирменного цвета, вопросы-подсказки — серый контур;
   заливка — только при наведении и нажатии */
.chip { border: 1px solid #cfd5df; background: #fff; color: var(--ink-soft); border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover, .chip:focus-visible { border-color: var(--brand); color: var(--brand); }
.chip--pick { border: 1.5px solid var(--brand); color: var(--brand); font-weight: 600; background: #fff; }
.chip--pick:hover, .chip--pick:focus-visible, .chip:active { background: var(--brand); color: var(--brand-ink); }
.mesbot.is-ai .mestext { border-left: 3px solid var(--brand); }
.typing.is-live .dots span { animation-duration: 1s; }
@media (max-width: 900px) {
  .freeform, .chips { margin-left: 0; max-width: none; }
}