/* Базовые стили для контейнера квиза */
#gribquiz {
  max-width: 600px;
  margin: auto;
  font-family: sans-serif;
  padding: 0 1em;
  display: none; /* Скрываем по умолчанию, пока пользователь не нажмет "Начать" */
}

/* Правило для показа квиза, когда JS добавляет класс .is-active */
#gribquiz.is-active {
  display: block;
}

/* Стили для изображения квиза */
.gq-image {
  width: 65%;
  height: auto;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  display: block; /* Важно для центрирования через margin: auto */
}

/* Медиа-запрос для десктопных устройств: изображение 100% ширины */
@media (min-width: 601px) {
  .gq-image {
    width: 100%;
  }
}

/* Стили для текстовых элементов квиза */
.gq-text {
  font-size: 1em;
  min-height: 1.5em;
  margin-bottom: 0.5em;
}

.gq-comment {
  margin: 1em 0;
  min-height: 1.5em;
  color: #777;
}

/* Стили для контейнера кнопок ответов */
.gq-answers {
  display: flex;
  flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
  gap: 0.5em; /* Промежуток между кнопками */
  margin-bottom: 1em;
}

/* Стили для отдельных кнопок ответов */
.gq-answer {
  flex: 1 1 100%;
  padding: 0.6em;
  font-size: 1em;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box; /* Важно для корректного расчета ширины с padding и border */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.gq-answer:hover {
  background-color: #e0e0e0;
}

/* Стиль для неправильных ответов, который применяется при клике */
.gq-answer.wrong-answer.selected {
  background-color: #d63638; /* Красный цвет */
  color: white;
  transform: scale(1.02); /* Немного увеличиваем кнопку для визуального акцента */
}

/* Стиль для всех выбранных ответов, чтобы они немного отличались */
.gq-answer.selected {
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}

/* Медиа-запрос для экранов пошире (например, планшеты и десктопы), где кнопки в 2 столбца */
@media (min-width: 480px) {
  .gq-answer {
    flex: 1 1 calc(50% - 0.25em);
  }
}

/* --- НОВЫЕ СТИЛИ ДЛЯ КНОПОК "ДАЛЕЕ" И "ЗАКРЫТЬ" --- */

/* Обертка для кнопок "Далее" и "Закрыть" */
.gq-controls {
  display: flex;
  justify-content: space-between; /* Распределяет кнопки по краям контейнера */
  gap: 1em; /* Промежуток между кнопками */
  margin-top: 1em;
  flex-wrap: wrap; /* Позволяет кнопкам переноситься на новую строку на очень узких экранах */
}

/* Стили для кнопки "Далее" */
.gq-next {
  flex: 1;
  display: block;
  padding: 0.6em 1.2em;
  background: #222222;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.gq-next:hover {
  background: #777777;
  color: black;
}

/* Стили для кнопки "Закрыть" */
.gq-close {
  flex: 1;
  display: block;
  padding: 0.6em 1.2em;
  background: #222222;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.gq-close:hover {
  background: #777777;
  color: black;
}

/* Стили для кнопки запуска квиза */
.gq-start-button {
  padding: 1em 2em;
  font-size: 1.2em;
  cursor: pointer;
  margin: 1em auto;
  display: block;
}

.gq-start-button:hover {
  background-color: transparent;
  color: white;
}