/* === Мобильная адаптация основного квиза и виджета онлайн-консультации === */

/* Телефоны и небольшие экраны */
@media (max-width: 480px) {
  /* ===== Основной квиз на странице (#quiz) ===== */

  /* Чуть больше воздуха вокруг */
  #quiz {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  /* Заголовок секции квиза */
  #quiz .section__head h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Оболочка квиза — на всю ширину, помягче радиус */
  #quiz .quiz-shell {
    margin-top: 16px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  }

  /* Внутренняя «стеклянная» карточка */
  #quiz .quiz-container {
    padding: 18px 14px 16px;
    border-radius: 16px;
  }

  /* Заголовки и текст шагов */
  #quiz .quiz-step h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  #quiz .quiz-step > p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  /* Варианты ответов */
  #quiz .quiz-step_radio_cont {
    gap: 8px;
  }

  #quiz .quiz-step_radio_cont label {
    font-size: 14px;
    padding: 10px 12px;
  }

  /* Инпуты (город / сфера / телефон / имя) */
  #quiz .quiz-step_radio_cont input[type="text"],
  #quiz .quiz-step_radio_cont input[type="tel"] {
    font-size: 15px;
    padding: 12px 14px;
  }

  /* Кнопки квиза — в столбик, на всю ширину */
  #quiz .btn-row,
  #quiz #quiz-last-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #quiz .btn-row .next-btn,
  #quiz .btn-row .prev-btn,
  #quiz #quiz-last-buttons .prev-btn,
  #quiz #quiz-last-buttons #btn1 {
    width: 100%;
    justify-content: center;
  }

  /* Карточка последнего шага */
  #quiz .quiz-step[data-step="4"] {
    margin-top: 20px;
    padding: 18px 14px 20px;
    border-radius: 18px;
  }

  #quiz .quiz-step[data-step="4"] .quiz-step_radio_cont {
    padding: 14px 10px 10px;
  }

  #quiz .quiz-step[data-step="4"] .form__tel input {
    min-height: 48px;
    font-size: 15px;
  }

  /* Пузырьки ошибок в квизе — чтобы не вылазили за экран */
  #quiz .form__name_message,
  #quiz .form__tel_message {
    left: 8px;
    max-width: calc(100% - 16px);
    font-size: 10px;
  }

  /* ===== Виджет онлайн-консультации (.consult-widget) ===== */

  /* Плавающая кнопка виджета — растягиваем под экран */
  .consult-widget__toggle {
    width: calc(100vw - 32px) !important;
    max-width: 380px;
    padding: 10px 14px;
    border-radius: 999px;
  }

  /* Панель виджета как «bottom-sheet» снизу экрана */
  .consult-widget__panel {
    width: 100vw !important;
    max-width: none !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .consult-widget__panel-inner {
    padding: 16px 14px 18px;
  }

  /* Варианты ответов в виджете */
  .widget-quiz-step__options {
    gap: 8px;
  }

  .widget-quiz-option {
    padding: 9px 10px;
  }

  /* Поля ввода имени и телефона в виджете */
  .consult-widget__form .widget-quiz-step__field input {
    padding: 10px 12px;
    min-height: 46px;
  }

  /* Кнопки "Назад/Далее/Отправить" в виджете — в столбик */
  .consult-widget__form .widget-quiz-step__controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .consult-widget__form .widget-quiz-btn {
    width: 100%;
    justify-content: center;
  }

  /* Пузырьки ошибок в виджете */
  .consult-widget__form .form__name_message,
  .consult-widget__form .form__tel_message {
    left: 6px;
    max-width: calc(100% - 12px);
    font-size: 10px;
  }
}

/* Очень маленькие экраны (до 360px) */
@media (max-width: 360px) {
  #quiz .section__head h2 {
    font-size: 18px;
  }

  #quiz .quiz-step h2 {
    font-size: 16px;
  }

  #quiz .quiz-step > p {
    font-size: 13px;
  }

  #quiz .quiz-step_radio_cont label {
    font-size: 13px;
  }
}

/* Небольшие планшеты / горизонтальные телефоны */
@media (min-width: 481px) and (max-width: 768px) {
  #quiz .quiz-shell {
    margin-top: 24px;
    max-width: 640px;
  }

  #quiz .quiz-container {
    padding: 22px 18px 20px;
  }

  #quiz .quiz-step h2 {
    font-size: 20px;
  }

  /* Чуть шире панель виджета на планшетах */
  .consult-widget__panel {
    width: 420px;
  }
}