/**
 * Image Carousel — Pagination Background base styles
 *
 * Scoped to .elementor-widget-image-carousel so other carousel
 * widgets (Testimonial Carousel, etc.) are NOT affected.
 *
 * These structural rules ensure the .swiper-pagination container
 * can act as a centered pill/background behind the dots.
 * The actual values (color, padding, radius) come from Elementor
 * controls via inline selectors — this file only sets the layout.
 */

/* Make the pagination container an inline-level centered block
   so width: fit-content works and it stays centered. */
.elementor-widget-image-carousel .swiper-pagination {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	/* Transition for smooth editor preview updates */
	transition: background-color 0.25s ease,
	            padding 0.25s ease,
	            border-radius 0.25s ease;
}

/* Ensure bullets inside the pill don't break layout */
.elementor-widget-image-carousel .swiper-pagination .swiper-pagination-bullet {
	position: relative;
	flex-shrink: 0;
}