/**
 * JWPlayer Modal Styles
 *
 * @package WooCommerce_JWPlayer_Integration
 */

/* Prevent body scroll when modal is open */
body.wc-jwplayer-modal-open {
	overflow: hidden;
}

/* Modal Container */
.wc-jwplayer-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: none; /* Hidden by default */
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wc-jwplayer-modal.wc-jwplayer-modal--active {
	display: flex !important; /* Show modal when active */
	opacity: 1;
	visibility: visible;
}

/* Dark Overlay */
.wc-jwplayer-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(5px);
}

/* Modal Content */
.wc-jwplayer-modal__content {
	position: relative;
	width: 90%;
	max-width: 1200px;
	max-height: 90vh;
	background-color: #000;
	border-radius: 8px;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Close Button */
.wc-jwplayer-modal__close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wc-jwplayer-modal__close:hover {
	background-color: #fff;
	transform: scale(1.1);
}

.wc-jwplayer-modal__close:active {
	transform: scale(0.95);
}

.wc-jwplayer-modal__close-icon {
	font-size: 28px;
	line-height: 1;
	color: #000;
	font-weight: 300;
}

/* JWPlayer Container */
.wc-jwplayer-modal__player {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	position: relative;
	background-color: #000;
}

.wc-jwplayer-modal__player [id^="jwplayer_"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Video Thumbnail - Match Gallery Thumbnail Styling */
.flex-control-thumbs li.wc-jwplayer-video-thumbnail-item,
.woocommerce-product-gallery__image.wc-jwplayer-video-thumbnail-item {
	display: inline-block;
	vertical-align: top;
	float: none;
	margin: 0;
	padding: 4px;
	list-style: none;
	width: auto; /* Will inherit from parent gallery columns */
	/* Ensure clickable on mobile */
	position: relative;
	z-index: 1;
}

/* MagicToolbox (Magic Zoom Plus) - Video thumbnail as <a> tag */
[id^="MagicToolboxSelectors"] a.wc-jwplayer-video-thumbnail {
	display: inline-block;
	vertical-align: top;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	background: transparent !important;
	background-image: none !important;
	/* Mobile touch improvements */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	z-index: 999 !important;
	/* Ensure it's above other elements */
	position: relative !important;
	/* Make sure pointer events work */
	pointer-events: auto !important;
}

/* Prevent MagicToolbox from applying product image styles to video thumbnail */
[id^="MagicToolboxSelectors"] a.wc-jwplayer-video-thumbnail img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	background: transparent !important;
	background-image: none !important;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

[id^="MagicToolboxSelectors"] a.wc-jwplayer-video-thumbnail:hover img {
	opacity: 1;
}

/* For Avada columns */
.woocommerce-product-gallery--columns-1 .wc-jwplayer-video-thumbnail-item {
	width: 100%;
}
.woocommerce-product-gallery--columns-2 .wc-jwplayer-video-thumbnail-item {
	width: 50%;
}
.woocommerce-product-gallery--columns-3 .wc-jwplayer-video-thumbnail-item {
	width: 33.3333%;
}
.woocommerce-product-gallery--columns-4 .wc-jwplayer-video-thumbnail-item {
	width: 25%;
}
.woocommerce-product-gallery--columns-5 .wc-jwplayer-video-thumbnail-item {
	width: 20%;
}
.woocommerce-product-gallery--columns-6 .wc-jwplayer-video-thumbnail-item {
	width: 16.6667%;
}

.wc-jwplayer-video-thumbnail-wrapper {
	position: relative;
	display: block;
	width: 100%;
	/* Ensure wrapper is clickable on mobile */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	z-index: 1;
}

.wc-jwplayer-video-thumbnail {
	cursor: pointer;
	position: relative;
	display: block;
	text-decoration: none;
	outline-offset: -2px;
	/* Mobile touch improvements */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	z-index: 1;
}

.wc-jwplayer-video-thumbnail-img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.5;
	transition: opacity 0.3s ease;
	background: transparent !important;
	background-image: none !important;
}

.wc-jwplayer-video-thumbnail:hover .wc-jwplayer-video-thumbnail-img,
.wc-jwplayer-video-thumbnail.active .wc-jwplayer-video-thumbnail-img {
	opacity: 1;
}

/* Ensure video thumbnail doesn't inherit product image backgrounds */
.wc-jwplayer-video-thumbnail,
.wc-jwplayer-video-thumbnail-wrapper,
.wc-jwplayer-video-thumbnail-item {
	background: transparent !important;
	background-image: none !important;
}

/* Play Icon Overlay - positioned on top of thumbnail */
.wc-jwplayer-video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	z-index: 0;
	/* Ensure play icon doesn't block touches */
	touch-action: none;
}

.wc-jwplayer-video-play-icon::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 18px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	margin-left: 3px;
}

.wc-jwplayer-video-thumbnail:hover .wc-jwplayer-video-play-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
	background-color: rgba(0, 0, 0, 0.85);
}
.single-product .MagicToolboxSelectorsContainer > div {
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 15px;
}
a.mz-thumb.wc-jwplayer-video-thumbnail img {
    height: 100% !important;
    object-fit: cover;
}

a.mz-thumb.wc-jwplayer-video-thumbnail {
    vertical-align: bottom;
}
/* Responsive */
@media (max-width: 768px) {
	.wc-jwplayer-modal__content {
		width: 95%;
		max-height: 85vh;
	}

	.wc-jwplayer-modal__close {
		width: 35px;
		height: 35px;
		top: 10px;
		right: 10px;
	}

	.wc-jwplayer-modal__close-icon {
		font-size: 24px;
	}
	.single-product .MagicToolboxSelectorsContainer > div {
		flex-wrap: wrap;
	}

	/* Enhanced mobile touch handling */
	.wc-jwplayer-video-thumbnail,
	.wc-jwplayer-video-thumbnail-wrapper,
	[id^="MagicToolboxSelectors"] a.wc-jwplayer-video-thumbnail {
		min-height: 44px; /* Minimum touch target size for mobile */
		min-width: 44px;
	}

	.wc-jwplayer-video-play-icon {
		width: 60px;
		height: 60px;
		/* Larger on mobile for better visibility */
	}
}