/* Квиз-анкета подбора (nv_quiz.php).
   Намеренно СВЕТЛЫЙ: на тех же страницах живёт фиолетовый блок заявки (.nv-lead), и два
   одинаковых градиента подряд читались бы как один повторённый баннер. Палитра общая:
   --purple-primary #6D37E0, --purple-secondary #F0EAFF. Шрифты сайта: Mulish (заголовки),
   Geologica (текст). box-sizing задаём сами — глобального border-box на сайте нет. */

.nv-quiz, .nv-quiz *, .nv-quiz *::before, .nv-quiz *::after { box-sizing: border-box }

.nv-quiz {
    font-family: "Geologica", sans-serif;
    margin: 40px 0;
    padding: 32px 34px 30px;
    border: 1px solid #ECE7FA;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(52, 16, 132, .08);
}

/* В ленте карточек каталога блок занимает всю строку. Ленты у разных каталогов свёрстаны
   по-разному (у посёлков flex, у новостроек grid), поэтому задаём оба свойства. */
.nv-quiz--row { flex: 0 0 100%; width: 100%; grid-column: 1 / -1; margin: 0 }

.nv-quiz__head { margin-bottom: 22px }

.nv-quiz .nv-quiz__kicker {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--purple-secondary, #F0EAFF);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #4A1FAE;
}

.nv-quiz .nv-quiz__title {
    margin: 0 0 8px;
    font-family: "Mulish", sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.22;
    color: #1C1C21;
}

.nv-quiz .nv-quiz__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #747488;
}

.nv-quiz__bar {
    height: 6px;
    border-radius: 999px;
    background: #F1EDFB;
    overflow: hidden;
}

.nv-quiz__bar-fill {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7B45E8 0%, #5B22CC 100%);
    transition: width .32s cubic-bezier(.4, 0, .2, 1);
}

.nv-quiz .nv-quiz__counter {
    margin: 10px 0 22px;
    font-size: 13px;
    color: #8E8E9F;
}

/* Шаги лежат друг на друге, а высоту формы задаёт quiz.js по активному шагу и плавно
   анимирует. Так блок не «прыгает» при переключении: контент под квизом стоит на месте.
   Абсолютное позиционирование включается только классом is-js — без скриптов шаги
   останутся в обычном потоке и форма будет читаемой. */
.nv-quiz__form { position: relative; transition: height .32s cubic-bezier(.4, 0, .2, 1) }
.nv-quiz__step { margin: 0; padding: 0; border: 0 }

.nv-quiz.is-js .nv-quiz__step {
    position: absolute;
    top: 0; left: 0; right: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.nv-quiz.is-js .nv-quiz__step.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .nv-quiz__form,
    .nv-quiz.is-js .nv-quiz__step,
    .nv-quiz__bar-fill { transition: none }
    .nv-quiz.is-js .nv-quiz__step { transform: none }
}

.nv-quiz .nv-quiz__q {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    font-family: "Mulish", sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.3;
    color: #1C1C21;
}

/* скрытый набор вариантов (например, шоссе области, когда выбрана новостройка) */
.nv-quiz__opts.is-hidden { display: none }

/* число колонок считает PHP: у любого набора должно получаться ровно два ряда,
   чтобы шаги были близки по высоте (4 варианта → 2 колонки, 5–6 → 3, 7–8 → 4) */
.nv-quiz__opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.nv-quiz__opts[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.nv-quiz__opts[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }

/* плашки без подсказки не должны быть заметно ниже — иначе шаг «бюджет» проваливается */
.nv-quiz .nv-quiz__opt { min-height: 76px }

.nv-quiz .nv-quiz__opt {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid #E6E1F5;
    border-radius: 16px;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nv-quiz .nv-quiz__opt:hover {
    border-color: #B79BF0;
    box-shadow: 0 8px 20px rgba(52, 16, 132, .1);
    transform: translateY(-1px);
}

.nv-quiz .nv-quiz__opt:focus-visible {
    outline: none;
    border-color: var(--purple-primary, #6D37E0);
    box-shadow: 0 0 0 3px rgba(109, 55, 224, .22);
}

.nv-quiz .nv-quiz__opt.is-picked {
    border-color: var(--purple-primary, #6D37E0);
    background: var(--purple-secondary, #F0EAFF);
}

.nv-quiz__opt-l {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #1C1C21;
}

.nv-quiz__opt-h {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #8E8E9F;
}

.nv-quiz .nv-quiz__back {
    margin-top: 18px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: #8E8E9F;
    cursor: pointer;
    transition: color .16s ease;
}

.nv-quiz .nv-quiz__back:hover { color: var(--purple-primary, #6D37E0) }

/* финальный шаг */
.nv-quiz .nv-quiz__summary {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #F8F6FE;
    font-size: 14px;
    color: #4A1FAE;
}

.nv-quiz .nv-quiz__summary:empty { display: none }

.nv-quiz__row { display: flex; flex-wrap: wrap; gap: 12px }
.nv-quiz__field { flex: 1 1 200px; min-width: 130px }
.nv-quiz__field--phone { flex: 1 1 200px; min-width: 186px }

.nv-quiz .nv-quiz__row input {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1.5px solid #E6E1F5;
    border-radius: 14px;
    background: #fff;
    font-family: "Geologica", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1C1C21;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.nv-quiz .nv-quiz__row input::placeholder { color: #A9A9BA }

.nv-quiz .nv-quiz__row input:focus {
    border-color: var(--purple-primary, #6D37E0);
    box-shadow: 0 0 0 3px rgba(109, 55, 224, .18);
}

.nv-quiz .nv-quiz__row button[type="submit"] {
    flex: 0 1 auto;
    height: 54px;
    padding: 0 30px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #7B45E8 0%, #5B22CC 100%);
    font-family: "Geologica", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.nv-quiz .nv-quiz__row button[type="submit"]:hover {
    box-shadow: 0 10px 26px rgba(91, 34, 204, .32);
    transform: translateY(-1px);
}

.nv-quiz .nv-quiz__row button[type="submit"]:active { transform: none }
.nv-quiz .nv-quiz__row button[type="submit"]:disabled { opacity: .6; cursor: default; transform: none }

.nv-quiz .nv-quiz__legal {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8E8E9F;
}

.nv-quiz .nv-quiz__legal a { color: #6D37E0; text-decoration: underline }

.nv-quiz__sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nv-quiz { padding: 24px 20px; border-radius: 22px; margin: 30px 0 }
    .nv-quiz .nv-quiz__title { font-size: 21px }
    .nv-quiz .nv-quiz__q { font-size: 18px }
    .nv-quiz .nv-quiz__sub { font-size: 14px }
    /* на телефоне держим две колонки для всех наборов: в одну колонку семь вариантов
       вытягиваются в длинную ленту, и разница высоты между шагами становится огромной */
    .nv-quiz__opts,
    .nv-quiz__opts[data-cols="3"],
    .nv-quiz__opts[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
    .nv-quiz .nv-quiz__opt { padding: 14px 14px; min-height: 68px }
    .nv-quiz__opt-l { font-size: 15px }
    .nv-quiz__opt-h { font-size: 12px }
    .nv-quiz__row { flex-direction: column; gap: 10px }
    .nv-quiz__field, .nv-quiz__field--phone { flex: 0 0 auto; min-width: 0 }
    .nv-quiz .nv-quiz__row button[type="submit"] { width: 100% }
}

/* Квиз может стоять внутри ленты каталога, где действует правило сайта
   `.objects-list *:not(.title-h3) { font-family: Mulish; font-size: 16px; font-weight: 400 }`.
   Его специфичность (0,2,0) выше одиночных классов, поэтому дублируем типографику
   с равной специфичностью — наш файл подключается ниже по каскаду и выигрывает. */
.nv-quiz .nv-quiz__kicker  { font-family: "Geologica", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2 }
.nv-quiz .nv-quiz__counter { font-family: "Geologica", sans-serif; font-size: 13px; font-weight: 400 }
.nv-quiz .nv-quiz__opt-l   { font-family: "Geologica", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.25; color: #1C1C21 }
.nv-quiz .nv-quiz__opt-h   { font-family: "Geologica", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.35; color: #8E8E9F }
.nv-quiz .nv-quiz__back    { font-family: "Geologica", sans-serif; font-size: 14px; font-weight: 400 }
.nv-quiz .nv-quiz__bar     { height: 6px }
.nv-quiz .nv-quiz__bar-fill{ height: 100% }