/**
 * Sticky Video — изолированные стили от темы (Hello Elementor и др.).
 * Все правила привязаны к #eg-sv-root (высокая специфичность).
 */

#eg-sv-root.eg-sv {
	--eg-sv-gap: 16px;
	--eg-sv-mini-w: 200px;
	--eg-sv-radius: 8px;
	--eg-sv-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	/* пропорции видео (перезаписываются из JS): моб. «увеличение» без искажений */
	--eg-sv-ar-w: 16;
	--eg-sv-ar-h: 9;
	/* отступы от краёв (задаётся из JS по настройкам админки, симметрия по горизонтали для max-width) */
	--eg-sv-inset-h: 16px;
	--eg-sv-inset-v: 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
	box-sizing: border-box;
	position: relative;
	z-index: 99980;
}

#eg-sv-root.eg-sv *,
#eg-sv-root.eg-sv *::before,
#eg-sv-root.eg-sv *::after {
	box-sizing: border-box;
}

/* Мини-плеер */
#eg-sv-root.eg-sv .eg-sv-mini {
	position: fixed !important;
	z-index: 99990 !important;
	width: var(--eg-sv-mini-w) !important;
	max-width: calc(100vw - 2 * var(--eg-sv-inset-h)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	border: none !important;
	border-radius: var(--eg-sv-radius) !important;
	/* одна скруглённая маска: без щели 1px между фоном и видео (двойной radius + visible) */
	overflow: hidden !important;
	box-shadow: var(--eg-sv-shadow) !important;
	background: #000 !important;
	transition: width 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#eg-sv-root.eg-sv .eg-sv-mini:not(.eg-sv-expanded):hover {
	/* без scale — при масштабе часто видна субпиксельная щель по скруглению */
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

#eg-sv-root.eg-sv .eg-sv-mini.eg-sv-expanded {
	width: min(calc(var(--eg-sv-mini-w) * 2), calc(100vw - 2 * var(--eg-sv-inset-h))) !important;
	max-width: calc(100vw - 2 * var(--eg-sv-inset-h)) !important;
	cursor: default;
}

@media (min-width: 769px) {
	#eg-sv-root.eg-sv .eg-sv-mini.eg-sv-expanded:hover {
		transform: none;
	}
}

/*
 * Режим «Увеличение» на мобильных: ширина почти на экран, но высота от пропорции
 * (внутри .eg-sv-inner по-прежнему padding-bottom из JS), без растягивания на 100vh.
 */
@media (max-width: 768px) {
	#eg-sv-root.eg-sv-mode-enlarge .eg-sv-mini.eg-sv-expanded {
		width: min(
			calc(100vw - 2 * var(--eg-sv-inset-h)),
			calc((100vh - 2 * var(--eg-sv-inset-v)) * var(--eg-sv-ar-w) / var(--eg-sv-ar-h))
		) !important;
		width: min(
			calc(100vw - 2 * var(--eg-sv-inset-h)),
			calc((100svh - 2 * var(--eg-sv-inset-v)) * var(--eg-sv-ar-w) / var(--eg-sv-ar-h))
		) !important;
		max-width: calc(100vw - 2 * var(--eg-sv-inset-h)) !important;
		height: auto !important;
		max-height: none !important;
	}
}

/* Кнопки закрытия / свернуть */
#eg-sv-root.eg-sv button.eg-sv-close,
#eg-sv-root.eg-sv button.eg-sv-shrink {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 5 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #fff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	line-height: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

#eg-sv-root.eg-sv button.eg-sv-close:hover,
#eg-sv-root.eg-sv button.eg-sv-close:focus,
#eg-sv-root.eg-sv button.eg-sv-shrink:hover,
#eg-sv-root.eg-sv button.eg-sv-shrink:focus {
	background: #f0f0f0 !important;
	background-image: none !important;
	color: #1a1a1a !important;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22) !important;
	outline: none !important;
}

#eg-sv-root.eg-sv button.eg-sv-close:active,
#eg-sv-root.eg-sv button.eg-sv-shrink:active {
	transform: scale(0.96) !important;
}

#eg-sv-root.eg-sv .eg-sv-close-ic {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
}

#eg-sv-root.eg-sv .eg-sv-close-ic svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#eg-sv-root.eg-sv button.eg-sv-shrink[hidden] {
	display: none !important;
}

#eg-sv-root.eg-sv .eg-sv-mini:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 1px !important;
}

#eg-sv-root.eg-sv .eg-sv-inner {
	position: relative !important;
	width: 100% !important;
	/* без !important: для своего видео JS задаёт padding-bottom по пропорции (9:16 и т.д.) */
	padding-bottom: 56.25%;
	height: 0 !important;
	margin: 0 !important;
	background: #111 !important;
	overflow: hidden !important;
	/* скругление только у .eg-sv-mini — иначе двойная дуга даёт «рамку» в 1px */
	border-radius: 0 !important;
}

#eg-sv-root.eg-sv .eg-sv-inner iframe,
#eg-sv-root.eg-sv .eg-sv-inner video {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: block !important;
	object-fit: cover !important;
}

#eg-sv-root.eg-sv .eg-sv-hint {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 !important;
	padding: 6px 8px !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;
	pointer-events: none !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Попап */
#eg-sv-root.eg-sv .eg-sv-overlay {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 99999 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px !important;
	border: none !important;
	background: rgba(0, 0, 0, 0.82) !important;
	background-image: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	animation: eg-sv-fade 0.2s ease;
}

#eg-sv-root.eg-sv .eg-sv-overlay[hidden] {
	display: none !important;
}

@keyframes eg-sv-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#eg-sv-root.eg-sv .eg-sv-modal {
	position: relative !important;
	width: min(960px, 100%) !important;
	max-width: min(960px, 100%) !important;
	max-height: min(90vh, 100%) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #000 !important;
	background-image: none !important;
	border: none !important;
	border-radius: var(--eg-sv-radius) !important;
	box-shadow: var(--eg-sv-shadow) !important;
	overflow: hidden !important;
}

#eg-sv-root.eg-sv .eg-sv-modal-inner {
	position: relative !important;
	width: 100% !important;
	/* без !important: для upload JS выставляет пропорцию */
	padding-bottom: 56.25%;
	height: 0 !important;
	margin: 0 !important;
	background: #111 !important;
}

#eg-sv-root.eg-sv .eg-sv-modal-inner iframe,
#eg-sv-root.eg-sv .eg-sv-modal-inner video {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: block !important;
}

/* Меньше превью на узких экранах */
@media (max-width: 768px) {
	#eg-sv-root.eg-sv {
		--eg-sv-mini-w: 120px;
		--eg-sv-gap: 12px;
		--eg-sv-radius: 6px;
	}
}

@media (max-width: 480px) {
	#eg-sv-root.eg-sv {
		--eg-sv-mini-w: 96px;
		--eg-sv-gap: 8px;
		--eg-sv-radius: 6px;
	}
}

@media (max-width: 360px) {
	#eg-sv-root.eg-sv {
		--eg-sv-mini-w: 84px;
		--eg-sv-gap: 6px;
	}
}

@media (max-width: 480px) {
	#eg-sv-root.eg-sv .eg-sv-hint {
		font-size: 9px !important;
		padding: 4px 5px !important;
	}

	#eg-sv-root.eg-sv button.eg-sv-close,
	#eg-sv-root.eg-sv button.eg-sv-shrink {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		top: 4px !important;
		right: 4px !important;
	}

	#eg-sv-root.eg-sv .eg-sv-close-ic svg {
		width: 14px !important;
		height: 14px !important;
	}
}