/* ===========================================
   Quiz Answer Block — Interactive Radios
   =========================================== */

.quiz-answer-option {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

/* Hide native radio input */
.quiz-answer-option input[type="radio"] {
  display: none;
}

/* Label layout for clickability */
.quiz-answer-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Circle for interactive radio */
.answer-bubble {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--main-text-color);
  border-radius: 50%;
  margin-right: 1rem;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease-in-out;
}

/* Filled circle when selected */
.quiz-answer-option input[type="radio"]:checked + .quiz-answer-label .answer-bubble {
  background-color: var(--main-text-color);
}

/* Text part of answer */
.answer-text {
  display: inline-block;
}


/* ===========================================
   Quiz Answer Block — Readonly / Result Mode
   =========================================== */

/* Visual bubble for post-submission answers */
.answer-bubble-static {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--main-text-color);
  border-radius: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
  background-color: transparent;
}

/* Correct answer → filled circle + bold */
.quiz-answer-option.is-correct .answer-bubble-static,
.quiz-answer-option.submitted-correct .answer-bubble-static {
  background-color: var(--main-text-color);
}

.quiz-answer-option.is-correct .answer-text,
.quiz-answer-option.submitted-correct .answer-text {
  font-weight: bold;
}

/* User chose wrong answer → faded */
.quiz-answer-option.is-submitted-wrong {
  opacity: 0.5;
}