/* ─── Helios Carousel ────────────────────────────────────────────────────────
   Standalone carousel layout. Mirrors Elementor Pro Nested Carousel layout
   using --helios-carousel-* CSS variables set by widget controls.
   ─────────────────────────────────────────────────────────────────────────── */

.helios-carousel {
	position: relative;
	overflow: hidden;
	--helios-carousel-swiper-slides-to-display: 3;
	--helios-carousel-swiper-slides-gap: 10px;
	--helios-carousel-swiper-offset-size: 0px;
	--helios-carousel-slide-height: auto;
	--helios-carousel-slide-container-height: 100%;
}

.helios-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.helios-carousel .swiper-slide {
	flex-shrink: 0;
	width: calc(
		(100% - (var(--helios-carousel-swiper-slides-to-display) - 1) * var(--helios-carousel-swiper-slides-gap))
		/ var(--helios-carousel-swiper-slides-to-display)
	);
	margin-inline-end: var(--helios-carousel-swiper-slides-gap);
	height: var(--helios-carousel-slide-height);
	min-height: 200px;
}

.helios-carousel .swiper-slide > .e-con {
	height: var(--helios-carousel-slide-container-height);
}

/* Last slide has no trailing gap */
.helios-carousel.swiper-rtl .swiper-slide {
	margin-inline-end: 0;
	margin-inline-start: var(--helios-carousel-swiper-slides-gap);
}

/* ── Arrows ────────────────────────────────────────────────────────────────── */
.helios-carousel .elementor-swiper-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--helios-carousel-arrow-normal-color, #fff);
	font-size: 24px;
	width: 40px;
	height: 40px;
}

.helios-carousel .elementor-swiper-button:hover {
	color: var(--helios-carousel-arrow-hover-color, #fff);
}

.helios-carousel .elementor-swiper-button-prev {
	inset-inline-start: 10px;
}

.helios-carousel .elementor-swiper-button-next {
	inset-inline-end: 10px;
}

.helios-carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.helios-carousel .swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}

.helios-carousel .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	border-radius: 50%;
	background: var(--helios-carousel-pagination-color, rgba(0, 0, 0, 0.35));
	opacity: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.helios-carousel .swiper-pagination-bullet-active {
	background: var(--helios-carousel-pagination-active-color, #000);
}

.helios-carousel .swiper-pagination-fraction,
.helios-carousel .swiper-pagination-progressbar {
	color: var(--helios-carousel-pagination-color, #000);
}