/* RankList — блок «Подборщик». */
.rlist-quiz {
	--rl-quiz-accent: #7c3aed;
	margin: 1.6em 0;
	font-size: 15px;
	border: 1px solid #e6e8ea;
	border-radius: 14px;
	padding: 20px 22px;
	background: #fff;
}
.rlist-quiz__title { font-weight: 800; font-size: 1.15em; color: #1d2327; margin-bottom: 14px; }

.rlist-quiz__progress { height: 4px; border-radius: 4px; background: #eef0f2; overflow: hidden; margin-bottom: 16px; }
.rlist-quiz__bar { display: block; height: 100%; background: var(--rl-quiz-accent); transition: width .3s ease; }

.rlist-quiz__form { margin: 0; }
.rlist-quiz__q { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.rlist-quiz__qtitle { padding: 0; font-weight: 700; color: #1d2327; font-size: 1.05em; margin-bottom: 10px; }
.rlist-quiz__step { display: block; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rl-quiz-accent); margin-bottom: 3px; }

.rlist-quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.rlist-quiz__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #e2e6ec;
	border-radius: 10px;
	padding: 11px 14px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.rlist-quiz__opt:hover { border-color: color-mix(in srgb, var(--rl-quiz-accent) 45%, #fff); }
.rlist-quiz__opt input { accent-color: var(--rl-quiz-accent); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
.rlist-quiz__opt:has(input:checked) {
	border-color: var(--rl-quiz-accent);
	background: color-mix(in srgb, var(--rl-quiz-accent) 7%, #fff);
}

.rlist-quiz__nav { display: flex; gap: 10px; margin-top: 16px; }
.rlist-quiz__btn {
	appearance: none;
	border: 0;
	border-radius: 9px;
	padding: 10px 20px;
	font-size: 0.97em;
	font-weight: 700;
	cursor: pointer;
	background: var(--rl-quiz-accent);
	color: #fff;
	transition: filter .15s ease;
}
.rlist-quiz__btn:hover { filter: brightness(1.07); }
.rlist-quiz__btn--back {
	background: #fff;
	color: #4b5563;
	border: 1px solid #d6dadf;
}
.rlist-quiz__btn--next,
.rlist-quiz__btn--result { margin-left: auto; }

.rlist-quiz__q--miss .rlist-quiz__opts { animation: rl-quiz-shake .4s; }
@keyframes rl-quiz-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
	.rlist-quiz__bar { transition: none; }
	.rlist-quiz__q--miss .rlist-quiz__opts { animation: none; }
}

/* Результат */
.rlist-quiz__result { display: flex; flex-direction: column; gap: 14px; }
.rlist-quiz__rc {
	display: flex;
	gap: 16px;
	border-radius: 12px;
	padding: 16px;
	align-items: center;
}
.rlist-quiz__rc--best {
	border: 2px solid var(--rl-quiz-accent);
	background: color-mix(in srgb, var(--rl-quiz-accent) 6%, #fff);
}
.rlist-quiz__rc--runner { border: 1px solid #e6e8ea; }
.rlist-quiz__rc-img { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #f4f5f7; }
.rlist-quiz__rc-img img { width: 100%; height: 100%; object-fit: cover; }
.rlist-quiz__rc-body { flex: 1; min-width: 0; }
.rlist-quiz__rc-label {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rl-quiz-accent);
	margin-bottom: 4px;
}
.rlist-quiz__rc-name { font-weight: 800; font-size: 1.15em; color: #1d2327; }
.rlist-quiz__rc-blurb { margin: 5px 0 10px; color: #5b6470; line-height: 1.5; }
.rlist-quiz__rc-btn {
	display: inline-block;
	background: var(--rl-quiz-accent);
	color: #fff;
	text-decoration: none;
	border-radius: 9px;
	padding: 9px 20px;
	font-weight: 700;
	font-size: 0.95em;
}
.rlist-quiz__rc--runner .rlist-quiz__rc-name { font-size: 1.04em; }
.rlist-quiz__rc--runner .rlist-quiz__rc-img { width: 60px; height: 60px; }
.rlist-quiz__result .rlist-quiz__btn--again {
	align-self: flex-start;
	background: #fff;
	color: #4b5563;
	border: 1px solid #d6dadf;
}

/* Компактная тема */
.rlist-quiz--compact { padding: 16px 18px; font-size: 14px; }
.rlist-quiz--compact .rlist-quiz__opt { padding: 8px 12px; }
.rlist-quiz--compact .rlist-quiz__qtitle { font-size: 1em; margin-bottom: 7px; }
.rlist-quiz--compact .rlist-quiz__q { margin-bottom: 12px; }

/* В строку / компактная — лёгкий отступ между вопросами */
.rlist-quiz--inline .rlist-quiz__q { margin-bottom: 16px; }
.rlist-quiz--inline .rlist-quiz__step,
.rlist-quiz--compact .rlist-quiz__step { display: none; }

/* Плавная смена вопроса «на месте» (пошаговый режим) */
.rlist-quiz--stepped .rlist-quiz__q--in { animation: rl-quiz-in .28s ease; }
@keyframes rl-quiz-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Кнопки-действия в карточке результата */
.rlist-quiz__rc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rlist-quiz__rc-goto {
	appearance: none;
	cursor: pointer;
	background: #fff;
	color: var(--rl-quiz-accent);
	border: 1px solid color-mix(in srgb, var(--rl-quiz-accent) 45%, #fff);
	border-radius: 9px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 0.93em;
}
.rlist-quiz__rc-goto:hover { background: color-mix(in srgb, var(--rl-quiz-accent) 8%, #fff); }

/* Подсветка карточки товара при переходе */
.rlist-quiz-target {
	animation: rl-quiz-hl 2.5s ease;
	border-radius: 12px;
}
@keyframes rl-quiz-hl {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl-quiz-accent, #7c3aed) 65%, transparent); }
	18% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rl-quiz-accent, #7c3aed) 38%, transparent); }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.rlist-quiz--stepped .rlist-quiz__q--in { animation: none; }
	.rlist-quiz-target { animation: none; outline: 2px solid var(--rl-quiz-accent, #7c3aed); outline-offset: 3px; }
}