/* ==========================================================================
   صفحة الاختبار — ABA PLUS
   تعتمد على متغيّرات main.css (الألوان، المسافات، الظلال) فلا تُعرّف ألواناً
   خاصة بها إلا لحالتي النجاح والرسوب.
   ========================================================================== */

.exam-section .container--narrow { max-width: 880px; }

/* ---------------------------------------------------------- شريط الموعد */

.exam-schedule {
	display: flex;
	align-items: center;
	gap: var(--aba-space-3);
	background: var(--aba-surface);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	padding: 14px 18px;
	margin-block-end: var(--aba-space-6);
	font-size: .95rem;
	color: var(--aba-ink);
}

.exam-schedule__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: rgba(var(--aba-primary-rgb), .12);
	color: var(--aba-primary-dark);
}

.exam-schedule__text em { color: var(--aba-muted); font-style: normal; font-size: .85em; }

/* ------------------------------------------------------------ البطاقات */

.exam-card {
	background: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius-lg);
	box-shadow: var(--aba-shadow);
	padding: clamp(24px, 4vw, 44px);
	text-align: center;
}

.exam-card--loading { display: grid; justify-items: center; gap: var(--aba-space-4); }

.exam-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(var(--aba-primary-rgb), .18);
	border-top-color: var(--aba-primary);
	animation: exam-spin .8s linear infinite;
}

@keyframes exam-spin { to { transform: rotate(360deg); } }

.exam-card__title {
	font-family: var(--aba-font-head);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
	color: var(--aba-ink);
	margin: var(--aba-space-3) 0 var(--aba-space-2);
}

.exam-card__lead { color: var(--aba-primary-dark); font-weight: 700; margin-block-end: var(--aba-space-5); }
.exam-card__text { color: var(--aba-muted); margin-block-end: var(--aba-space-4); }
.exam-card__hint { color: var(--aba-muted); font-size: .875rem; margin-block-start: var(--aba-space-4); }

/* -------------------------------------------------------------- الشارات */

.exam-badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: var(--aba-radius-pill);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.exam-badge--wait { background: var(--aba-warn-bg); color: var(--aba-warn); }
.exam-badge--pass { background: var(--aba-ok-bg); color: var(--aba-ok); }
.exam-badge--fail { background: var(--aba-bad-bg); color: var(--aba-bad); }

.exam-badge--live {
	background: rgba(var(--aba-primary-rgb), .12);
	color: var(--aba-primary-dark);
	position: relative;
	padding-inline-start: 30px;
}

.exam-badge--live::before {
	content: '';
	position: absolute;
	inset-inline-start: 14px;
	inset-block-start: 50%;
	width: 8px;
	height: 8px;
	margin-block-start: -4px;
	border-radius: 50%;
	background: var(--aba-primary);
	box-shadow: 0 0 0 0 rgba(var(--aba-primary-rgb), .5);
	animation: exam-pulse 1.8s infinite;
}

@keyframes exam-pulse {
	70% { box-shadow: 0 0 0 10px rgba(var(--aba-primary-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--aba-primary-rgb), 0); }
}

/* ------------------------------------------------------ العدّاد التنازلي */

.exam-countdown {
	display: flex;
	justify-content: center;
	gap: var(--aba-space-3);
	margin: var(--aba-space-6) 0;
	direction: ltr;
}

.exam-countdown__unit {
	min-width: 84px;
	padding: 14px 10px;
	border-radius: var(--aba-radius-sm);
	background: var(--aba-surface);
	border: 1px solid var(--aba-line);
}

.exam-countdown__unit strong {
	display: block;
	font-family: var(--aba-font-head);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	line-height: 1.1;
	color: var(--aba-ink);
	font-variant-numeric: tabular-nums;
}

.exam-countdown__unit span { display: block; font-size: .78rem; color: var(--aba-muted); margin-block-start: 4px; }
.exam-countdown--sm .exam-countdown__unit { min-width: 70px; padding: 10px 8px; }

/* -------------------------------------------------------------- القواعد */

.exam-rules {
	list-style: none;
	margin: var(--aba-space-5) auto 0;
	padding: var(--aba-space-5);
	max-width: 520px;
	text-align: start;
	background: var(--aba-surface);
	border-radius: var(--aba-radius);
	display: grid;
	gap: var(--aba-space-3);
	color: var(--aba-text);
	font-size: .95rem;
}

.exam-rules li { position: relative; padding-inline-start: 22px; }

.exam-rules li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .65em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aba-primary);
}

/* --------------------------------------------------------- نموذج البدء */

.exam-form { max-width: 420px; margin: var(--aba-space-5) auto 0; text-align: start; }
.exam-field { display: block; margin-block-end: var(--aba-space-4); }
.exam-field__label { display: block; font-weight: 700; color: var(--aba-ink); margin-block-end: var(--aba-space-2); }

.exam-input {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--aba-radius-sm);
	border: 1.5px solid var(--aba-line);
	background: var(--aba-white);
	font-family: inherit;
	font-size: 1rem;
	color: var(--aba-ink);
	transition: border-color var(--aba-dur) var(--aba-ease), box-shadow var(--aba-dur) var(--aba-ease);
}

.exam-input:focus {
	outline: none;
	border-color: var(--aba-primary);
	box-shadow: 0 0 0 4px rgba(var(--aba-primary-rgb), .14);
}

.exam-error {
	background: var(--aba-bad-bg);
	color: var(--aba-bad);
	border-radius: var(--aba-radius-sm);
	padding: 10px 14px;
	font-size: .9rem;
	margin-block-end: var(--aba-space-4);
	text-align: start;
}

/* ------------------------------------------------------ شريط الاختبار */

.exam-bar {
	position: sticky;
	top: calc(var(--aba-header-h) + 8px);
	z-index: 20;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--aba-space-5);
	background: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow);
	padding: 14px 20px;
	margin-block-end: var(--aba-space-6);
}

.exam-bar__label { display: block; font-size: .75rem; color: var(--aba-muted); }

.exam-timer {
	font-family: var(--aba-font-head);
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--aba-ink);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	display: inline-block;
}

.exam-bar__timer.is-warning .exam-timer { color: var(--aba-warn); }
.exam-bar__timer.is-urgent .exam-timer { color: var(--aba-bad); animation: exam-blink 1s steps(2, start) infinite; }

@keyframes exam-blink { 50% { opacity: .45; } }

.exam-bar__meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--aba-muted); margin-block-end: 6px; }
.exam-bar__meta span:first-child { font-weight: 700; color: var(--aba-ink); font-variant-numeric: tabular-nums; }

.exam-progress { height: 8px; border-radius: var(--aba-radius-pill); background: var(--aba-line-soft); overflow: hidden; }

.exam-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--aba-primary), var(--aba-accent));
	transition: width var(--aba-dur) var(--aba-ease);
}

.exam-bar__who { text-align: end; }
.exam-bar__who strong { color: var(--aba-ink); font-size: .95rem; }

/* -------------------------------------------------------------- الأسئلة */

.exam-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aba-space-5); }

.exam-q {
	background: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--aba-shadow-sm);
	transition: border-color var(--aba-dur) var(--aba-ease);
}

.exam-q.is-locked { border-color: rgba(var(--aba-primary-rgb), .35); background: var(--aba-surface); }
.exam-q.is-saving { opacity: .75; }

.exam-q__head { display: flex; gap: var(--aba-space-3); align-items: flex-start; margin-block-end: var(--aba-space-4); }

.exam-q__num {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(var(--aba-primary-rgb), .12);
	color: var(--aba-primary-dark);
	font-weight: 800;
	font-size: .9rem;
}

.exam-q__text { font-size: 1.05rem; line-height: 1.7; color: var(--aba-ink); margin: 3px 0 0; font-weight: 700; }

.exam-q__choices { display: grid; gap: var(--aba-space-3); }

.exam-choice {
	display: flex;
	align-items: center;
	gap: var(--aba-space-3);
	width: 100%;
	text-align: start;
	padding: 13px 16px;
	border-radius: var(--aba-radius-sm);
	border: 1.5px solid var(--aba-line);
	background: var(--aba-white);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--aba-text);
	cursor: pointer;
	transition: border-color var(--aba-dur) var(--aba-ease), background var(--aba-dur) var(--aba-ease), transform var(--aba-dur) var(--aba-ease);
}

.exam-choice:hover:not(:disabled) {
	border-color: var(--aba-primary);
	background: rgba(var(--aba-primary-rgb), .05);
	transform: translateY(-1px);
}

.exam-choice__dot {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--aba-line);
	position: relative;
	transition: border-color var(--aba-dur) var(--aba-ease);
}

.exam-choice.is-picked { border-color: var(--aba-primary); background: rgba(var(--aba-primary-rgb), .08); color: var(--aba-ink); font-weight: 700; }
.exam-choice.is-picked .exam-choice__dot { border-color: var(--aba-primary); }

.exam-choice.is-picked .exam-choice__dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--aba-primary);
}

.exam-choice:disabled { cursor: not-allowed; }
.exam-choice:disabled:not(.is-picked) { opacity: .55; }

.exam-q__lock {
	margin: var(--aba-space-3) 0 0;
	font-size: .82rem;
	color: var(--aba-primary-dark);
	font-weight: 700;
}

.exam-q__lock::before { content: '🔒'; margin-inline-end: 6px; }

/* -------------------------------------------------------------- التسليم */

.exam-submit {
	margin-block-start: var(--aba-space-7);
	padding: var(--aba-space-6);
	background: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	text-align: center;
	box-shadow: var(--aba-shadow-sm);
}

.exam-submit__note { color: var(--aba-muted); font-size: .92rem; margin-block-end: var(--aba-space-4); }
.exam-submit__actions { display: flex; justify-content: center; }

.exam-confirm {
	background: var(--aba-surface);
	border-radius: var(--aba-radius-sm);
	padding: var(--aba-space-5);
}

.exam-confirm p { color: var(--aba-ink); font-weight: 700; margin-block-end: var(--aba-space-4); }
.exam-confirm__actions { display: flex; gap: var(--aba-space-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------- النتيجة */

.exam-result.is-pass { border-color: rgba(18, 163, 122, .35); }
.exam-result.is-fail { border-color: rgba(217, 74, 74, .3); }

.exam-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 5vw, 48px);
	flex-wrap: wrap;
	margin: var(--aba-space-6) 0;
}

.exam-score__ring {
	--exam-score: 0;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--aba-primary) calc(var(--exam-score) * 1%), var(--aba-line-soft) 0);
	position: relative;
}

.exam-result.is-pass .exam-score__ring { background: conic-gradient(var(--aba-ok) calc(var(--exam-score) * 1%), var(--aba-line-soft) 0); }
.exam-result.is-fail .exam-score__ring { background: conic-gradient(var(--aba-bad) calc(var(--exam-score) * 1%), var(--aba-line-soft) 0); }

.exam-score__ring::before {
	content: '';
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	background: var(--aba-white);
}

.exam-score__value {
	position: relative;
	font-family: var(--aba-font-head);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--aba-ink);
	direction: ltr;
}

.exam-score__value em { font-style: normal; font-size: .5em; margin-inline-start: 2px; color: var(--aba-muted); }

.exam-score__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--aba-space-3); text-align: start; min-width: 220px; }
.exam-score__facts li { display: flex; justify-content: space-between; gap: var(--aba-space-4); border-block-end: 1px dashed var(--aba-line); padding-block-end: 8px; }
.exam-score__facts span { color: var(--aba-muted); font-size: .9rem; }
.exam-score__facts strong { color: var(--aba-ink); }

.exam-result__message { font-size: 1.05rem; font-weight: 700; color: var(--aba-ink); }
.exam-result.is-fail .exam-result__message { color: var(--aba-bad); }
.exam-result.is-pass .exam-result__message { color: var(--aba-ok); }

.exam-intro { margin-block-start: var(--aba-space-7); }

/* -------------------------------------------------------------- الجوال */

@media (max-width: 860px) {
	.exam-bar { grid-template-columns: 1fr 1fr; gap: var(--aba-space-4); }
	.exam-bar__progress { grid-column: 1 / -1; order: 3; }
	.exam-bar__who { text-align: end; }
}

@media (max-width: 520px) {
	.exam-countdown { gap: var(--aba-space-2); }
	.exam-countdown__unit { min-width: 0; flex: 1; padding: 10px 4px; }
	.exam-score__ring { width: 140px; height: 140px; }
	.exam-bar { position: static; }
}