/**
 * Quiz styles of the course lessons.
 *
 * Loaded only while quizzes are switched on; the colours come from the
 * variables the main stylesheet defines.
 */

/* -----------------------------------------------------------------------
 * آزمون درس
 * -------------------------------------------------------------------- */

.ayh-course-quiz {
	margin-block-start: 1.25rem;
	padding: 1rem 1.1rem 1.1rem;
	background: var(--ayh-surface-alt);
	border: 1px solid var(--ayh-border);
	border-radius: var(--ayh-radius);

	/*
	 * متن آزمون هم باید با کلید اندازهٔ متن درس (A+ / A- ) تغییر کند؛
	 * وگرنه سؤال‌ها درشت باقی می‌مانند و با متن کوچک‌شدهٔ درس هماهنگ
	 * نیستند. اندازه‌های درون آزمون با em به همین پایه گره خورده‌اند.
	 */
	font-size: calc( 1rem * var(--ayh-lesson-scale) );
}

.ayh-course-quiz-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-block-end: 0.75rem;
}

.ayh-course-quiz-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 1em;
	font-weight: 700;
	color: var(--ayh-text);
}

.ayh-course-quiz-title-icon .ayh-icon {
	inline-size: 18px;
	block-size: 18px;
	color: var(--ayh-accent);
}

.ayh-course-quiz-meta {
	margin: 0;
	font-size: 0.78em;
	color: var(--ayh-muted);
}

/* --- بنر بالای آزمون (پاس‌شده یا بهترین نمره) --- */

.ayh-course-quiz-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block-end: 0.9rem;
	padding: 0.65rem 0.8rem;
	border-radius: 6px;
	font-size: 0.86em;
	line-height: 1.7;
}

.ayh-course-quiz-banner.is-passed {
	background: var(--ayh-success-soft);
	color: var(--ayh-success-text);
}

.ayh-course-quiz-banner.is-failed {
	background: var(--ayh-warning-soft);
	color: var(--ayh-warning-text);
}

.ayh-course-quiz-banner-icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-block-start: 0.2rem;
}

.ayh-course-quiz-empty {
	margin: 0;
	padding: 1rem;
	background: var(--ayh-surface);
	border: 1px dashed var(--ayh-border);
	border-radius: 6px;
	text-align: center;
	color: var(--ayh-muted);
	font-size: 0.88em;
}

/* --- فهرست سؤال‌ها --- */

.ayh-course-quiz-questions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ayh-course-quiz-question {
	padding: 0.85rem 0.95rem;
	background: var(--ayh-surface);
	border: 1px solid var(--ayh-border);
	border-radius: 6px;
}

.ayh-course-quiz-question.is-correct {
	border-color: var(--ayh-success);
}

.ayh-course-quiz-question.is-wrong {
	border-color: var(--ayh-danger);
}

.ayh-course-quiz-question-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.6rem;
}

.ayh-course-quiz-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	background: var(--ayh-accent-soft);
	color: var(--ayh-accent);
	border-radius: 50%;
	font-size: 0.76em;
	font-weight: 700;
}

.ayh-course-quiz-question-text {
	flex: 1 1 14rem;
	font-weight: 600;
	line-height: 1.8;
	color: var(--ayh-text);
}

.ayh-course-quiz-points {
	flex: 0 0 auto;
	padding: 0.1rem 0.5rem;
	background: var(--ayh-surface-alt);
	border-radius: 999px;
	font-size: 0.72em;
	color: var(--ayh-muted);
	white-space: nowrap;
}

.ayh-course-quiz-blank-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.4rem;
	block-size: 1.4rem;
	margin-inline: 0.15rem;
	background: var(--ayh-surface-alt);
	border: 1px dashed var(--ayh-border);
	border-radius: 4px;
	font-size: 0.78em;
	vertical-align: middle;
}

/* --- گزینه‌ها --- */

.ayh-course-quiz-options {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ayh-course-quiz-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	background: var(--ayh-surface-alt);
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1.7;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ayh-course-quiz-option:hover {
	border-color: var(--ayh-border);
}

.ayh-course-quiz-option input {
	flex: 0 0 auto;
	margin-block-start: 0.35rem;
}

.ayh-course-quiz-option.is-correct {
	background: var(--ayh-success-soft);
	border-color: var(--ayh-success);
}

.ayh-course-quiz-option.is-chosen:not(.is-correct) {
	background: var(--ayh-danger-soft);
	border-color: var(--ayh-danger);
}

.ayh-course-quiz-option-mark {
	margin-inline-start: auto;
	color: var(--ayh-success);
	font-weight: 700;
}

/* --- جای خالی --- */

.ayh-course-quiz-blanks {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ayh-course-quiz-blank {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ayh-course-quiz-blank-label {
	flex: 0 0 auto;
	font-size: 0.8em;
	color: var(--ayh-muted);
}

.ayh-course-quiz-input {
	flex: 1 1 auto;
	max-inline-size: 24rem;
	padding: 0.4rem 0.6rem;
	background: var(--ayh-surface);
	border: 1px solid var(--ayh-border);
	border-radius: 6px;
	font: inherit;
	line-height: 1.7;
	color: var(--ayh-text);
}

.ayh-course-quiz-input:focus-visible {
	outline: 2px solid var(--ayh-accent);
	outline-offset: 1px;
	border-color: var(--ayh-accent);
}

.ayh-course-quiz-blank.is-correct .ayh-course-quiz-input {
	border-color: var(--ayh-success);
}

.ayh-course-quiz-blank.is-wrong .ayh-course-quiz-input {
	border-color: var(--ayh-danger);
}

/* --- شمارش معکوس --- */

.ayh-course-quiz-timer {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-end: 0.9rem;
	padding: 0.4rem 0.75rem;
	background: var(--ayh-surface);
	border: 1px solid var(--ayh-border);
	border-radius: 999px;
	font-size: 0.84em;
	line-height: 1.6;
	color: var(--ayh-muted);
}

.ayh-course-quiz-timer-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.ayh-course-quiz-timer-icon .ayh-icon {
	inline-size: 16px;
	block-size: 16px;
}

/*
 * عدد شمارنده با عرض ثابت تا صفحه با تغییر رقم نپرد.
 *
 * `tabular-nums` باعث می‌شود هر رقم هم‌عرض باشد و شمارنده نلرزد.
 */
.ayh-course-quiz-timer-value {
	min-inline-size: 4.2ch;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ayh-text);
}

/* یک دقیقهٔ آخر: هشدار رنگی تا کاربر فرصت داشته باشد ارسال کند. */
.ayh-course-quiz-timer.is-urgent {
	border-color: var(--ayh-warning);
	background: var(--ayh-warning-soft);
}

.ayh-course-quiz-timer.is-urgent .ayh-course-quiz-timer-value {
	color: var(--ayh-warning-text);
}

.ayh-course-quiz-timer.is-expired {
	border-color: var(--ayh-danger);
	background: var(--ayh-danger-soft);
}

.ayh-course-quiz-timer.is-expired .ayh-course-quiz-timer-value {
	color: var(--ayh-danger);
}

/* --- کنش‌ها و نتیجه --- */

.ayh-course-quiz-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	margin-block-start: 1rem;
}

.ayh-course-quiz-submit {
	padding: 0.55rem 1.4rem;
	background: var(--ayh-accent);
	border: 1px solid transparent;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.ayh-course-quiz-submit:hover:not(:disabled) {
	filter: brightness(1.08);
}

.ayh-course-quiz-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.ayh-course-quiz-note {
	font-size: 0.78em;
	color: var(--ayh-muted);
}

.ayh-course-quiz-result {
	margin-block-start: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 6px;
	border: 1px solid transparent;
}

.ayh-course-quiz-result.is-passed {
	background: var(--ayh-success-soft);
	border-color: var(--ayh-success);
}

.ayh-course-quiz-result.is-failed {
	background: var(--ayh-danger-soft);
	border-color: var(--ayh-danger);
}

.ayh-course-quiz-result-headline {
	margin: 0;
	font-weight: 700;
	font-size: 0.95em;
}

.ayh-course-quiz-result-detail,
.ayh-course-quiz-result-best {
	margin: 0.2rem 0 0;
	font-size: 0.84em;
	color: var(--ayh-muted);
}

.ayh-course-quiz-question-badge,
.ayh-course-quiz-question-earned {
	flex: 0 0 auto;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 700;
}

.ayh-course-quiz-question-badge {
	background: var(--ayh-surface-alt);
	color: var(--ayh-muted);
}

.ayh-course-quiz-question.is-correct .ayh-course-quiz-question-badge {
	background: var(--ayh-success-soft);
	color: var(--ayh-success);
}

.ayh-course-quiz-question.is-wrong .ayh-course-quiz-question-badge {
	background: var(--ayh-danger-soft);
	color: var(--ayh-danger);
}

.ayh-course-quiz-unlock-note {
	margin: 0.6rem 0 0;
	font-size: 0.84em;
	font-weight: 600;
	color: var(--ayh-success);
}