/* =====================================================================
   WC Video Gallery Lite — Frontend Gallery CSS
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  Classic FlexSlider gallery                                          */
/* ------------------------------------------------------------------ */

/* Each video slide is a standard WC gallery image div */
.vwgl-video-slide {
	position: relative;
}

/*
 * Thumbnail anchor: always kept in the layout so that the poster <img>
 * gives the slide its intrinsic height (FlexSlider measures it).
 * The .vwgl-slide-player sits on top via position:absolute / z-index:5
 * and visually covers the anchor — no need to hide it in JS.
 */
.vwgl-thumb-anchor {
	display: block;
	position: relative;
	width: 100%;
	/* No height:100% — let the img drive the slide height naturally */
}

.vwgl-thumb-anchor .vwgl-poster-img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1; /* match WooCommerce default square product images */
	object-fit: cover;   /* crop rather than stretch */
}

/*
 * Placeholder for MP4 videos without a real thumbnail.
 * Matches the gallery aspect ratio and provides a dark background
 * so the play icon is clearly visible.
 */
.vwgl-poster-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1; /* matches WooCommerce default square product images */
	background: #1a1a1a;
	display: block;
}

/* Full-size player — hidden until the slide is active */
.vwgl-slide-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Class-based hide so display:flex is preserved when shown */
.vwgl-slide-player.vwgl-hidden {
	display: none;
}

/* Native <video> fills the player, centered for non-square videos */
.vwgl-slide-player .vwgl-video {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

/* YouTube embed wrapper - preserves 16:9 ratio */
.vwgl-yt-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	background: #000;
}

.vwgl-yt-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Circle play button on the poster thumbnail */
.vwgl-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	border: 2.5px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-size: 0; /* hide any text residue */
	z-index: 2;
}

.vwgl-play-icon::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 18px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 4px; /* optical centre */
}

/* ------------------------------------------------------------------ */
/*  Block gallery overlay                                               */
/* ------------------------------------------------------------------ */

/* Container injected by gallery.js on top of the poster <img> */
.vwgl-block-overlay {
	position: absolute;
	inset: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.vwgl-block-overlay .vwgl-block-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.vwgl-block-overlay .vwgl-block-iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.vwgl-block-poster--placeholder,
.vwgl-block-thumb-image--placeholder {
	background: #1a1a1a;
	object-fit: contain;
}

/* Play icon overlay on block thumbnails */
.vwgl-block-thumb {
	position: relative;
}

.vwgl-block-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	border: 1.5px solid rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
	font-size: 0;
}

.vwgl-block-play-icon::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 8px;
	border-color: transparent transparent transparent rgba(255,255,255,0.9);
	margin-left: 2px;
}

/* FlexSlider thumbnail strip — video thumbs need a positioned container */
.flex-control-thumbs li {
	position: relative;
}

/* Make all thumbnails in the strip uniform square to match product images */
.flex-control-thumbs li img {
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Dark placeholder for MP4 video thumbnails without a real image */
.flex-control-thumbs li.vwgl-has-video-thumb img[src=""],
.flex-control-thumbs li.vwgl-has-video-thumb img:not([src]) {
	background: #1a1a1a;
	object-fit: none;
}

/* JS-injected dark placeholder when no real thumb exists */
.vwgl-thumb-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #1a1a1a;
	border-radius: 0;
}

/* Style the 1x1 data-URI img as a dark placeholder (keeps FlexSlider click) */
.flex-control-thumbs li img.vwgl-thumb-no-image {
	background: #1a1a1a;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: none;
	opacity: 1;
}

/* Circle play badge on FlexSlider video thumbnails */
.vwgl-thumb-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	border: 1.5px solid rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
	font-size: 0;
}

.vwgl-thumb-play-icon::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 8px;
	border-color: transparent transparent transparent rgba(255,255,255,0.9);
	margin-left: 2px;
}

/* Ensure the large-image <li> is a positioned container for the overlay */
.wc-block-product-gallery-large-image__wrapper {
	position: relative;
}