/* === Квиз "Рассчитать стоимость" — popup === */

/* Overlay */
.bani1-quiz-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bani1-quiz-overlay.active {
    display: flex;
}

/* Popup контейнер — фиксированная высота (best practice 2026: anti-CLS).
   Контент скроллится внутри если не помещается, кнопки навигации
   всегда на одном месте в нижней части. */
.bani1-quiz-popup {
    background: #fff;
    border-radius: 12px;
    max-width: 920px;
    width: 100%;
    height: 620px;                    /* фиксированная — попап не "прыгает" */
    max-height: 90vh;                 /* ограничение на маленьких экранах */
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: bani1QuizFadeIn 0.3s ease;
    display: flex;                     /* flex-column для header/body */
    flex-direction: column;
    overflow: hidden;                  /* без скролла на самом попапе */
}
@keyframes bani1QuizFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Заголовок popup */
/* Header попапа: h3 заголовок. Крестик НЕ внутри header'a —
   он position:absolute от .bani1-quiz-popup (см. ниже). */
.bani1-quiz-header {
    padding: 20px 30px 18px;
    border-bottom: 1px solid #eee;
    display: block;
    align-items: center;
}
.bani1-quiz-header h3 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.01em;
}
.bani1-quiz-title-meta {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #999;
    letter-spacing: 0;
    margin-left: 4px;
}
/* Крестик закрытия — iPhone-стиль: без фона, тонкая линия, hit-area 44×44 для пальца.
   Best practice 2026 (Linear/Notion/Apple HIG): минималистичный, не "коробочный". */
.bani1-quiz-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    border: none !important;
    width: 44px !important;       /* hit-area для пальца */
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 26px;
    font-weight: 300;             /* тонкая линия — стиль iOS */
    color: #999;
    cursor: pointer;
    line-height: 1;
    z-index: 100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}
.bani1-quiz-close:hover {
    color: #1a1a1a;
    background: rgba(0,0,0,0.06) !important;     /* лёгкий ховер-круг */
}

/* Body: sidebar + content — занимает оставшееся пространство popup'а */
.bani1-quiz-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Левая часть — вопросы. Flex-column: progress сверху, контент по центру, кнопки внизу.
   transition opacity — для fade-эффекта при переключении шагов (best practice 2026). */
.bani1-quiz-content {
    flex: 1;
    padding: 22px 30px 22px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: opacity 0.15s ease;
}
.bani1-quiz-content.is-fading {
    opacity: 0;
}

/* Правая часть — sidebar */
.bani1-quiz-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
    border-left: 1px solid #eee;
    border-radius: 0 12px 12px 0;
    padding: 30px 20px;
    text-align: center;
}
.bani1-quiz-sidebar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}
.bani1-quiz-sidebar .manager-name {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #259e49;
    margin: 0 0 4px;
}
.bani1-quiz-sidebar .manager-role {
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
}
.bani1-quiz-sidebar .benefits {
    background: #f0faf2;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
.bani1-quiz-sidebar .benefits p {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 12px;
    color: #666;
}
.bani1-quiz-sidebar .benefits .benefit-item {
    margin: 6px 0;
}

/* Progress bar + микротекст «Шаг X из 8» */
.bani1-quiz-progress {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-bottom: 8px;
    overflow: hidden;
}
.bani1-quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #259e49, #0F8C00);
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 12.5%;
}
.bani1-quiz-progress-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

/* Вопрос — flex-column в оставшемся пространстве content'а.
   Вопрос центрируется по вертикали, кнопки прижимаются вниз (sticky-footer pattern). */
.bani1-quiz-step {
    display: none;
}
.bani1-quiz-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;                       /* занимает оставшееся в content */
}
.bani1-quiz-step .bani1-quiz-nav {
    margin-top: auto;              /* кнопки всегда внизу — sticky-footer без position:sticky */
    padding-top: 20px;
}
.bani1-quiz-question {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #242424;
    text-align: center;
    margin: 0 0 25px;
}

/* Radio с картинками (шаг 0) */
.bani1-quiz-images {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.bani1-quiz-image-option {
    flex: 1;
    max-width: 250px;
    cursor: pointer;
    text-align: center;
}
.bani1-quiz-image-option input[type="radio"] {
    display: none;
}
.bani1-quiz-image-option .image-card {
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
    padding-bottom: 10px;
}
.bani1-quiz-image-option input:checked + .image-card {
    border-color: #259e49;
    box-shadow: 0 0 0 2px rgba(37,158,73,0.2);
}
.bani1-quiz-image-option .image-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.bani1-quiz-image-option .radio-indicator {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 10px auto 5px;
    position: relative;
    transition: border-color 0.3s;
}
.bani1-quiz-image-option input:checked + .image-card .radio-indicator {
    border-color: #259e49;
}
.bani1-quiz-image-option input:checked + .image-card .radio-indicator::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 10px; height: 10px;
    background: #259e49;
    border-radius: 50%;
}
.bani1-quiz-image-option .option-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #242424;
}

/* Radio текстовые (шаги 1-4) */
.bani1-quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}
.bani1-quiz-options.single-col {
    grid-template-columns: 1fr;
}
.bani1-quiz-text-option {
    cursor: pointer;
}
.bani1-quiz-text-option input[type="radio"] {
    display: none;
}
/* Опции (radio-cards) — стиль 2026: чистый белый фон, чек ✓ при выборе.
   Linear/Stripe/Notion паттерн: border невидим в обычном состоянии,
   появляется при hover/выборе. Soft зелёный + glow-ring при выборе. */
.bani1-quiz-text-option .text-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}
.bani1-quiz-text-option .text-card:hover {
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.bani1-quiz-text-option input:checked + .text-card {
    border-color: #259e49;
    background: rgba(37,158,73,0.04);
    box-shadow: 0 0 0 3px rgba(37,158,73,0.12);
}
/* Радио-индикатор — круг, чек ✓ при выборе (вместо radio-точки) */
.bani1-quiz-text-option .text-card .radio-dot {
    width: 22px;
    height: 22px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.bani1-quiz-text-option input:checked + .text-card .radio-dot {
    background: #259e49;
}
.bani1-quiz-text-option input:checked + .text-card .radio-dot::after {
    content: '✓';
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* Текстовое поле (шаг 3) */
.bani1-quiz-input {
    max-width: 500px;
    margin: 0 auto;
}
.bani1-quiz-input input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #242424;
    background: #f7f7f7;
    transition: border-color 0.3s;
    box-sizing: border-box;
}
.bani1-quiz-input input:focus {
    border-color: #259e49;
    outline: none;
    background: #fff;
}
.bani1-quiz-input .input-hint {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}

/* Финальный шаг — мессенджеры + телефон */
.bani1-quiz-final {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    max-width: 520px;
    margin: 0 auto;
}
.bani1-quiz-final-form {
    flex: 1;
}
.bani1-quiz-final-image {
    width: 180px;
    flex-shrink: 0;
}
.bani1-quiz-final-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.bani1-quiz-messengers {
    display: grid;
    grid-template-columns: 1fr 1fr;      /* равные колонки — Max и Telegram одинаковой ширины */
    gap: 12px;
    margin-bottom: 15px;
}
.bani1-quiz-messenger {
    cursor: pointer;
}
.bani1-quiz-messenger input[type="radio"] {
    display: none;
}
.bani1-quiz-messenger .msg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    transition: border-color 0.3s;
    font-size: 13px;
    color: #666;
}
.bani1-quiz-messenger input:checked + .msg-card {
    border-color: #259e49;
}
.bani1-quiz-messenger .msg-card svg,
.bani1-quiz-messenger .msg-card img {
    width: 28px !important;     /* меньше акцент — главный элемент финала это поле телефона */
    height: 28px !important;
    object-fit: contain;
    display: block;
    margin-bottom: 4px;
}
.bani1-quiz-messenger .msg-card {
    padding: 10px 8px;          /* компактнее */
}
/* Поле телефона — стиль 2026: тонкий border, белый фон, glow на focus */
.bani1-quiz-phone-input {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.bani1-quiz-phone-input:focus {
    border-color: #259e49;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,158,73,0.15);
}
.bani1-quiz-phone-input.error {
    border-color: #e74c3c;
}
/* Подсветка незаполненного поля адреса */
.bani1-quiz-input input.error {
    border-color: #e74c3c;
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12);
}
.bani1-quiz-input .input-hint.input-hint--error {
    color: #e74c3c;
    font-weight: 500;
}
/* Пока открыт квиз — прячем ВЕСЬ виджет Jivo (все его jdiv-элементы: и окно, и
   кнопку-полоску) — перекрывал кнопку «Далее» на мобильном. jdiv — кастомный тег Jivo. */
body.bani1-quiz-active jdiv { display: none !important; }

/* Кнопки навигации — стиль 2026:
   • Назад = ghost (только текст со стрелкой ←)
   • Далее / Готово = primary pill-shape с тенью
   • Sentence case (НЕ uppercase) */
.bani1-quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bani1-quiz-back {
    background: transparent !important;
    border: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: color 0.15s, background 0.15s;
}
.bani1-quiz-back:hover {
    color: #1a1a1a;
    background: rgba(0,0,0,0.04) !important;
}
.bani1-quiz-back.hidden {
    visibility: hidden;
}
.bani1-quiz-next,
.bani1-quiz-submit {
    background: #259e49 !important;
    color: #fff !important;
    border: none !important;
    padding: 13px 28px !important;
    border-radius: 999px !important;       /* pill-shape */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: 0 4px 14px rgba(37,158,73,0.32);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    margin-left: auto;
}
.bani1-quiz-next:hover,
.bani1-quiz-submit:hover {
    background: #1e8a3e !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,158,73,0.4);
}
.bani1-quiz-submit {
    display: none;
}

/* Согласие ПД */
.bani1-quiz-consent {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
.bani1-quiz-consent a {
    color: #259e49;
    text-decoration: underline;
}

/* Экран "Спасибо" */
.bani1-quiz-thanks {
    display: none;
    text-align: center;
    padding: 60px 30px;
}
.bani1-quiz-thanks.active {
    display: block;
}
.bani1-quiz-thanks h3 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #259e49;
    margin: 0 0 15px;
}
.bani1-quiz-thanks p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Кнопка-триггер (исключаем hero — у него свои стили через .bani1-hero-btn) */
.bani1-quiz-trigger:not(.bani1-hero-btn) {
    display: inline-block;
    background: #259e49;
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    border: none;
    text-decoration: none;
}
.bani1-quiz-trigger:not(.bani1-hero-btn):hover {
    background: #0F8C00;
    box-shadow: 0 4px 15px rgba(37,158,73,0.4);
    color: #fff;
}

/* === Responsive === */
@media (max-width: 767px) {
    .bani1-quiz-overlay {
        padding: 10px;
    }
    .bani1-quiz-popup {
        max-width: 100%;
        width: 100%;
        height: 600px;             /* ФИКСИРОВАННАЯ высота — окно не прыгает при переключении шагов */
        max-height: calc(100vh - 20px);
        border-radius: 12px;
    }
    .bani1-quiz-sidebar {
        display: none;
    }
    .bani1-quiz-content {
        padding: 16px 20px;         /* уменьшил вертикальные отступы для экономии места */
    }
    .bani1-quiz-header {
        padding: 12px 16px;
    }
    .bani1-quiz-header h3 {
        font-size: 15px;            /* короче на мобиле */
        line-height: 1.3;
    }
    .bani1-quiz-question {
        font-size: 18px;
        margin-bottom: 16px;        /* было 25px */
    }
    /* Progress + микротекст более компактно */
    .bani1-quiz-progress { margin-bottom: 4px; }
    .bani1-quiz-progress-text { font-size: 11px; margin-bottom: 12px; }
    /* Шаг 0 (тип Баня/Дом): 2 фото в РЯД на mobile, по 50% ширины.
       Раньше были в столбик — занимали 480px высоты, кнопка ДАЛЕЕ не влезала. */
    .bani1-quiz-images {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
    }
    .bani1-quiz-image-option {
        flex: 1;
        max-width: 50%;
        width: 50%;
        min-width: 0;                /* для корректной работы flex с overflow */
    }
    .bani1-quiz-image-option .image-card img {
        height: 110px;               /* компромисс: достаточно крупно но 2 в ряд помещаются */
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
    .bani1-quiz-image-option .option-label {
        font-size: 14px;
    }
    /* Опции компактнее на мобиле — чтобы 5-6 опций влезали без скролла */
    .bani1-quiz-text-option .text-card {
        padding: 12px 14px;
        font-size: 15px;
    }
    .bani1-quiz-options {
        gap: 8px;
    }
    /* Кнопки навигации компактнее */
    .bani1-quiz-nav {
        padding-top: 12px;
    }
    .bani1-quiz-options {
        grid-template-columns: 1fr;
    }
    .bani1-quiz-final {
        flex-direction: column;
    }
    .bani1-quiz-final-image {
        display: none;
    }
    .bani1-quiz-next,
    .bani1-quiz-submit {
        padding: 12px 30px;
        font-size: 15px;
    }
}