/* RoadQuizzer Quiz — uses the theme palette (accent-1 = brand teal, accent-2 = amber). */
.rq-quiz {
	--rq-brand: var(--wp--preset--color--accent-1, #0e6e6a);
	--rq-amber: var(--wp--preset--color--accent-2, #f2a93b);
	--rq-good: #1a7f37;
	--rq-bad: #b42318;
	--rq-line: color-mix(in srgb, currentColor 16%, transparent);
	--rq-tint: color-mix(in srgb, var(--rq-brand) 7%, transparent);
	--rq-card: var(--wp--preset--color--base, #fff);
	margin: 1.5rem 0 2rem;
}
.rq-quiz__title { margin-bottom: .25rem; }
.rq-quiz__meta { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .95em; }
.rq-badge {
	display: inline-block;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rq-amber) 22%, transparent);
	font-size: .85em;
	font-weight: 600;
}

/* Test switcher */
.rq-tests { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .95em; }
.rq-tests__label { font-weight: 600; }
.rq-tests ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.rq-tests a, .rq-tests span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 .8rem;
	border: 1px solid var(--rq-line);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
}
.rq-tests a:hover { border-color: var(--rq-brand); color: var(--rq-brand); }
.rq-tests span[aria-current] { background: var(--rq-brand); border-color: var(--rq-brand); color: #fff; font-weight: 600; }

/* Sticky progress */
.rq-quiz__progress {
	position: sticky;
	top: 0;
	z-index: 5;
	margin: 0 0 1.25rem;
	padding: .55rem .85rem .6rem;
	border: 1px solid var(--rq-line);
	border-radius: 12px;
	background: var(--rq-card);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
	font-size: .95em;
}
.admin-bar .rq-quiz__progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .rq-quiz__progress { top: 46px; } }
.rq-quiz__progress-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.rq-quiz__bar { height: 6px; margin-top: .45rem; border-radius: 999px; background: var(--rq-tint); overflow: hidden; }
.rq-quiz__bar span { display: block; height: 100%; width: 0; background: var(--rq-brand); transition: width .25s ease; }
.rq-linkbtn {
	padding: .35rem .2rem;
	min-height: 36px;
	border: 0;
	background: none;
	color: var(--rq-brand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.rq-linkbtn:hover { text-decoration: underline; }

/* Questions */
.rq-quiz__list { list-style: none; padding: 0; margin: 0; counter-reset: rq; }
.rq-q {
	counter-increment: rq;
	margin: 0 0 1rem;
	padding: 1.1rem;
	border: 1px solid var(--rq-line);
	border-radius: 14px;
	background: var(--rq-card);
	scroll-margin-top: 90px;
}
.rq-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rq-q__text { font-weight: 650; margin-bottom: .8rem; padding: 0; line-height: 1.45; }
.rq-q__text::before { content: counter(rq) ". "; color: var(--rq-brand); }
.rq-q__img { display: block; margin: 0 0 .75rem; max-width: 160px; height: auto; }
.rq-q__sign { display: flex; justify-content: center; align-items: center; margin: 0 0 .9rem; padding: 14px; border-radius: 8px; background: #F1F5F9; }
.rq-q__sign svg { width: 132px; height: 132px; display: block; }
.rq-q__choices { display: grid; gap: .5rem; }
.rq-choice {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	padding: .7rem .85rem;
	border: 1px solid var(--rq-line);
	border-radius: 10px;
	cursor: pointer;
	min-height: 48px;
	box-sizing: border-box;
	line-height: 1.4;
}
.rq-choice:hover { background: var(--rq-tint); border-color: color-mix(in srgb, var(--rq-brand) 45%, transparent); }
.rq-choice input { margin-top: .2rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--rq-brand); }
.rq-choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--rq-brand) 55%, transparent); outline-offset: 2px; }
.rq-q--done .rq-choice { cursor: default; }
.rq-q--done .rq-choice:hover { background: none; }
.rq-choice--answer { border-color: var(--rq-good); box-shadow: inset 4px 0 0 var(--rq-good); background: color-mix(in srgb, var(--rq-good) 7%, transparent) !important; }
.rq-choice--picked { border-color: var(--rq-bad); box-shadow: inset 4px 0 0 var(--rq-bad); background: color-mix(in srgb, var(--rq-bad) 6%, transparent) !important; }
.rq-q__explain { margin-top: .8rem; padding: .8rem .9rem; border-radius: 10px; background: var(--rq-tint); }
.rq-q__explain p { margin: 0 0 .45rem; }
.rq-q__explain p:last-child { margin-bottom: 0; }
.rq-q--right .rq-q__verdict { color: var(--rq-good); font-weight: 700; }
.rq-q--wrong .rq-q__verdict { color: var(--rq-bad); font-weight: 700; }
.rq-q__source { font-size: .9em; }
.rq-q__source a { color: var(--rq-brand); }
.rq-q--draft { border-style: dashed; }
.rq-q__report { font-size: .85em; opacity: .8; }
.rq-q__report a { color: inherit; }

/* Results */
.rq-quiz__result { margin: 1.5rem 0; padding: 1.1rem 1.2rem; border: 2px solid var(--rq-line); border-radius: 14px; background: var(--rq-card); }
.rq-quiz__result--pass { border-color: var(--rq-good); }
.rq-quiz__result--fail { border-color: var(--rq-bad); }
.rq-quiz__score { font-weight: 700; font-size: 1.1em; margin-top: 0; }
.rq-quiz__review-title { font-weight: 600; margin: .75rem 0 .35rem; }
.rq-quiz__review-list { margin: 0 0 .75rem; padding-left: 1.1rem; }
.rq-quiz__review-list a { color: var(--rq-brand); }
.rq-quiz__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 0; }
.rq-btn {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 1.1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.rq-btn--primary { background: var(--rq-brand); color: #fff; border-color: var(--rq-brand); }
.rq-btn--primary:hover { filter: brightness(1.1); }

/* Keep practicing */
.rq-related { margin: 2rem 0 0; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--rq-tint); }
.rq-related__title { font-size: 1.15em; margin: 0 0 .5rem; }
.rq-related ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.rq-related a { color: var(--rq-brand); }

/* View switch (JS-built) */
.rq-quiz__view { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .9em; }
.rq-quiz__view-label { font-weight: 600; margin-right: .1rem; }
.rq-seg {
	min-height: 36px;
	padding: 0 .8rem;
	border: 1px solid var(--rq-line);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.rq-seg:hover { border-color: var(--rq-brand); color: var(--rq-brand); }
.rq-seg[aria-pressed="true"] { background: var(--rq-brand); border-color: var(--rq-brand); color: #fff; font-weight: 600; }
.rq-quiz__resume { margin: -.5rem 0 1rem; padding: .55rem .85rem; border-radius: 10px; background: var(--rq-tint); font-size: .92em; }
.rq-quiz__resume .rq-linkbtn { min-height: 0; padding: 0 .2rem; }

/* One question at a time */
.rq-quiz--single .rq-q { display: none; }
.rq-quiz--single .rq-q.rq-q--current { display: block; }
.rq-quiz--single .rq-q--current .rq-q__text { outline: none; }
.rq-quiz--single .rq-q__text[data-n]::before { content: attr(data-n) ". "; }
.rq-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin: .25rem 0 1.25rem; }
.rq-pager[hidden] { display: none; }
.rq-pager__pos { font-size: .9em; text-align: center; white-space: nowrap; opacity: .85; }
.rq-pager__prev { justify-self: start; }
.rq-pager__next { justify-self: end; }
.rq-pager .rq-btn { min-height: 48px; padding: 0 1rem; }
.rq-pager .rq-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 520px) {
	.rq-pager { grid-template-columns: 1fr 1fr; }
	.rq-pager__pos { grid-column: 1 / -1; grid-row: 1; }
	.rq-pager .rq-btn { width: 100%; justify-content: center; }
	.rq-quiz__progress-row { font-size: .92em; }
}

.rq-disclaimer { margin-top: 1.5rem; font-size: .85em; opacity: .8; }
.rq-admin-note { padding: .5rem .75rem; border-left: 4px solid #dba617; background: #fcf9e8; color: #1d2327; }

@media (prefers-reduced-motion: reduce) { .rq-quiz__bar span { transition: none; } }