/* Rimuovi la media query */
/* Dark mode tramite classe dark-mode */

body.dark-mode {
  background: #0f172a;
  color: #f1f5f9;
}

body#quiz.dark-mode {
  background: #0f172a;
  color: #f1f5f9;
}

body#cat.dark-mode {
  background: #0f172a;
  color: #f1f5f9;
}

/* Specifico per i quiz */
body.dark-mode #intro-box,
body.dark-mode #quiz-box {
  background: #1e293b;
  color: #f1f5f9;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .question {
  color: #f8fafc;
}

body.dark-mode .option {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

body.dark-mode .option:hover:not(:disabled) {
  background-color: #475569;
}

body.dark-mode .comment-box {
  background-color: #334155;
  border-left-color: #fb923c;
  color: #e2e8f0;
}

body.dark-mode #feedback {
  color: #f1f5f9;
}

body.dark-mode #result {
  color: #f8fafc;
}

body.dark-mode #voto-badge {
  color: #facc15;
}

body.dark-mode #commento-risultato {
  color: #cbd5e1;
}

body.dark-mode #continue-btn,
body.dark-mode #start-btn,
body.dark-mode #restart-btn {
  background: #2563eb;
}

body.dark-mode #continue-btn:hover,
body.dark-mode #start-btn:hover,
body.dark-mode #restart-btn:hover {
  background: #1d4ed8;
}

/* Specifico per la categoria */
body.dark-mode .category-header p {
  color: #cbd5e1;
}

body.dark-mode .quiz-card {
  background: #1e293b;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .quiz-card:hover {
  box-shadow: 0 0 15px rgba(245, 222, 179, 0.8);
}

body.dark-mode .quiz-title,
body.dark-mode .quiz-description {
  color: #f1f5f9;
}

body.dark-mode .quiz-button {
  background: #2563eb;
  color: white;
}

body.dark-mode .quiz-button:hover {
  background: #1d4ed8;
}

/* Specifico per la index */
body.dark-mode #welcome-header {
  color: #f1f5f9;
}

body.dark-mode #welcome-header p {
  color: #cbd5e1;
}

body.dark-mode #welcome-logo {
  filter: brightness(0.8) contrast(1.2); /* Per ammorbidire il logo in dark mode */
}

/* ===== Modulo Contatti - Dark Mode ===== */
body.dark-mode #contact-section {
  color: #f1f5f9;
}

body.dark-mode #contact-section p {
  color: #cbd5e1;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #475569;
}

body.dark-mode .contact-form input::placeholder,
body.dark-mode .contact-form textarea::placeholder {
  color: #94a3b8;
}