/* Flexible Slide — scoped so it does not pollute Hero / other Swipers */

.ababil_flexible_slide {
	position: relative;
	width: 100%;
	height: auto;
}

.ababil-flexible-slide-target,
.ababil-flexible-slide-swiper-root {
	position: relative;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

.ababil-flexible-slide-target.swiper,
.ababil-flexible-slide-target.swiper-initialized,
.ababil-flexible-slide-swiper-root.swiper,
.ababil-flexible-slide-swiper-root.swiper-initialized {
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* Full width — allow overflow so hover lifts / outside pagination are not cut off */
.ababil-fs-content-width-full.ababil-flexible-slide-target,
.ababil-fs-content-width-full.ababil-flexible-slide-swiper-root,
.ababil-fs-content-width-full .ababil-flexible-slide-swiper-root {
	width: 100%;
	max-width: none;
	overflow: visible !important;
}

.ababil-fs-content-width-full.ababil-flexible-slide-target.swiper,
.ababil-fs-content-width-full.ababil-flexible-slide-swiper-root.swiper {
	overflow: visible !important;
}

/* Center Slides: clip X so adjacent cards never show as half items */
.ababil-fs-centered.ababil-flexible-slide-target,
.ababil-fs-centered.ababil-flexible-slide-swiper-root,
.ababil-fs-centered .ababil-flexible-slide-swiper-root,
.ababil-fs-centered.ababil-flexible-slide-target.swiper,
.ababil-fs-centered.ababil-flexible-slide-swiper-root.swiper,
.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-target,
.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-swiper-root,
.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-target.swiper,
.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-swiper-root.swiper {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

@supports not (overflow-x: clip) {
	.ababil-fs-centered.ababil-flexible-slide-target,
	.ababil-fs-centered.ababil-flexible-slide-swiper-root,
	.ababil-fs-centered .ababil-flexible-slide-swiper-root,
	.ababil-fs-centered.ababil-flexible-slide-target.swiper,
	.ababil-fs-centered.ababil-flexible-slide-swiper-root.swiper,
	.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-target,
	.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-swiper-root,
	.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-target.swiper,
	.ababil-fs-content-width-full.ababil-fs-centered.ababil-flexible-slide-swiper-root.swiper {
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}
}

/* Boxed — keep slides inside the box horizontally; Y stays open for hover + dots.
   Only set horizontal auto margins so Elementor margin-top/bottom still work. */
.ababil-fs-content-width-boxed.ababil-flexible-slide-target,
.ababil-fs-content-width-boxed.ababil-flexible-slide-swiper-root,
.ababil-fs-content-width-boxed .ababil-flexible-slide-swiper-root,
.e-con-boxed.ababil-flexible-slide-target,
.e-con-boxed.ababil-flexible-slide-target .ababil-flexible-slide-swiper-root {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.ababil-fs-content-width-boxed.ababil-flexible-slide-target.swiper,
.ababil-fs-content-width-boxed.ababil-flexible-slide-swiper-root.swiper,
.e-con-boxed.ababil-flexible-slide-target.swiper,
.e-con-boxed.ababil-flexible-slide-target .ababil-flexible-slide-swiper-root.swiper {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* Older engines without overflow: clip */
@supports not (overflow-x: clip) {
	.ababil-fs-content-width-boxed.ababil-flexible-slide-target,
	.ababil-fs-content-width-boxed.ababil-flexible-slide-swiper-root,
	.ababil-fs-content-width-boxed .ababil-flexible-slide-swiper-root,
	.e-con-boxed.ababil-flexible-slide-target,
	.e-con-boxed.ababil-flexible-slide-target .ababil-flexible-slide-swiper-root,
	.ababil-fs-content-width-boxed.ababil-flexible-slide-target.swiper,
	.ababil-fs-content-width-boxed.ababil-flexible-slide-swiper-root.swiper,
	.e-con-boxed.ababil-flexible-slide-target.swiper,
	.e-con-boxed.ababil-flexible-slide-target .ababil-flexible-slide-swiper-root.swiper {
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}
}

.ababil-flexible-slide-target .swiper-wrapper,
.ababil-flexible-slide-swiper-root .swiper-wrapper {
	box-sizing: border-box;
	/* Keep hover transforms on slides paintable above siblings */
	overflow: visible;
}

.ababil-flexible-slide-target .swiper-slide,
.ababil-flexible-slide-swiper-root .swiper-slide {
	height: auto;
	box-sizing: border-box;
	min-width: 0;
	flex-shrink: 0;
	overflow: visible;
	/* Preserve Elementor margin/padding on slide item containers */
}

/* Keep Elementor container styles (margin, gap, etc.) while letting Swiper own width */
.ababil-flexible-slide-target .swiper-slide.e-con,
.ababil-flexible-slide-swiper-root .swiper-slide.e-con {
	/* Swiper sets inline width — don't fight Elementor margins */
	max-width: none;
}

.ababil-flexible-slide-target .swiper-slide > *,
.ababil-flexible-slide-swiper-root .swiper-slide > * {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Arrow chrome — colors/sizes come from PHP-injected CSS on the assigned container */
.ababil-flexible-slide-target .swiper-button-next,
.ababil-flexible-slide-target .swiper-button-prev,
.ababil-flexible-slide-swiper-root .swiper-button-next,
.ababil-flexible-slide-swiper-root .swiper-button-prev {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border-radius: 4px;
	color: currentColor;
	width: 44px;
	height: 44px;
	margin-top: 0;
	transform: translateY(-50%);
	top: 50%;
	transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	z-index: 10;
}

.ababil-flexible-slide-target .swiper-button-next:hover,
.ababil-flexible-slide-target .swiper-button-prev:hover,
.ababil-flexible-slide-swiper-root .swiper-button-next:hover,
.ababil-flexible-slide-swiper-root .swiper-button-prev:hover {
	opacity: 0.85;
}

.ababil-flexible-slide-target .swiper-button-next:after,
.ababil-flexible-slide-target .swiper-button-prev:after,
.ababil-flexible-slide-swiper-root .swiper-button-next:after,
.ababil-flexible-slide-swiper-root .swiper-button-prev:after {
	font-size: 16px;
	font-weight: bold;
}

.ababil-flexible-slide-target .swiper-button-next svg,
.ababil-flexible-slide-target .swiper-button-prev svg,
.ababil-flexible-slide-swiper-root .swiper-button-next svg,
.ababil-flexible-slide-swiper-root .swiper-button-prev svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Bullet defaults — overridden by container-scoped Style CSS from PHP */
.ababil-flexible-slide-target .swiper-pagination,
.ababil-flexible-slide-swiper-root .swiper-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	width: 100%;
	z-index: 10;
	/* Allow placing bullets below the track via bottom / negative offsets */
	pointer-events: auto;
}

.ababil-flexible-slide-target .swiper-pagination-bullet,
.ababil-flexible-slide-swiper-root .swiper-pagination-bullet {
	opacity: 0.4;
	box-sizing: border-box;
	margin: 0 !important;
}

.ababil-flexible-slide-target .swiper-pagination-bullet-active,
.ababil-flexible-slide-swiper-root .swiper-pagination-bullet-active {
	opacity: 1;
}

@media (max-width: 767px) {
	.ababil-flexible-slide-target .swiper-button-next,
	.ababil-flexible-slide-target .swiper-button-prev,
	.ababil-flexible-slide-swiper-root .swiper-button-next,
	.ababil-flexible-slide-swiper-root .swiper-button-prev {
		width: 32px;
		height: 32px;
	}
}