/* Container Slider — turns a native Elementor Container into a slider */

.ecs-slider-root {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	/* Full viewport width, even nested inside a boxed/centered ancestor. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Full viewport height on every device. 100dvh (dynamic viewport
	   height) accounts for mobile browser UI chrome showing/hiding;
	   browsers that don't support it simply ignore that line and keep
	   the 100vh fallback above. */
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Whichever element acts as the "viewport" (the Container itself, or its
   .e-con-inner wrapper depending on Elementor's markup mode) */
.ecs-slider-viewport {
	position: relative;
	height: 100%;
}

/* --- Crossfade transition (default): each slide stacked, absolute --- */
.ecs-slider-root[data-ecs-transition="fade"] .ecs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 700ms ease;
	overflow: auto;
}
.ecs-slider-root[data-ecs-transition="fade"] .ecs-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

/* --- Slide transition: children stay in flow, viewport translates --- */
.ecs-slider-root[data-ecs-transition="slide"] .ecs-slider-viewport {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0 !important;
	height: 100%;
	transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.ecs-slider-root[data-ecs-transition="slide"] .ecs-slide {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 100%;
}

/* Elementor's own native background video (Style > Background > Video on
   the slide container) — reinforce full-cover fill inside each slide,
   regardless of the slider's absolute positioning. No extra control is
   needed: Elementor already renders video backgrounds as autoplay, muted,
   with no visible player controls, and cover-fit — this just guarantees
   it stays that way inside a slide. */
.ecs-slide .elementor-background-video-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.ecs-slide .elementor-background-video-hosted,
.ecs-slide .elementor-background-video-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

.ecs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.ecs-arrow:hover,
.ecs-arrow:focus-visible {
	background: rgba(0, 0, 0, 0.55);
}
.ecs-prev { left: 16px; }
.ecs-next { right: 16px; }

.ecs-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.ecs-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}
.ecs-dot.is-active {
	background: #fff;
	transform: scale(1.35);
}

.ecs-arrow:focus-visible,
.ecs-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.ecs-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
	.ecs-prev  { left: 8px; }
	.ecs-next  { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.ecs-slide,
	.ecs-slider-root[data-ecs-transition="slide"] .ecs-slider-viewport {
		transition: none !important;
	}
}