/* ETS-QUIZ front-end styles. Colors come from CSS variables set by the admin Appearance page. */

.ets-quiz {
	--etsq-text: #222;
	--etsq-question: #1a1a1a;
	--etsq-question-bg: #e8ecf7;
	--etsq-question-border: #c7d0e8;
	--etsq-question-card-bg: #fff;
	--etsq-question-card-border: #d0d5dd;
	--etsq-option-text: #333;
	--etsq-option-bg: #fff;
	--etsq-option-hover: #eef4ff;
	--etsq-border: #d0d5dd;
	--etsq-bg: #fff;
	--etsq-accent: #2563eb;
	--etsq-correct: #16a34a;
	--etsq-incorrect: #dc2626;
	--etsq-explanation-bg: #f1f5f9;
	--etsq-explanation-text: #334155;
	--etsq-fc-front-bg: #fff;
	--etsq-fc-front-text: #1a1a1a;
	--etsq-fc-back-bg: #f7f7f7;
	--etsq-fc-back-text: #1a1a1a;
	--etsq-fc-border: #d0d5dd;
	--etsq-radius: 8px;
	--etsq-border-width: 1px;
	--etsq-font-size: 16px;
	--etsq-button-text: #fff;

	background: var(--etsq-bg);
	color: var(--etsq-text);
	font-size: var(--etsq-font-size);
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: var(--etsq-radius);
	padding: 24px;
	margin: 20px 0;
	line-height: 1.6;
	box-sizing: border-box;
}

.ets-quiz *,
.ets-quiz *::before,
.ets-quiz *::after {
	box-sizing: border-box;
}

.ets-quiz .etsq-title {
	margin: 0 0 12px;
	color: var(--etsq-question);
}

.ets-quiz .etsq-intro {
	margin-bottom: 18px;
	padding: 12px 14px;
	background: var(--etsq-explanation-bg);
	color: var(--etsq-explanation-text);
	border-radius: var(--etsq-radius);
	white-space: pre-line;
}

.ets-quiz .etsq-question {
	background: var(--etsq-question-bg);
	border: var(--etsq-border-width) solid var(--etsq-question-border);
	border-radius: var(--etsq-radius);
	padding: 16px 18px;
	margin-bottom: 18px;
}

.ets-quiz .etsq-q-header {
	font-weight: 600;
	color: var(--etsq-question);
	background: var(--etsq-question-card-bg);
	border: var(--etsq-border-width) solid var(--etsq-question-card-border);
	border-radius: var(--etsq-radius);
	padding: 14px 16px;
	margin-bottom: 14px;
}
.ets-quiz .etsq-q-header .etsq-q-text { color: var(--etsq-question); }

.ets-quiz .etsq-q-num {
	color: var(--etsq-accent);
	margin-right: 4px;
}

/* MC / MR options */
.ets-quiz .etsq-options {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ets-quiz .etsq-option {
	margin: 0 0 8px;
}

.ets-quiz .etsq-option-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: var(--etsq-radius);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.ets-quiz .etsq-option-label:hover {
	background: var(--etsq-option-hover);
}

.ets-quiz .etsq-choice-input {
	margin-top: 3px;
	accent-color: var(--etsq-accent);
}
/* Remove the default focus outline/box around the radio/checkbox. */
.ets-quiz .etsq-choice-input:focus,
.ets-quiz .etsq-choice-input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Generic selects (used by DL drop-list) */
.ets-quiz select {
	padding: 6px 8px;
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: var(--etsq-radius);
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	font-size: inherit;
}

/* Sequence base list (item styling defined further below) */
.ets-quiz .etsq-sequence {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.ets-quiz .etsq-seq-item.etsq-dragging {
	opacity: .5;
}

/* Fill blank & drop list */
.ets-quiz .etsq-fb-line,
.ets-quiz .etsq-dl-line {
	margin: 0 0 6px;
	color: var(--etsq-text);
}

.ets-quiz .etsq-fb-input {
	border: none;
	border-bottom: 2px solid var(--etsq-accent);
	background: transparent;
	color: var(--etsq-text);
	font-size: inherit;
	padding: 2px 4px;
	margin: 0 2px;
}

.ets-quiz .etsq-fb-input:focus {
	outline: none;
	background: var(--etsq-option-hover);
}

/* Drag & drop */
.ets-quiz .etsq-dd-line {
	margin: 0 0 8px;
	line-height: 2.2;
}

.ets-quiz .etsq-dd-target {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	min-height: 1.9em;
	padding: 2px 8px;
	margin: 0 3px;
	border: 2px dashed var(--etsq-accent);
	border-radius: var(--etsq-radius);
	vertical-align: middle;
	background: var(--etsq-option-bg);
	line-height: 1.4;
}

/* Filled target: the whole box becomes solid blue with white text, sized to
   match the word-bank chips (no extra padding stacking). */
.ets-quiz .etsq-dd-target.etsq-filled {
	border-style: solid;
	border-color: var(--etsq-accent);
	background: var(--etsq-accent);
	color: var(--etsq-button-text);
	padding: 6px 12px;
}
.ets-quiz .etsq-dd-target.etsq-filled .etsq-dd-word {
	background: transparent;
	color: var(--etsq-button-text);
	padding: 0;
	margin: 0;
	border-radius: 0;
	cursor: default;
}

.ets-quiz .etsq-dd-over {
	background: var(--etsq-option-hover);
}

.ets-quiz .etsq-dd-bank {
	margin-top: 14px;
	padding: 12px;
	border: var(--etsq-border-width) dashed var(--etsq-border);
	border-radius: var(--etsq-radius);
}

.ets-quiz .etsq-dd-bank-label {
	font-size: .9em;
	font-weight: 600;
	color: var(--etsq-text);
	margin-bottom: 8px;
}

.ets-quiz .etsq-dd-instructions {
	margin: 10px 0 0;
	font-size: .9em;
	color: var(--etsq-text);
}

.ets-quiz .etsq-dd-words {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 2em;
}

/* Word bank chips: blue background, white text (Ewords included). */
.ets-quiz .etsq-dd-word {
	padding: 6px 12px;
	background: var(--etsq-accent);
	color: var(--etsq-button-text);
	border: none;
	border-radius: var(--etsq-radius);
	cursor: grab;
	user-select: none;
}

.ets-quiz .etsq-dd-word.etsq-dragging {
	opacity: .5;
}

/* Actions */
.ets-quiz .etsq-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.ets-quiz .etsq-btn {
	background: var(--etsq-accent);
	color: var(--etsq-button-text);
	border: none;
	padding: 10px 22px;
	border-radius: var(--etsq-radius);
	font-size: inherit;
	cursor: pointer;
}

.ets-quiz .etsq-btn.etsq-reset {
	background: var(--etsq-incorrect);
	color: #fff;
	border: none;
}

.ets-quiz .etsq-btn:hover {
	filter: brightness(.95);
}

.ets-quiz .etsq-score {
	font-weight: 700;
	color: var(--etsq-question);
}

/* Feedback & grading states */
.ets-quiz .etsq-explanation {
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--etsq-explanation-bg);
	color: var(--etsq-explanation-text);
	border-radius: var(--etsq-radius);
}
.ets-quiz .etsq-explanation,
.ets-quiz .etsq-explanation * {
	color: var(--etsq-explanation-text);
}

.ets-quiz .etsq-feedback {
	margin-top: 8px;
	font-weight: 600;
}

.ets-quiz .etsq-feedback.etsq-is-correct {
	color: var(--etsq-correct);
}

.ets-quiz .etsq-feedback.etsq-is-incorrect {
	color: var(--etsq-incorrect);
}

.ets-quiz .etsq-feedback.etsq-is-partial {
	color: var(--etsq-accent);
}

.ets-quiz .etsq-correct-mark {
	border-color: var(--etsq-correct) !important;
}

.ets-quiz .etsq-incorrect-mark {
	border-color: var(--etsq-incorrect) !important;
}

.ets-quiz .etsq-option.etsq-show-correct > .etsq-option-label {
	border-color: var(--etsq-correct);
	box-shadow: inset 0 0 0 1px var(--etsq-correct);
}

/* The learner's chosen option, when wrong, shows a red border. */
.ets-quiz .etsq-option.etsq-incorrect-mark > .etsq-option-label {
	border-color: var(--etsq-incorrect);
	box-shadow: inset 0 0 0 1px var(--etsq-incorrect);
}
/* When the chosen option is correct, show a green border on its label. */
.ets-quiz .etsq-option.etsq-correct-mark > .etsq-option-label {
	border-color: var(--etsq-correct);
	box-shadow: inset 0 0 0 1px var(--etsq-correct);
}

.ets-quiz .etsq-error,
.ets-quiz.etsq-error {
	color: var(--etsq-incorrect, #dc2626);
}

/* ---- Cards (shared) ---- */
.ets-quiz .etsq-card {
	padding: 10px 14px;
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: var(--etsq-radius);
	user-select: none;
}

/* ---- Sequence (cards only, no arrows) ---- */
.ets-quiz .etsq-seq-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	cursor: grab;
}
.ets-quiz .etsq-seq-item .etsq-seq-text { flex: 1 1 auto; }
.ets-quiz .etsq-seq-item:active { cursor: grabbing; }

/* ---- Matching puzzle (two columns; right column reorders) ---- */
.ets-quiz .etsq-matching {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 26px;
	row-gap: 12px;
	align-items: start;
}
.ets-quiz .etsq-mq-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Puzzle pieces */
.ets-quiz .etsq-mq-piece {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 16px;
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: var(--etsq-radius);
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .05 );
}
.ets-quiz .etsq-mq-content { flex: 1 1 auto; }

/* Right-hand match pieces are draggable */
.ets-quiz .etsq-mq-match {
	cursor: grab;
	user-select: none;
}
.ets-quiz .etsq-mq-match:active { cursor: grabbing; }
.ets-quiz .etsq-mq-match.etsq-dragging { opacity: .5; }

/* The interlocking "puzzle" notch (a small circle on the inner edge) */
.ets-quiz .etsq-mq-notch {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY( -50% );
	border: var(--etsq-border-width) solid var(--etsq-border);
	border-radius: 50%;
	background: var(--etsq-bg);
}
.ets-quiz .etsq-mq-notch-right { right: -10px; }   /* notch poking out the right of left-column items */
.ets-quiz .etsq-mq-notch-left  { left: -10px; }    /* notch poking out the left of right-column matches */

/* Number tag shown after grading: "1." "2." ... */
.ets-quiz .etsq-mq-numtag {
	font-weight: 700;
	margin-right: 6px;
	color: inherit;
}

/* Chosen-pair confirmation (user dropped a card on this row): blue accent.
   Distinct from the green/red grading colours. */
.ets-quiz .etsq-mq-piece.etsq-mq-paired {
	border-color: var(--etsq-accent);
	box-shadow: 0 0 0 2px var(--etsq-accent) inset;
}
.ets-quiz .etsq-mq-piece.etsq-mq-paired .etsq-mq-notch {
	border-color: var(--etsq-accent);
	background: var(--etsq-accent);
}

/* Grading colours — whole piece border + notch + text */
.ets-quiz .etsq-mq-piece.etsq-correct-mark {
	border-color: var(--etsq-correct);
	color: var(--etsq-correct);
}
.ets-quiz .etsq-mq-piece.etsq-correct-mark .etsq-mq-notch {
	border-color: var(--etsq-correct);
}
.ets-quiz .etsq-mq-piece.etsq-incorrect-mark {
	border-color: var(--etsq-incorrect);
	color: var(--etsq-incorrect);
}
.ets-quiz .etsq-mq-piece.etsq-incorrect-mark .etsq-mq-notch {
	border-color: var(--etsq-incorrect);
}

@media ( max-width: 480px ) {
	.ets-quiz .etsq-matching { column-gap: 16px; }
	.ets-quiz .etsq-mq-piece { padding: 10px 12px; min-height: 42px; }
}

/* ---- Shown correct answer (FB/DL/DD when wrong) ---- */
.ets-quiz .etsq-fb-wrap,
.ets-quiz .etsq-dl-wrap,
.ets-quiz .etsq-dd-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ets-quiz .etsq-correct-answer {
	color: var(--etsq-correct);
	font-weight: 700;
	font-size: .9em;
	white-space: nowrap;
}

/* Check mark shown at the end of a correct card / option (MC, MR, MQ, SQ). */
.ets-quiz .etsq-card-tick {
	display: inline-block;
	margin-left: auto;
	padding-left: 8px;
	color: var(--etsq-correct);
	font-weight: 700;
}
/* Inside a graded card the text is already coloured; keep the tick green. */
.ets-quiz .etsq-correct-mark > .etsq-card-tick,
.ets-quiz .etsq-mq-piece.etsq-correct-mark .etsq-card-tick {
	color: var(--etsq-correct);
}
/* In matching cards the tick is absolutely placed so it never changes height. */
.ets-quiz .etsq-mq-piece .etsq-card-tick {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	margin: 0;
	padding: 0;
}
.ets-quiz .etsq-mq-piece .etsq-mq-content {
	padding-right: 18px; /* leave room for the tick */
}
/* Check mark shown beside a correct blank (FB, DL, DD). */
.ets-quiz .etsq-tick {
	color: var(--etsq-correct);
	font-weight: 700;
}

/* ---- Question list navigation (single scrollable row + arrows) ---- */
.ets-quiz .etsq-qlist {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}
.ets-quiz .etsq-qlist-track {
	display: flex;
	gap: 6px;
	overflow: hidden;
	scroll-behavior: smooth;
	flex: 1 1 auto;
	/* keep everything on one line */
	white-space: nowrap;
}
.ets-quiz .etsq-qlist-btn {
	flex: 0 0 auto;
	min-width: 32px;
	height: 32px;
	border: var(--etsq-border-width) solid var(--etsq-border);
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	border-radius: var(--etsq-radius);
	cursor: pointer;
	font-size: .9em;
}
.ets-quiz .etsq-qlist-btn:hover { background: var(--etsq-option-hover); }
/* A question that has been answered: green, so unanswered ones stand out. */
.ets-quiz .etsq-qlist-btn.etsq-answered {
	background: var(--etsq-correct);
	color: #fff;
	border-color: var(--etsq-correct);
}
/* The current question. */
.ets-quiz .etsq-qlist-btn.etsq-active {
	background: var(--etsq-accent);
	color: var(--etsq-button-text);
	border-color: var(--etsq-accent);
}
/* Active wins over answered when both apply. */
.ets-quiz .etsq-qlist-btn.etsq-answered.etsq-active {
	background: var(--etsq-accent);
	border-color: var(--etsq-accent);
}
.ets-quiz .etsq-qlist-arrow {
	flex: 0 0 auto;
	width: 30px;
	height: 32px;
	border: var(--etsq-border-width) solid var(--etsq-border);
	background: var(--etsq-option-bg);
	color: var(--etsq-option-text);
	border-radius: var(--etsq-radius);
	cursor: pointer;
	font-size: 1.2em;
	line-height: 1;
	padding: 0;
}
.ets-quiz .etsq-qlist-arrow:hover { background: var(--etsq-option-hover); }
.ets-quiz .etsq-qlist-arrow:disabled { opacity: .35; cursor: default; }
.ets-quiz .etsq-qlist-arrow[hidden] { display: none; }

/* ---- Progress text ---- */
.ets-quiz .etsq-progress {
	color: var(--etsq-explanation-text);
	font-size: .92em;
}

/* ---- Button states ---- */
.ets-quiz .etsq-btn[hidden] { display: none; }
.ets-quiz .etsq-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.ets-quiz .etsq-check {
	background: var(--etsq-accent);
	color: var(--etsq-button-text);
	border: none;
}

/* ---- Media embedded in quiz content ---- */
.ets-quiz img,
.ets-quiz video,
.ets-quiz iframe { max-width: 100%; height: auto; }
.ets-quiz audio { width: 100%; max-width: 360px; vertical-align: middle; }
/* ---- Sequence live "correct position" hint (blue, before grading) ---- */
.ets-quiz .etsq-seq-item.etsq-seq-placed {
	border-color: var(--etsq-accent);
	box-shadow: inset 0 0 0 1px var(--etsq-accent);
}

/* ---- Locked state after Check / Submit ---- */
.ets-quiz .etsq-question.etsq-locked .etsq-option-label,
.ets-quiz .etsq-question.etsq-locked .etsq-card,
.ets-quiz .etsq-question.etsq-locked .etsq-mq-match,
.ets-quiz .etsq-question.etsq-locked .etsq-seq-item,
.ets-quiz .etsq-question.etsq-locked .etsq-dd-word {
	cursor: default;
}
.ets-quiz .etsq-question.etsq-locked .etsq-mq-match,
.ets-quiz .etsq-question.etsq-locked .etsq-seq-item,
.ets-quiz .etsq-question.etsq-locked .etsq-dd-word {
	cursor: not-allowed;
}
.ets-quiz .etsq-nodrag { cursor: not-allowed !important; }
.ets-quiz .etsq-question.etsq-locked input[disabled],
.ets-quiz .etsq-question.etsq-locked select[disabled] {
	cursor: not-allowed;
	opacity: 1; /* keep colours legible when showing results */
}

/* ---- Vocabulary Flashcards (VFC) ---- */
.ets-quiz .etsq-flashcards {
	max-width: 900px;
	margin: 10px auto;
	text-align: center;
}
.ets-quiz .etsq-fc-deck {
	position: relative;
}
.ets-quiz .etsq-fc-card {
	perspective: 1000px;
	display: none;
}
.ets-quiz .etsq-fc-card:first-child { display: block; }

.ets-quiz .etsq-fc-inner {
	position: relative;
	width: 100%;
	min-height: 220px;
	transform-style: preserve-3d;
	transition: transform .6s;
	cursor: pointer;
}
.ets-quiz .etsq-fc-inner.etsq-fc-flip { transform: rotateY( 180deg ); }

.ets-quiz .etsq-fc-face {
	position: absolute;
	inset: 0;
	border: var(--etsq-border-width) solid var(--etsq-fc-border);
	border-radius: var(--etsq-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4em;
	padding: 30px;
	backface-visibility: hidden;
	box-sizing: border-box;
}
.ets-quiz .etsq-fc-front {
	background: var(--etsq-fc-front-bg);
	color: var(--etsq-fc-front-text);
}
.ets-quiz .etsq-fc-back {
	background: var(--etsq-fc-back-bg);
	color: var(--etsq-fc-back-text);
	transform: rotateY( 180deg );
}

.ets-quiz .etsq-fc-controls {
	margin-top: 16px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.ets-quiz .etsq-fc-controls .etsq-btn { padding: 8px 14px; }
.ets-quiz .etsq-fc-reset {
	background: var(--etsq-incorrect);
}
.ets-quiz .etsq-fc-page {
	margin-left: 10px;
	font-weight: 700;
	color: var(--etsq-text);
}