/* Valabi Video Gallery — frontend video slides + popup player.
   Kept theme-agnostic: only styles our own elements so it blends with any theme. */

.woocommerce-product-gallery .valabi-vg-slide {
	background: #0e0b0c;
}

/* Cell + poster image are width:100% (never intrinsic-driven), exactly like
   Flatsome/WooCommerce's own image cells — this is deliberate: a plain <img>
   can never fight the slider's own sizing/measurement logic. */
.valabi-vg-slide {
	width: 100%;
	max-width: 100%;
}

.valabi-vg-poster {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	cursor: pointer;
	background: #0e0b0c;
	overflow: hidden;
	line-height: 0;
}

.valabi-vg-poster-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	background: #0e0b0c;
}

/* Play badge over the main poster. */
.valabi-vg-play-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba( 0, 0, 0, 0.14 ) 0%,
		rgba( 0, 0, 0, 0.38 ) 100%
	);
}

.valabi-vg-play-badge > span {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.94 );
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.35 );
	transition: transform 0.2s ease, background 0.2s ease;
}

.valabi-vg-poster:hover .valabi-vg-play-badge > span,
.valabi-vg-poster:focus-visible .valabi-vg-play-badge > span {
	transform: scale( 1.06 );
	background: #fff;
}

.valabi-vg-poster:focus-visible {
	outline: 3px solid #8b1538;
	outline-offset: -3px;
}

.valabi-vg-play-badge > span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate( -50%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #8b1538;
}

@media ( max-width: 600px ) {
	.valabi-vg-play-badge > span {
		width: 56px;
		height: 56px;
	}
	.valabi-vg-play-badge > span::after {
		border-width: 10px 0 10px 17px;
	}
}

/* Flatsome nav thumbnail: keep the image filling the cell + a play badge. */
.valabi-vg-thumb-col {
	position: relative;
	cursor: pointer;
}

.valabi-vg-thumb-col a {
	position: relative;
	display: block;
}

.valabi-vg-thumb-col .valabi-vg-thumb-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.valabi-vg-thumb-col .valabi-vg-thumb-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	pointer-events: none;
}

.valabi-vg-thumb-col .valabi-vg-thumb-badge::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate( -50%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}

@media ( max-width: 600px ) {
	.valabi-vg-thumb-col .valabi-vg-thumb-badge {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================================
   Popup / lightbox player
   ========================================================================== */

body.valabi-vg-modal-open {
	overflow: hidden;
}

.valabi-vg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.valabi-vg-modal.is-open {
	display: flex;
}

.valabi-vg-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 8, 9, 0.86 );
	animation: valabi-vg-fade-in 0.18s ease;
}

.valabi-vg-modal__dialog {
	position: relative;
	z-index: 1;
	width: min( 1100px, 92vw );
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #0e0b0c;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.5 );
	animation: valabi-vg-pop-in 0.2s ease;
}

@keyframes valabi-vg-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes valabi-vg-pop-in {
	from {
		opacity: 0;
		transform: scale( 0.96 );
	}
	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

.valabi-vg-modal__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 10px 10px 16px;
	background: #171214;
	color: #f2ece9;
}

.valabi-vg-modal__title {
	font-size: 14px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.valabi-vg-modal__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	color: #f2ece9;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.valabi-vg-modal__close:hover,
.valabi-vg-modal__close:focus-visible {
	background: #8b1538;
}

.valabi-vg-modal__stage {
	flex: 1 1 auto;
	position: relative;
	min-height: 0;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.valabi-vg-modal__video {
	display: block;
	width: 100%;
	max-height: calc( 92vh - 60px );
	object-fit: contain;
	background: #000;
}

/* Mobile: near-fullscreen, always-reachable close button, safe-area aware. */
@media ( max-width: 600px ) {
	.valabi-vg-modal {
		padding: 0;
	}

	.valabi-vg-modal__dialog {
		width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
	}

	.valabi-vg-modal__bar {
		padding-top: calc( 10px + env( safe-area-inset-top, 0px ) );
		padding-left: calc( 16px + env( safe-area-inset-left, 0px ) );
		padding-right: calc( 10px + env( safe-area-inset-right, 0px ) );
	}

	.valabi-vg-modal__video {
		max-height: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.valabi-vg-modal__backdrop,
	.valabi-vg-modal__dialog {
		animation: none;
	}
}