/* ============================================================
   Video Testimonials — MOBILE CAROUSEL
   Native scroll-snap + peek. Bulletproof button resets.
   ============================================================ */
/* ---- Nuke inherited theme button styling inside the widget ---- */
.evt-section .evt-carousel-prev,
.evt-section .evt-carousel-next,
.evt-section .evt-carousel-dot,
.evt-section .evt-play {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0;
	padding: 0 !important;
	border: none !important;
	background-image: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-shadow: none;
	text-shadow: none;
	font-family: inherit;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ---- Track: horizontal scroll-snap ---- */
.evt-container {
	position: relative;
}

.evt-items {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	height: var(--evt-mobile-card-height);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 6px max(16px, 7.5%);
	scroll-padding: 0 max(16px, 7.5%);
}

.evt-items::-webkit-scrollbar { display: none; }

/* ---- Slides: ~86% width so neighbours peek ---- */
.evt-item {
	flex: 0 0 86%;
	min-width: 86%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	transform: scale(0.93);
	opacity: 0.5;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.evt-item.evt-incenter {
	transform: scale(1);
	opacity: 1;
}

/* ---- Play button — solid white circle ---- */
.evt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 84px !important;
	height: 84px !important;
	background: transparent !important;
	cursor: pointer;
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
	margin-top: -26px; /* lift above the name band */
}

/* Button stays a FIXED size — a stable hit area prevents the hover-scale
   flicker loop. The visual zoom lives on the inner SVG instead. */
.evt-play:hover,
.evt-play:focus,
.evt-play:active {
	background: transparent !important;
	transform: translate(-50%, -50%);
}
.evt-play svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
	transition: transform 0.18s ease;
}
.evt-play:hover svg,
.evt-play:focus svg {
	transform: scale(1.08);
}

/* ---- Arrows: clean white circles, crisp SVG chevron ---- */
.evt-section .evt-carousel-prev,
.evt-section .evt-carousel-next {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 10;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: rgba(255,255,255,0.96) !important;
	color: #111 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;
	transition: transform 0.15s ease, background 0.2s ease;
}

.evt-section .evt-carousel-prev { left: 4%; }
.evt-section .evt-carousel-next { right: 4%; }

.evt-section .evt-carousel-prev svg,
.evt-section .evt-carousel-next svg {
	width: 16px;
	height: 16px;
	display: block;
}

.evt-section .evt-carousel-prev:active,
.evt-section .evt-carousel-next:active {
	transform: translateY(-50%) scale(0.9);
}

/* ---- Dots: small dot → active widens to a pill ---- */
.evt-carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	padding: 16px 0 2px;
}

.evt-section .evt-carousel-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50px !important;
	background: rgba(0,0,0,0.2) !important;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.evt-section .evt-carousel-dot.evt-dot-active {
	width: 24px !important;
	background: var(--evt-accent) !important;
}