/*
 * Estilos del Pro Lazy Video Loader (Versión PRO)
 */

/* =================================== */
/* 1. ESTRUCTURA BASE Y ESTADOS */
/* =================================== */

.plvl-lazy-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	overflow: hidden;
}

/* Modo Fondo Negro (Punto 1 Corregido) */
.plvl-lazy-wrapper.plvl-mode-black {
	background-color: #000000;
}

.plvl-video-content {
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* 🛠️ CORRECCIÓN: ELIMINAR TRANSICIÓN para evitar latencias visuales en navegadores lentos */
	transition: none !important;
	opacity: 0;
}

/* Estado: Cargado */
.plvl-lazy-wrapper.is-loaded .plvl-video-content {
	opacity: 1;
	pointer-events: all;
}

.plvl-lazy-wrapper.is-loaded .plvl-overlay,
.plvl-lazy-wrapper.is-loaded .plvl-button-play,
.plvl-lazy-wrapper.is-loaded .plvl-spinner-text {
	opacity: 0;
	visibility: hidden;
}

/* El Overlay (Fondo oscuro) - Usa la opacidad de la configuración (Punto 4 Corregido) */
.plvl-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* El color RGBA viene de la variable --plvl-overlay-color calculada en PHP */
	background-color: var(--plvl-overlay-color, rgba(0, 0, 0, 0.5));
	transition: opacity 0.3s;
	z-index: 10;
}

/* =================================== */
/* 2. SPINNER Y MENSAJE DE CARGA (Punto 5) */
/* =================================== */

/* Animación de parpadeo (Punto 5) */
@keyframes plvl-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.plvl-spinner-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.2em;
	font-weight: 600;
	color: var(--plvl-button-color, #FFFFFF);
	opacity: 0; /* Inicialmente invisible */
    /* 🛠️ CORRECCIÓN 1: Asegura que el texto no salte de línea en móviles */
    white-space: nowrap; 
	transition: opacity 0.1s;
	z-index: 12;
}

/* 🚀 INICIO DE LA CORRECCIÓN DE FUERZA BRUTA */

/* 1. CORRECCIÓN: Ocultar *todos* los hijos directos del wrapper, EXCEPTO el spinner */
.plvl-lazy-wrapper.is-loading > *:not(.plvl-spinner-text) { 
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Anular el background-image del wrapper y forzar el negro total */
.plvl-lazy-wrapper.is-loading {
    background-image: none !important;
    background-color: #000000 !important; 
}

/* 3. Reactivar solo el overlay negro (el spinner ya está visible por el JS) */
.plvl-lazy-wrapper.is-loading .plvl-overlay {
    opacity: 1 !important; 
    visibility: visible !important;
    background-color: #000000 !important; /* Totalmente negro durante la carga */
}

/* Estado: Cargando (Spinner Visible) - Eliminamos la regla 'animation' de aquí */
.plvl-lazy-wrapper.is-loading .plvl-spinner-text {
    /* 💥 ELIMINADO: La animación y la opacidad inicial se aplican ahora por JavaScript */
    /* Lo único que queda visible es este elemento gracias al selector :not(...) */
}

/* 🚀 FIN DE LA CORRECCIÓN DE FUERZA BRUTA */

/* =================================== */
/* 3. DISEÑOS DE BOTÓN (plvl-button-play) */
/* =================================== */

.plvl-button-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.2s ease-in-out;
	z-index: 11;
	opacity: 1;
}

/* --- Diseño 1: Triángulo Clásico (Default) --- */
.plvl-design-triangle {
	width: 90px;
	height: 60px;
	border-radius: 12px;
	background: transparent;
	border: 3px solid var(--plvl-button-color, #FFFFFF);
}
.plvl-design-triangle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-45%, -50%);
	border-left: 20px solid var(--plvl-button-color, #FFFFFF);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

/* --- Diseño 2: Círculo (Estilo YouTube) --- */
.plvl-design-round {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--plvl-button-color, #FFFFFF);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	/* Usamos el color del overlay para el triángulo interno */
}
.plvl-design-round::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%; /* Ligeramente a la derecha para centrar visualmente */
	transform: translate(-50%, -50%);
	/* Usa un color oscuro predeterminado ya que el overlay puede ser transparente (opacidad 0) */
	border-left: 20px solid #000000;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

/* Efecto Hover para todos los diseños */
.plvl-lazy-wrapper:hover .plvl-button-play {
	transform: translate(-50%, -50%) scale(1.05);
}
.plvl-lazy-wrapper:hover .plvl-design-triangle {
	background-color: rgba(0, 0, 0, 0.2);
}
.plvl-lazy-wrapper:hover .plvl-design-round {
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* =================================== */
/* 5. CORRECCIÓN DE POSICIONAMIENTO DEL TEMA Y BLOQUEO DE CARRUSEL (Punto 6) */
/* =================================== */

/* 1. Limpieza de Flotantes y Margen */
.video-carousel {
	clear: both;	
	margin-top: 0px;
}

/* PUNTO 6: Bloquear interacción del carrusel si el Lazy Load no ha sido activado. */
/* Asumimos que el carrusel de opciones tiene la clase 'video-carousel-options' */
.video-carousel-options {
    pointer-events: none; /* Bloquea el clic */
    opacity: 0.5; /* Feedback visual de bloqueo */
    transition: opacity 0.3s;
}

/* Desbloquear cuando el botón de Lazy Load haya sido presionado (clase añadida al body por JS) */
body.plvl-videos-unlocked .video-carousel-options {
    pointer-events: all; /* Permite el clic */
    opacity: 1; /* Retorna a la normalidad */
}


/* 2. Forzar Relación de Aspecto (16:9) */
.vdcn {
	position: relative !important;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* 3. Asegurar que nuestro Lazy Wrapper ocupa ese espacio forzado */
.plvl-lazy-wrapper {
	position: absolute !important;	
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* 4. Asegurar que el IFRAME también se ajusta al espacio */
.plvl-video-content,
.plvl-video-content iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* =================================== */
/* 6. CORRECCIÓN DE ALINEACIÓN DE PULGARES (FINAL) */
/* =================================== */

a.fa-thumbs-o-down,
a.fa-thumbs-o-up {
	vertical-align: middle !important;	
	line-height: 1 !important;	
	box-sizing: content-box !important;
}

/* 🛠️ CORRECCIÓN 2: Ajuste de posición horizontal del Pulgar Abajo (Ajuste forzado) */
a.fa-thumbs-o-down {
    /* Aumentamos el margen negativo para moverlo más a la izquierda */
    margin-left: -14px !important; 
}