/**
 * QSM Slideshow — стили карусели на фронтенде.
 *
 * Карусель самодостаточна (все классы под префиксом .qsm-sl), тема сайта
 * на неё не влияет. В полноэкранном режиме элемент становится фиксированным
 * на весь экран (класс .qsm-sl-fs-on вешается как для нативного
 * Fullscreen API, так и для резервного режима).
 */

.qsm-sl {
	position: relative;
	margin: 1em 0;
	background: #10182b;
	border: 1px solid #dde3ee;
	border-radius: 14px;
	overflow: hidden;
	max-width: 100%;
}

/* ---------- Сцена и лента слайдов ---------- */

.qsm-sl-stage {
	position: relative;
	height: clamp(240px, 52vw, 600px);
	overflow: hidden;
	touch-action: pan-y; /* вертикальный скролл страницы не блокируем, горизонталь — свайп */
	background: #10182b;
}

.qsm-sl-track {
	display: flex;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.qsm-sl-slide {
	flex: 0 0 100%;
	min-width: 100%;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.qsm-sl-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Стрелки прокрутки ---------- */

.qsm-sl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	color: #1f2a44;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(8, 14, 30, 0.35);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.qsm-sl-arrow.qsm-sl-prev {
	left: 12px;
}

.qsm-sl-arrow.qsm-sl-next {
	right: 12px;
}

.qsm-sl-arrow:hover {
	background: #4c6fff;
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.qsm-sl-arrow:focus-visible {
	outline: 2px solid #4c6fff;
	outline-offset: 2px;
}

.qsm-sl-arrow:active {
	transform: translateY(-50%) scale(0.96);
}

/* ---------- Кружочки-точки (навигация по слайдам) ---------- */

.qsm-sl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(9, 14, 28, 0.45);
	width: max-content;
	margin: 0 auto;
	max-width: calc(100% - 120px);
	flex-wrap: wrap;
}

.qsm-sl-dot {
	width: 11px;
	height: 11px;
	border: 0;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.42);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.qsm-sl-dot:hover {
	background: rgba(255, 255, 255, 0.75);
	transform: scale(1.15);
}

.qsm-sl-dot:focus-visible {
	outline: 2px solid #9db1ff;
	outline-offset: 2px;
}

.qsm-sl-dot.qsm-sl-dot-active {
	background: #ffffff;
	transform: scale(1.3);
	box-shadow: 0 0 0 2px rgba(76, 111, 255, 0.85);
}

/* ---------- Кнопка полноэкранного режима ---------- */

.qsm-sl-fs {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	color: #1f2a44;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(8, 14, 30, 0.35);
	transition: background 0.15s ease, color 0.15s ease;
}

.qsm-sl-fs:hover {
	background: #4c6fff;
	color: #fff;
}

.qsm-sl-fs:focus-visible {
	outline: 2px solid #4c6fff;
	outline-offset: 2px;
}

/* ---------- Полноэкранный режим ---------- */

/* Класс вешается и на нативный fullscreen (Fullscreen API), и на резервный
   режим (если API запрещён — например, в iframe без allowfullscreen). */
.qsm-sl.qsm-sl-fs-on {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	background: #0b1020;
}

.qsm-sl.qsm-sl-fs-on .qsm-sl-stage {
	height: 100%;
}

.qsm-sl.qsm-sl-fs-on .qsm-sl-arrow {
	width: 54px;
	height: 54px;
}

.qsm-sl.qsm-sl-fs-on .qsm-sl-dots {
	bottom: 22px;
}

/* ---------- Сообщение об ошибке (для администратора) ---------- */

.qsm-sl-error {
	background: #fff3f4;
	border: 1px solid #f3c2c7;
	border-left: 4px solid #d63638;
	color: #8a1f24;
	padding: 10px 14px;
	border-radius: 8px;
	margin: 8px 0;
	font-size: 14px;
}

/* ---------- Мобильные устройства ---------- */

@media (max-width: 640px) {
	.qsm-sl-arrow {
		width: 38px;
		height: 38px;
	}

	.qsm-sl-arrow.qsm-sl-prev {
		left: 8px;
	}

	.qsm-sl-arrow.qsm-sl-next {
		right: 8px;
	}

	.qsm-sl-fs {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}

	.qsm-sl-stage {
		height: clamp(200px, 64vw, 420px);
	}
}

/* ---------- Уважение к настройке «меньше анимаций» ---------- */

@media (prefers-reduced-motion: reduce) {
	.qsm-sl-track,
	.qsm-sl-arrow,
	.qsm-sl-dot,
	.qsm-sl-fs {
		transition: none;
	}
}