/**
 * Per-variation product video — "Watch Video" button + lightbox.
 * Self-contained: does not touch the product gallery, so the theme's
 * per-variation gallery rebuild can't affect it. Buttons use the site gold
 * (--wd-primary-color). Namespaced .sluder-vv-* to avoid theme collisions.
 */

/* ── "Watch Video" button — pinned to the gallery's bottom-right corner ─── */
.woocommerce-product-gallery.sluder-vv-has-watch {
	position: relative;
}

.sluder-vv-watch-wrap {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 45;
	margin: 0;
}

.sluder-vv-watch {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 9px 16px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: var(--wd-primary-color, #dbb353) !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2 !important;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
	transition: filter .15s ease, transform .15s ease;
	width: auto !important;
	min-width: 0 !important;
}

.sluder-vv-watch:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.sluder-vv-watch .sluder-vv-watch-icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent #ffffff;
}

@media (max-width: 768px) {
	.sluder-vv-watch-wrap {
		right: 10px;
		bottom: 10px;
	}
	.sluder-vv-watch {
		padding: 7px 13px !important;
		font-size: 11px !important;
	}
}

/* ── In-gallery player — plays where the main image is shown ───────────── */
.wd-gallery-images.sluder-vv-playing,
.woocommerce-product-gallery__wrapper.sluder-vv-playing,
.sluder-vv-playing {
	position: relative;
}

.sluder-vv-player {
	position: absolute;
	inset: 0;
	z-index: 50;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sluder-vv-player video,
.sluder-vv-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
	background: #ffffff;
}

.sluder-vv-player iframe {
	background: #000;
}

/* Close button pinned to the top-right corner of the video. Positive offset so
   it isn't clipped by the player's overflow; flex-centres the × glyph. */
.sluder-vv-player .sluder-vv-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--wd-primary-color, #dbb353) !important;
	color: #ffffff !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-align: center;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
	z-index: 60;
}

.sluder-vv-player .sluder-vv-close:hover {
	filter: brightness(1.08);
}