/* Квиз — по макету «Квиз / Десктоп» (149:207) 1920×780 и «Квиз / Мобильный»
   (151:207). Секция: поля 80, контент 1440, две колонки 720 + 640, зазор 80. */

.qz { background: #fff; }
.qz__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: grid; grid-template-columns: minmax(0, 720fr) 640px;
  gap: 80px; align-items: center;
}

.qz__text { display: flex; flex-direction: column; gap: 24px; }
.qz__h { font-size: 48px; font-weight: 800; line-height: 50.4px; letter-spacing: -1.44px; color: var(--ink); }
.qz__sub { font-size: 17px; font-weight: 500; line-height: 26.35px; color: var(--ink-2); }

.qz__facts { display: flex; gap: 32px; }
.qz__fact { display: flex; flex-direction: column; gap: 1px; }
.qz__fact b { font-size: 26px; font-weight: 800; line-height: 35.52px; letter-spacing: -0.52px; color: var(--ink); }
.qz__fact i { font-style: normal; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }

/* Карточка 640×620: поля 32, зазор 24, тень мягкая и глубокая. */
.qz__card {
  min-height: 620px; padding: 32px;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 36px -6px rgba(15,23,33,.12);
  display: flex; flex-direction: column;
}
.qz__step { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; }
/* display: flex перебивает атрибут hidden — прячем явно. */
.qz__step[hidden] { display: none; }

.qz__progress { display: flex; flex-direction: column; gap: 10px; }
.qz__prow { display: flex; align-items: center; justify-content: space-between; }
.qz__num { font-size: 13px; font-weight: 600; line-height: 17.76px; color: var(--ink-3); }
/* Приписка к вопросу — та же, что на работающем сайте. Стоит в строке
   прогресса, поэтому высоту карточки не меняет. */
.qz__hint { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }
.qz__skip {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 17.76px; color: var(--accent-2);
}
.qz__bar { height: 6px; border-radius: var(--r-pill); background: var(--bg-soft); overflow: hidden; }
.qz__bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .2s ease; }

.qz__q { font-size: 28px; font-weight: 800; line-height: 38.25px; letter-spacing: -0.56px; color: var(--ink); }

/* Варианты: сетка с зазором 12, высота карточки 171 — из макета.
   Столбцов три, а не два: вопрос о комнатах пришёл с работающего сайта и
   содержит шесть ответов вместо четырёх. Два ряда по три сохраняют высоту
   карточки 620; по два в ряд дали бы третий ряд, и карточка выросла бы до
   790, разъехавшись с соседними блоками. */
.qz__answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qz__opt { position: relative; display: block; cursor: pointer; }
.qz__opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.qz__optbox {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%; padding: 14px;
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-fld);
  transition: box-shadow .15s ease, background-color .15s ease;
}
/* Выбранный вариант: подложка #FFF4EE и рамка акцентом 2 px. Рамка внутренней
   тенью — иначе карточка подрастает на 2 px и сетка дёргается при выборе. */
.qz__opt input:checked + .qz__optbox {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.qz__opt input:focus-visible + .qz__optbox { outline: 2px solid var(--accent); outline-offset: 2px; }
.qz__opt:hover .qz__optbox { box-shadow: inset 0 0 0 1px var(--ink-3); }

.qz__answers--plans .qz__optbox { height: 171px; }
.qz__plan { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #fff; }
.qz__plan img { width: 100%; height: 100%; object-fit: contain; }

/* Знак «любая планировка» на плитке «Не важно»: четыре клетки акцентом,
   по центру рамки. Не картинка — рисуется currentColor, поэтому чёткий
   при любом масштабе. */
.qz__plan--any { display: grid; place-items: center; color: var(--accent); }
.qz__plan--any svg { width: 46px; height: 46px; }

.qz__opttxt { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; margin-top: auto; }
.qz__opttxt b { font-size: 16px; font-weight: 800; line-height: 21.86px; color: var(--ink); }
.qz__opttxt i { font-style: normal; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }

/* ─── Ползунки: бюджет и площадь ──────────────────────────────────────── */

/* Ползунок занимает середину карточки: вопросов на этом шаге один, и
   прижатый к заголовку он оставлял внизу пустую половину. */
.qz__range { display: flex; flex-direction: column; gap: 14px; margin: auto 0; }

/* Крупное значение — как на работающем сайте: наклонное, акцентом.
   Кегль взят из макета (значение метрики индекса, 149:214 и 33:43). */
.qz__val { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.qz__valpre { font-size: 20px; font-weight: 600; color: var(--ink-2); }
.qz__val b {
  font-size: 52px; font-weight: 800; font-style: italic;
  line-height: 1.05; letter-spacing: -1.56px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.qz__range--dual .qz__val b { font-size: 44px; letter-spacing: -1.32px; }
.qz__valunit { font-size: 20px; font-weight: 600; color: var(--ink-2); }

/* Дорожка 6 px и круглая ручка 22 — те же величины, что у полосы прогресса
   и полей карточки. Оформление ползунка задаётся отдельно для каждого
   движка: общего способа покрасить дорожку в CSS нет.

   Пройденная часть закрашена акцентом. Это не украшение: серая дорожка без
   заливки не читается как то, что можно тянуть, — её принимают за черту. */
.qz__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
  --pct: 50%;
}
.qz__slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(to right,
    var(--accent) 0 var(--pct), var(--bg-soft) var(--pct) 100%);
}
.qz__slider::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(to right,
    var(--accent) 0 var(--pct), var(--bg-soft) var(--pct) 100%);
}
.qz__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border: 3px solid #fff; border-radius: 50%; background: var(--accent);
  box-shadow: 0 2px 8px rgba(15,23,33,.28);
}
.qz__slider::-moz-range-thumb {
  width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%;
  background: var(--accent); box-shadow: 0 2px 8px rgba(15,23,33,.28);
}
.qz__slider:hover::-webkit-slider-thumb { background: var(--accent-2); }
.qz__slider:hover::-moz-range-thumb { background: var(--accent-2); }
.qz__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Двойной ползунок — два обычных друг над другом. Верхний пропускает
   нажатия сквозь себя везде, кроме самой ручки: иначе он перекрывал бы
   нижнюю и левый край было бы не сдвинуть. */
.qz__sliders { position: relative; height: 22px; --low: 0%; --high: 100%; }
.qz__sliders .qz__slider { position: absolute; inset: 0; pointer-events: none; }
.qz__sliders .qz__slider::-webkit-slider-thumb { pointer-events: auto; }
.qz__sliders .qz__slider::-moz-range-thumb { pointer-events: auto; }
/* Дорожку рисует подложка: у двух наложенных ползунков своя была бы видна
   дважды. Выбранный промежуток закрашен между ручками. */
.qz__sliders .qz__slider::-webkit-slider-runnable-track { background: transparent; }
.qz__sliders .qz__slider::-moz-range-track { background: transparent; }
.qz__sliders::before,
.qz__sliders::after {
  content: ""; position: absolute; top: 8px; height: 6px; border-radius: var(--r-pill);
}
.qz__sliders::before { left: 0; right: 0; background: var(--bg-soft); }
.qz__sliders::after { left: var(--low); right: calc(100% - var(--high)); background: var(--accent); }

.qz__ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* Счётчик под площадью. Отрисован сервером и потому виден без скриптов. */
.qz__count { text-align: center; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ink-2); }
.qz__count b { font-weight: 800; color: var(--accent); }

/* Кнопка 576×58 прижата к низу карточки. */
.qz__next {
  margin-top: auto; height: 58px; border: 0; border-radius: var(--r-fld);
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 600; line-height: 21.86px;
}
.qz__next:hover { background: var(--accent-2); }
.qz__next i { font-style: normal; }

/* ─── Планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .qz__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qz__card { min-height: 0; }
  .qz__h { font-size: 34px; line-height: 1.1; letter-spacing: -1px; }
}

/* ─── Телефон 390 ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .qz__in { padding: 48px var(--side); gap: 24px; }
  .qz__h { font-size: 28px; letter-spacing: -0.6px; }
  .qz__sub { font-size: 15px; line-height: 23px; }
  .qz__facts { gap: 20px; }
  .qz__fact b { font-size: 22px; line-height: 1.2; }
  .qz__card { padding: 20px; }
  .qz__step { gap: 18px; }
  .qz__q { font-size: 22px; line-height: 1.2; }
  .qz__answers { gap: 8px; }
  /* На телефоне столбцов два: три карточки в 350 не помещаются. */
  .qz__answers { grid-template-columns: repeat(2, 1fr); }
  .qz__optbox { padding: 12px; }
  .qz__answers--plans .qz__optbox { height: 148px; }
  .qz__plan { width: 76px; height: 76px; }
  .qz__opttxt b { font-size: 15px; }
  .qz__next { height: 52px; }
  .qz__val b { font-size: 38px; letter-spacing: -1.14px; }
  .qz__range--dual .qz__val b { font-size: 32px; letter-spacing: -0.96px; }
  .qz__plan--any svg { width: 38px; height: 38px; }
}