/* Quiz Styles */
.quiz-question {
  margin-bottom: 2em;
  padding: 1.5em;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.question-text {
  margin-bottom: 1em;
  font-size: 1.05em;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.quiz-option {
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
}

.quiz-option:hover {
  background: #f8f9fa;
  border-color: #007bff;
}

.quiz-option input[type="radio"] {
  margin-right: 0.75em;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.quiz-option.correct {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  animation: correctPulse 0.5s ease;
}

.quiz-option.incorrect {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  animation: shake 0.5s ease;
}

.quiz-option.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.option-text {
  flex: 1;
}

.quiz-feedback {
  margin-top: 1em;
  padding: 0.75em;
  border-radius: 6px;
  font-weight: 500;
  display: none;
}

.quiz-feedback.show {
  display: block;
}

.quiz-feedback.correct {
  background: rgba(40, 167, 69, 0.1);
  color: #155724;
  border: 1px solid #28a745;
}

.quiz-feedback.incorrect {
  background: rgba(220, 53, 69, 0.1);
  color: #721c24;
  border: 1px solid #dc3545;
}

@keyframes correctPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .quiz-question {
    background: #2d2d2d;
    border-color: #444;
  }
  
  .quiz-option {
    background: #1a1a1a;
    border-color: #444;
    color: #e0e0e0;
  }
  
  .quiz-option:hover {
    background: #2d2d2d;
    border-color: #0d6efd;
  }
  
  .quiz-option.correct {
    border-color: #6ba368;
    background: rgba(107, 163, 104, 0.2);
  }
  
  .quiz-option.incorrect {
    border-color: #d47d7d;
    background: rgba(212, 125, 125, 0.2);
  }
  
  .quiz-feedback.correct {
    background: rgba(107, 163, 104, 0.2);
    color: #9bc99a;
    border-color: #6ba368;
  }
  
  .quiz-feedback.incorrect {
    background: rgba(212, 125, 125, 0.2);
    color: #e5a3a3;
    border-color: #d47d7d;
  }
}