/* ============================================================
   Опрос-расчёт.

   Механика — как на референсе: семь шагов, «Назад» / «Далее»,
   множественный выбор там же, где в оригинале. Оформление —
   карточка-мастер: шаг лежит на графитовой плите (тот же тон,
   что у карточек студии и отзывов), варианты — плитки в сетке,
   переход на графитовой/чёрной плашке во всю ширину.
   ============================================================ */

.quiz{max-width:760px}

.quiz__card{background:var(--bg-3);border-radius:calc(var(--r) * 2);
  padding:clamp(22px,3vw,44px)}
.quiz__top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s6)}
.quiz__count{font-family:var(--disp);font-size:1rem;color:var(--on-dark-3);
  letter-spacing:.04em}

.quiz__step{display:none;border:0;padding:0;margin:0}
.quiz__step.on{display:block}
.quiz__q{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.35rem,2.4vw,2.2rem);line-height:1.24;
  padding:0;margin-bottom:10px}
.quiz__note{font-size:.86rem;color:var(--on-dark-3);margin-bottom:var(--s6)}

/* ── варианты: плитки в сетке ─────────────────────────────
   Раньше строка на всю ширину — теперь плитка на плите
   потемнее (var(--bg-2)), выбранная плитка гаснет в чёрный —
   тот же приём, что у полей планировки, но общий для всех
   шагов, а не только для иконок.                            */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px}
.opts--plan{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
/* На телефоне плитка с иконкой узкая — в одну колонку они
   вытягивают шаг в длинную простыню, а по две влезают. */
@media(max-width:520px){
  .opts--plan{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
}
.opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;padding:clamp(16px,1.8vw,22px);border-radius:var(--r);
  background:var(--bg-2);cursor:pointer;transition:background-color 250ms var(--e)}
.opt:hover{background:#1E1E22}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt svg{width:38px;height:30px;stroke:rgba(255,255,255,.5);fill:none;
  stroke-width:2.2;stroke-linecap:square;transition:stroke 250ms}
.opt input:checked ~ svg{stroke:#fff}
.opt__row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%}
.opt__t{font-size:.94rem;color:var(--on-dark-2);transition:color 250ms}
/* Круглая метка вместо квадрата — общий индикатор выбора для
   чекбоксов и радио, единый визуальный язык плиток.           */
.opt__x{width:16px;height:16px;flex:none;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);position:relative;
  transition:border-color 220ms}
.opt__x::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:#fff;opacity:0;transition:opacity 150ms}
.opt input:checked ~ .opt__row .opt__t{color:#fff}
.opt input:checked ~ .opt__row .opt__x{border-color:#fff}
.opt input:checked ~ .opt__row .opt__x::after{opacity:1}
.opt input:focus-visible ~ .opt__row .opt__x{outline:1px solid #fff;outline-offset:3px}
/* Вся плитка гаснет в чёрный — основной сигнал выбора,
   кружок — уточняющий.                                        */
.opt:has(input:checked){background:#000}
.opt:has(input:checked):hover{background:#000}

/* ── контакты ─────────────────────────────────────────── */
.quiz .f{margin-bottom:var(--s5)}
.quiz label.t{display:block;font-size:.66rem;letter-spacing:var(--tr-mid);
  text-transform:uppercase;font-weight:500;color:var(--on-dark-3);
  margin-bottom:10px}
.quiz input[type=text],.quiz input[type=tel]{width:100%;background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.2);color:var(--on-dark);
  font-family:var(--text);font-size:1.05rem;font-weight:300;padding:10px 0;
  transition:border-color 300ms}
.quiz input[type=text]:focus,.quiz input[type=tel]:focus{outline:0;
  border-color:#fff}
/* Согласие на обработку данных.

   Своя разметка, не как у плиток опроса: здесь метка — прямой
   сосед поля, без обёртки .opt__row. Поэтому и правила отдельные,
   иначе галочка не загорается и человек не понимает, отметил он
   пункт или нет — а без него форма не отправляется.            */
.quiz .consent{display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  margin-top:var(--s5);padding:12px 14px;border-radius:var(--r);
  background:var(--bg-2);transition:background-color 250ms var(--e)}
.quiz .consent:hover{background:#1E1E22}
.quiz .consent input{position:absolute;opacity:0;width:0;height:0}
.quiz .consent span:last-child{font-size:.86rem;color:var(--on-dark-2);
  line-height:1.5;transition:color 250ms}

.quiz .consent .opt__x{width:20px;height:20px;flex:none;margin-top:1px;
  border-radius:5px;border:1px solid rgba(255,255,255,.4);
  position:relative;background:transparent;
  transition:background-color 200ms,border-color 200ms}
/* Галочка — векторный знак фоном. Раньше она рисовалась поворотом
   уголка рамки: такой приём почти невозможно ровно отцентровать,
   и галочка выглядела кривой. У вектора геометрия задана точно. */
.quiz .consent .opt__x::after{content:"";position:absolute;inset:0;
  background:center/13px 13px no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6' fill='none' stroke='%230C0C0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.6);
  transition:opacity 150ms,transform 200ms var(--e)}

.quiz .consent:hover .opt__x{border-color:rgba(255,255,255,.7)}
.quiz .consent input:checked ~ .opt__x{background:#fff;border-color:#fff}
.quiz .consent input:checked ~ .opt__x::after{opacity:1;transform:scale(1)}
.quiz .consent input:checked ~ span:last-child{color:#fff}
.quiz .consent input:focus-visible ~ .opt__x{outline:1px solid #fff;
  outline-offset:3px}
/* пока не отмечено — видно, что это обязательный пункт */
.quiz .consent:has(input:not(:checked)) .opt__x{
  box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.quiz .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── низ ──────────────────────────────────────────────── */
.quiz__back{background:0;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--text);font-weight:500;font-size:.72rem;
  letter-spacing:var(--tr-mid);text-transform:uppercase;
  color:var(--on-dark-3);transition:color 300ms}
.quiz__back:hover{color:var(--on-dark)}
.quiz__back[hidden]{visibility:hidden;display:block}
/* «Далее» — плашка во всю ширину карточки, чёрная (темнее
   графитового поля), поэтому читается как главное действие
   шага, а не рядовая ссылка.                                  */
.quiz__next{display:block;width:100%;background:#000;color:#fff;border:0;
  border-radius:var(--r);cursor:pointer;margin-top:var(--s6);
  padding:clamp(15px,1.6vw,19px);transition:background-color var(--d2),opacity var(--d2)}
/* Раньше наведение не меняло вообще ничего — кнопка казалась
   неживой. Поднимаем на тон выше карточки, как у прочих
   кнопок на графите.                                          */
.quiz__next:hover{background:var(--bg-4)}
.quiz__next .act-etch{font-weight:500;font-size:.74rem;
  letter-spacing:var(--tr-mid);text-transform:uppercase}

/* Сообщение, когда заявка не ушла: человек должен увидеть
   телефон, а не решить, что его заявку приняли.              */
.quiz__err{margin-top:var(--s4);padding:14px 16px;border-radius:var(--r);
  background:rgba(232,140,140,.10);box-shadow:inset 0 0 0 1px rgba(232,140,140,.35);
  color:#E9BDBD;font-size:.9rem;line-height:1.5}
.quiz__err a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ── итог ─────────────────────────────────────────────── */
.quiz__done{display:none}
.quiz__done.on{display:block}
.quiz__done p{color:var(--on-dark-2)}