/**
 * Frontend Product Videos Styles
 * 
 * Ensures videos in product gallery have the same size and styling as images.
 */

/* Video wrapper should match image container */
.wc-product-video-wrap,
.rs-product-video-wrap {
	width: 100%;
	display: block;
	position: relative;
}

/* Main gallery image - video wrapper */
.woocommerce-product-gallery__image .wc-product-video-wrap,
.woocommerce-product-gallery__image .rs-product-video-wrap {
	width: 100%;
	display: block;
}

/* Video element - should match image dimensions */
.woocommerce-product-gallery__image .wc-product-video,
.woocommerce-product-gallery__image .rs-product-video,
.woocommerce-product-gallery__image video {
	width: 100%;
	/* height: auto; */
	display: block;
}

/* Thumbnail gallery - video thumbnails should match image thumbnails */
.flex-control-thumbs li img,
.woocommerce-product-gallery__image img {
	width: 100%;
	/* height: auto; */
	display: block;
}

/* Ensure video thumbnails in flexslider match image thumbnails exactly */
.flex-control-thumbs li {
	width: 25%;
	float: left;
	margin: 0;
	list-style: none;
}

.flex-control-thumbs li img,
.flex-control-thumbs li[data-thumb] {
	width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
	opacity: 0.5;
	margin: 0;
}

.flex-control-thumbs li.flex-active img,
.flex-control-thumbs li.flex-active[data-thumb],
.flex-control-thumbs li:hover img,
.flex-control-thumbs li:hover[data-thumb] {
	opacity: 1;
}

/* Ensure video thumbnails in slider match image thumbnails size exactly */
.flex-control-thumbs li .wc-product-video-wrap,
.flex-control-thumbs li .rs-product-video-wrap {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	overflow: hidden;
}

.flex-control-thumbs li .wc-product-video-wrap img,
.flex-control-thumbs li .rs-product-video-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ensure video thumbnails (poster images) match image thumbnails exactly */
.flex-control-thumbs li[data-thumb] {
	width: 100%;
	height: 100%;
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Ensure video in thumbnails matches image size */
.flex-control-thumbs li video,
.woocommerce-product-gallery__image video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* For thumbnails specifically, videos should be cropped like images */
.flex-control-thumbs li .wc-product-video,
.flex-control-thumbs li .rs-product-video {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Ensure video thumbnail images in flexslider have same dimensions as regular images */
.flex-control-thumbs li img[src*="video"],
.flex-control-thumbs li .wc-product-video-wrap img,
.flex-control-thumbs li .rs-product-video-wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Video thumbnail overlay with play icon */
.flex-control-thumbs li.wc-video-thumbnail {
	position: relative;
	background: transparent !important;
}

.flex-control-thumbs li.wc-video-thumbnail img,
.flex-control-thumbs li.wc-video-thumbnail > * {
	background: transparent !important;
}

/* Overlay for video thumbnails */
.flex-control-thumbs li.wc-video-thumbnail::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 11, 11, 0.38);
	border-radius: 12px;
	pointer-events: none;
	z-index: 1;
}

/* Play icon for video thumbnails - created with CSS */
.flex-control-thumbs li.wc-video-thumbnail::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-left: 16px solid #ffffff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	pointer-events: none;
	z-index: 3;
	display: block;
	background: transparent;
}

/* Gallery wrapper - ensure videos are contained properly */
.woocommerce-product-gallery__wrapper .wc-product-video-wrap,
.woocommerce-product-gallery__wrapper .rs-product-video-wrap {
	width: 100%;
	display: block;
}

/* Match image link styling for video containers */
.woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
}

/* Ensure video doesn't overflow container */
.woocommerce-product-gallery__image {
	overflow: hidden;
}

/* Ensure video doesn't change size when playing */
.woocommerce-product-gallery__image video {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Use JavaScript to set aspect ratio based on poster image */
.woocommerce-product-gallery__image .wc-product-video-wrap[data-aspect-ratio],
.woocommerce-product-gallery__image .rs-product-video-wrap[data-aspect-ratio] {
	position: relative;
}

.woocommerce-product-gallery__image .wc-product-video-wrap[data-aspect-ratio]::before,
.woocommerce-product-gallery__image .rs-product-video-wrap[data-aspect-ratio]::before {
	content: '';
	display: block;
	padding-top: var(--video-aspect-ratio, 100%);
}

.woocommerce-product-gallery__image .wc-product-video-wrap[data-aspect-ratio] video,
.woocommerce-product-gallery__image .rs-product-video-wrap[data-aspect-ratio] video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: auto; */
	object-fit: contain;
}