.ec-size .ec-store .ssqz_demo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ec-size .ec-store .ssqz_open {
    border: 0;
    border-radius: 14px;
    padding: 15px 24px;
    background: #287a60;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.ec-size .ec-store .ssqz_modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 18px;
    background: rgba(30,30,30,0.5);
    backdrop-filter: blur(3px);
}

.ec-size .ec-store .ssqz_modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-size .ec-store .ssqz_dialog {
    position: relative;
    width: min(1080px,100%);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    border-radius: 28px;
}

.ec-size .ec-store .ssqz_close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    font-size: 26px;
    cursor: pointer;
}

.ec-size .ec-store .ssqz_cards {
    min-height: 200px;
    padding: 20px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.9);
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.ec-size .ec-store .ssqz_cards .ssqz_card {
    display: none;
}

.ec-size .ec-store .ssqz_cards .ssqz_card.active {
    display: block;
}

.ec-size .ec-store .ssqz_quiz1 .ssqz_dialog {
  position: relative;
  width: min(500px,100%);
}

/* Блок шапки квиза */
.ec-size .ec-store .quiz-header {
  margin-bottom: 20px;                     /* Отступ снизу, чтобы отделить шапку от остального контента */
}

/* Индикатор текущего шага (например, «Вопрос 1 из 5») */
.ec-size .ec-store .quiz-step {
  font-size: 12px;                         /* Небольшой размер шрифта, чтобы не отвлекать внимание */
  font-weight: 400;                        /* Обычный вес шрифта (не жирный) */
  color: #888888;                          /* Серый цвет текста для второстепенной информации */
  margin-bottom: 8px;                      /* Отступ снизу для отделения от заголовка */
  display: block;                          /* Делает элемент блочным, чтобы он занимал всю строку */
}

/* Заголовок квиза */
.ec-size .ec-store .quiz-title {
  font-size: 24px;                         /* Достаточно крупный размер для основного заголовка */
  font-weight: 700;                        /* Жирный шрифт для акцента */
  color: #1A1A1A;                          /* Почти черный цвет для хорошей читаемости */
  text-align: left;                        /* Выравнивание по левому краю для аккуратного вида */
  margin-bottom: 16px;                     /* Отступ снизу перед изображением */
}

/* Изображение-обложка в шапке */
.ec-size .ec-store .ssqz_card .quiz-cover {
  width: 100%;                             /* Растягивает картинку на всю ширину карточки */
  height: 190px;                           /* Фиксированная высота для единообразия */
  object-fit: cover;                       /* Обрезает лишнее, сохраняя пропорции и заполняя всю область */
  border-radius: 8px;                      /* Скругляет углы картинки */
  display: block;                          /* Убирает лишние отступы, характерные для строчных элементов */
}

/* Заголовок текущего вопроса */
.ec-size .ec-store .quiz-question-title {
  font-size: 18px;                         /* Чуть меньше заголовка квиза, но все еще хорошо читаемый */
  font-weight: 600;                        /* Полужирный шрифт, чтобы выделить вопрос */
  color: #1A1A1A;                          /* Темный цвет для контраста */
  margin-bottom: 16px;                     /* Отступ снизу до вариантов ответов */
  margin-top: 24px;                        /* Отступ сверху, чтобы отделить от шапки */
}

/* Контейнер для вариантов ответов (сетка) */
.ec-size .ec-store .quiz-options {
  display: grid;                           /* Включает CSS Grid для удобного размещения карточек ответов */
  grid-template-columns: repeat(2, 1fr);   /* Создает 2 колонки одинаковой ширины */
  gap: 12px;                               /* Расстояние между карточками ответов по вертикали и горизонтали */
  margin-bottom: 24px;                     /* Отступ снизу перед кнопкой «Далее» */
}

/* Обертка label для каждого варианта ответа */
.ec-size .ec-store .quiz-option {
  cursor: pointer;                         /* Меняет курсор на «руку», показывая, что элемент кликабельный */
  display: block;                          /* Делает label блочным элементом */
}

/* Скрываем стандартный радио-инпут (чтобы стилизовать свой вариант) */
.ec-size .ec-store .quiz-option input[type="radio"] {
  display: none;                           /* Полностью скрывает стандартный переключатель */
}

/* Стили самой карточки варианта ответа */
.ec-size .ec-store .option-card {
  background-color: #EEEEEE;               /* Светло-серый фон для неактивной карточки */
  border: 2px solid transparent;           /* Прозрачная рамка (готовимся к появлению при выборе) */
  border-radius: 12px;                     /* Мягкие скругленные углы */
  padding: 16px;                           /* Внутренние отступы для комфортного размещения иконки и текста */
  display: flex;                           /* Flex-режим для выравнивания содержимого внутри карточки */
  flex-direction: column;                  /* Элементы внутри (иконка, текст) идут вертикально */
  align-items: center;                     /* Выравнивание по центру по горизонтали */
  justify-content: center;                 /* Выравнивание по центру по вертикали */
  text-align: center;                      /* Текст внутри карточки выровнен по центру */
  transition: all 0.2s ease-in-out;        /* Плавная анимация при наведении и выборе */
  height: 100%;                            /* Карточки в сетке будут одинаковой высоты */
}

/* Иконка внутри карточки ответа */
.ec-size .ec-store .ssqz_card .option-icon {
  width: 40px;                             /* Фиксированная ширина иконки */
  height: 40px;                            /* Фиксированная высота иконки */
  margin-bottom: 8px;                      /* Отступ между иконкой и текстом */
  object-fit: contain;                     /* Иконка помещается целиком, не обрезаясь */
}

/* Текст внутри карточки ответа */
.ec-size .ec-store .option-text {
  font-size: 14px;                         /* Комфортный размер для чтения */
  font-weight: 500;                        /* Средний вес шрифта */
  color: #333333;                          /* Темно-серый цвет для хорошего контраста */
}

/* Эффект при наведении курсора на вариант ответа */
.ec-size .ec-store .quiz-option:hover .option-card {
  background-color: #E2E2E2;               /* Чуть более темный фон при наведении для обратной связи */
}

/* Состояние выбранного варианта (когда радио-кнопка отмечена) */
.ec-size .ec-store .quiz-option input[type="radio"]:checked + .option-card {
  border-color: #000000;                   /* Появляется черная рамка как индикатор выбора */
  background-color: #FFFFFF;               /* Фон становится белым для контраста и акцента */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);/* Легкая тень для выделения выбранной карточки */
}

/* Усиление текста в выбранном варианте */
.ec-size .ec-store .quiz-option input[type="radio"]:checked + .option-card .option-text {
  color: #000000;                          /* Текст становится черным */
  font-weight: 600;                        /* Делается полужирным для акцента */
}

.ec-size .ec-store .quiz-errors,
.ec-size .ec-store .quiz-error {
    display: none;
}

.ec-size .ec-store .quiz-error {
    margin: 0 0 24px 0;
    padding: 7px 7px 7px 15px;
    background: #f99;
    border-left: 4px solid #f00;
    border-radius: 5px;
}

.ec-size .ec-store .quiz-error-flash {
    animation: error_shake 0.4s ease;
}

@keyframes error_shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}


.ec-size .ec-store .quiz_footer {
    display: flex;
    gap: 10px;
}

.ec-size .ec-store .btn_step {
    width: 100%;
    height: 48px;
    background-color: #6f6c9e;
    opacity: 0.5;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ec-size .ec-store .btn_step.active {
    opacity: 1;
}

.ec-size .ec-store .btn_step:hover {
    background-color: #64619c;
}

.ec-size .ec-store .quiz-ptext {
    margin: 0 0 16px 0;
}

.ec-size .ec-store .quiz-presult-text {
    margin: 0 0 16px 0;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 480px) {
  .ec-size .ec-store .quiz-card {
    padding: 16px;                         /* Уменьшаем внутренние отступы карточки на узких экранах */
  }

  .ec-size .ec-store .quiz-options {
    grid-template-columns: 1fr;            /* На мобильных устройствах варианты идут в одну колонку */
  }

  /* На мобильных выравниваем содержимое карточки ответа в строку */
  .ec-size .ec-store .option-card {
    flex-direction: row;                   /* Иконка и текст идут горизонтально */
    text-align: left;                      /* Текст выравнивается по левому краю */
    justify-content: flex-start;           /* Содержимое прижимается к началу строки */
  }

  .ec-size .ec-store .option-icon {
    margin-bottom: 0;                      /* Убираем отступ снизу (теперь он справа) */
    margin-right: 12px;                    /* Добавляем отступ справа между иконкой и текстом */
  }
}
/* Для формата 2 */
/* Дополнения для чекбоксов (Вопрос 1) */
.ec-size .ec-store .quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ec-size .ec-store .option-checkbox-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.ec-size .ec-store .custom-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

.ec-size .ec-store input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #6f6c9e;
  border-color: #6f6c9e;
}

.ec-size .ec-store .item-image { width: 80px; height: 100px; object-fit: cover; border-radius: 8px; }
.ec-size .ec-store .item-label { font-size: 12px; margin-top: 8px; color: #333; }

/* Дополнения для ползунков (Вопрос 2) */
.ec-size .ec-store .slider-container { margin-bottom: 24px; }
.ec-size .ec-store .slider-label { font-size: 14px; font-weight: 500; margin-bottom: 12px; display: block; }
.ec-size .ec-store input[type=range] { width: 100%; height: 4px; background: #ddd; appearance: none; border-radius: 2px; }
.ec-size .ec-store input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: #6f6c9e; border-radius: 50%; cursor: pointer; }
.ec-size .ec-store .slider-labels { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-top: 8px; }
/* Контейнер для выравнивания селекта и текста в строку */
.ec-size .ec-store .item-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* Стилизация селекта (убираем position: absolute, если было) */
.ec-size .ec-store .quantity-select {
  width: 50px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  padding: 0 4px;
}

/* Обертка для карточки */
.ec-size .ec-store .option-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
/* Контейнер для выбора стиля */
.ec-size .ec-store .style-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.ec-size .ec-store .style-card {
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px;
  transition: 0.3s;
}

.ec-size .ec-store .style-card:hover { border-color: #6f6c9e; }
.ec-size .ec-store .style-image { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.ec-size .ec-store .style-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ec-size .ec-store .style-desc { font-size: 11px; color: #666; line-height: 1.4; }