/* website/static/css/questions.css */

/* questions.css — Styling for question display and answer feedback */

/* Question container: structural tweaks only, inherits colors from base.css */
.question-box {
  border: 1px solid #ccc;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 6px;
}

/* ✅ Option styling (feedback colors only) */
.question-box .opt-correct {
  background-color: #cfe8ff;
}

.question-box .opt-correct-green {
  background-color: #c9f7c1;
}

.question-box .opt-wrong-red {
  background-color: #f7c1c1;
}

/* ✅ Navigation buttons — normal state inherits base.css button styles */

/* Disabled/inactive state — override base.css to show dead‑end clearly */
.question-box .nav-buttons button.nav-btn.inactive,
.question-box .nav-buttons button.nav-btn:disabled {
  background-color: #555 !important;   /* dark grey background */
  color: #aaa !important;              /* light grey text */
  cursor: not-allowed !important;
  opacity: 1 !important;               /* prevent browser default dimming */
  border: none !important;
}

/* Suppress hover effect on disabled buttons */
.question-box .nav-buttons button.nav-btn.inactive:hover,
.question-box .nav-buttons button.nav-btn:disabled:hover {
  background-color: #555 !important;
  color: #aaa !important;
}

/* Legacy disabled style (kept for compatibility) */
.question-box .nav-disabled {
  pointer-events: none;
  color: #aaa;
  background: #f1f1f1;
}

/* ✅ Mark button/icon — hover color only */
.question-box .mark-icon {
  cursor: pointer;
  font-size: 24px;
  display: inline-block;
  margin-bottom: 10px;
}

.question-box .mark-icon:hover {
  color: #007bff;
}

/* ✅ Layout helpers */
.question-box .buttons {
  margin-top: 20px;
}

.question-box .answer-box,
.question-box .stats-box {
  margin-top: 10px;
}