.bl-quiz-widget {
	max-width: 640px;
	margin-inline: auto;
	padding: 2rem;
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	box-shadow: var(--bl-shadow, none);
	position: relative;
}

/* Всплывающий квиз перекрывает страницу, поэтому фон обязан быть непрозрачным.
   Светлый и тёмный варианты берутся из общих токенов темы — жёсткий белый
   делал окно нечитаемым на тёмной теме. */
.bl-quiz { --bl-quiz-popup-bg: var(--bl-color-bg-light); --bl-quiz-popup-text: var(--bl-color-text-light); }
.bl-quiz.bl-theme-dark { --bl-quiz-popup-bg: var(--bl-color-bg-dark); --bl-quiz-popup-text: var(--bl-color-text-dark); }

.bl-quiz--popup .bl-quiz-widget {
	position: fixed;
	inset: 0;
	margin: auto;
	width: calc(100% - 2rem);
	max-width: 640px;
	max-height: 90vh;
	height: max-content;
	overflow-y: auto;
	z-index: 1000;
	background: var(--bl-quiz-popup-bg);
	color: var(--bl-quiz-popup-text);
	padding-top: 3.25rem;
}
.bl-quiz--popup .bl-quiz-widget[hidden] { display: none; }
.bl-quiz--popup .bl-quiz-widget:not([hidden])::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: -1;
}

.bl-quiz-close {
	position: absolute;
	top: .75rem; right: .75rem;
	width: 2.25rem; height: 2.25rem;
	border: none;
	border-radius: var(--bl-radius-pill);
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.bl-quiz-close:hover { background: color-mix(in srgb, currentColor 18%, transparent); }

.bl-quiz-step[hidden] { display: none; }
.bl-quiz-step--intro, .bl-quiz-step--final, .bl-quiz-step--done { text-align: center; }
.bl-quiz-step h3 { overflow-wrap: anywhere; }

.bl-quiz-progress { margin-bottom: 1.5rem; }
.bl-quiz-progress__bar { height: 6px; border-radius: var(--bl-radius-pill); background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.bl-quiz-progress__bar span { display: block; height: 100%; width: 0; background: var(--bl-accent); transition: width .3s ease; }
.bl-quiz-progress__label { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--bl-muted); }

.bl-quiz-options { display: grid; gap: .75rem; margin-top: 1.25rem; }

/* Стиль вопросов «Радио-список»: раньше от карточек он отличался только
   отступом, хотя владелец сайта выбирает именно другой вид ответов. */
.bl-quiz-style--radio .bl-quiz-options { gap: .25rem; }
.bl-quiz-style--radio .bl-quiz-option {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .65rem .85rem;
	border: 0;
	border-radius: calc(var(--bl-card-radius) * .6);
}
.bl-quiz-style--radio .bl-quiz-option::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: .2em;
	border-radius: var(--bl-radius-pill);
	border: 2px solid var(--bl-border);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bl-quiz-style--radio .bl-quiz-option:hover { background: color-mix(in srgb, var(--bl-accent) 8%, transparent); }
.bl-quiz-style--radio .bl-quiz-option:hover::before,
.bl-quiz-style--radio .bl-quiz-option.is-active::before { border-color: var(--bl-accent); }
.bl-quiz-style--radio .bl-quiz-option.is-active::before { box-shadow: inset 0 0 0 3px var(--bl-accent); }

.bl-quiz-option {
	padding: 1rem 1.25rem;
	border-radius: var(--bl-card-radius);
	border: 2px solid var(--bl-border);
	background: none;
	color: inherit;
	text-align: left;
	font: inherit;
	cursor: pointer;
	overflow-wrap: anywhere;
	transition: border-color .15s ease, background .15s ease;
}
.bl-quiz-option:hover { border-color: var(--bl-accent); }
.bl-quiz-option:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
.bl-quiz-option.is-active { border-color: var(--bl-accent); background: color-mix(in srgb, var(--bl-accent) 12%, transparent); }

.bl-quiz-nav { margin-top: 1.25rem; text-align: left; }
.bl-quiz-back {
	border: none;
	background: none;
	color: var(--bl-muted);
	font: inherit;
	font-size: .875rem;
	padding: .4em 0;
	cursor: pointer;
}
.bl-quiz-back:hover { color: var(--bl-accent); }

.bl-quiz-form { display: flex; flex-direction: column; gap: .9rem; max-width: 380px; margin: 1.5rem auto 0; text-align: left; }
.bl-quiz-form input[type="text"],
.bl-quiz-form input[type="tel"] {
	padding: .8em 1em;
	border-radius: calc(var(--bl-card-radius) * .6);
	/* Цвета только из переменных: жёсткий #e2e2ea прятал поля на тёмной теме. */
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	background: color-mix(in srgb, currentColor 4%, transparent);
	color: inherit;
	font: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.bl-quiz-form input:focus {
	outline: none;
	border-color: var(--bl-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-accent) 20%, transparent);
}
.bl-quiz-consent { display: flex; align-items: flex-start; gap: .5em; font-size: .8125rem; color: var(--bl-muted); }
.bl-quiz-consent input { accent-color: var(--bl-accent); margin-top: .15em; flex: 0 0 auto; }