/* ============================================
   📚 quiz.css — Styled quiz cards for LinguaGlow
   ============================================ */

/* 🌟 Quiz container */
.quiz-container {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
}

/* 📦 Each question card */
.question {
  background: var(--button-bg);
  border-left: 5px solid var(--primary);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* 💬 Question title */
.question h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

/* 📝 Options list */
.question ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 🔘 Individual option */
.question li {
  padding: 0.75rem 1.2rem;
  border-radius: 30px;
  background-color: var(--bg);
  border: 2px solid var(--primary);
  color: var(--text);
  cursor: pointer;
  transition: all 0.25s ease;
  font-weight: 500;
}

.question li:hover {
  background-color: var(--primary);
  color: #fff;
}

/* 🟩 Correct answer */
.correct {
  background-color: #4caf50 !important;
  color: white !important;
  border-color: #4caf50 !important;
}

/* 🟥 Wrong answer */
.wrong {
  background-color: #f44336 !important;
  color: white !important;
  border-color: #f44336 !important;
}

/* 🚫 Disabled (after click) */
.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ✅ Answered state */
.answered li {
  pointer-events: none;
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .question li {
    font-size: 0.95rem;
  }
}