/**
 * AI AutoBlogger PRO — викторина на фронте.
 *
 * Стили нейтральные и наследуют шрифт темы, чтобы блок не выглядел
 * чужеродной вставкой. Все размеры в em — подстраиваются под типографику сайта.
 */

.aiauto-quiz {
	--aiauto-line: rgba(0, 0, 0, .1);
	--aiauto-soft: rgba(0, 0, 0, .028);
	--aiauto-ok: #0f7a4d;
	--aiauto-no: #b3261e;

	margin: 2.5em 0;
	padding: 1.6em 1.5em 1.4em;
	border: 1px solid var(--aiauto-line);
	border-radius: 14px;
	background: var(--aiauto-soft);
	font-family: inherit;
	font-size: inherit;
}

/* -------------------------------------------------------------------------
 * Шапка
 * ---------------------------------------------------------------------- */

.aiauto-quiz__head {
	margin-bottom: 1.5em;
}

.aiauto-quiz__badge {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .7em;
	padding: .3em .8em .3em .65em;
	border: 1px solid var(--aiauto-line);
	border-radius: 999px;
	background: #fff;
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1;
}

.aiauto-quiz__badge-dot {
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--aiauto-ok);
}

.aiauto-quiz__title {
	margin: 0 0 .25em;
	font-size: 1.35em;
	line-height: 1.25;
}

.aiauto-quiz__sub {
	margin: 0;
	font-size: .88em;
	line-height: 1.5;
	opacity: .6;
}

/* Прогресс */

.aiauto-quiz__progress {
	display: flex;
	align-items: center;
	gap: .9em;
	margin-top: 1.1em;
}

.aiauto-quiz__track {
	flex: 1;
	height: 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .09);
	overflow: hidden;
}

/* Тянем scaleX, а не width: transform считается на GPU и не заставляет
   браузер пересчитывать раскладку на каждом кадре. */
.aiauto-quiz__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--aiauto-ok);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s ease;
}

.aiauto-quiz__counter {
	flex: none;
	font-size: .78em;
	font-variant-numeric: tabular-nums;
	opacity: .55;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Вопросы
 * ---------------------------------------------------------------------- */

.aiauto-quiz__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiauto-quiz__item {
	padding: 1.3em 0;
	border-top: 1px solid var(--aiauto-line);
}

.aiauto-quiz__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.aiauto-quiz__q {
	display: flex;
	gap: .7em;
	margin: 0 0 .9em;
	font-weight: 600;
	line-height: 1.45;
}

.aiauto-quiz__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: rgba(0, 0, 0, .07);
	font-size: .8em;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.aiauto-quiz__answers {
	display: flex;
	flex-direction: column;
	gap: .5em;
	padding-left: 2.4em;
}

/* -------------------------------------------------------------------------
 * Ответы
 * ---------------------------------------------------------------------- */

/* Двойной селектор — темы любят навязывать кнопкам ЗАГЛАВНЫЕ БУКВЫ,
   межбуквенные интервалы и свои отступы. Читать такое невозможно. */
.aiauto-quiz .aiauto-quiz__answer {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	width: 100%;
	margin: 0;
	padding: .75em .95em;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.45;
	cursor: pointer;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.aiauto-quiz .aiauto-quiz__answer:hover:not(:disabled) {
	border-color: rgba(0, 0, 0, .42);
	background: #fff;
}

.aiauto-quiz .aiauto-quiz__answer:focus-visible {
	outline: 2px solid var(--aiauto-ok);
	outline-offset: 2px;
}

.aiauto-quiz .aiauto-quiz__answer:disabled {
	cursor: default;
	opacity: 1;
}

/* Кружок-маркер слева. После ответа превращается в галочку или крестик —
   разница видна не только по цвету, но и по значку. */
.aiauto-quiz__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	margin-top: .12em;
	border: 1.5px solid rgba(0, 0, 0, .25);
	border-radius: 50%;
	font-size: .82em;
	font-weight: 700;
	line-height: 1;
}

.aiauto-quiz__answer.is-correct {
	border-color: var(--aiauto-ok);
	background: rgba(15, 122, 77, .07);
	font-weight: 600;
}

.aiauto-quiz__answer.is-correct .aiauto-quiz__mark {
	border-color: var(--aiauto-ok);
	background: var(--aiauto-ok);
	color: #fff;
}

.aiauto-quiz__answer.is-correct .aiauto-quiz__mark::before {
	content: "✓";
}

.aiauto-quiz__answer.is-wrong {
	border-color: var(--aiauto-no);
	background: rgba(179, 38, 30, .06);
}

.aiauto-quiz__answer.is-wrong .aiauto-quiz__mark {
	border-color: var(--aiauto-no);
	background: var(--aiauto-no);
	color: #fff;
}

.aiauto-quiz__answer.is-wrong .aiauto-quiz__mark::before {
	content: "✕";
}

.aiauto-quiz__item.is-done .aiauto-quiz__answer:not(.is-correct):not(.is-wrong) {
	opacity: .5;
}

/* -------------------------------------------------------------------------
 * Пояснение
 * ---------------------------------------------------------------------- */

.aiauto-quiz__why {
	margin: .8em 0 0 2.4em;
	padding: .75em .95em;
	border-radius: 10px;
	background: rgba(0, 0, 0, .045);
	font-size: .9em;
	line-height: 1.55;
}

.aiauto-quiz__why-label {
	margin-right: .35em;
	font-weight: 700;
	opacity: .55;
}

/* -------------------------------------------------------------------------
 * Результат
 * ---------------------------------------------------------------------- */

.aiauto-quiz__result {
	margin-top: 1.5em;
	padding-top: 1.4em;
	border-top: 1px solid var(--aiauto-line);
	text-align: center;
}

.aiauto-quiz__score {
	margin: 0;
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.aiauto-quiz__verdict {
	margin: .35em 0 1.1em;
	font-size: .92em;
	opacity: .65;
}

.aiauto-quiz .aiauto-quiz__retry {
	padding: .65em 1.6em;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.aiauto-quiz .aiauto-quiz__retry:hover {
	border-color: currentColor;
	background: rgba(0, 0, 0, .05);
}

/* -------------------------------------------------------------------------
 * Узкие экраны
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.aiauto-quiz {
		padding: 1.3em 1.1em;
		border-radius: 12px;
	}

	/* На телефоне отступ под номером съедает половину ширины ответа. */
	.aiauto-quiz__answers,
	.aiauto-quiz__why {
		padding-left: 0;
		margin-left: 0;
	}

	.aiauto-quiz__score {
		font-size: 1.6em;
	}
}

/* -------------------------------------------------------------------------
 * Тёмная тема
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.aiauto-quiz {
		--aiauto-line: rgba(255, 255, 255, .14);
		--aiauto-soft: rgba(255, 255, 255, .03);
		--aiauto-ok: #4ade80;
		--aiauto-no: #f87171;
	}

	.aiauto-quiz__badge {
		background: rgba(255, 255, 255, .06);
	}

	.aiauto-quiz__track,
	.aiauto-quiz__num,
	.aiauto-quiz__why {
		background: rgba(255, 255, 255, .08);
	}

	.aiauto-quiz .aiauto-quiz__answer {
		border-color: rgba(255, 255, 255, .2);
		background: rgba(255, 255, 255, .04);
	}

	.aiauto-quiz .aiauto-quiz__answer:hover:not(:disabled) {
		border-color: rgba(255, 255, 255, .5);
		background: rgba(255, 255, 255, .07);
	}

	.aiauto-quiz__mark {
		border-color: rgba(255, 255, 255, .3);
	}

	.aiauto-quiz__answer.is-correct .aiauto-quiz__mark,
	.aiauto-quiz__answer.is-wrong .aiauto-quiz__mark {
		color: #111;
	}

	.aiauto-quiz .aiauto-quiz__retry {
		border-color: rgba(255, 255, 255, .35);
	}

	.aiauto-quiz .aiauto-quiz__retry:hover {
		background: rgba(255, 255, 255, .08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiauto-quiz__bar,
	.aiauto-quiz .aiauto-quiz__answer,
	.aiauto-quiz .aiauto-quiz__retry {
		transition: none;
	}
}