/*!
 * LuuxTheorie — LearnDash overrides.
 *
 * Loaded AFTER LearnDash's own CSS with high priority and dependency-order
 * enforcement so our rules win the cascade even against LD's `!important`
 * declarations.
 *
 * Two responsibilities:
 *   1. Hide LearnDash's plugin-injected navigation / breadcrumbs that the
 *      theme replaces with its own UI (topic.php, lesson.php, quiz.php all
 *      render our own headers, next-topic links, quiz CTAs, etc.).
 *   2. Force LD's remaining injected content (quiz UI, alerts, buttons) to
 *      inherit theme tokens so dark mode reads correctly.
 */

/* ── 1. HIDE LD-INJECTED BREADCRUMBS & NAVIGATION ────────────────────────── */
/*
 * LearnDash's `learndash_content` filter adds a mini course-progress
 * breadcrumb + a "back to lesson" / "in this course" navigation heading above
 * the topic content. On topic/lesson templates our own back-button header and
 * course card handles this navigation, so LD's version is redundant. Hide it.
 *
 * On quiz templates we keep our own headers and hide LD's redundant chrome.
 */
.single-sfwd-topic .ld-breadcrumbs,
.single-sfwd-lessons .ld-breadcrumbs,
.single-sfwd-quiz .ld-breadcrumbs,
.single-sfwd-courses .ld-breadcrumbs,
.single-sfwd-topic .ld-course-navigation-heading,
.single-sfwd-lessons .ld-course-navigation-heading,
.single-sfwd-quiz .ld-course-navigation-heading,
.single-sfwd-topic .ld-course-status-content > .ld-course-status-seg-heading,
.single-sfwd-topic .learndash-wrapper .ld-course-navigation,
.single-sfwd-topic .learndash-wrapper .ld-course-status,
.single-sfwd-lessons .learndash-wrapper .ld-course-navigation,
.single-sfwd-lessons .learndash-wrapper .ld-course-status,
.single-sfwd-topic .learndash_topic_dots,
.single-sfwd-topic .learndash-course-list-wrapper,
.ld-focus-header,
.ld-focus-sidebar,
.learndash-wrapper .learndash_topic_dots,
.wpProQuiz_content .ld-breadcrumbs,
.single-sfwd-topic [class^="learndash-shortcode-wrap-ld_navigation"],
.single-sfwd-topic .ld-content-actions,
.single-sfwd-topic .ld-item-list,
.single-sfwd-topic .ld-table-list,
.single-sfwd-topic .ld-quiz-list {
	display: none !important;
}

/* ── LD NAVIGATION SHORTCODE WRAP ────────────────────────────────────────── */
/*
 * `[ld_navigation]` renders `.learndash-shortcode-wrap-ld_navigation-{cid}_{lid}_{tid}`.
 * By default ld30 gives it hardcoded backgrounds + margins that clash with our
 * container. Reset those to a clean transparent wrap that inherits our layout.
 */
[class^="learndash-shortcode-wrap-ld_navigation"],
[class*=" learndash-shortcode-wrap-ld_navigation"] {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 1.25rem 0 0 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--fg) !important;
}
[class^="learndash-shortcode-wrap-ld_navigation"] *,
[class*=" learndash-shortcode-wrap-ld_navigation"] * {
	color: inherit !important;
}
[class^="learndash-shortcode-wrap-ld_navigation"] .ld-content-actions,
[class*=" learndash-shortcode-wrap-ld_navigation"] .ld-content-actions {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	margin: 1rem 0 0 0 !important;
	display: flex !important;
	gap: 0.75rem !important;
	flex-wrap: wrap !important;
}

/* ── LD MARK-COMPLETE BUTTON — styled to match theme primary ─────────────── */
/*
 * We deliberately KEEP LearnDash's native mark-complete button visible. It's
 * the reliable, always-works way for the learner to advance. Video-end can
 * also auto-click it (see view.js) so completion happens automatically when
 * a Bunny video ends, without depending on a REST round-trip.
 */
.learndash_mark_complete_button,
input.learndash_mark_complete_button,
button.learndash_mark_complete_button {
	background: var(--primary) !important;
	background-color: var(--primary) !important;
	color: var(--primary-fg) !important;
	border: 0 !important;
	border-radius: 1rem !important;
	padding: 0.875rem 1.5rem !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	cursor: pointer !important;
	box-shadow: var(--shad-pop) !important;
	transition: opacity 0.15s, transform 0.15s !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	text-decoration: none !important;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
.learndash_mark_complete_button:hover,
button.learndash_mark_complete_button:hover {
	opacity: 0.92 !important;
	transform: translateY(-1px) !important;
}
.learndash_mark_incomplete_button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--muted-fg) !important;
	border: 1px solid var(--border) !important;
	border-radius: 1rem !important;
	padding: 0.75rem 1.25rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

/* Wrap for mark-complete form itself. */
#sfwd-mark-complete,
.sfwd-mark-complete,
form[name="sfwd-mark-complete"] {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 1rem 0 0 0 !important;
	border: 0 !important;
	display: block !important;
}

/* ── 2. FORCE THEME COLORS ON LD/QUIZ SURFACES ───────────────────────────── */
/*
 * The quiz page relies on LearnDash's WPProQuiz to render questions and
 * answers. Its default CSS uses hard-coded light-mode colors. We override
 * every surface, text, border, and button to use our theme tokens.
 */

/* Wrapper backgrounds — all transparent, so our page background shows through. */
.learndash-wrapper,
.learndash-wrapper .ld-focus-content,
.learndash-wrapper .ld-item-list,
.learndash-wrapper .ld-tabs,
.learndash-wrapper .ld-tab-content,
.learndash-wrapper .ld-tabs-content,
.wpProQuiz_content,
.wpProQuiz_quiz,
.wpProQuiz_lock,
.wpProQuiz_reviewLegend,
.wpProQuiz_reviewSummary {
	background: transparent !important;
	color: var(--fg) !important;
}

/* Card-like surfaces get card background so they still stand out. */
.learndash-wrapper .ld-item-list-item,
.learndash-wrapper .ld-table-list-item,
.learndash-wrapper .ld-topic-list-item,
.learndash-wrapper .ld-lesson-list-item,
.learndash-wrapper .ld-alert,
.wpProQuiz_content .wpProQuiz_question,
.wpProQuiz_content .wpProQuiz_reviewQuestion,
.wpProQuiz_content .wpProQuiz_response,
.wpProQuiz_content .wpProQuiz_tipp,
.wpProQuiz_content .wpProQuiz_incorrect,
.wpProQuiz_content .wpProQuiz_correct {
	background: var(--card) !important;
	color: var(--fg) !important;
	border-color: var(--border) !important;
}

/* Text-level: EVERYTHING inside inherits so nothing is hardcoded-dark on dark bg. */
.learndash-wrapper *,
.wpProQuiz_content * {
	color: inherit !important;
}

/* Preserve certain semantic colors for correct/incorrect answers even in dark. */
.wpProQuiz_content .wpProQuiz_correct,
.wpProQuiz_content .wpProQuiz_correct * {
	color: oklch(0.68 0.15 155) !important;
}
.wpProQuiz_content .wpProQuiz_incorrect,
.wpProQuiz_content .wpProQuiz_incorrect * {
	color: oklch(0.72 0.18 27) !important;
}

/* Answer options — override the plugin's <li> defaults with rounded touch targets. */
.wpProQuiz_content .wpProQuiz_questionList,
.wpProQuiz_content .wpProQuiz_questionList > li {
	background: transparent !important;
	border: 0 !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 0.5rem 0 !important;
}
.wpProQuiz_content .wpProQuiz_questionListItem {
	display: block !important;
	padding: 0.875rem 1rem !important;
	border-radius: 0.875rem !important;
	background: var(--card) !important;
	border: 1px solid var(--border) !important;
	transition: border-color 0.15s !important;
}
.wpProQuiz_content .wpProQuiz_questionListItem:hover {
	border-color: var(--sec) !important;
}
.wpProQuiz_content .wpProQuiz_questionListItem input[type="radio"],
.wpProQuiz_content .wpProQuiz_questionListItem input[type="checkbox"] {
	margin-right: 0.75rem !important;
	accent-color: var(--sec);
}

/* Buttons */
.learndash-wrapper .ld-button,
.learndash-wrapper input[type="submit"],
.wpProQuiz_content .wpProQuiz_button,
.wpProQuiz_content .wpProQuiz_button2,
.wpProQuiz_content input[type="button"],
.wpProQuiz_content input[type="submit"] {
	background: var(--primary) !important;
	color: var(--primary-fg) !important;
	border: 0 !important;
	border-radius: 0.875rem !important;
	padding: 0.75rem 1.25rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: var(--shad-soft) !important;
	transition: opacity 0.15s !important;
}
.learndash-wrapper .ld-button:hover,
.wpProQuiz_content .wpProQuiz_button:hover,
.wpProQuiz_content .wpProQuiz_button2:hover {
	opacity: 0.92 !important;
}

/* Progress bar */
.learndash-wrapper .ld-progress-bar,
.wpProQuiz_content .wpProQuiz_reviewDiv {
	background: var(--muted) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0.5rem !important;
}
.learndash-wrapper .ld-progress-bar-percentage,
.wpProQuiz_content .wpProQuiz_reviewColor {
	background: var(--sec) !important;
}

/* Alerts / info boxes */
.learndash-wrapper .ld-alert-warning {
	background: oklch(0.72 0.13 75 / 0.15) !important;
	border-color: oklch(0.72 0.13 75 / 0.40) !important;
	color: var(--fg) !important;
}
.learndash-wrapper .ld-alert-success,
.wpProQuiz_content .wpProQuiz_correct {
	background: oklch(0.68 0.15 155 / 0.15) !important;
	border-color: oklch(0.68 0.15 155 / 0.40) !important;
}

/*
 * Step-completed alert. LearnDash's own alert layout CSS is not loaded on
 * topic pages, so the next-step link collapses onto the message and hangs
 * out of the green box. Stack the message and button inside the box.
 */
.learndash-wrapper .ld-alert.ld-alert--step-completed {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.85rem !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 0 1.25rem 0 !important;
	padding: 1rem 1.15rem !important;
	border-radius: 0.875rem !important;
	border-style: solid !important;
	border-width: 1px !important;
}
.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-alert-content {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.65rem !important;
	width: 100% !important;
	margin: 0 !important;
}
.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-alert-icon {
	position: static !important;
	flex: 0 0 auto !important;
	margin: 0.1rem 0 0 0 !important;
	transform: none !important;
	background: transparent !important;
	color: var(--success) !important;
}
.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-alert-messages {
	flex: 1 1 auto !important;
	margin: 0 !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
}
.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-button {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-decoration: none !important;
	color: var(--primary-fg) !important;
}
.learndash-wrapper .ld-alert.ld-alert--step-completed .ld-button .ld-icon {
	position: static !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
}
.learndash-wrapper .ld-alert-danger,
.wpProQuiz_content .wpProQuiz_incorrect {
	background: oklch(0.72 0.18 27 / 0.15) !important;
	border-color: oklch(0.72 0.18 27 / 0.40) !important;
}

/* Links inside LD content follow theme */
.learndash-wrapper a,
.wpProQuiz_content a {
	color: var(--sec) !important;
	text-decoration: underline !important;
}

/* Text inputs / textareas */
.learndash-wrapper input[type="text"],
.learndash-wrapper input[type="email"],
.learndash-wrapper input[type="password"],
.learndash-wrapper textarea,
.wpProQuiz_content input[type="text"],
.wpProQuiz_content textarea {
	background: var(--card) !important;
	color: var(--fg) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0.75rem !important;
	padding: 0.5rem 0.75rem !important;
}

/* Kill leaked inline whites */
.learndash-wrapper [style*="background: #fff"],
.learndash-wrapper [style*="background:#fff"],
.learndash-wrapper [style*="background-color: #fff"],
.learndash-wrapper [style*="background-color:#fff"],
.learndash-wrapper [style*="background: white"],
.learndash-wrapper [style*="background-color: white"],
.wpProQuiz_content [style*="background: #fff"],
.wpProQuiz_content [style*="background:#fff"],
.wpProQuiz_content [style*="background-color: #fff"] {
	background: var(--card) !important;
}
.learndash-wrapper [style*="color: #000"],
.learndash-wrapper [style*="color:#000"],
.learndash-wrapper [style*="color: black"],
.wpProQuiz_content [style*="color: #000"],
.wpProQuiz_content [style*="color:#000"] {
	color: var(--fg) !important;
}

/* ── 3. SCALE QUESTION IMAGES TO THE CARD ────────────────────────────────── */
/*
 * Practice scenes are full-size attachments inside fieldset.wpProQuiz_question
 * / legend.wpProQuiz_question_text. A fieldset's default min-width: min-content
 * lets that image stretch the question past the card. Give those surfaces a
 * definite width, then cap images to it. height: auto overrides pixel heights
 * from the attachment markup so the aspect ratio stays intact.
 */
.luux-quiz-wrap,
.luux-exam-wrap,
.luux-exam-review-wrap,
.wpProQuiz_content,
fieldset.wpProQuiz_question,
.wpProQuiz_question_text {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-inline-size: 0;
	box-sizing: border-box;
}
.wpProQuiz_question_text {
	display: block;
}
.luux-quiz-wrap img,
.luux-exam-wrap img,
.luux-exam-review-wrap img,
.wpProQuiz_content img,
.prose img {
	max-width: 100%;
	height: auto !important;
}

/* ── 4. EXAM SHELL ───────────────────────────────────────────────────────── */
/*
 * Navy bars stay navy in dark mode. --primary flips to amber there, so these
 * colors are fixed.
 */
body.luux-quiz-focus {
	--luux-exam-navy: oklch(0.20 0.04 255);
	--luux-exam-navy-btn: oklch(0.32 0.06 255);
}

/* Remaining attempts, on the start screen above Start. The quiz script
   moves this into the start box; until then it stays at the top of the quiz. */
.luux-quiz-wrap > .luux-exam-credits,
.wpProQuiz_text > .luux-exam-credits {
	margin: 0.75rem 0 1rem;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--muted-fg);
}

.luux-quiz-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	min-height: 3.5rem;
	padding: 0 0.75rem;
	background: var(--luux-exam-navy);
	color: #fff;
}
/* Administrators still have the WordPress toolbar. Keep the quiz bar below it. */
body.admin-bar .luux-quiz-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .luux-quiz-header { top: 46px; }
}
.luux-quiz-header__tools {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}
.luux-quiz-header a,
.luux-quiz-header button {
	color: #fff;
	background: transparent;
}
.luux-quiz-header svg {
	stroke: #fff;
}
.luux-quiz-header__title {
	margin: 0;
	min-width: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.luux-quiz-header__time {
	min-width: 5.5rem;
	display: flex;
	justify-content: flex-end;
}
.luux-quiz-header__time .wpProQuiz_time_limit {
	margin: 0;
	color: #fff;
	text-align: right;
}
.luux-quiz-header__time .wpProQuiz_progress {
	display: none !important;
}
.luux-quiz-header__time .time {
	margin: 0;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.luux-quiz-header__time .time span {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	color: #fff !important;
}

.luux-exam-dock {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	height: 3.25rem;
	margin: 0;
	align-items: center;
	justify-content: center;
	padding: 0 7.5rem;
	background: var(--luux-exam-navy);
	color: #fff;
}
.luux-exam-dock.is-on {
	display: flex;
}
.luux-exam-dock__count {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	color: #fff;
}

body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="back"],
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="next"],
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="check"],
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="checkSingle"] {
	position: fixed;
	bottom: 0;
	z-index: 45;
	height: 3.25rem;
	margin: 0 !important;
	float: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: var(--luux-exam-navy-btn) !important;
	color: #fff !important;
	font-weight: 700 !important;
}
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="back"] {
	left: 0;
	min-width: 7.5rem;
}
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="next"],
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="check"],
body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="checkSingle"] {
	right: 0;
	min-width: 7.5rem;
}

@media (max-width: 767px) {
	.luux-exam-dock { padding: 0 4.25rem; }
	body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="back"],
	body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="next"] {
		width: 3.5rem;
		min-width: 3.5rem;
		padding: 0 !important;
		color: transparent !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 1.35rem 1.35rem !important;
	}
	body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="back"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
	}
	body.luux-quiz-focus .wpProQuiz_content input.wpProQuiz_QuestionButton[name="next"] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
	}
}

/* Question index lives in the bottom bar. Keep the original text for the script. */
body.luux-quiz-focus .wpProQuiz_question_page {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body.luux-quiz-focus .wpProQuiz_content .wpProQuiz_question {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.luux-quiz-focus .wpProQuiz_clear {
	display: none !important;
}

/* Right-hand stack: question text, then answers. On a phone it follows the picture. */
.luux-q-side {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}
.luux-q-media img,
.luux-q-media video,
.luux-q-media iframe,
.luux-quiz-focus .ld-image-zone__image {
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
}

/* Desktop: media on the left, question and answers on the right. */
@media (min-width: 1024px) {
	body.luux-quiz-focus .wpProQuiz_listItem.has-media:not(.has-zone) > .wpProQuiz_question {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
		column-gap: 1.5rem;
		align-items: start;
	}
	body.luux-quiz-focus .wpProQuiz_listItem.has-media:not(.has-zone) .luux-q-media {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}
	body.luux-quiz-focus .wpProQuiz_listItem.has-media:not(.has-zone) .luux-q-side {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}
	body.luux-quiz-focus .wpProQuiz_listItem.has-zone .ld-image-zone {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
		column-gap: 1.5rem;
		align-items: start;
	}
	body.luux-quiz-focus .wpProQuiz_listItem.has-zone .ld-image-zone__board {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
	}
	body.luux-quiz-focus .wpProQuiz_listItem.has-zone .luux-q-side {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}
}

/* Choice questions: speech-bubble prompt, then a checkbox beside each answer. */
body.luux-quiz-focus .is-choice .luux-q-text {
	position: relative;
	margin: 0 0 1rem 0;
	padding: 1rem 1.1rem 1.05rem;
	background: var(--card);
	color: var(--fg);
	border-radius: 2px;
	box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}
body.luux-quiz-focus .is-choice .luux-q-text p {
	margin: 0;
}
body.luux-quiz-focus .is-choice .luux-q-text .luux-multi-hint {
	display: block;
	margin: 0.4rem 0 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--muted-fg);
}
body.luux-quiz-focus .is-choice .luux-q-text::after {
	content: "";
	position: absolute;
	left: 1.35rem;
	bottom: -7px;
	width: 0;
	height: 0;
	border-width: 8px 8px 0 0;
	border-style: solid;
	border-color: var(--card) transparent transparent transparent;
}
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem {
	display: block !important;
	padding: 0 !important;
	margin: 0 0 0.55rem 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem label {
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	margin: 0;
	cursor: pointer;
}
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="radio"],
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.7rem !important;
	height: 1.7rem !important;
	margin: 0 !important;
	flex: 0 0 1.7rem;
	border: 1px solid oklch(0.78 0.01 250) !important;
	border-radius: 2px !important;
	background-color: var(--card) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 1rem 1rem !important;
	box-shadow: none !important;
	accent-color: transparent;
}
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="radio"]:checked,
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="checkbox"]:checked {
	border-color: var(--luux-exam-navy) !important;
	background-color: var(--luux-exam-navy) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
body.luux-quiz-focus .is-choice .luux-choice-text {
	flex: 1;
	display: block;
	min-height: 2.75rem;
	padding: 0.7rem 0.85rem;
	background: var(--card);
	border: 1px solid oklch(0.86 0.006 250);
	color: var(--fg);
	font-weight: 500;
	line-height: 1.35;
}
/* Answer pictures only. Question media is lifted into .luux-q-media, outside this list. */
body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem img {
	display: block;
	width: 160px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
.dark body.luux-quiz-focus .is-choice .luux-choice-text,
.dark body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="radio"],
.dark body.luux-quiz-focus .is-choice .wpProQuiz_questionListItem input[type="checkbox"] {
	border-color: oklch(1 0 0 / 0.18) !important;
}

/* Quiz ending: encouragement, then the two actions stacked and centered. */
body.luux-quiz-focus .wpProQuiz_results {
	text-align: center;
}
body.luux-quiz-focus .luux-quiz-cheer {
	margin: 0.35rem 0 1rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fg) !important;
}
body.luux-quiz-focus .wpProQuiz_results .ld-quiz-actions {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.85rem !important;
	width: 100% !important;
	margin: 1.35rem auto 0 !important;
}
body.luux-quiz-focus .wpProQuiz_results .ld-quiz-actions input.wpProQuiz_button {
	float: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 18rem !important;
	margin: 0 !important;
	padding: 1rem 1.5rem !important;
	font-size: 1.05rem !important;
	border-radius: 999px !important;
}

/* Next sits under the Goed or Fout explanation, with space above the button. */
body.luux-quiz-focus .wpProQuiz_content .wpProQuiz_incorrect .luux-feedback-next,
body.luux-quiz-focus .wpProQuiz_content .wpProQuiz_correct .luux-feedback-next {
	display: block;
	width: 100%;
	margin: 16px 0 0 !important;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: 2px;
	background: var(--luux-exam-navy);
	color: #fff !important;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

/* Chat help sits above Volgende. The incorrect box paints every child red. */
body.luux-quiz-focus .wpProQuiz_content .wpProQuiz_incorrect .luux-feedback-chat {
	display: block;
	width: 100%;
	margin: 16px 0 0 !important;
	padding: 0.7rem 1rem;
	border: 2px solid var(--luux-exam-navy);
	border-radius: 2px;
	background: #fff;
	color: var(--luux-exam-navy) !important;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

/* Letter circles stay black. The quiz-wide inherit rule was turning them gray. */
body.luux-quiz-focus .wpProQuiz_content .ld-image-zone__chip {
	color: #111 !important;
}

/* Unit label that follows a typed answer, such as kilometer per uur. */
.wpProQuiz_content .luux-answer-suffix {
	margin-left: 0.5rem;
	font-weight: 600;
	white-space: nowrap;
}