/**
 * Product Video Module - Frontend Styles
 *
 * @package OM_Product_Page_Essentials
 */

/* Video wrapper */
.om-ppe-product-video {
	position: relative;
	width: 100%;
}

/* Aspect ratio containers */
.om-ppe-video-ratio {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.om-ppe-video-ratio iframe,
.om-ppe-video-ratio video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Aspect ratio variants */
.om-ppe-video-ratio-16-9 {
	padding-bottom: 56.25%;
}

.om-ppe-video-ratio-9-16 {
	padding-bottom: 177.78%;
}

.om-ppe-video-ratio-4-3 {
	padding-bottom: 75%;
}

.om-ppe-video-ratio-3-2 {
	padding-bottom: 66.67%;
}

.om-ppe-video-ratio-1-1 {
	padding-bottom: 100%;
}

.om-ppe-video-ratio-auto {
	padding-bottom: 0;
}

.om-ppe-video-ratio-auto iframe,
.om-ppe-video-ratio-auto video {
	position: relative;
	height: auto;
}

/* Featured video in gallery */
.woocommerce-product-gallery__image .om-ppe-product-video {
	cursor: default;
}

/* Gallery thumbnail video indicator */
.woocommerce-product-gallery .flex-control-thumbs li.om-ppe-video-thumb {
	position: relative;
}

.woocommerce-product-gallery .flex-control-thumbs li.om-ppe-video-thumb::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px;
	pointer-events: none;
}

/* Video in main gallery view */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image[data-video] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hide lightbox icon on video slides */
.woocommerce-product-gallery__image[data-video] .woocommerce-product-gallery__trigger {
	display: none;
}

/* Video controls visibility */
.om-ppe-product-video video::-webkit-media-controls {
	opacity: 0;
	transition: opacity 0.3s;
}

.om-ppe-product-video:hover video::-webkit-media-controls {
	opacity: 1;
}