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

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

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

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

.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 {
	align-items   : center;
	background    : none;
	border-radius : 6px;
	color         : #222222 !important;
	cursor        : pointer;
	display       : flex;
	font-weight   : bold !important;
	padding       : 8px 12px;
}

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

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

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

/* Rich text support inside results */
.whsk-quiz-result p,
.whsk-poll-result p {
	margin : 0.5em 0;
}

.whsk-quiz-result strong,
.whsk-quiz-result b,
.whsk-poll-result strong,
.whsk-poll-result b {
	font-weight : 700;
}

.whsk-quiz-result em,
.whsk-quiz-result i,
.whsk-poll-result em,
.whsk-poll-result i {
	font-style : italic;
}

.whsk-quiz-result u,
.whsk-poll-result u {
	text-decoration       : underline;
	text-underline-offset : 0.15em;
}

.whsk-quiz-result del,
.whsk-poll-result del {
	text-decoration : line-through;
}

.whsk-quiz-result a,
.whsk-poll-result a {
	color           : royalblue;
	text-decoration : underline;
}

.whsk-quiz-result ul,
.whsk-poll-result ul,
.whsk-quiz-result ol,
.whsk-poll-result ol {
	display      : inline-block;
	padding-left : 1.2em;
	text-align   : left;
}

.whsk-quiz-result li,
.whsk-poll-result li {
	margin : 0.25em 0;
}

.whsk-quiz-result sup,
.whsk-poll-result sup {
	font-size      : 0.75em;
	vertical-align : super;
}

.whsk-quiz-result sub,
.whsk-poll-result sub {
	font-size      : 0.75em;
	vertical-align : sub;
}

.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'] {
	-webkit-appearance : none;
	appearance         : none;
	background-color   : #FFFFFF;
	border             : 1px solid #BBBBBB;
	border-radius      : 50%;
	cursor             : pointer;
	margin-right       : 12px;
	max-height         : 22px;
	max-width          : 22px;
	min-height         : 22px;
	min-width          : 22px;
	outline            : none;
	position           : relative;
	top                : -2px;
	transition         : border-color 0.2s;
	vertical-align     : middle;
}

.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 {
	color       : #FFFFFF;
	content     : '\2713';
	font-size   : 16px;
	left        : 3px;
	line-height : 20px;
	position    : absolute;
	top         : 0;
}

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

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

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

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

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