/* ==========================================================================
   Квиз «Рассчитать комиссию»
   Макет: Figma united-stream, node 7152-5834. Базовая ширина экрана — 1242px,
   все размеры сняты с макета 1:1. Ниже 1242px экран пропорционально
   масштабируется через transform (см. assets/js/qwiz.js).
   ========================================================================== */

.qwiz-sect {
    width: min(100% - 40px, 1242px);
    padding: 50px 0px;
    margin-inline: auto;
}

.qwiz-sect [class*='--container'],
.qwiz-sect [class*='__container'] {
    width: 100%;
    margin-inline: auto;
}

.qwiz-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Обёртка-масштабатор: держит высоту уменьшенного экрана */
.qwiz-frame {
    width: 100%;
    max-width: 1242px;
    overflow: hidden;
}

/* --------------------------------------------------------------- Экран --- */

.qwiz {
    --q-navy: #001B6B;
    --q-tab: #1F3371;
    --q-text: #314788;
    --q-border: #BFC6DA;
    --q-bg: #EFF2F9;
    --q-gold: #E1C383;
    --q-red: #BF0036;
    --q-line: #F7F7F7;
    --q-back: #D2D1E3;
    --q-blue: #385CD3;

    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 1242px;
    min-height: 686px;
    margin: 0;
    overflow: hidden;
    font-family: 'Inter', Arial, sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 27, 107, .10);
    transform-origin: top left;
}

.qwiz--tall {
    min-height: 802px;
}

/* Экраны с карточками и странами по высоте как обычный шаг квиза. */
.qwiz--tall[data-type='geo'],
.qwiz--tall[data-type='cards'] {
    min-height: 686px;
}

.qwiz *,
.qwiz *::before,
.qwiz *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------ Боковая панель --- */

.qwiz__side {
    position: relative;
    z-index: 1;
    flex: none;
    width: 284px;
    background: var(--q-bg);
}

.qwiz__tab {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 117px;
    padding: 0 0 0 34px;
    margin: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: var(--q-navy);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}

.qwiz__tab--calc {
    padding-top: 10px;
}

.qwiz__tab--mgr {
    padding-bottom: 17px;
}

/* Правый край активной вкладки — не скруглённый, а острый уголок:
   по макету рёбра прямые, вершина на x=303, y=58.5 (замер по Frame 1000006234). */
.qwiz__tab.is-active {
    z-index: 2;
    width: 303px;
    color: #fff;
    background: var(--q-tab);
    border-radius: 0;
    -webkit-clip-path: polygon(0 0, 284px 0, 303px 58.5px, 284px 117px, 0 117px);
            clip-path: polygon(0 0, 284px 0, 303px 58.5px, 284px 117px, 0 117px);
}

.qwiz__tab-icon {
    flex: none;
    display: block;
}

.qwiz__tab-icon--calc {
    width: 52px;
    height: 52px;
    margin-right: 30px;
}

.qwiz__tab-icon--mgr {
    width: 65px;
    height: 65px;
    margin-left: -7px;
    margin-right: 23px;
}

/* Разделитель между вкладками — только на стартовом экране */
.qwiz--start .qwiz__tab--calc::after {
    content: '';
    position: absolute;
    left: 26px;
    right: 22px;
    bottom: 0;
    height: 2px;
    background: #DCE1EE;
}

.qwiz__policy {
    position: absolute;
    left: 30px;
    bottom: 34px;
    width: 218px;
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 19px;
    color: #222;
}

.qwiz--tall .qwiz__policy {
    bottom: 50px;
}

.qwiz__policy a {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------ Рабочая область --- */

.qwiz__main {
    position: relative;
    flex: 1 1 auto;
    padding-top: 77px;
    padding-bottom: 119px;   /* место под нижнюю панель: она лежит поверх */
    background: linear-gradient(20deg, #FFFFFF 38%, #EFF2F9 78%);
}

.qwiz__close {
    position: absolute;
    top: 22px;
    right: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    padding: 0;
    color: #B4BDD0;
    background: none;
    border: 0;
    cursor: pointer;
}

.qwiz__close:hover {
    color: var(--q-navy);
}

.qwiz__main--hero .qwiz__close {
    color: #fff;
}

.qwiz__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    color: var(--q-navy);
    text-align: center;
}

.qwiz__question {
    margin: 41px 0 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 52px;
    color: var(--q-navy);
    text-align: center;
}

.qwiz__question--bold {
    font-weight: 700;
}

/* На части экранов макета строка вопроса опущена на 4px */
.qwiz__question--low {
    padding-top: 4px;
    margin-bottom: -4px;
}

/* Экран выбора предмета оплаты: без вертикального внешнего отступа. */
.qwiz[data-type='cards'] .qwiz__question {
    margin: 0;
}

.qwiz__lead {
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    color: var(--q-text);
    text-align: center;
}

/* ------------------------------------------------------------ Варианты --- */

.qwiz-opts {
    display: grid;
    justify-content: center;
    column-gap: 29px;
    row-gap: 22px;
    margin-top: 20px;
}

.qwiz-opts--1col {
    grid-template-columns: 328px;
}

.qwiz-opts--2col {
    grid-template-columns: repeat(2, 328px);
    margin-left: 11px;
}

.qwiz-opts--tight {
    row-gap: 11px;
}

.qwiz-opts--loose {
    row-gap: 30px;
}

.qwiz-opt {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 19px 10px;
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.qwiz-opt:hover {
    border-color: var(--q-blue);
}

.qwiz-opt input[type='radio'],
.qwiz-opt input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.qwiz-opt__mark {
    flex: none;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    background: var(--q-bg);
    border-radius: 50%;
    transition: background-color .15s ease;
}

.qwiz-opt__text {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400;
    line-height: 132%;
    color: var(--q-text);
}

.qwiz-opt input:checked ~ .qwiz-opt__mark {
    background: var(--q-gold);
}

.qwiz-opt input:checked ~ .qwiz-opt__text {
    font-weight: 600;
}

.qwiz-opt input:focus-visible ~ .qwiz-opt__mark {
    outline: 2px solid var(--q-blue);
    outline-offset: 2px;
}

/* Плашка с вводом точной суммы */
.qwiz-opt--input {
    padding: 0;
    cursor: text;
}

.qwiz-opt--input input {
    width: 100%;
    height: 100%;
    padding: 0 35px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: var(--q-text);
    background: transparent;
    border: 0;
    border-radius: 6px;
    outline: none;
}

.qwiz-opt--input input::-webkit-input-placeholder { color: var(--q-text); }
.qwiz-opt--input input::-moz-placeholder { color: var(--q-text); opacity: 1; }
.qwiz-opt--input input:-ms-input-placeholder { color: var(--q-text); }
.qwiz-opt--input input::placeholder { color: var(--q-text); }

/* Радио-ответ «Другое» заменяется собственным вводом в той же ячейке. */
.qwiz-opt-slot {
    min-width: 0;
}

.qwiz-opt-slot > .qwiz-opt {
    width: 100%;
    box-sizing: border-box;
}

.qwiz-opt-slot[hidden],
[data-qwiz-other-label][hidden] {
    display: none !important;
}

.qwiz-opt--inline-own {
    min-width: 0;
    cursor: text;
}

.qwiz-opt--inline-own:focus-within {
    border-color: var(--q-blue);
}

.qwiz-opt--inline-own .qwiz-opt__own-input {
    width: 100%;
    height: 70px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 18px;
    line-height: 24px;
}

.qwiz-opt--inline-own .qwiz-opt__own-input,
.qwiz-card__own-input,
.qwiz-geo__own-input {
    color: var(--q-text);
    background: transparent;
    border: 0;
    border-radius: inherit;
    outline: none;
}

.qwiz-card-slot,
.qwiz-geo-slot {
    min-width: 0;
}

.qwiz-card-slot > .qwiz-card,
.qwiz-geo-slot > .qwiz-geo {
    width: 100%;
    box-sizing: border-box;
}

.qwiz-card--inline-own {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 135px;
    cursor: text;
}

.qwiz-card__own-input {
    width: 100%;
    height: 100%;
    min-height: 133px;
    padding: 12px;
    font-family: inherit;
    font-size: 17px;
    text-align: center;
}

.qwiz-card--inline-own:focus-within,
.qwiz-geo--inline-own:focus-within {
    border-color: var(--q-blue);
}

.qwiz-geo--inline-own {
    padding: 0;
    cursor: text;
}

.qwiz-geo__own-input {
    width: 100%;
    height: 100%;
    padding: 0 18px;
    font-family: inherit;
    font-size: 17px;
}

.qwiz-card--inline-own[hidden],
.qwiz-geo--inline-own[hidden] {
    display: none !important;
}

/* ------------------------------------------- Карточки «Предмет оплаты» --- */

.qwiz-cards {
    display: grid;
    grid-template-columns: repeat(3, 244px);
    column-gap: 28px;
    row-gap: 18px;
    justify-content: center;
    margin-top: 8px;
    margin-left: 4px;
}

.qwiz-card {
    position: relative;
    display: block;
    width: 244px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.qwiz-card:hover {
    border-color: var(--q-blue);
}

.qwiz-card input[type='radio'],
.qwiz-card input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.qwiz-card__img {
    display: block;
    height: 87px;
    background-position: center;
    background-size: cover;
}

.qwiz-card__mark {
    position: absolute;
    top: 87px;
    left: 50%;
    width: 25px;
    height: 25px;
    background: var(--q-bg);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background-color .15s ease;
}

.qwiz-card__text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--q-text);
    text-align: center;
}

.qwiz-card input:checked ~ .qwiz-card__mark {
    background: var(--q-gold);
}

.qwiz-card input:checked ~ .qwiz-card__text {
    font-weight: 600;
}

/* ---------------------------------------------------- Карточки стран --- */

.qwiz-geos {
    display: grid;
    grid-template-columns: repeat(3, 268px);
    gap: 19px;
    justify-content: center;
    margin-top: 20px;
    margin-left: 4px;
}

.qwiz-geo {
    position: relative;
    display: flex;
    align-items: center;
    height: 65px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.qwiz-geo:hover {
    border-color: var(--q-blue);
}

.qwiz-geo input[type='radio'],
.qwiz-geo input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.qwiz-geo .qwiz-opt__mark {
    margin-right: 14px;
}

.qwiz-geo__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    color: var(--q-text);
}

.qwiz-geo__flag {
    display: block;
    flex: none;
    width: 35px;
    height: 24px;
    margin-left: 11px;
    border: 1px solid #ddd;
    border-radius: 2px;
    object-fit: cover;
}

.qwiz-geo input:checked ~ .qwiz-opt__mark {
    background: var(--q-gold);
}

.qwiz-geo input:checked ~ .qwiz-geo__text {
    font-weight: 600;
}

/* ------------------------------------------------- Подготовка расчёта --- */

.qwiz-loader {
    width: 703px;
    height: 23px;
    /* В макете индикатор стоит не по центру области, а на 5px правее —
       так же, как сетки вариантов. */
    margin: 131px auto 0 calc((100% - 703px) / 2 + 5px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 4px;
}

.qwiz-loader i {
    display: block;
    width: calc(100% + 50px);
    height: 100%;
    background-image: repeating-linear-gradient(133deg, var(--q-blue) 0, var(--q-blue) 17.6px, #fff 17.6px, #fff 36.2px);
    -webkit-animation: qwiz-stripes 1.4s linear infinite;
            animation: qwiz-stripes 1.4s linear infinite;
}

@-webkit-keyframes qwiz-stripes {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-49.5px); }
}

@keyframes qwiz-stripes {
    from { transform: translateX(0); }
    to { transform: translateX(-49.5px); }
}

/* При «уменьшить движение» индикатор не замирает совсем — иначе экран
   выглядит зависшим, — а полоски едут медленнее. */
@media (prefers-reduced-motion: reduce) {
    .qwiz-loader i {
        -webkit-animation: qwiz-stripes 3.5s linear infinite;
                animation: qwiz-stripes 3.5s linear infinite;
    }
}

/* ---------------------------------------------------------- Контакты --- */

.qwiz-form {
    width: 499px;
    margin: 21px auto 0;
    margin-left: calc((100% - 499px) / 2 + 5px);
}

.qwiz-field {
    position: relative;
    display: flex;
    align-items: center;
    height: 62px;
    margin-top: 15px;
    background: #fff;
    border: 1px solid var(--q-text);
    border-radius: 8px;
}

.qwiz-field[hidden] {
    display: none !important;
}

.qwiz-field:first-child {
    margin-top: 0;
}

.qwiz-field input,
.qwiz-field select {
    width: 100%;
    height: 100%;
    padding: 0 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    color: var(--q-navy);
    background: transparent;
    border: 0;
    border-radius: 8px;
    outline: none;
}

.qwiz-field input::-webkit-input-placeholder { color: #8592B9; }
.qwiz-field input::-moz-placeholder { color: #8592B9; opacity: 1; }
.qwiz-field input:-ms-input-placeholder { color: #8592B9; }
.qwiz-field input::placeholder { color: #8592B9; }

.qwiz-field--select select {
    padding: 0 55px 0 25px;
    font-size: 16px;
    color: #8592B9;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.qwiz-field--select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 14px;
    height: 9px;
    margin-top: -4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23222222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    pointer-events: none;
}

.qwiz-field--phone {
    padding-left: 21px;
}

.qwiz-field__country {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
    padding: 0 11px 0 0;
    margin-right: 21px;
    color: #222;
    background: none;
    border: 0;
    border-right: 1px solid #D4D9E6;
    cursor: pointer;
}

.qwiz-field__country img {
    display: block;
    width: 28px;
    height: 20px;
    margin-right: 8px;
    border-radius: 2px;
}

.qwiz-field--phone input {
    padding-left: 0;
}

/* ------------------------------------------------------ Нижняя панель --- */

.qwiz__foot {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 136px;
    border-top: 2px solid var(--q-line);
}

.qwiz__foot--hero {
    border-top: 0;
}

.qwiz__step {
    position: absolute;
    top: 30px;
    left: 51px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
}

.qwiz__bar {
    position: absolute;
    top: 68px;
    left: 51px;
    display: block;
    width: 593px;
    height: 8px;
    background: var(--q-bg);
    border-radius: 4px;
}

.qwiz__bar i {
    display: block;
    height: 100%;
    background: rgba(56, 92, 211, .45);
    border-radius: 4px;
    transition: width .25s ease;
}

.qwiz__actions {
    position: absolute;
    top: 24px;
    right: 47px;
    display: flex;
    align-items: center;
}

.qwiz__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-right: 8px;
    padding: 0;
    color: var(--q-back);
    background: transparent;
    border: 1px solid var(--q-back);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.qwiz__back:hover {
    color: var(--q-text);
    border-color: var(--q-text);
}

.qwiz__next {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 171px;
    height: 52px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #fff;
    background: var(--q-red);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.qwiz__next:hover {
    background: #A6002F;
}

.qwiz__next svg {
    flex: none;
    margin-left: 12px;
}

/* ------------------------------------------------------ Стартовый экран --- */

.qwiz__main--hero {
    padding-top: 0;
    background-color: #001B4B;
    background-position: center top;
    background-size: 105% auto;
    background-repeat: no-repeat;
}

.qwiz__hero-title {
    position: absolute;
    top: 47px;
    left: 50%;
    width: calc(100% - 48px);
    max-width: 650px;
    margin: 0;
    padding: 20px 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
}

.qwiz__hero-title span {
    color: var(--q-gold);
}

/* ==========================================================================
   Адаптив
   Макетов для планшета и мобильных нет, поэтому раскладка собрана по логике
   десктопного экрана: до 1242px всё становится резиновым, с 1024px боковые
   вкладки уезжают наверх, дальше колонки схлопываются. Базовые правила выше
   не трогаем — на ширине 1242px и больше экран остаётся пиксель-в-пиксель.
   ========================================================================== */

/* ---------- резиновый экран ------------------------------------------- */

@media (max-width: 1241px) {
    .qwiz-frame {
        overflow: visible;
    }

    .qwiz,
    .qwiz--tall {
        width: 100%;
        min-height: 0;
    }

    .qwiz--tall[data-type='geo'],
    .qwiz--tall[data-type='cards'] {
        min-height: 0;
    }

    .qwiz__main {
        display: flex;
        flex-direction: column;
        padding-top: clamp(28px, 5.2vw, 77px);
        padding-bottom: 119px;      /* место под нижнюю панель */
    }

    .qwiz__title {
        font-size: clamp(26px, 3.3vw, 40px);
        line-height: 1.3;
    }

    .qwiz__question {
        margin-top: clamp(16px, 2.6vw, 41px);
        font-size: clamp(18px, 2.1vw, 26px);
        line-height: 1.4;
    }

    .qwiz__lead {
        margin-top: 10px;
        font-size: clamp(15px, 1.5vw, 18px);
        line-height: 1.5;
    }

    /* Полоса прогресса тянется до кнопок, а не стоит фиксированной ширины. */
    .qwiz__bar {
        right: 290px;
        width: auto;
    }

    /* Варианты, карточки и поля — резиновые колонки с потолком по макету. */
    .qwiz-opts {
        width: min(100% - 56px, 686px);
        margin-inline: auto;
        column-gap: 24px;
    }

    .qwiz-opts--2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: auto;
    }

    .qwiz-opts--1col {
        grid-template-columns: minmax(0, 328px);
        justify-content: center;
    }

    .qwiz-opt__text {
        white-space: normal;        /* на узких экранах строка переносится */
    }

    .qwiz-cards {
        width: min(100% - 56px, 860px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 20px;
        margin-inline: auto;
    }

    .qwiz-card {
        width: 100%;
    }

    .qwiz-card__img {
        height: 87px;
        aspect-ratio: auto;
    }

    /* Кружок выбора переводим в поток: высота фото теперь резиновая,
       и абсолютная привязка к верху карточки уже не попадает в стык. */
    .qwiz-card {
        display: flex;
        flex-direction: column;
    }

    .qwiz-card__mark {
        position: relative;
        top: auto;
        left: auto;
        align-self: center;
        margin: -12.5px 0;
        transform: none;
    }

    .qwiz-geos {
        width: min(100% - 56px, 842px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-inline: auto;
    }

    .qwiz-loader {
        width: min(100% - 80px, 703px);
        margin: clamp(40px, 12vw, 131px) auto 0;
    }

    .qwiz-form {
        width: min(100% - 56px, 499px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Баннер стартового экрана тянется по ширине. */
    .qwiz__main--hero {
        min-height: min(72vw, 686px);
        background-position: center;
        background-size: cover;
    }

    .qwiz__hero-title {
        top: clamp(24px, 6vw, 66px);
        padding: 0 24px;
        font-size: clamp(22px, 3.2vw, 40px);
        line-height: 1.22;
    }
}

/* ---------- вкладки уезжают наверх ------------------------------------ */

@media (max-width: 1023px) {
    .qwiz {
        flex-direction: column;
    }

    .qwiz__side {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .qwiz__tab {
        flex: 1 1 0;
        width: auto;
        height: 64px;
        padding: 0 16px;
        font-size: 16px;
        line-height: 20px;
    }

    .qwiz__tab--calc { padding-top: 0; }
    .qwiz__tab--mgr { padding-bottom: 0; }

    .qwiz__tab.is-active {
        width: auto;
        border-radius: 0;
        -webkit-clip-path: none;
                clip-path: none;
    }

    .qwiz__tab-icon--calc {
        width: 36px;
        height: 36px;
        margin-right: 12px;
    }

    .qwiz__tab-icon--mgr {
        width: 46px;
        height: 46px;
        margin-left: -5px;
        margin-right: 3px;
    }

    .qwiz--start .qwiz__tab--calc::after {
        display: none;
    }

    /* Подпись о политике становится строкой под вкладками. */
    .qwiz__policy,
    .qwiz--tall .qwiz__policy {
        position: static;
        order: 3;
        width: 100%;
        padding: 9px 16px 11px;
        font-size: 12px;
        line-height: 17px;
        border-top: 1px solid #DCE1EE;
    }

    /* Нижняя панель встаёт в поток: счётчик и кнопки в строке, полоса под ними. */
    .qwiz__main {
        padding-bottom: 0;
    }

    .qwiz__foot {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        height: auto;
        margin-top: auto;
        padding: 16px 20px 20px;
    }

    .qwiz__step {
        position: static;
        order: 1;
    }

    .qwiz__actions {
        position: static;
        order: 2;
        margin-left: auto;
    }

    .qwiz__bar {
        position: static;
        order: 3;
        flex: 1 1 100%;
        width: auto;
        right: auto;
    }

    .qwiz__main--hero {
        min-height: min(86vw, 560px);
    }

    .qwiz__close {
        top: 16px;
        right: 16px;
    }
}

/* ---------- узкие планшеты и крупные телефоны -------------------------- */

@media (max-width: 767px) {
    .qwiz-opts,
    .qwiz-cards,
    .qwiz-geos {
        width: calc(100% - 40px);
    }

    .qwiz-opts--2col,
    .qwiz-opts--1col {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .qwiz-opts--tight,
    .qwiz-opts--loose {
        row-gap: 12px;
    }

    .qwiz-opt {
        min-height: 64px;
        padding: 14px 18px;
    }

    .qwiz-opt__mark,
    .qwiz-geo .qwiz-opt__mark {
        width: 22px;
        height: 22px;
        margin-right: 14px;
    }

    .qwiz-opt__text {
        font-size: 17px;
    }

    .qwiz-opt--input input {
        padding: 0 18px;
        font-size: 17px;
    }

    .qwiz-cards,
    .qwiz-geos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .qwiz-card__text {
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
        font-size: 16px;
        line-height: 20px;
    }

    .qwiz-card__mark {
        width: 22px;
        height: 22px;
        margin: -11px 0;
    }

    .qwiz-geo {
        height: 56px;
        padding: 0 14px;
    }

    .qwiz-geo__text {
        font-size: 16px;
    }

    .qwiz-geo__flag {
        width: 28px;
        height: 20px;
        margin-left: 8px;
    }

    .qwiz-field {
        height: 56px;
        margin-top: 12px;
    }

    .qwiz-field input,
    .qwiz-field select,
    .qwiz-field--select select {
        padding-left: 18px;
        font-size: 15px;
    }

    .qwiz-field--phone { padding-left: 14px; }
    .qwiz-field__country { margin-right: 14px; }

    .qwiz__next {
        min-width: 140px;
        height: 46px;
        padding: 0 16px;
        font-size: 16px;
    }

    .qwiz__next svg { margin-left: 8px; }

    .qwiz__back {
        width: 46px;
        height: 46px;
        margin-right: 6px;
    }

    .qwiz-loader {
        width: calc(100% - 40px);
        height: 20px;
    }
}

/* ---------- телефоны --------------------------------------------------- */

@media (max-width: 575px) {
    .qwiz {
        border-radius: 10px;
    }

    .qwiz__tab {
        height: 56px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 17px;
    }

    .qwiz__tab-icon--calc {
        width: 30px;
        height: 30px;
        margin-right: 9px;
    }

    .qwiz__tab-icon--mgr {
        width: 38px;
        height: 38px;
        margin-left: -4px;
        margin-right: 1px;
    }

    .qwiz__main {
        padding-top: 22px;
    }

    .qwiz__title {
        font-size: 24px;
    }

    .qwiz__question {
        margin-top: 14px;
        font-size: 18px;
    }

    .qwiz__lead {
        font-size: 15px;
    }

    .qwiz-opts,
    .qwiz-cards,
    .qwiz-geos,
    .qwiz-loader,
    .qwiz-form {
        width: calc(100% - 32px);
    }

    .qwiz-opt {
        min-height: 58px;
        padding: 12px 14px;
    }

    .qwiz-opt__text,
    .qwiz-geo__text {
        font-size: 16px;
    }

    .qwiz-cards {
        gap: 10px;
    }

    .qwiz-card__text {
        min-height: 44px;
        font-size: 14px;
        line-height: 18px;
    }

    .qwiz-geos {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .qwiz-geo {
        height: 50px;
        padding: 0 12px;
    }

    .qwiz-field {
        height: 52px;
        border-radius: 6px;
    }

    .qwiz__foot {
        padding: 14px 16px 18px;
    }

    .qwiz__step {
        font-size: 14px;
    }

    .qwiz__next {
        min-width: 124px;
        height: 44px;
        font-size: 15px;
    }

    .qwiz__back {
        width: 44px;
        height: 44px;
    }

    .qwiz__hero-title {
        top: 22px;
        padding: 0 16px;
        font-size: 20px;
        line-height: 27px;
    }

    .qwiz__main--hero {
        min-height: min(118vw, 470px);
    }
}

/* ---------- самые узкие ------------------------------------------------ */

@media (max-width: 389px) {

    .qwiz__tab {
        font-size: 13px;
        line-height: 16px;
    }

    .qwiz__next {
        min-width: 112px;
        padding: 0 12px;
    }
}

/* ==========================================================================
   Форма последнего шага приходит из Contact Form 7 — подгоняем её разметку
   под уже готовые классы. Отправляет форму кнопка «Отправить» в нижней
   панели, поэтому родная кнопка CF7 скрыта, но остаётся кликабельной
   для скрипта.
   ========================================================================== */

.qwiz-form .wpcf7-form-control-wrap {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.qwiz-form .qwiz-field input,
.qwiz-form .qwiz-field select {
    height: 100%;
}

.qwiz-form .qwiz-form__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.qwiz-form .confirm-email {
    position: absolute !important;
    left: -9999px !important;
}

.qwiz-form .wpcf7-response-output {
    margin: 14px 0 0;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 6px;
}

/* Незаполненное поле отмечаем только красной обводкой: подпись «Заполните это
   поле» у поля и общая плашка CF7 над кнопкой не показываются. Плашку о
   неудачной отправке (ошибка сервера, спам-фильтр) оставляем — иначе человек
   не поймёт, почему заявка не ушла. */

.qwiz-form .wpcf7-not-valid-tip {
    display: none;
}

.qwiz-form .qwiz-field--required::after {
    content: '*';
    position: absolute;
    top: 50%;
    right: 20px;
    color: #AAB3C2;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.qwiz-form--validation-shown .qwiz-field--invalid::after {
    color: var(--q-red);
}

.qwiz-form--validation-shown .qwiz-field--invalid {
    border-color: var(--q-red);
}

.qwiz-form.invalid .wpcf7-response-output,
.qwiz-form.unaccepted .wpcf7-response-output {
    display: none;
}

.qwiz-form .qwiz-field:has(.wpcf7-not-valid) {
    border-color: var(--q-red);
}

/* Шаг требует ответа, а его нет — подсвечиваем варианты. */
.qwiz.is-invalid .qwiz-opt,
.qwiz.is-invalid .qwiz-card,
.qwiz.is-invalid .qwiz-geo {
    border-color: var(--q-red);
}

.qwiz__back[disabled] {
    cursor: default;
}

.qwiz__next.is-sent {
    background: #00C48C;
}

.qwiz-empty {
    padding: 40px 0;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 18px;
    color: #314788;
    text-align: center;
}


/* ------------------------------------------------- Свой вариант «Другое» ---
   Поле под списком: появляется, когда выбран вариант «Другое». */

.qwiz-own {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.qwiz-own[hidden] {
    display: none;
}

.qwiz-own__input {
    width: 685px;
    max-width: 100%;
    height: 52px;
    padding: 0 34px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 132%;
    color: var(--q-text);
    background: #fff;
    border: 1px solid var(--q-border);
    border-radius: 6px;
    outline: none;
    transition: border-color .15s ease;
}

.qwiz-opt[hidden] {
    display: none !important;
}

.qwiz-own__input:focus {
    border-color: var(--q-blue);
}

.qwiz-own__input::-webkit-input-placeholder { color: #9AA6C0; }
.qwiz-own__input::-moz-placeholder { color: #9AA6C0; opacity: 1; }
.qwiz-own__input:-ms-input-placeholder { color: #9AA6C0; }
.qwiz-own__input::placeholder { color: #9AA6C0; }

/* на экранах с карточками и странами список шире */
.qwiz--tall .qwiz-own__input {
    width: 788px;
}

@media (max-width: 1023px) {
    .qwiz-own__input,
    .qwiz--tall .qwiz-own__input {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .qwiz-own {
        margin-top: 14px;
    }

    .qwiz-own__input {
        height: 60px;
        padding: 0 18px;
        font-size: 17px;
    }
}

/* Экран вкладки «Связаться с менеджером»: он не часть прохождения,
   поэтому счётчик «Шаг N из M» и полоса прогресса не показываются.
   Кнопка «Назад» остаётся — она возвращает на шаг, с которого ушли. */
.qwiz--mgr .qwiz__step,
.qwiz--mgr .qwiz__bar {
    display: none;
}

/* Попап квиза (кнопки nc-fast на /kviz/) — как zoom-anim у call-dialog */
html.qwiz-popup-open,
body.qwiz-popup-open {
    overflow: hidden;
}

.qwiz-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.qwiz-popup-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.qwiz-sect.is-popup-open {
    position: fixed;
    inset: 0;
    z-index: 1045;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    pointer-events: none;
}

.qwiz-sect.is-popup-open .qwiz-sect__container {
    flex: none;
    width: min(100% - 40px, 1242px);
    margin: auto;
    padding: 0;
    pointer-events: auto;
    animation: qwizPopupZoomIn 0.3s ease;
}

@keyframes qwizPopupZoomIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qwiz[data-type='cards'] .qwiz-card__text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--q-text);
    text-align: center;
}

.qwiz[data-type='cards'] .qwiz__main {
    position: relative;
    flex: 1 1 auto;
    padding-top: 35px;
    padding-bottom: 119px;
    background: linear-gradient(20deg, #FFFFFF 38%, #EFF2F9 78%);
}

.qwiz[data-type='cards'] .qwiz__main {
    position: relative;
    flex: 1 1 auto;
    padding-top: 35px;
    padding-bottom: 119px;
    background: linear-gradient(20deg, #FFFFFF 38%, #EFF2F9 78%);
}

.qwiz--tall[data-type='geo'],
.qwiz--tall[data-type='cards'] {
    min-height: 795px;
}

/* На странице квиза крестик скрыт; в попапе остаётся видимым. */
.qwiz-sect:not(.is-popup-open) .qwiz__close {
    display: none;
}

.qwiz:not(.qwiz--start) .qwiz__main {
    position: relative;
    flex: 1 1 auto;
    padding-top: 35px;
    padding-bottom: 119px;
    background: linear-gradient(20deg, #FFFFFF 38%, #EFF2F9 78%);
}

.qwiz .qwiz__question--low {
    margin-top: 0;
}

.qwiz--tall[data-type='geo'],
.qwiz--tall[data-type='cards'] {
    min-height: 686px;
}

.qwiz--tall[data-type='geo'] {
    min-height: 686px;
}

.qwiz--tall[data-type='cards'] {
    min-height: 795px;
}