/*
 * أنماط محرّك الاختبارات [elm_quiz].
 * كل الألوان عبر متغيّرات CSS من theme.json (لا hex مباشر هنا).
 */

.elm-quiz { max-width: 100%; box-sizing: border-box; }
.elm-quiz * { box-sizing: border-box; }

.elm-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.elm-quiz-last,
.elm-quiz-timer {
	background: var(--wp--preset--color--sunk);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	margin-block-end: 1rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.elm-quiz-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.75rem;
	padding: 1.25rem;
}

.elm-quiz-progress {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-block-end: 0.75rem;
}

.elm-quiz-q {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-block-end: 1rem;
}

.elm-quiz-opts {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.elm-quiz-opt,
.elm-quiz-btn {
	min-height: 48px;
	font-size: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-radius: 0.5rem;
	padding: 0.6rem 1rem;
	cursor: pointer;
	text-align: start;
}

.elm-quiz-opt:hover:not(:disabled) { border-color: var(--wp--preset--color--accent); }

.elm-quiz-opt:focus-visible,
.elm-quiz-btn:focus-visible,
.elm-quiz-input:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.elm-quiz-opt.is-selected {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--sunk);
}

.elm-quiz-opt:disabled { cursor: default; opacity: 0.85; }

.elm-quiz-input {
	min-height: 48px;
	font-size: 1rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	width: 100%;
	margin-block-end: 0.6rem;
}

.elm-quiz-confirm,
.elm-quiz-next {
	margin-block-start: 0.75rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
}

.elm-quiz-feedback {
	margin-block-start: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.elm-quiz-feedback.is-correct {
	background: color-mix(in srgb, var(--wp--preset--color--science) 15%, var(--wp--preset--color--surface));
	border: 1px solid var(--wp--preset--color--science);
	color: var(--wp--preset--color--science);
}

.elm-quiz-feedback.is-wrong {
	background: color-mix(in srgb, var(--wp--preset--color--social) 15%, var(--wp--preset--color--surface));
	border: 1px solid var(--wp--preset--color--social);
	color: var(--wp--preset--color--social);
}

.elm-quiz-answer,
.elm-quiz-explain {
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
}

.elm-quiz-results h3 { margin-block-end: 0.3rem; }
.elm-quiz-meta { color: var(--wp--preset--color--muted); margin-block-end: 0.5rem; }
.elm-quiz-support-msg { margin-block-end: 1.5rem; }

.elm-quiz-wrong-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.elm-quiz-wrong-list li {
	background: var(--wp--preset--color--sunk);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.elm-quiz-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

@media print {
	.elm-quiz-opts, .elm-quiz-actions, .elm-quiz-timer { display: none; }
}