/* ============================================================
   GEIZER · Квиз-калькулятор «3 вопроса → финмодель»
   Только на главной и странице франшизы. Показ через 3 минуты.
   ============================================================ */

/* ---------- постоянный запускатор (слева внизу; справа — виджеты навигации) ---------- */
.qz-launch{position:fixed;left:22px;bottom:22px;z-index:210;display:flex;align-items:center;gap:11px;
  padding:11px 18px 11px 12px;border-radius:999px;cursor:pointer;-webkit-appearance:none;appearance:none;
  border:1px solid rgba(120,180,255,.4);background:linear-gradient(120deg,rgba(10,32,68,.96),rgba(6,20,44,.96));
  backdrop-filter:blur(10px);box-shadow:0 18px 44px -14px rgba(0,8,26,.9);
  color:#e8f2ff;font:800 13px/1 Inter,Arial,sans-serif;text-align:left;
  transform:translateY(0);transition:transform .3s cubic-bezier(.3,1.3,.4,1),box-shadow .3s,border-color .3s;
  animation:qzLaunchIn .6s cubic-bezier(.3,1.3,.4,1) both}
@keyframes qzLaunchIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
.qz-launch:hover{transform:translateY(-3px);border-color:#42bfff;box-shadow:0 24px 54px -14px rgba(8,134,255,.75)}
.qz-launch:active{transform:translateY(-1px) scale(.98)}
.qz-launch-ic{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#0a74ff,#38b6ff);box-shadow:0 8px 20px -6px rgba(8,134,255,.9)}
.qz-launch-ic svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qz-launch-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #42bfff;
  animation:qzLaunchPulse 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes qzLaunchPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.qz-launch b{display:block;font-size:13px;font-weight:800}
.qz-launch small{display:block;margin-top:2px;color:#8fb0d8;font-size:10.5px;font-weight:600}
.qz-launch.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:.3s}
@media (max-width:600px){
  .qz-launch{left:12px;bottom:12px;padding:9px;gap:0}
  .qz-launch span{display:none}
}
@media (prefers-reduced-motion:reduce){.qz-launch,.qz-launch-ic::after{animation:none}}

.qz-scrim{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px;
  background:rgba(1,7,18,.76);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.qz-scrim.is-open{opacity:1;visibility:visible}

.qz{position:relative;width:min(940px,100%);max-height:92vh;display:grid;grid-template-columns:.82fr 1.18fr;
  border-radius:26px;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(155deg,rgba(14,40,82,.99),rgba(5,17,38,.99)) padding-box,
             linear-gradient(140deg,rgba(120,180,255,.55),rgba(40,90,220,.1) 50%,rgba(70,120,255,.45)) border-box;
  box-shadow:0 60px 140px -30px rgba(0,4,16,.95);
  transform:translateY(20px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.3,1.2,.35,1),opacity .45s}
.qz-scrim.is-open .qz{transform:none;opacity:1}

/* ---------- левая колонка: обложка ---------- */
.qz-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
/* Зум держим минимальным: обложка — фото с машиной и постами, и при scale 1.06→1.14
   у неё срезало края. Лёгкое движение оставляем, кадр не режем. */
.qz-aside-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);
  animation:qzPan 22s ease-in-out infinite alternate}
@keyframes qzPan{to{transform:scale(1.05) translate(-1%,-0.8%)}}
.qz-aside::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,14,32,.45) 0%,rgba(4,14,32,.72) 55%,rgba(4,14,32,.95) 100%),
             linear-gradient(90deg,rgba(8,134,255,.2),transparent 60%)}
.qz-aside>*:not(.qz-aside-bg){position:relative;z-index:2}
.qz-aside-logo{width:112px;height:auto;margin-bottom:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.qz-aside b{display:block;color:#fff;font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.qz-aside p{margin:0;color:#a9c0dd;font-size:12.5px;line-height:1.5}
.qz-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.qz-facts span{padding:5px 10px;border-radius:999px;border:1px solid rgba(120,180,255,.32);background:rgba(6,22,48,.6);
  color:#c6dcf7;font:800 9.5px/1 Inter,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}

/* ---------- правая колонка: шаги ---------- */
.qz-main{display:flex;flex-direction:column;min-width:0}
.qz-head{padding:24px 28px 0;flex:0 0 auto}
.qz-kicker{display:inline-block;color:#42bfff;font:800 10px/1 Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.qz-body{flex:1;overflow-y:auto;padding:16px 28px 8px;scrollbar-width:thin}
.qz-body::-webkit-scrollbar{width:5px}
.qz-body::-webkit-scrollbar-thumb{background:rgba(120,170,235,.32);border-radius:9px}

.qz-step{display:none;animation:qzIn .45s cubic-bezier(.3,1,.35,1)}
.qz-step.is-on{display:block}
@keyframes qzIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

.qz h3{margin:10px 0 6px;color:#f2f7ff;font-size:clamp(20px,2.3vw,26px);font-weight:900;letter-spacing:-.025em;line-height:1.16}
.qz h3 em{font-style:normal;color:transparent;background:linear-gradient(100deg,#4fb6ff,#8fd0ff);-webkit-background-clip:text;background-clip:text}
.qz-lead{margin:0 0 14px;color:#9db2d0;font-size:13.5px;line-height:1.55}

/* подсказка-инсайт */
.qz-hint{display:flex;gap:9px;margin:0 0 14px;padding:11px 13px;border-radius:12px;
  border:1px solid rgba(65,194,255,.24);background:rgba(8,134,255,.09);color:#bcd4f0;font-size:12px;line-height:1.45}
.qz-hint i{flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#42bfff;color:#04172f;
  font:900 10px/15px Inter,Arial,sans-serif;text-align:center;font-style:normal}

/* варианты ответа */
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;cursor:pointer;text-align:left;
  border-radius:13px;border:1px solid rgba(120,180,255,.2);background:rgba(7,24,52,.75);
  color:#dbe8f8;font:600 14px/1.3 Inter,Arial,sans-serif;-webkit-appearance:none;appearance:none;
  transition:transform .25s cubic-bezier(.4,1.3,.4,1),border-color .25s,background .25s,box-shadow .25s}
.qz-opt i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(120,180,255,.45);position:relative;transition:.25s}
.qz-opt i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#42bfff;transform:scale(0);transition:transform .25s cubic-bezier(.4,1.6,.4,1)}
.qz-opt:hover{transform:translateX(4px);border-color:rgba(65,194,255,.6);background:rgba(12,38,78,.9)}
.qz-opt.is-sel{border-color:transparent;background:linear-gradient(110deg,rgba(8,134,255,.9),rgba(47,155,255,.75));
  box-shadow:0 14px 32px -12px rgba(8,134,255,.9);color:#fff}
.qz-opt.is-sel i{border-color:#fff}
.qz-opt.is-sel i::after{background:#fff;transform:scale(1)}

/* финальный шаг */
.qz-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.qz-row{grid-template-columns:1fr}}
.qz-field{margin-bottom:12px}
.qz-field label{display:block;margin-bottom:7px;color:#8fa9c8;font:800 9.5px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.qz-field input{width:100%;padding:14px 15px;border-radius:12px;border:1px solid rgba(120,180,255,.3);
  /* 16px, а не 15: ниже этого порога iOS Safari зумит страницу на каждом
   тапе по полю и обратно сам не отъезжает. Квиз — последний шаг перед
   заявкой, и весь платный трафик приходит именно на него. */
  background:rgba(4,15,34,.9);color:#fff;font:600 16px/1 Inter,Arial,sans-serif;outline:none;transition:.25s}
.qz-field input::placeholder{color:#5f7a9e}
.qz-field input:focus{border-color:#2f9bff;box-shadow:0 0 0 3px rgba(47,155,255,.18)}
.qz-field input.is-bad{border-color:#ff6b81;box-shadow:0 0 0 3px rgba(255,107,129,.18)}
.qz-ways{display:flex;gap:8px}
.qz-way{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(120,180,255,.25);background:rgba(7,24,52,.75);color:#c3d6ee;
  font:700 12.5px/1 Inter,Arial,sans-serif;transition:.25s;-webkit-appearance:none;appearance:none}
.qz-way svg{width:15px;height:15px;fill:currentColor}
.qz-way:hover{border-color:rgba(65,194,255,.6);color:#fff}
.qz-way.is-sel{border-color:transparent;background:linear-gradient(110deg,#0a74ff,#2f9bff);color:#fff;box-shadow:0 12px 26px -10px rgba(8,134,255,.9)}
.qz-note{margin:12px 0 0;color:#6d86a8;font-size:10.5px;line-height:1.5}
.qz-note a{color:#8fb3e0;text-decoration:underline}

/* ---------- подвал: прогресс + кнопки ---------- */
.qz-foot{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 28px 20px;border-top:1px solid rgba(120,180,255,.14)}
.qz-progress{flex:1;min-width:0}
.qz-progress span{display:block;margin-bottom:6px;color:#8fa9c8;font-size:11px}
.qz-progress span b{color:#42bfff;font-weight:900}
.qz-bar{height:4px;border-radius:999px;background:rgba(120,170,235,.18);overflow:hidden}
.qz-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#0886ff,#41c2ff);
  box-shadow:0 0 12px rgba(65,194,255,.8);transition:width .5s cubic-bezier(.4,1,.3,1)}
.qz-back{flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(120,180,255,.35);background:transparent;color:#9db2d0;font-size:15px;transition:.25s}
.qz-back:hover{border-color:#42bfff;color:#fff}
.qz-back[disabled]{opacity:.25;pointer-events:none}
.qz-next{position:relative;overflow:hidden;flex:0 0 auto;border:0;border-radius:12px;padding:14px 26px;cursor:pointer;
  font:800 13.5px/1 Inter,Arial,sans-serif;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:9px;
  background:linear-gradient(110deg,#0a74ff,#2f9bff 60%,#38b6ff);box-shadow:0 16px 36px -12px rgba(8,134,255,.9);
  transition:transform .25s,box-shadow .25s,opacity .25s}
.qz-next:hover{transform:translateY(-2px);box-shadow:0 22px 46px -12px rgba(8,134,255,1)}
.qz-next:active{transform:translateY(0) scale(.98)}
.qz-next[disabled]{opacity:.45;pointer-events:none;box-shadow:none}
.qz-next em{font-style:normal;transition:transform .25s}
.qz-next:hover em{transform:translateX(4px)}
.qz-next::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:qzShine 4.5s ease-in-out infinite}
@keyframes qzShine{0%,62%{left:-130%}84%,100%{left:170%}}

.qz-close{position:absolute;right:12px;top:10px;z-index:5;display:flex;align-items:center;gap:6px;padding:7px 10px;border:0;
  border-radius:9px;background:rgba(4,14,32,.5);color:#8fa9c8;font:600 11.5px/1 Inter,Arial,sans-serif;cursor:pointer;transition:.2s}
.qz-close:hover{background:rgba(255,255,255,.1);color:#fff}
.qz-close b{font:400 15px/1 Inter,Arial,sans-serif}

/* ---------- успех ---------- */
.qz-done{display:none;text-align:center;padding:22px 0 8px}
.qz.is-done .qz-body>.qz-step,.qz.is-done .qz-foot{display:none}
.qz.is-done .qz-done{display:block}
.qz-done-ic{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#31da88,#1ea968);box-shadow:0 16px 34px rgba(49,218,136,.45);animation:qzPop .5s cubic-bezier(.3,1.5,.4,1)}
@keyframes qzPop{from{transform:scale(.4);opacity:0}}
.qz-done-ic svg{width:30px;height:30px;fill:none;stroke:#04241a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qz-done b{display:block;color:#fff;font-size:21px;margin-bottom:7px}
.qz-done p{margin:0 auto;max-width:340px;color:#9db2d0;font-size:13px;line-height:1.5}

@media (max-width:820px){
  .qz{grid-template-columns:1fr;max-height:94vh}
  .qz-aside{display:none}
  .qz-head{padding-top:44px}
}
@media (max-width:560px){
  .qz-head,.qz-body,.qz-foot{padding-left:18px;padding-right:18px}
  .qz-foot{flex-wrap:wrap}
  .qz-progress{order:-1;flex-basis:100%}
  .qz-next{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .qz-aside img,.qz-next::after,.qz-done-ic{animation:none}
  .qz,.qz-scrim,.qz-step{transition:none;animation:none}
}

/* ===== Кнопка «Далее» на телефоне была за нижним краем экрана =====
   Замер 20.08.2026, экран 390×664 (iPhone с видимой панелью браузера),
   второй шаг опросника «В каком городе планируете открыть мойку»:

     .qz          высота 624 (обрезана по max-height:94vh), overflow:hidden
     .qz-main     высота 707 — то есть на 83 px больше карточки
       .qz-head    67
       .qz-body   524
       .qz-foot   117  ← низ на отметке 727 при экране 664

   Кнопка «Далее» целиком лежала ниже экрана и была срезана overflow:hidden.
   Человек видел вопрос, отвечал — и не понимал, как идти дальше. На шаге
   «Получить финмодель» то же самое, на Android 360×640 ещё и на четвёртом.

   Метрика подтверждает: за 17–20 августа опросник открывали 286 раз,
   а до шага с контактами дошли 4 раза.

   Почему так вышло: .qz — грид, и его единственная строка считалась по
   содержимому (707 px), не зная про ограничение высоты карточки. Внутри
   .qz-main это флекс-колонка, но `flex:1` у тела работает только тогда,
   когда у контейнера есть заданная высота, — а её не было, поэтому тело
   не сжималось и выдавливало подвал за обрез.

   Лечение: строка грида получает minmax(0,1fr) — ровно высота карточки, —
   а .qz-main и .qz-body получают min-height:0, чтобы им было разрешено
   сжиматься. Тогда прокручивается тело, а шапка с крестиком и подвал с
   кнопкой остаются на виду всегда.

   Плюс dvh рядом с vh: на телефоне vh считается по экрану БЕЗ панели
   браузера, поэтому карточка выходила выше видимой области ещё до всякой
   арифметики. Старые браузеры возьмут строку с vh, новые — с dvh. */
.qz{grid-template-rows:minmax(0,1fr)}
.qz-main{min-height:0}
.qz-body{min-height:0}

@media (max-width:820px){
  .qz{max-height:94vh;max-height:94dvh}
}

/* ---------- Расчёт над формой ----------
   Квиз обещает на обложке «увидите цифры своей мойки», а показывал сразу форму.
   Блок появляется на шаге контактов, над полями: сначала ответ, потом просьба. */
.qz-calc{
  margin:0 0 12px;padding:12px 14px;border:1px solid rgba(120,170,235,.28);
  border-radius:12px;background:rgba(28,52,86,.45);
}
.qz-calc-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.qz-calc-grid>div{min-width:0}
.qz-calc-grid b{
  display:block;font-size:20px;line-height:1.15;color:#eaf2ff;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.qz-calc-grid span{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:#9db2d0}
.qz-calc-grid i{font-style:normal;color:#7e93b3}
.qz-calc-how{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:#8ea5c4}
@media (max-width:560px){
  /* Не в стопку: две колонки экономят около 130 пикселей высоты, а числа
     короткие и в узкой колонке читаются нормально. */
  .qz-calc{padding:10px 12px;margin-bottom:10px}
  .qz-calc-grid{grid-template-columns:1fr 1fr;gap:8px}
  .qz-calc-grid b{font-size:17px}
  .qz-calc-grid span{font-size:10.5px}
  .qz-calc-how{margin-top:8px;font-size:10.5px;line-height:1.45}
}
/* На узких экранах карточка перестраивается в одну колонку, и обложка встаёт
   НАД вопросами. Она занимает почти двести пикселей высоты — из-за них шаг
   формы не помещался в экран и внутри окна появлялась прокрутка. Обложка
   продаёт только на первом шаге; как только человек начал отвечать, она уже
   не нужна и уступает место содержимому. */
@media (max-width:720px){
  .qz[data-step]:not([data-step="0"]) .qz-aside{display:none}
}
/* Телефон: отвоёвываем высоту у служебных частей карточки, чтобы шаг формы
   помещался целиком. Шапка держала 44 пикселя верхнего отступа ради одной
   строки-кикера, подвал переносил прогресс и кнопку на две строки, а подводка
   над полями повторяла то, что уже написано в блоке расчёта прямо над ней. */
@media (max-width:720px){
  .qz-head{padding-top:26px}
  .qz-foot{padding-top:10px;padding-bottom:14px;flex-wrap:nowrap}
  .qz-body{padding-top:10px}
  .qz-step[data-step="4"] .qz-lead{display:none}
  .qz-step[data-step="4"] h3{font-size:17px;line-height:1.25;margin-bottom:10px}
  .qz-note{font-size:10.5px;line-height:1.4}
}@media (max-width:720px){
  .qz-step[data-step="4"] .qz-field{margin-bottom:8px}
  .qz-note{margin-top:8px}
  .qz-calc-how{margin-top:7px}
}
/* Подвал на телефоне: кнопка не должна обрезаться. Сжимается прогресс, а не
   она; подпись «Пройдено» убираем — процент читается на самой полосе. */
@media (max-width:720px){
  .qz-foot{gap:10px;padding-left:14px;padding-right:14px}
  .qz-progress{min-width:0;flex:1 1 auto}
  .qz-progress>span{font-size:10.5px}
  .qz-next{padding:12px 16px;font-size:12.5px;flex:0 1 auto;min-width:0}
  .qz-back{width:36px;height:36px}
}
@media (max-width:420px){
  .qz-progress>span{display:none}
}

/* Низкие экраны (iPhone SE и подобные, высота до 700 пикселей): места мало
   физически. Ужимаем всё, что можно ужать без потери смысла — варианты
   ответов, отступы полей и пояснение под расчётом. Сами числа остаются:
   ради них человек и проходил квиз. */
@media (max-height:780px){
  .qz-body{padding-top:8px;padding-bottom:6px}
  .qz-head{padding-top:22px}
  .qz-opt{padding-top:9px;padding-bottom:9px}
  .qz-step h3{font-size:16px;margin-bottom:8px}
  .qz-calc{padding:9px 11px;margin-bottom:9px}
  .qz-step[data-step="4"] .qz-field{margin-bottom:6px}
  .qz-note{margin-top:6px}
}
/* Ниже 660 пикселей высоты места нет физически: убираем пояснение под расчётом
   и подсказку на обложке. Сами числа остаются — ради них человек и отвечал. */
@media (max-height:660px){
  .qz-hint{display:none}
  .qz-calc-how{display:none}
}