/* ==========================================================================
   Elementor Content Slider Widget — Styles
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper & viewport
   -------------------------------------------------------------------------- */
.ecsw-slider-wrapper {
	position: relative;
	width: 100%;
	/* overflow removed — .ecsw-slider-viewport handles slide clipping
	   so arrows/dots can be placed outside the viewport area */
	user-select: none;
}

.ecsw-slider-viewport {
	overflow: hidden;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Track & slide
   -------------------------------------------------------------------------- */
.ecsw-slider-track {
	display: flex;
	will-change: transform;
	/* transition is set dynamically via JS */
}

.ecsw-slide {
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 400px;
	background-color: #7a9cc6; /* overridden by Elementor control */
}

/* --------------------------------------------------------------------------
   Inner two-column layout
   -------------------------------------------------------------------------- */
.ecsw-slide__inner {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	min-height: inherit;
	box-sizing: border-box;
}

.ecsw-layout--left  { flex-direction: row; }
.ecsw-layout--right { flex-direction: row-reverse; }

.ecsw-layout-desktop-row .ecsw-slide__inner { flex-direction: row !important; }
.ecsw-layout-desktop-row-reverse .ecsw-slide__inner { flex-direction: row-reverse !important; }
.ecsw-layout-desktop-column .ecsw-slide__inner,
.ecsw-layout-desktop-column-reverse .ecsw-slide__inner {
	flex-direction: column !important;
	height: auto !important;
}

.ecsw-layout-desktop-column .ecsw-slide__image,
.ecsw-layout-desktop-column .ecsw-slide__content,
.ecsw-layout-desktop-column-reverse .ecsw-slide__image,
.ecsw-layout-desktop-column-reverse .ecsw-slide__content {
	flex: 0 0 auto !important;
	max-width: 100% !important;
	width: 100% !important;
}

.ecsw-layout-desktop-column-reverse .ecsw-slide__image {
	order: 2;
}

.ecsw-layout-desktop-column-reverse .ecsw-slide__content {
	order: 1;
}

/* --------------------------------------------------------------------------
   Image column
   -------------------------------------------------------------------------- */
.ecsw-slide__image {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	/* overflow:hidden is injected via Elementor border-radius selector;
	   set it here too as a reliable baseline so radius always clips */
	overflow: hidden;
}

.ecsw-slide__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 400px;
	object-fit: contain;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.ecsw-slide__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 50px 40px 40px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.ecsw-slide__title {
	margin: 0 0 12px;
	padding: 0;
	color: #ffffff;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.25;
}

.ecsw-slide__subtitle {
	margin: 0 0 16px;
	padding: 0;
	color: #e0eaf5;
	font-size: 1em;
	font-weight: 600;
}

.ecsw-slide__text {
	color: #f0f4f8;
	font-size: 0.95em;
	line-height: 1.7;
}

.ecsw-slide__text p {
	margin: 0 0 0.8em;
	padding: 0;
}

.ecsw-slide__text p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.ecsw-slide__btn {
	display: inline-block;
	margin-top: 24px;
	padding: 10px 24px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.25s ease, transform 0.2s ease;
	align-self: flex-start;
}

.ecsw-slide__btn:hover {
	background-color: rgba(255, 255, 255, 0.35);
	transform: translateY(-2px);
	text-decoration: none;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Navigation arrows
   -------------------------------------------------------------------------- */
.ecsw-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 1.8em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
	padding: 0;
	-webkit-appearance: none;
}

.ecsw-nav:hover {
	background-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-50%) scale(1.08);
}

/* Arrows — inside (default) */
.ecsw-arrows-inside .ecsw-nav--prev { left: 16px; }
.ecsw-arrows-inside .ecsw-nav--next { right: 16px; }

/* Arrows — outside: protrude beyond the slide viewport */
.ecsw-arrows-outside .ecsw-nav--prev { left: -52px; }
.ecsw-arrows-outside .ecsw-nav--next { right: -52px; }

/* Fallback for wrappers without explicit location class */
.ecsw-nav--prev { left: 16px; }
.ecsw-nav--next { right: 16px; }

.ecsw-nav.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Navigation dots
   -------------------------------------------------------------------------- */
.ecsw-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 16px 0 4px;
	margin-top: 20px;
}

.ecsw-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.25s ease, transform 0.25s ease;
	-webkit-appearance: none;
	flex-shrink: 0;
}

.ecsw-dot.is-active,
.ecsw-dot:hover {
	background-color: #ffffff;
}

.ecsw-dot.is-active {
	transform: scale(1.3);
}

/* Dots — inside: overlay at the bottom of the slide */
.ecsw-dots-inside .ecsw-dots {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	margin-top: 0;
	padding: 0;
	z-index: 10;
}

/* --------------------------------------------------------------------------
   Responsive — stack columns on mobile
   -------------------------------------------------------------------------- */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.ecsw-layout-tablet-row .ecsw-slide__inner { flex-direction: row !important; }
	.ecsw-layout-tablet-row-reverse .ecsw-slide__inner { flex-direction: row-reverse !important; }

	.ecsw-layout-tablet-column .ecsw-slide__inner,
	.ecsw-layout-tablet-column-reverse .ecsw-slide__inner {
		flex-direction: column !important;
		height: auto !important;
	}

	.ecsw-layout-tablet-column .ecsw-slide__image,
	.ecsw-layout-tablet-column .ecsw-slide__content,
	.ecsw-layout-tablet-column-reverse .ecsw-slide__image,
	.ecsw-layout-tablet-column-reverse .ecsw-slide__content {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.ecsw-layout-tablet-column-reverse .ecsw-slide__image {
		order: 2;
	}

	.ecsw-layout-tablet-column-reverse .ecsw-slide__content {
		order: 1;
	}
}

@media ( max-width: 767px ) {
	.ecsw-layout-mobile-row .ecsw-slide__inner { flex-direction: row !important; }
	.ecsw-layout-mobile-row-reverse .ecsw-slide__inner { flex-direction: row-reverse !important; }

	.ecsw-layout-mobile-column .ecsw-slide__inner,
	.ecsw-layout-mobile-column-reverse .ecsw-slide__inner {
		flex-direction: column !important;
		height: auto !important;
	}

	.ecsw-layout-mobile-column .ecsw-slide__image,
	.ecsw-layout-mobile-column .ecsw-slide__content,
	.ecsw-layout-mobile-column-reverse .ecsw-slide__image,
	.ecsw-layout-mobile-column-reverse .ecsw-slide__content {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.ecsw-layout-mobile-column-reverse .ecsw-slide__image {
		order: 2;
	}

	.ecsw-layout-mobile-column-reverse .ecsw-slide__content {
		order: 1;
	}

	.ecsw-nav--prev { left: 8px; }
	.ecsw-nav--next { right: 8px; }
}