/* ══════════════════════════════════════════════════════════
   ARTICLE QUIZ  ·  modules/quiz/assets/css/quiz.css
   Uses the theme's design tokens + Poppins (inherited).
   ══════════════════════════════════════════════════════════ */

.iw-quiz {
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	background: linear-gradient(135deg, var(--iw-gray-50, #f8fafc) 0%, #fff 100%);
	padding: 26px 28px;
	margin: 32px 0;
	position: relative;
	overflow: hidden;
}
.iw-quiz::before {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--iw-orange), var(--iw-purple));
}

/* ── Head ── */
.iw-quiz-head { margin-bottom: 20px; }
.iw-quiz-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--iw-orange);
}
.iw-quiz-title {
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	color: var(--iw-navy);
	margin: 8px 0 4px;
}
.iw-quiz-sub {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--iw-gray-500);
}
.iw-quiz-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--iw-gray-300); }
.iw-quiz-prev {
	display: inline-block;
	margin-top: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(124,58,237,0.08);
	color: var(--iw-purple);
	font-size: 12.5px;
	font-weight: 600;
}

/* ── Questions ── */
.iw-quiz-q {
	padding: 18px 0;
	border-top: 1px solid var(--iw-border);
}
.iw-quiz-q--missing { animation: iw-quiz-shake 0.3s; }
@keyframes iw-quiz-shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}
.iw-quiz-q-text {
	display: flex;
	gap: 10px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--iw-text);
	line-height: 1.5;
	margin-bottom: 14px;
}
.iw-quiz-q-num {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--iw-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.iw-quiz-opts { display: grid; gap: 10px; }
.iw-quiz-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1.5px solid var(--iw-border);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.iw-quiz-opt:hover { border-color: var(--iw-blue); background: #fafcff; }
.iw-quiz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.iw-quiz-opt-mark {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 2px solid var(--iw-gray-300);
	position: relative;
	transition: border-color 0.15s;
}
.iw-quiz-opt input:checked + .iw-quiz-opt-mark {
	border-color: var(--iw-navy);
}
.iw-quiz-opt input:checked + .iw-quiz-opt-mark::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--iw-navy);
}
.iw-quiz-opt-text { font-size: 14px; color: var(--iw-text); }

/* Review states (after submit) */
.iw-quiz-opt--correct {
	border-color: #16a34a;
	background: #f0fdf4;
}
.iw-quiz-opt--correct .iw-quiz-opt-mark { border-color: #16a34a; }
.iw-quiz-opt--correct .iw-quiz-opt-mark::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #16a34a;
}
.iw-quiz-opt--wrong {
	border-color: #dc2626;
	background: #fef2f2;
}
.iw-quiz-opt--wrong .iw-quiz-opt-mark { border-color: #dc2626; }

/* ── Actions ── */
.iw-quiz-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.iw-quiz-submit {
	padding: 12px 28px;
	border: none;
	border-radius: 999px;
	background: var(--iw-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s, transform 0.1s;
}
.iw-quiz-submit:hover { background: var(--iw-blue); }
.iw-quiz-submit:active { transform: translateY(1px); }
.iw-quiz-submit:disabled { opacity: 0.6; cursor: default; }
.iw-quiz-note { font-size: 12.5px; color: var(--iw-gray-500); }
.iw-quiz-inline-notice {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fef2f2;
	color: #dc2626;
	font-size: 13px;
	font-weight: 600;
}

/* ── Result ── */
.iw-quiz-result { margin-top: 22px; }
.iw-quiz-result-inner {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px 24px;
	border-radius: 14px;
	border: 1px solid var(--iw-border);
	background: #fff;
	flex-wrap: wrap;
}
.iw-quiz-result-inner.is-pass { background: #f0fdf4; border-color: #bbf7d0; }
.iw-quiz-result-inner.is-fail { background: #fff7ed; border-color: #fed7aa; }

.iw-quiz-score {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background:
		radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
		conic-gradient(var(--iw-navy) calc(var(--pct) * 1%), var(--iw-gray-200) 0);
}
.is-pass .iw-quiz-score {
	background:
		radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
		conic-gradient(#16a34a calc(var(--pct) * 1%), var(--iw-gray-200) 0);
}
.iw-quiz-score-num { font-size: 20px; font-weight: 800; color: var(--iw-navy); }
.is-pass .iw-quiz-score-num { color: #16a34a; }

.iw-quiz-result-head { font-size: 18px; font-weight: 800; color: var(--iw-navy); margin-bottom: 4px; }
.iw-quiz-result-line { font-size: 14px; color: var(--iw-text); }
.iw-quiz-result-note { font-size: 12.5px; color: var(--iw-gray-500); margin-top: 6px; }
.iw-quiz-retake {
	margin-top: 12px;
	padding: 8px 18px;
	border: 1.5px solid var(--iw-border);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--iw-navy);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.iw-quiz-retake:hover { border-color: var(--iw-orange); color: var(--iw-orange); }

/* Share your score */
.iw-quiz-share {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.iw-quiz-share-label { font-size: 12.5px; font-weight: 600; color: var(--iw-gray-500); }
.iw-quiz-share-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	transition: opacity 0.15s, transform 0.1s;
}
.iw-quiz-share-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.iw-quiz-share-btn--x  { background: #0f1419; }
.iw-quiz-share-btn--wa { background: #25d366; }
.iw-quiz-share-btn--fb { background: #1877f2; }

/* ══════════════════════════════════════════════════════════
   LEADERBOARD (home page)
   ══════════════════════════════════════════════════════════ */
.iw-lb {
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	background: #fff;
	padding: 26px 28px;
	margin: 40px 0;
	box-shadow: 0 4px 20px rgba(27,43,75,0.06);
}
.iw-lb-head { margin-bottom: 20px; }
.iw-lb-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(18px, 2.6vw, 24px);
	font-weight: 800;
	color: var(--iw-navy);
}
.iw-lb-title svg { color: var(--iw-orange); }
.iw-lb-sub { font-size: 13px; color: var(--iw-gray-500); margin-top: 4px; }

.iw-lb-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iw-lb-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--iw-border);
	border-radius: 12px;
	background: var(--iw-gray-50, #f8fafc);
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.iw-lb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(27,43,75,0.1); }
.iw-lb-card--1 { border-color: #fcd34d; background: linear-gradient(135deg, #fffbeb, #fff); }
.iw-lb-card--2 { border-color: #e2e8f0; }
.iw-lb-card--3 { border-color: #fed7aa; }

.iw-lb-medal { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.iw-lb-avatar {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--iw-gray-200);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--iw-border);
}
.iw-lb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-lb-info { min-width: 0; flex: 1; }
.iw-lb-name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--iw-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iw-lb-level { display: block; font-size: 12px; font-weight: 600; }
.iw-lb-points { flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--iw-gray-500); }
.iw-lb-points strong { display: block; font-size: 18px; color: var(--iw-orange); font-weight: 800; }

@media (max-width: 760px) {
	.iw-lb-list { grid-template-columns: 1fr; }
}

/* Profile "Quiz Scores" styles live in profile.css (that sheet loads on the
   profile page; this one does not). */