/* ─────────────────────────────────────
   MCQ Container
───────────────────────────────────── */
.mcq-block {
  border: 1px solid #ddd;
  padding: 1em;
  margin-bottom: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Question text */
.mcq-question {
  font-weight: bold;
  margin-bottom: 0.8em;
}

/* Choice container */
/* Make explanation appear below the choice label */
.mcq-choice {
  margin: 0.5em 0;
  padding: 0.5em 0.8em;
  border-radius: 5px;
  transition: background 0.05s, border-left 0.05s;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* stack label and explanation vertically */
  align-items: flex-start; /* align items to the left */
}


/* Hover effect */
.mcq-choice:hover {
  background: #dfdfdf;
}

/* Keep label contents in a row */
.mcq-choice label {
  display: flex;
  align-items: center;
  width: 100%;
}


/* Input checkbox/radio spacing */
.mcq-choice input {
  margin-right: 0.5em;
}

/* Letter display */
.mcq-letter {
  font-weight: bold;
  margin-right: 0.4em;
}

/* Explanation text */
.mcq-explanation {
  display: none;   /* ensure it's hidden by default */
  margin-top: 0.3em;
  font-size: 0.9em;
  color: #555;
  padding-left: 0.5em;
  margin-left: 2em; /* indent the explanation from the left */
}


/* ─────────────────────────────────────
   Background for different types
───────────────────────────────────── */
.mcq-block[data-mcq-radio="true"] {
  background-color: #ffffff; /* e7eeff subtle blue for radio questions */
}

.mcq-block[data-mcq-radio="false"][data-mcq-single="true"] {
  background-color: #ffffff; /* fff7ea subtle orange for single click */
}

.mcq-block[data-mcq-radio="false"][data-mcq-single="false"] {
  background-color: #f5fbff; /* subtle blue for multi-select */
}

/* ─────────────────────────────────────
   Selection colouring
───────────────────────────────────── */
.mcq-choice.selected.mcq-correct {
  background-color: #dbffde; /* green */
  border-left: 4px solid #28a745;
}

.mcq-choice.selected.mcq-incorrect {
  background-color: #ffd4d4; /* red */
  border-left: 4px solid #dc3545;
}

/* Multi-select boxes: lighter shades for clarity */
/* .mcq-choice input[type="checkbox"]:checked + .mcq-choice-label {
  background-color: #c8e6c9; /* light green if correct */
  /* incorrect handled via JS class toggle */
/* } */

/* Smooth transitions */
.mcq-choice,
.mcq-choice input[type="checkbox"],
.mcq-choice input[type="radio"] {
  transition: background 0.1s, border-left 0.1s;
}