/* whsk-quiz.css - Basic styles for quiz and poll UI */
.whsk-quiz-container,
.whsk-poll-container {
   margin: 30px auto;
   padding: 24px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.whsk-quiz-question-image,
.whsk-poll-question-image {
   max-width: 100%;
   margin: 12px 0;
   border-radius: 12px;
}

.whsk-quiz-progress {
   width: 100%;
   background: #eee;
   border-radius: 12px;
   margin-bottom: 18px;
   height: 8px;
   overflow: hidden;
}

.whsk-quiz-progress-bar {
   height: 100%;
   background: royalblue;
   width: 0;
   transition: width 0.3s;
}

.whsk-quiz-question,
.whsk-poll-question {
   margin-bottom: 10px;
}

.whsk-quiz-answers,
.whsk-poll-answers {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.whsk-quiz-answers label,
.whsk-poll-answers label {
   display: block;
   cursor: pointer;
   padding: 8px 12px;
   border-radius: 6px;
   color: #222 !important;
   background: none;
   font-weight: bold !important;
}

.whsk-quiz-answers label:hover,
.whsk-poll-answers label:hover {
   background: #f0f0f0;
}

.whsk-quiz-next-question,
.whsk-quiz-submit,
.whsk-poll-submit {
   background: royalblue;
   color: #fff;
   border: none;
   padding: 10px 24px;
   border-radius: 6px;
   cursor: pointer;
   margin-top: 24px;
   font-size: 16px;
}

.whsk-quiz-result,
.whsk-poll-result {
   font-size: 26px;
   margin-top: 12px;
   text-align: center;
}

.whsk-correct {
   background: #c8f7c5 !important;
}

.whsk-wrong {
   background: #ffd6d6 !important;
}

/* Table mode */
.whsk-quiz-questions {
   display: flex;
   flex-direction: column;
   gap: 36px;
}

/* Custom radio button as checkmark */
.whsk-quiz-answers input[type="radio"],
.whsk-poll-answers input[type="radio"] {
   appearance: none;
   -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #bbb;
   border-radius: 50%;
   max-width: 22px;
   max-height: 22px;
   min-width: 22px;
   min-height: 22px;
   margin-right: 12px;
   vertical-align: middle;
   position: relative;
   top: -2px;
   outline: none;
   cursor: pointer;
   transition: border-color 0.2s;
}

.whsk-correct input[type="radio"]:checked,
.whsk-correct input[type="radio"]:checked {
   background-color: #4caf50;
   border-color: #4caf50;
}

.whsk-wrong input[type="radio"]:checked,
.whsk-wrong input[type="radio"]:checked {
   background-color: #ea3c3c;
   border-color: #ea3c3c;
}

.whsk-quiz-answers input[type="radio"]:checked::after,
.whsk-poll-answers input[type="radio"]:checked::after {
   content: '\2713';
   color: #fff;
   font-size: 16px;
   position: absolute;
   left: 3px;
   top: 0;
   line-height: 20px;
}

.whsk-poll-results-title {
   font-weight: bold;
   margin-bottom: 12px;
}

.whsk-poll-result-bar-row {
   display: grid;
   grid-template-columns: 1fr 3fr 80px;
   align-items: center;
   gap: 12px;
   margin-bottom: 10px;
   font-size: 18px;
}

.whsk-poll-result-label {
   flex: 1 1 120px;
   text-align: left;
   font-weight: bold;
}

.whsk-poll-result-bar {
   flex: 3 1 200px;
   background: #eee;
   border-radius: 8px;
   height: 16px;
   overflow: hidden;
   position: relative;
}

.whsk-poll-result-percent {
   display: flex;
   text-align: right;
   font-size: 18px;
   color: #333;
}