/**
 * QSM Slideshow Quiz — стили виджета на фронтенде.
 * Все селекторы ограничены префиксом .qsm-sq, чтобы не конфликтовать с темами.
 */

.qsm-sq {
	--qsm-sq-accent: #4f6df5;
	--qsm-sq-accent-soft: #eef1ff;
	--qsm-sq-accent-glow: rgba(79, 109, 245, 0.28);
	--qsm-sq-green: #21a05a;
	--qsm-sq-green-soft: #e8f7ee;
	--qsm-sq-red: #d64545;
	--qsm-sq-red-soft: #fdeeee;
	--qsm-sq-border: #d7dce8;
	--qsm-sq-text: #2c3247;
	--qsm-sq-muted: #7a819c;

	margin: 10px 0 16px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--qsm-sq-text);
}

.qsm-sq *,
.qsm-sq *::before,
.qsm-sq *::after {
	box-sizing: border-box;
}

.qsm-sq-hint {
	margin: 0 0 12px;
	color: var(--qsm-sq-muted);
	font-size: 0.9em;
}

.qsm-sq-error {
	margin: 8px 0;
	padding: 10px 12px;
	border: 1px solid #e0b4b4;
	background: #fdf3f3;
	color: #9f3a38;
	border-radius: 6px;
	font-size: 14px;
}

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

.qsm-sq-progress-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.qsm-sq-progress-counter {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: var(--qsm-sq-muted);
	white-space: nowrap;
}

.qsm-sq-progress-bar {
	flex: 1 1 auto;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: #edf0f7;
	overflow: hidden;
}

.qsm-sq-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--qsm-sq-accent), #7b8ffa);
	transition: width 0.4s ease;
}

/* ---------- Сцена и слайды ---------- */

.qsm-sq-stage {
	position: relative;
}

.qsm-sq-slide {
	display: none;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid var(--qsm-sq-border);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(20, 26, 51, 0.06);
}

.qsm-sq-slide.qsm-sq-active {
	display: block;
}

/* Появление следующего слайда (класс вешает qsm-sq.js). */
.qsm-sq-slide.qsm-sq-enter {
	animation: qsm-sq-slide-in 0.35s ease;
}

@keyframes qsm-sq-slide-in {
	0% {
		opacity: 0;
		transform: translateX(18px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.qsm-sq-slide-q {
	font-weight: 600;
	font-size: 1.05em;
	margin: 0 0 14px;
}

/* ---------- Варианты ответа ---------- */

.qsm-sq-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qsm-sq-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.35;
	text-align: left;
	color: var(--qsm-sq-text);
	background: #fafbfe;
	border: 2px solid var(--qsm-sq-border);
	border-radius: 10px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.qsm-sq-option:hover:not(.qsm-sq-locked),
.qsm-sq-option:focus-visible:not(.qsm-sq-locked) {
	border-color: var(--qsm-sq-accent);
	background: var(--qsm-sq-accent-soft);
	box-shadow: 0 0 0 3px var(--qsm-sq-accent-glow);
	outline: none;
	transform: translateY(-1px);
}

/* Кнопка-отметка справа: пустая, галочка или крест. */
.qsm-sq-option-mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* Правильный выбор: зелёная галочка. */
.qsm-sq-option.qsm-sq-correct {
	border-color: var(--qsm-sq-green);
	background: var(--qsm-sq-green-soft);
	color: #157347;
	cursor: default;
	animation: qsm-sq-pop 0.3s ease-out;
}

.qsm-sq-option.qsm-sq-correct .qsm-sq-option-mark::after {
	content: "\2713"; /* ✓ */
	color: var(--qsm-sq-green);
}

/* Неверный выбор: красный крест. */
.qsm-sq-option.qsm-sq-wrong {
	border-color: var(--qsm-sq-red);
	background: var(--qsm-sq-red-soft);
	color: #a32c2c;
	cursor: default;
	animation: qsm-sq-shake 0.35s ease-out;
}

.qsm-sq-option.qsm-sq-wrong .qsm-sq-option-mark::after {
	content: "\2715"; /* ✕ */
	color: var(--qsm-sq-red);
}

/* Все варианты отвеченного слайда заблокированы (изменить ответ нельзя). */
.qsm-sq-option.qsm-sq-locked {
	cursor: default;
	opacity: 0.55;
}

.qsm-sq-option.qsm-sq-correct,
.qsm-sq-option.qsm-sq-wrong {
	opacity: 1;
}

@keyframes qsm-sq-pop {
	0% {
		transform: scale(1.04);
	}
	60% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes qsm-sq-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-4px);
	}
	50% {
		transform: translateX(4px);
	}
	75% {
		transform: translateX(-2px);
	}
}

/* ---------- Финальное сообщение ---------- */

.qsm-sq-done {
	display: none;
	padding: 18px 20px;
	border: 2px dashed var(--qsm-sq-green);
	background: var(--qsm-sq-green-soft);
	border-radius: 12px;
	text-align: center;
}

.qsm-sq.qsm-sq-done .qsm-sq-done {
	display: block;
	animation: qsm-sq-slide-in 0.35s ease;
}

.qsm-sq-done-title {
	display: block;
	font-weight: 700;
	color: #157347;
	margin-bottom: 4px;
}

.qsm-sq-done-text {
	display: block;
	color: var(--qsm-sq-muted);
	font-size: 0.9em;
}

/* ---------- Доступность и мобильные ---------- */

/* Пользователям с отключённой анимацией — без движения. */
@media (prefers-reduced-motion: reduce) {
	.qsm-sq-slide.qsm-sq-enter,
	.qsm-sq.qsm-sq-done .qsm-sq-done,
	.qsm-sq-option.qsm-sq-correct,
	.qsm-sq-option.qsm-sq-wrong {
		animation: none;
	}

	.qsm-sq-option,
	.qsm-sq-progress-fill {
		transition: none;
	}
}

@media (max-width: 600px) {
	.qsm-sq-slide {
		padding: 14px;
	}

	.qsm-sq-option {
		padding: 12px 14px;
		font-size: 1.02em; /* крупнее зона нажатия на тач-экранах */
	}
}