/**
 * Buitenpaneel Product Video Gallery — styling.
 *
 * - .bpvg-play         : het play-icoon over de video-thumbnail (grote slide)
 * - .bpvg-iframe       : de YouTube-speler die de slide vult tijdens afspelen
 * - .bpvg-thumb-badge  : klein play-icoontje op het plaatje in de thumbnail-strip
 *
 * Werkt in zowel de Blocksy-galerij (flexy) als de standaard
 * WooCommerce-galerij (flexslider).
 */

/* De slide-container moet relatief gepositioneerd zijn zodat het play-icoon
   en de speler er absoluut overheen kunnen liggen. */
[data-bpvg-video] {
	position: relative;
	cursor: pointer;
}

/* ---- Play-icoon op de grote slide ---- */

.bpvg-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	pointer-events: none; /* klik gaat door naar de slide zelf */
	z-index: 3;
	transition: transform 0.15s ease;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.bpvg-play svg {
	display: block;
	width: 100%;
	height: 100%;
}

[data-bpvg-video]:hover .bpvg-play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Icoon verbergen zodra de video speelt. */
.bpvg-playing .bpvg-play {
	display: none;
}

/* ---- De YouTube-speler zelf ---- */

/* Vult de hele slide en ligt boven de thumbnail. */
.bpvg-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	z-index: 4;
}

/* ---- Standaard WooCommerce-galerij: nette weergave van onze slide ---- */

.bpvg-video-slide img {
	display: block;
	width: 100%;
	height: auto;
}

.bpvg-video-slide .bpvg-video-link {
	display: block;
	position: relative;
}

/* ---- Play-badge op de thumbnail-strip ---- */

/* Zowel Blocksy-pills (li) als flexslider-thumbs (li) krijgen deze klasse
   via JavaScript. De badge is puur decoratief. */
.bpvg-thumb-badge {
	position: relative;
}

/* Donker rondje… */
.bpvg-thumb-badge::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	z-index: 2;
	pointer-events: none;
}

/* …met een wit afspeel-driehoekje erin. */
.bpvg-thumb-badge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% + 1px);
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
	z-index: 3;
	pointer-events: none;
}