/* EZ Youtube Carousel */

.ez-ytc-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: transparent;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;

	--ez-visible: 3;
	--ez-gap: 20px;
	--ez-radius: 10px;
	--ez-dim-opacity: 0.45;
}

.ez-ytc-carousel.ez-dragging { cursor: grabbing; }

/* ── Track ───────────────────────────────────────────────────────────────── */

.ez-ytc-track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

/* ── Slide ───────────────────────────────────────────────────────────────── */

.ez-ytc-slide {
	flex-shrink: 0;
	position: relative;
	border-radius: var(--ez-radius, 10px);
	overflow: hidden;
	background: #111;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.ez-ytc-carousel.ez-has-active:not(.ez-no-dim) .ez-ytc-slide:not(.ez-active) {
	opacity: var(--ez-dim-opacity, 0.45);
	transform: scale(0.97);
}

/* ── Aspect-ratio wrapper ─────────────────────────────────────────────────── */

.ez-ytc-video-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ez-ytc-video-wrapper.ratio-16-9 { padding-bottom: 56.25%; }
.ez-ytc-video-wrapper.ratio-4-3  { padding-bottom: 75%; }
.ez-ytc-video-wrapper.ratio-1-1  { padding-bottom: 100%; }
.ez-ytc-video-wrapper.ratio-9-16 { padding-bottom: 177.78%; }

/* ── Thumbnail ───────────────────────────────────────────────────────────── */

.ez-ytc-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ez-ytc-video-placeholder {
	position: absolute;
	inset: 0;
	background: #1a1a1a;
}

/* ── Play button ─────────────────────────────────────────────────────────── */

.ez-ytc-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}

.ez-ytc-play-btn svg {
	width: 18%;
	max-width: 72px;
	min-width: 36px;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
	transition: transform 0.2s ease;
}

.ez-ytc-slide:hover .ez-ytc-play-btn svg { transform: scale(1.12); }

/* ── Slide iframe / video (hidden — popup takes over on click) ───────────── */

.ez-ytc-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: none;
	pointer-events: none;
}

/* ── Slide overlay (blocks iframe while scrolling) ───────────────────────── */

.ez-ytc-slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	cursor: pointer;
}

.ez-ytc-slide.ez-active .ez-ytc-slide-overlay { display: none; }

/* ── Placeholder (Elementor editor only) ─────────────────────────────────── */

.ez-ytc-placeholder {
	padding: 36px 16px;
	text-align: center;
	font-size: 14px;
	color: #999;
	background: rgba(0, 0, 0, 0.05);
	border: 1px dashed #ccc;
	border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   POPUP
   Positioned fixed; FLIP animation driven entirely by JS.
   No backdrop/overlay — just an expanding card with a strong shadow.
═══════════════════════════════════════════════════════════════════════════ */

.ez-ytc-popup {
	position: fixed;
	z-index: 999999;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	/* start hidden */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* only transform and opacity are GPU-composited — JS sets these */
	will-change: transform, opacity;
	box-shadow:
		0 2px 8px  rgba(0, 0, 0, 0.15),
		0 12px 40px rgba(0, 0, 0, 0.35),
		0 32px 90px rgba(0, 0, 0, 0.40);
}

.ez-ytc-popup.ez-popup-visible {
	visibility: visible;
	pointer-events: auto;
}

/* ── Popup inner ─────────────────────────────────────────────────────────── */

.ez-ytc-popup-inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
}

.ez-ytc-popup-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.ez-ytc-popup-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: none;
	background: #000;
}

/* ── Close button ────────────────────────────────────────────────────────── */

.ez-ytc-popup-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 20;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	/* hidden until popup is fully flagged as open */
	opacity: 0;
	transform: scale(0.55) rotate(-90deg);
	pointer-events: none;

	transition:
		opacity    0.28s ease,
		transform  0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
		background 0.18s ease;
}

/* appear after popup opens */
.ez-ytc-popup.ez-popup-open .ez-ytc-popup-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	pointer-events: auto;
	transition:
		opacity    0.28s ease           0.3s,
		transform  0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s,
		background 0.18s ease;
}

/* hover — reset delay so it's instant */
.ez-ytc-popup.ez-popup-open .ez-ytc-popup-close:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: scale(1.1) rotate(0deg);
	transition:
		opacity    0.15s ease,
		transform  0.18s ease,
		background 0.15s ease;
}

.ez-ytc-popup-close svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

/* ── Popup on small screens ──────────────────────────────────────────────── */

@media (max-width: 500px) {
	.ez-ytc-popup-close {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}
}