/* Product Video Gallery + Floating Player — front end */

/* ---------- Gallery slide ---------- */

.pvg-slide {
	position: relative;
}

/* Sit exactly like a normal gallery image inside FlexSlider. */
.woocommerce-product-gallery__wrapper > .pvg-slide {
	width: 100%;
}

.pvg-slide__img {
	background: #111;
}

.pvg-slide .pvg-slide__btn {
	position: relative;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: #111 !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

.pvg-slide__img {
	display: block;
	width: 100%;
	height: auto;
}

.pvg-slide__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.72);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: transform 0.18s ease, background 0.18s ease;
	pointer-events: none;
}

.pvg-slide__btn:hover .pvg-slide__play,
.pvg-slide__btn:focus-visible .pvg-slide__play {
	background: rgba(17, 17, 17, 0.9);
	transform: translate(-50%, -50%) scale(1.06);
}

.pvg-slide__label {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	padding: 5px 10px;
	border-radius: 3px;
	background: rgba(17, 17, 17, 0.72);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* Inline fallback (used when the floating window is switched off) */
.pvg-slide__inline {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	background: #000;
}

/* ---------- Floating window ---------- */

#pvg-player.pvg-player {
	position: fixed;
	z-index: 999999;
	width: var(--pvg-width, 340px);
	max-width: calc(100vw - 24px);
	margin: 0;
	padding: 0;
	background: #111;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	animation: pvg-in 0.2s ease-out;
	touch-action: none; /* so a drag doesn't scroll the page on touch screens */
	user-select: none;
	-webkit-user-select: none;
}

/* The video keeps its own gestures (controls, fullscreen, scrubbing). */
#pvg-player .pvg-player__media video,
#pvg-player .pvg-player__media iframe {
	touch-action: auto;
	user-select: auto;
	-webkit-user-select: auto;
}

#pvg-player.is-draggable { cursor: grab; }
#pvg-player.is-dragging  { cursor: grabbing; animation: none; }

#pvg-player[hidden] {
	display: none;
}

#pvg-player.pvg-player--bottom-right { right: 20px; bottom: 20px; }
#pvg-player.pvg-player--bottom-left  { left: 20px;  bottom: 20px; }
#pvg-player.pvg-player--top-right    { right: 20px; top: 20px; }
#pvg-player.pvg-player--top-left     { left: 20px;  top: 20px; }

/* Once dragged, JS switches to explicit coordinates. */
#pvg-player.is-dragged {
	right: auto !important;
	bottom: auto !important;
	left: auto;
	top: auto;
}

@keyframes pvg-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#pvg-player.pvg-player { animation: none; }
	.pvg-slide__play { transition: none; }
}

#pvg-player .pvg-player__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 8px 8px 10px;
	background: #1c1c1c;
	touch-action: none;
}

#pvg-player.is-draggable .pvg-player__bar { cursor: grab; }
#pvg-player.is-dragging .pvg-player__bar  { cursor: grabbing; }

#pvg-player .pvg-player__grip {
	display: none;
	width: 12px;
	height: 10px;
	flex: 0 0 auto;
	background-image: linear-gradient(currentColor 2px, transparent 2px);
	background-size: 100% 4px;
	color: #7a7a7a;
}

#pvg-player.is-draggable .pvg-player__grip { display: block; }

#pvg-player .pvg-player__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: #f2f2f2;
	text-transform: none;
}

/* Themes love styling every button on the page — lock this one down. */
#pvg-player .pvg-player__close {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.14) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
	text-transform: none;
	letter-spacing: normal;
}

#pvg-player .pvg-player__close:hover,
#pvg-player .pvg-player__close:focus-visible {
	background: rgba(255, 255, 255, 0.28) !important;
	color: #fff !important;
	transform: none;
}

#pvg-player .pvg-player__close svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
}

#pvg-player .pvg-player__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pvg-aspect, 1.7778);
	background: #000;
	line-height: 0;
}

#pvg-player .pvg-player__media iframe,
#pvg-player .pvg-player__media video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	display: block;
	background: #000;
	object-fit: contain;
}

/* Portrait videos fill the frame edge to edge. */
#pvg-player.is-portrait .pvg-player__media video {
	object-fit: cover;
}

@media (max-width: 600px) {
	#pvg-player.pvg-player {
		width: var(--pvg-width, 200px);
		max-width: calc(100vw - 24px);
	}
	#pvg-player.pvg-player--top-left,
	#pvg-player.pvg-player--top-right { top: 12px; }
	#pvg-player.pvg-player--bottom-left,
	#pvg-player.pvg-player--bottom-right { bottom: 12px; }
	#pvg-player.pvg-player--bottom-right,
	#pvg-player.pvg-player--top-right { right: 12px; }
	#pvg-player.pvg-player--bottom-left,
	#pvg-player.pvg-player--top-left { left: 12px; }

	/* Dragging works on touch too — a slightly taller bar to grab. */
	#pvg-player .pvg-player__bar { padding: 10px 8px 10px 10px; }
	#pvg-player.is-draggable .pvg-player__grip { display: block; }
	#pvg-player .pvg-player__close { width: 30px !important; height: 30px !important; }
}