/* =========================================================
 * Zyrgon Extra PlayVideo — overlay de play/pause
 * O overlay é irmão do vídeo, dentro do .elementor-widget-container,
 * fica sempre por cima capturando o clique (invisível enquanto toca)
 * e mostra o ícone somente quando o vídeo está pausado.
 * Não reestrutura o widget — preserva o autoplay nativo do Elementor.
 * ========================================================= */

.zyrgon-has-playpause .elementor-widget-container {
	position: relative;
}

/* Fallback caso a classe do wrapper não esteja presente */
.elementor-widget-container:has(> .zyrgon-video-overlay) {
	position: relative;
}

/* Camada sempre presente e clicável sobre o vídeo */
.zyrgon-video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	background-color: transparent;
	transition-property: background-color;
	transition-duration: 0.25s;
	transition-timing-function: ease;
}

/* Fundo opcional sobre o vídeo — só quando pausado (definido pelo controle) */

/* Ícone central (play) — aparece apenas quando pausado */
.zyrgon-video-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	color: #ffffff;
	font-size: 54px;
	line-height: 1;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transition-property: opacity, visibility, transform, background-color, color;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transform: translateZ(0);
}

.zyrgon-video-overlay.is-paused .zyrgon-video-icon {
	opacity: 1;
	visibility: visible;
}

.zyrgon-video-overlay.is-paused .zyrgon-video-icon:hover {
	transform: scale(1.06);
}

.zyrgon-video-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.zyrgon-video-icon i {
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

.zyrgon-video-icon img {
	width: 1em;
	height: 1em;
	display: block;
}