/**
 * ShopKart Image Slider — Widget Styles
 * Pure clean slider: no arrows, no dots, no titles, no hover effects.
 *
 * v1.6.9: Pre-init layout via CSS variables + flex/calc to prevent
 * dimension dance / FOUC on first page load. Slides take their final
 * width BEFORE Swiper JS initializes, so there is no visible reflow
 * when Swiper takes over.
 */

.sksa-slider {
	width: 100%;
	margin: 0;
	padding: 0;
	/* Defaults — overridden inline by widget render() */
	--sksa-desktop: 3;
	--sksa-tablet: 2;
	--sksa-mobile: 1;
	--sksa-gap: 0px;
}

.sksa-slider .swiper-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
}

.sksa-slider .swiper-slide {
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;

	/* Pre-init sizing — mirrors Swiper's flex-shrink: 0 + width calc.
	   Mobile (default): width = (100% - gaps) / count, with margin-right for gap. */
	flex-shrink: 0;
	width: calc((100% - (var(--sksa-mobile) - 1) * var(--sksa-gap)) / var(--sksa-mobile));
	margin-right: var(--sksa-gap);
}

.sksa-slider .swiper-slide:last-child {
	margin-right: 0;
}

@media (min-width: 768px) {
	.sksa-slider .swiper-slide {
		width: calc((100% - (var(--sksa-tablet) - 1) * var(--sksa-gap)) / var(--sksa-tablet));
	}
}

@media (min-width: 1024px) {
	.sksa-slider .swiper-slide {
		width: calc((100% - (var(--sksa-desktop) - 1) * var(--sksa-gap)) / var(--sksa-desktop));
	}
}

/* Once Swiper initializes, it sets its own inline width + margin-right via JS.
   Reset our pre-init margin so it doesn't conflict with Swiper's spaceBetween. */
.sksa-slider.swiper-initialized .swiper-slide {
	margin-right: 0;
}

/* Special effects (fade, cards, coverflow, creative-*) — Swiper forces
   slidesPerView: 1 or centered layout. Slides should be full width pre-init. */
.sksa-slider.sksa-effect-fade .swiper-slide,
.sksa-slider.sksa-effect-cards .swiper-slide,
.sksa-slider.sksa-effect-coverflow .swiper-slide,
.sksa-slider.sksa-effect-creative-zoom .swiper-slide,
.sksa-slider.sksa-effect-creative-flip .swiper-slide {
	width: 100%;
	margin-right: 0;
}

.sksa-slider .swiper-slide a {
	display: block;
	width: 100%;
	text-decoration: none;
}

.sksa-slider .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 100%;
}

/* ============================================================
 *  Pagination — classic dots, OVERLAY on slider (inside image)
 * ============================================================ */

.sksa-slider {
	/* Swiper pagination CSS API — values overridden inline by Elementor controls. */
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #ffffff;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-horizontal-gap: 5px;
	--swiper-pagination-bottom: 12px;
}

/* Pagination sits inside .swiper (overlay) — Swiper handles absolute positioning.
   We just keep horizontal padding so dots don't touch the edge in left/right alignment. */
.sksa-slider .sksa-pagination {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
	z-index: 2;
}

.sksa-slider .sksa-pagination .swiper-pagination-bullet {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.sksa-slider .sksa-pagination .swiper-pagination-bullet-active {
	transform: scale(1.25);
}

/* ============================================================
 * Randomize: pre-init hide
 * Prevents the flash where the original (non-shuffled) slide
 * order is briefly visible before JS runs the Fisher-Yates
 * shuffle and Swiper initializes. Slider stays at opacity 0
 * until both shuffle + Swiper init complete (sksa-rand-ready
 * class added by JS), then fades in smoothly.
 * ============================================================ */

.sksa-slider[data-sksa-randomize="1"]:not(.sksa-rand-ready) {
	opacity: 0;
}

.sksa-slider[data-sksa-randomize="1"].sksa-rand-ready {
	opacity: 1;
	transition: opacity 0.25s ease;
}