/**
 * Stylesheet for "This Pluing G Embed Video"
 * Ghulam Muhammad
 */

/* ==========================================================================
   1. Base Video Container & Aspect Ratios
   ========================================================================== */
.g-video-embed-wrapper {
	position: relative;
	width: 100%;
	display: block; /* Standard block element to prevent flex height collapse */
}

/* Aspect Ratios applied directly to the outer block wrapper */
.g-video-embed-wrapper.aspect-16-9 {
	aspect-ratio: 16 / 9;
}

.g-video-embed-wrapper.aspect-21-9 {
	aspect-ratio: 21 / 9;
}

.g-video-embed-wrapper.aspect-4-3 {
	aspect-ratio: 4 / 3;
}

.g-video-embed-wrapper.aspect-3-2 {
	aspect-ratio: 3 / 2;
}

.g-video-embed-wrapper.aspect-1-1 {
	aspect-ratio: 1 / 1;
}

.g-video-embed-wrapper.aspect-9-16 {
	aspect-ratio: 9 / 16;
}

.g-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
	transform: translate3d(0, 0, 0); /* Force GPU acceleration */
}

/* Absolute positioned children of container */
.g-video-container iframe,
.g-video-container video,
.g-video-container object,
.g-video-container embed,
.g-video-container .g-video-overlay,
.g-video-container .g-video-player-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
}

.g-video-container video {
	object-fit: cover;
	background-color: #000;
}

/* ==========================================================================
   2. Cover Image Overlay (Lazy Load Mode)
   ========================================================================== */
.g-video-overlay {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.g-video-overlay.g-fade-out {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   3. Play Button Styling & Hover Effects
   ========================================================================== */
.g-video-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 50%;
	cursor: pointer;
	z-index: 11;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.g-video-play-btn svg {
	width: 40%;
	height: 40%;
	display: block;
	/* Offset the play triangle to visually center it */
	transform: translateX(4%);
}

.g-video-play-btn i {
	display: block;
	transform: translateX(6%);
}

/* Hover Animations */
.g-play-hover-scale-up:hover {
	transform: scale(1.18);
}

.g-play-hover-rotate:hover {
	transform: rotate(360deg) scale(1.08);
}

.g-play-hover-float:hover {
	transform: translateY(-8px);
}

/* Ripple Pulse Animation (Wow Factor!) */
.g-pulse-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: inherit;
	border-radius: inherit;
	z-index: -1;
	opacity: 0.7;
	animation: g-play-pulse 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes g-play-pulse {
	0% {
		transform: scale(1);
		opacity: 0.75;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

/* ==========================================================================
   4. Sticky Video (PIP) Styling
   ========================================================================== */
/* Hide sticky close button by default */
.g-sticky-close-btn {
	display: none;
}

/* When sticky mode is active */
.g-video-embed-wrapper.g-sticky-active .g-video-container {
	position: fixed;
	z-index: 999999;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: visible; /* To allow close button to sit slightly outside if needed */
	animation: g-sticky-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Position Styles overrides via script offsets or defaults */
.g-video-embed-wrapper.g-sticky-pos-bottom-right .g-video-container {
	bottom: 20px;
	right: 20px;
}

.g-video-embed-wrapper.g-sticky-pos-bottom-left .g-video-container {
	bottom: 20px;
	left: 20px;
}

.g-video-embed-wrapper.g-sticky-pos-top-right .g-video-container {
	top: 20px;
	right: 20px;
}

.g-video-embed-wrapper.g-sticky-pos-top-left .g-video-container {
	top: 20px;
	left: 20px;
}

/* Sticky Close Button inside floating player */
.g-video-embed-wrapper.g-sticky-active .g-sticky-close-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -12px;
	right: -12px;
	width: 26px;
	height: 26px;
	background: #ffffff;
	color: #1a1a1a;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	z-index: 1000000;
	transition: all 0.25s ease;
}

.g-video-embed-wrapper.g-sticky-active .g-sticky-close-btn:hover {
	background: #ff3333;
	color: #ffffff;
	transform: scale(1.1);
}

.g-video-embed-wrapper.g-sticky-active .g-sticky-close-btn svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* Slide in animation for picture-in-picture window */
@keyframes g-sticky-slide-in {
	from {
		transform: translateY(40px) scale(0.9);
		opacity: 0;
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Elementor editor fallback helpers */
.elementor-editor-active .g-video-embed-wrapper.g-sticky-active .g-video-container {
	position: relative;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	animation: none;
	box-shadow: none;
	border: none;
}

.elementor-editor-active .g-sticky-close-btn {
	display: none !important;
}