/* ВИСТЛАН · vl-boost — оформление общего набора для брендовых поддоменов.
   Версия 20260831a. Собран агентом CB 31.08.2026.
   Опирается на переменные из assets/styles.css (--blue, --line, --ink, --bg2),
   но у каждой есть запасное значение: файл не сломается, если переменной нет.
   Откат: убрать строку подключения из index.html. */

.vl-boost { box-sizing: border-box; }
.vl-boost *, .vl-boost *::before, .vl-boost *::after { box-sizing: inherit; }

/* ── блок доверия ─────────────────────────────────────────────────────── */
.vl-trust { padding: 26px 0; background: var(--bg2, #F4F7FC); }
.vl-trust__g {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.vl-trust__i {
  background: #fff; border: 1px solid var(--line, #E2E8F5); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.vl-trust__k { font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: #7C8AA6; }
.vl-trust__v { font-size: 20px; line-height: 1.2; font-weight: 800;
  color: var(--blue, #2D2767); overflow-wrap: anywhere; }
.vl-trust__d { font-size: 13px; line-height: 1.4; color: #56637C; }

@media (max-width: 900px) { .vl-trust__g { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vl-trust__g { grid-template-columns: 1fr; } }

/* ── полоса «ваш расчёт» ──────────────────────────────────────────────── */
.vl-recall {
  max-width: 1180px; margin: 22px auto; padding: 18px 20px;
  background: #fff; border: 1.5px solid var(--blue, #2D2767); border-radius: 16px;
}
.vl-recall__t { font-size: 15px; color: var(--ink, #0F1A33); margin-bottom: 4px; }
.vl-recall__s { font-size: 15px; line-height: 1.5; color: #56637C;
  margin-bottom: 12px; overflow-wrap: anywhere; }
.vl-recall__a { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.vl-btn {
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2;
  border-radius: 12px; padding: 12px 18px; cursor: pointer;
  border: 1.5px solid transparent; min-height: 44px;
}
.vl-btn--pr { background: #23B9D6; color: #06243a; }
.vl-btn--pr:hover { filter: brightness(1.05); }
.vl-btn--gh { background: transparent; color: var(--blue, #2D2767);
  border-color: var(--line, #C9D4E8); }
.vl-btn--gh:hover { background: #F2F6FD; }
.vl-btn:disabled { opacity: .6; cursor: default; filter: none; }

/* ── форма «прислать расчёт на почту» ─────────────────────────────────── */
.vl-mail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  width: 100%; margin-top: 10px; }
.vl-mail__in {
  font: inherit; font-size: 15px; flex: 1 1 240px; min-width: 0; min-height: 44px;
  padding: 11px 14px; border: 1.5px solid var(--line, #C9D4E8); border-radius: 12px;
  color: var(--ink, #0F1A33); background: #fff;
}
.vl-mail__in:focus { outline: 2px solid #23B9D6; outline-offset: 1px; }
.vl-mail__c { flex: 1 1 100%; display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.4; color: #56637C; cursor: pointer; }
.vl-mail__c input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; }
.vl-mail__c a { color: var(--blue, #2D2767); font-weight: 600; }
.vl-mail__m { flex: 1 1 100%; font-size: 13.5px; line-height: 1.45; color: #B4232B; }
.vl-mail__ok { font-size: 15px; line-height: 1.5; color: #15803D; font-weight: 600; }
/* honeypot: видим для бота, невидим и недостижим для человека и скринридера */
.vl-hp { position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ── слои внизу экрана ────────────────────────────────────────────────
   Плашка согласия на cookie (#vl-cookie, её рисует assets/app.js) шла с
   z-index 9999, чат-виджет — с 99000. Без этой строки чат оказывается НАД
   плашкой согласия, а согласие обязано быть верхним слоем.
   Значение то же, что у плашки основного сайта (#vl-cookie-bar).           */
#vl-cookie { z-index: 2147483000 !important; }

/* Чат не должен налезать на липкую панель .sticky-cta (на узких экранах она
   видима, высота ~62 px). Высоту публикует vl-boost.js переменной --vl-sticky-h.

   ПОЧЕМУ СЕЛЕКТОР ТАКОЙ ДЛИННЫЙ. В vl-chat.css уже есть своё правило
   «@media (max-width:768px){ .vlc-root{bottom:…!important} }», и подключается
   этот файл ПОЗЖЕ нашего. При равной силе побеждает последний — измерено
   31.08.2026: чат остался на bottom:20px и накрыл кнопку «Подобрать…».
   Поэтому здесь выше специфичность, а vl-boost.js вдобавок публикует
   --vl-nav-h-always, которую читает правило самого чата. */
html body .vlc-root {
  bottom: calc(var(--vl-sticky-h, 0px) + var(--vl-ck-res, 0px) + 20px) !important;
}

/* ── плашка согласия на cookie против модалки подбора ───────────────────
   #vl-cookie висит внизу экрана с z-index 2147483000, модалка подбора —
   inset:0 с z-index 200 и вертикальным центрированием. На 375px плашка
   занимает снизу ~202px и накрывает кнопку «Далее»: настоящий клик по ней
   истекает по таймауту. Замерено на всех 50 (агент C7, 31.08.2026);
   без vl-boost.css то же самое (9999 против 200) — поломка не наша.

   Поднять модалку НАД плашкой нельзя: её оверлей inset:0 закрыл бы кнопку
   согласия, а она обязана оставаться нажимаемой. Поэтому слои разводятся
   МЕСТОМ: модалка, всплывашка ухода и липкая панель резервируют снизу
   полосу --vl-ck-res, которую публикует vl-boost.js. Плашки нет —
   переменная 0px, и все три правила дают ровно прежние значения. */
html body .modal,
html body .exit-pop { padding-bottom: calc(20px + var(--vl-ck-res, 0px)); }

/* высоту окна тоже надо урезать: без этого max-height:92vh снова заводит
   низ окна под плашку, и «Далее» опять оказывается закрыт */
html body .modal > .modal__box,
html body .exit-pop > .modal__box {
  max-height: min(92vh, calc(100vh - 40px - var(--vl-ck-res, 0px)));
}

/* липкая панель внизу — её кнопка открывает тот же подбор, плашка накрывала
   и её (замер: y=787, сверху DIV#vl-cookie) */
html body .sticky-cta { bottom: var(--vl-ck-res, 0px); }

/* ── модалка выше чата ─────────────────────────────────────────────────
   Чат (.vlc-root) стоит с z-index 99000, модалка подбора — с 200.
   Замерено 31.08.2026 на fplus.vistlan.ru при ширине 375: elementFromPoint
   в центре кнопки «Далее» вернул DIV.vlc-root, настоящий клик истёк по
   таймауту — кнопку запуска чата вынесло ровно на неё.
   Разводим порядком: модалка и всплывашка ухода выше чата, но НИЖЕ плашки
   согласия (2147483000) — та обязана оставаться нажимаемой, и от неё
   модалка отделена не порядком, а местом (--vl-ck-res выше).
   Прежнее соотношение модалки и всплывашки сохранено: 200 < 210. */
html body .modal { z-index: 99500; }
html body .exit-pop { z-index: 99600; }

/* ── плашка согласия компактнее на узком экране ────────────────────────
   Ни одна буква не убирается: уменьшены только внутренние отступы и кегль.
   На 375px плашка занимала 202px из 812 — четверть экрана, — и ровно на
   столько же сжималось окно подбора. */
@media (max-width: 560px) {
  #vl-cookie { padding: 12px 14px !important; font-size: 13px !important;
    gap: 8px !important; border-radius: 12px !important; }
  #vl-cookie button { padding: 8px 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-boost * { animation: none !important; transition: none !important; }
}

/* ══ R2-M/VL 10.09.2026 — телефон на 49 брендовых хостах (общий файл для 70 хостов; на AutoID дублирует autoid.css) ══
   Замер WebKit iPhone 14: ползунок 8 px и палец мимо, панель 61 + cookie 158 px, кнопки 35–38 px, калькулятор шире экрана
   (printer: .calc__panel 489 px при 390). Специфичность html body — чтобы победить styles.css и inline-стили плашки. */
html body input[type=range]{-webkit-appearance:none;appearance:none;width:100%;max-width:100%;height:44px;margin:0;padding:0;background:transparent;touch-action:pan-y;cursor:pointer;outline:none;border-radius:0;box-sizing:border-box}
html body input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--blue,#2563eb) 0%,var(--blue,#2563eb) var(--fill,30%),var(--bg2,#e8edf5) var(--fill,30%))}
html body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:4px solid var(--blue,#2563eb);box-shadow:0 3px 10px -2px rgba(37,99,235,.6);transition:transform .1s}
html body input[type=range]::-webkit-slider-thumb:active{transform:scale(1.12)}
html body input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--bg2,#e8edf5)}
html body input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--blue,#2563eb)}
html body input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--blue,#2563eb);box-sizing:border-box}
html body input[type=range]:focus-visible{outline:2px solid var(--blue,#2563eb);outline-offset:4px}
html body .calc__row label.t{flex-wrap:wrap;gap:4px 12px;align-items:baseline}
html body .calc__row .v{white-space:nowrap}
@media (hover:none){ html body .reveal{opacity:1!important;transform:none!important;transition:none!important} }
@media (max-width:768px){
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),html body select,html body textarea{font-size:16px!important}
  html body .field input:not([type=checkbox]):not([type=radio]),html body .field select,html body .calc select,html body .modal input,html body .embed input{min-height:48px}
  html body .btn,html body button:not(.mobile-nav__close):not(.qopt),html body .qopt,html body .hq__opt,html body .chk-opt,html body .chk-grid label,html body .door,html body .vcpreset,html body .sticky-cta a{min-height:44px}
  html body .btn{white-space:normal;line-height:1.2}
  html body .hq__opt{padding:11px 14px}
  html body .calc .chk-grid label{padding:11px 12px}
  html body .qopts{gap:10px}
  /* калькулятор не шире экрана */
  html body .calc{grid-template-columns:minmax(0,1fr)!important;gap:22px}
  html body .calc__panel,html body .calc__form,html body .calc__result,html body .calc__row,html body .calc__line{min-width:0;max-width:100%;box-sizing:border-box}
  html body .calc .opt-grid{grid-template-columns:1fr!important}
  html body .calc select,html body .calc input{width:100%;max-width:100%;box-sizing:border-box}
  html body .calc__row .v{font-size:20px}
  /* низ экрана */
  html body .sticky-cta{padding:6px 12px calc(6px + env(safe-area-inset-bottom));gap:8px}
  html body .sticky-cta .btn{padding:11px 10px;font-size:15px;min-height:44px}
  html body .sticky-cta .scall{width:44px}
  html body #vl-cookie{padding:8px 10px!important;font-size:12px!important;line-height:1.3!important;gap:6px!important;border-radius:12px!important;left:8px!important;right:8px!important;bottom:8px!important}
  html body #vl-cookie>span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0!important;flex:1 1 100%!important}
  html body #vl-cookie>span:last-child{display:flex;gap:8px;flex:1 1 100%;margin:0!important}
  html body #vl-cookie button{padding:8px 10px!important;font-size:12.5px!important;min-height:44px;flex:1 1 40%;margin:0!important;line-height:1.2}
  /* таблицы и плашка фактов */
  html body .models table,html body .matrix table{min-width:560px}
  html body .cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html body .proofbar__it span{display:block;min-width:0;flex:1 1 auto}
  html body .proofbar__it b.nowrap{white-space:normal}
  /* квиз и формы */
  html body #eqStep{min-height:260px}
  html body .qgate__row input{min-height:48px}
  html body .qgate__btn{min-height:48px;width:100%}
}
@media (max-width:768px){
  /* видео-квиз VL: чипы ответов на 2 px за краем при 375 px; кнопки шапки не шире экрана */
  html body .answer-chip{max-width:100%;box-sizing:border-box;white-space:normal}
  html body .header__cta{min-width:0;max-width:100%;flex-wrap:wrap}
  /* кнопка чата: на телефоне только иконка — подпись «Задать вопрос» (181 px) закрывала кнопки «КП на партию»/«Пройти заново» */
  html body .vlc-launcher{width:52px!important;height:52px!important;padding:0!important;border-radius:50%!important;justify-content:center!important;min-width:0!important}
  html body .vlc-launcher>span{display:none!important}
}
@media (max-width:768px){
  /* карточки вариантов калькулятора (.chk-opt): текст не переносился и уезжал за край на 39 хостах (замер «после» v c) */
  html body .chk-opt{min-width:0;max-width:100%;box-sizing:border-box}
  html body .chk-opt>span{min-width:0;flex:1 1 auto}
  html body .chk-opt .nm,html body .chk-opt .ds{white-space:normal;overflow-wrap:anywhere}
  html body .opt-grid,html body .chk-grid{min-width:0;max-width:100%}
}

/* UX-03 (15.09.2026, прогон autorun-cro): логотип в подвале растягивался — атрибут width="150" при CSS height:36px
   и пропорциях файла 3,39:1 давал 150×36 (4,17:1, +23 %). Ширина — по пропорциям файла. */
html body .footer .footer__logo{width:auto;height:36px;object-fit:contain}
/* UX-05 (15.09.2026, прогон autorun-cro): вторичный серый текст ниже AA 4,5:1 (замер labels/tsc): .vl-trust__k #7c8aa6 3,48:1,
   .disclaimer и #eqCount #6b7791 4,49:1, подписи калькулятора на #f5f7fb 4,19:1, .models__src и .stock__vendor #6b7a99 4,31:1. */
html body .vl-trust__k, html body .disclaimer, html body .calc__row > div > span, html body .models__src,
html body #eqCount, html body .stock__vendor{color:#56627a}
/* UX-06 (16.09.2026, прогон autorun-cro, повторный замер G2): выпадающие списки калькуляторов 28px высотой, ссылки подвала 24px —
   ниже 44px на телефоне; подпись автора истории и пояснение чек-листа #6b7791 на белом 4,49:1 (порог AA 4,5). */
@media (max-width:768px){
  html body main select{min-height:44px}
  html body .footer .footer__grid a{display:block;padding-top:10px;padding-bottom:10px}
}
html body .story .story__who, html body #checklist > .muted{color:#56627a}