/**
 * SevGo Player — стили минималистичного HTML5-плеера.
 * Все цвета берутся из переменной --sevgo-accent (задаётся инлайн на контейнере).
 */

.sevgo-player {
	--sevgo-accent: #2563eb;
	--sevgo-bg: #000;
	--sevgo-track: rgba(255, 255, 255, 0.22);
	--sevgo-buffered: rgba(255, 255, 255, 0.4);
	--sevgo-control: rgba(255, 255, 255, 0.92);
	--sevgo-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

	position: relative;
	width: 100%;
	margin: 0 auto;
	background: var(--sevgo-bg);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--sevgo-shadow);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sevgo-player * {
	box-sizing: border-box;
}

.sevgo-player__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	cursor: pointer;
}

/* ---------- Большая центральная кнопка Play ---------- */
.sevgo-player__big-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 78px;
	height: 78px;
	border: none;
	border-radius: 50%;
	background: rgba(20, 20, 22, 0.46);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
	z-index: 3;
}

.sevgo-player__big-play svg {
	width: 34px;
	height: 34px;
	margin-left: 4px; /* визуальная компенсация треугольника */
	fill: currentColor;
}

.sevgo-player__big-play:hover {
	background: var(--sevgo-accent);
	transform: translate(-50%, -50%) scale(1.06);
}

.sevgo-player.is-playing .sevgo-player__big-play {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	pointer-events: none;
}

/* ---------- Спиннер загрузки ---------- */
.sevgo-player__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--sevgo-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 4;
	animation: sevgo-spin 0.8s linear infinite;
}

.sevgo-player.is-loading .sevgo-player__spinner {
	opacity: 1;
}

.sevgo-player.is-loading .sevgo-player__big-play {
	opacity: 0;
}

@keyframes sevgo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Контролы ---------- */
.sevgo-player__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 12px 8px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 2;
}

.sevgo-player.is-playing.is-inactive .sevgo-player__controls {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.sevgo-player.is-playing.is-inactive {
	cursor: none;
}

/* ---------- Прогресс-бар ---------- */
.sevgo-player__progress {
	position: relative;
	height: 16px; /* увеличенная зона клика */
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-bottom: 2px;
}

.sevgo-player__progress::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--sevgo-track);
	border-radius: 4px;
	transition: height 0.15s ease;
}

.sevgo-player__progress:hover::before,
.sevgo-player__progress.is-scrubbing::before {
	height: 6px;
}

.sevgo-player__progress-buffered,
.sevgo-player__progress-played {
	position: absolute;
	left: 0;
	height: 4px;
	border-radius: 4px;
	transition: height 0.15s ease;
	pointer-events: none;
}

.sevgo-player__progress:hover .sevgo-player__progress-buffered,
.sevgo-player__progress:hover .sevgo-player__progress-played,
.sevgo-player__progress.is-scrubbing .sevgo-player__progress-buffered,
.sevgo-player__progress.is-scrubbing .sevgo-player__progress-played {
	height: 6px;
}

.sevgo-player__progress-buffered {
	width: 0;
	background: var(--sevgo-buffered);
}

.sevgo-player__progress-played {
	width: 0;
	background: var(--sevgo-accent);
}

.sevgo-player__progress-handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 13px;
	margin-left: -6.5px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%) scale(0);
	transition: transform 0.15s ease;
	pointer-events: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.sevgo-player__progress:hover .sevgo-player__progress-handle,
.sevgo-player__progress.is-scrubbing .sevgo-player__progress-handle {
	transform: translateY(-50%) scale(1);
}

.sevgo-player__progress:focus-visible {
	outline: none;
}

.sevgo-player__progress:focus-visible::before {
	box-shadow: 0 0 0 2px var(--sevgo-accent);
	height: 6px;
}

/* ---------- Нижняя панель ---------- */
.sevgo-player__bar {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 38px;
}

.sevgo-player__spacer {
	flex: 1 1 auto;
}

.sevgo-player__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--sevgo-control);
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease;
	flex: 0 0 auto;
}

.sevgo-player__btn svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	display: block;
}

.sevgo-player__btn:hover {
	background: rgba(255, 255, 255, 0.14);
}

.sevgo-player__btn:active {
	transform: scale(0.92);
}

.sevgo-player__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--sevgo-accent);
}

/* Переключение иконок play/pause, mute, fullscreen */
.sevgo-icon-pause,
.sevgo-icon-mute,
.sevgo-icon-compress {
	display: none;
}

.sevgo-player.is-playing .sevgo-icon-play {
	display: none;
}

.sevgo-player.is-playing .sevgo-icon-pause {
	display: block;
}

.sevgo-player.is-muted .sevgo-icon-vol {
	display: none;
}

.sevgo-player.is-muted .sevgo-icon-mute {
	display: block;
}

.sevgo-player.is-fullscreen .sevgo-icon-expand {
	display: none;
}

.sevgo-player.is-fullscreen .sevgo-icon-compress {
	display: block;
}

/* ---------- Громкость ---------- */
.sevgo-player__volume {
	display: flex;
	align-items: center;
}

.sevgo-player__volume-range {
	width: 0;
	opacity: 0;
	height: 4px;
	margin: 0;
	cursor: pointer;
	transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	background: var(--sevgo-track);
	border-radius: 4px;
	vertical-align: middle;
}

.sevgo-player__volume:hover .sevgo-player__volume-range,
.sevgo-player__volume-range:focus-visible {
	width: 72px;
	opacity: 1;
	margin: 0 6px 0 2px;
}

.sevgo-player__volume-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	border: none;
}

.sevgo-player__volume-range::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: none;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.sevgo-player__volume-range:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--sevgo-accent);
}

/* ---------- Время ---------- */
.sevgo-player__time {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	color: var(--sevgo-control);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sevgo-player__sep {
	opacity: 0.55;
}

.sevgo-player__duration {
	opacity: 0.7;
}

/* PiP кнопку прячем, если браузер не поддерживает */
.sevgo-player:not(.has-pip) .sevgo-player__pip {
	display: none;
}

/* ---------- Полноэкранный режим ---------- */
.sevgo-player:fullscreen {
	width: 100%;
	height: 100%;
	max-width: none !important;
	border-radius: 0;
	aspect-ratio: auto !important;
}

.sevgo-player:fullscreen .sevgo-player__video {
	height: 100%;
	object-fit: contain;
}

.sevgo-player:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: none !important;
	border-radius: 0;
}

/* ---------- Адаптив ---------- */
@media (max-width: 640px) {
	.sevgo-player {
		border-radius: 10px;
	}

	.sevgo-player__big-play {
		width: 64px;
		height: 64px;
	}

	.sevgo-player__big-play svg {
		width: 28px;
		height: 28px;
	}

	.sevgo-player__btn {
		width: 36px;
		height: 36px;
	}

	.sevgo-player__pip {
		display: none !important;
	}

	.sevgo-player__time {
		font-size: 12px;
	}
}

/* ---------- Уважение к настройкам анимации ---------- */
@media (prefers-reduced-motion: reduce) {
	.sevgo-player *,
	.sevgo-player *::before {
		transition: none !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Сообщение об ошибке (видно только редакторам) ---------- */
.sevgo-player-error {
	padding: 12px 16px;
	background: #fff4f4;
	border: 1px solid #f3c2c2;
	border-radius: 8px;
	color: #a11;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
}