/* ============ Цветовая схема викторины ============ */
:root {
  --quiz-success: #198754;      /* Зеленый для правильных ответов */
  --quiz-success-light: rgba(25,135,84,.25);
  --quiz-danger: #dc3545;       /* Красный для неправильных ответов */
  --quiz-danger-light: rgba(220,53,69,.25);
  --quiz-primary: #0d6efd;      /* Синий для основных элементов */
  --quiz-primary-light: rgba(13,110,253,.25);
  --quiz-warning: #ffc107;      /* Желтый для предупреждений */
  --quiz-info: #0dcaf0;         /* Голубой для информации */
  --quiz-muted: #6c757d;        /* Серый для вспомогательного текста */
  --quiz-light: #f8f9fa;        /* Светло-серый для фона */
  --quiz-border: #e5e7eb;       /* Серый для границ */
}

/* ============ Основные стили ============ */
.hidden { display: none !important; }
.d-none { display: none !important; }

/* ============ Статусы викторины ============ */
.quiz-status { 
  border: 1px solid var(--quiz-border); 
  background: color-mix(in oklab, var(--quiz-light) 96%, transparent); 
  border-radius: 10px; 
  padding: 10px 12px; 
}
.quiz-status-message { display: none; }
.quiz-status[data-status="idle"] .quiz-status-idle,
.quiz-status[data-status="loading"] .quiz-status-loading,
.quiz-status[data-status="correct"] .quiz-status-correct,
.quiz-status[data-status="incorrect"] .quiz-status-incorrect,
.quiz-status[data-status="error"] .quiz-status-error { display: block; }

.qq-status { font-size: .9rem; }

/* ============ Элементы ввода ============ */
.form-check-input:checked { 
  border-color: var(--quiz-primary); 
  background-color: var(--quiz-primary); 
}

/* Подсветка правильных/неправильных ответов */
.form-check-input.is-valid { 
  border-color: var(--quiz-success); 
  box-shadow: 0 0 0 .2rem var(--quiz-success-light); 
}
.form-check-input.is-invalid { 
  border-color: var(--quiz-danger); 
  box-shadow: 0 0 0 .2rem var(--quiz-danger-light); 
}

/* Отключенные элементы */
.form-check-input:disabled~.form-check-label, 
.form-check-input[disabled]~.form-check-label {
  cursor: default;
  opacity: 1 !important;
}

/* Эффекты прозрачности для feedback состояний */
.quick-quiz[data-state="feedback-correct"] .form-check.mb-2,
.quick-quiz[data-state="feedback-incorrect"] .form-check.mb-2,
.quick-quiz[data-state="locked"] .form-check.mb-2 {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ============ Блоки обратной связи ============ */
.quiz-feedback { 
  margin-top: .25rem; 
}

/* Цветные границы для feedback блоков */
.quiz-feedback.border-success { 
  border-left-color: var(--quiz-success) !important; 
}
.quiz-feedback.border-danger { 
  border-left-color: var(--quiz-danger) !important; 
}
.quiz-feedback.border-primary { 
  border-left-color: var(--quiz-primary) !important; 
}

/* ============ Объяснения ============ */
.quiz-explanation { 
  background-color: var(--quiz-light);
}
.quiz-explanation.border-primary { 
  border-left-color: var(--quiz-primary) !important; 
}

/* ============ Кнопки ============ */
.quiz-actions .btn-primary {
  background-color: var(--quiz-primary);
  border-color: var(--quiz-primary);
}
.quiz-actions .btn-primary:hover {
  background-color: color-mix(in oklab, var(--quiz-primary) 85%, black);
  border-color: color-mix(in oklab, var(--quiz-primary) 85%, black);
}

.quiz-result-actions .btn-outline-primary {
  color: var(--quiz-primary);
  border-color: var(--quiz-primary);
}
.quiz-result-actions .btn-outline-primary:hover {
  background-color: var(--quiz-primary);
  border-color: var(--quiz-primary);
}

/* ============ Загрузка ============ */
.quiz-loading .text-muted {
  color: var(--quiz-muted) !important;
}

/* ============ Адаптивность ============ */
@media (max-width: 768px) {
  .quiz-status {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
}