/*
 * Repeaterly Pro — carousel navigation.
 *
 * Arrows and dots are rendered outside `.swiper` so that Elementor's and Swiper's
 * own navigation rules — all prefixed with `.swiper ` or `.swiper ~ ` — cannot
 * reach them. That gives us sole ownership of the geometry, but it also means
 * everything Elementor used to provide has to be reproduced here.
 *
 *   .repeaterly-carousel-wrap
 *     .repeaterly-carousel-viewport      positioning context == the track box
 *       .swiper.repeaterly-carousel
 *       .repeaterly-carousel-nav         arrows, absolute over the track
 *     .repeaterly-carousel-pagination    dots, in normal flow below it
 *
 * Geometry runs through custom properties because Elementor can write those per
 * breakpoint from control `selectors`, which makes every knob responsive.
 */

.repeaterly-carousel-viewport {
	position: relative;
}

/* Before Swiper boots, every slide is `width: 100%` (swiper.css), so the track
   renders as one giant slide and then snaps. */
.repeaterly-carousel:not(.swiper-initialized) .swiper-slide {
	max-width: calc(100% / var(--repeaterly-slides-to-show, 1));
}

.repeaterly-carousel-nav {
	position: absolute;
	inset: 0;
	/* The nav box covers the whole track; only the arrows themselves click. */
	pointer-events: none;
}

.repeaterly-carousel-arrow {
	position: absolute;
	display: var(--repeaterly-arrows-display, inline-flex);
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	box-sizing: border-box;
	z-index: 2;
	cursor: pointer;
	/* Ported from e-swiper.css — the defaults arrows_size/arrows_color build on. */
	font-size: 25px;
	color: rgba(238, 238, 238, 0.9);
	top: var(--repeaterly-arrows-y, 50%);
	/* `top: <%>` resolves against the nav box, `translateY(<%>)` against the
	   arrow's own height, so one variable yields top/middle/bottom. */
	transform: translateY(calc(-1 * var(--repeaterly-arrows-y, 50%) + var(--repeaterly-arrows-offset-y, 0px)));
	transition:
		color var(--repeaterly-arrows-transition, 0.3s),
		background-color var(--repeaterly-arrows-transition, 0.3s),
		border-color var(--repeaterly-arrows-transition, 0.3s),
		opacity var(--repeaterly-arrows-transition, 0.3s);
}

/* Ported from e-swiper.css. Without it an uploaded SVG renders at its intrinsic
   size and the Size control stops having any effect. */
.repeaterly-carousel-arrow svg {
	fill: rgba(238, 238, 238, 0.9);
	height: 1em;
	width: 1em;
}

/* Measured from the track edge: 0 is flush, negative pushes the arrow clear of
   the slides. 10px matches the old "Inside" rendering. */
.repeaterly-carousel-arrow--prev {
	left: var(--repeaterly-arrows-offset-x, 10px);
}

.repeaterly-carousel-arrow--next {
	right: var(--repeaterly-arrows-offset-x, 10px);
}

.repeaterly-carousel-arrow.swiper-button-disabled {
	opacity: var(--repeaterly-arrows-disabled-opacity, 0.3);
}

/* Swiper's own `swiper-button-lock` rule is 0,1,0 and loses to the rules above,
   which would leave dead arrows visible. */
.repeaterly-carousel-arrow.swiper-button-lock {
	display: none;
}

/*
 * Dots. Swiper still styles the bullets themselves — those selectors key off
 * classes on the pagination element, not off `.swiper` ancestry — so we only
 * take over placement. Normal flow instead of Swiper's `position: absolute`
 * means the dots reserve their own height, and `margin-top` alone covers the
 * whole range: positive pushes them below the track, negative lifts them over it.
 */
.repeaterly-carousel-wrap .repeaterly-carousel-pagination.swiper-pagination {
	position: relative;
	inset: auto;
	width: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--repeaterly-dots-align, center);
	margin-top: var(--repeaterly-dots-spacing, 19px);
	left: var(--repeaterly-dots-offset-x, 0px);
	top: var(--repeaterly-dots-offset-y, 0px);
	/* This box spans the full width at `z-index: 10`, so with a negative spacing
	   it would otherwise swallow drags on the bottom of every slide. */
	pointer-events: none;
}

.repeaterly-carousel-wrap .repeaterly-carousel-pagination .swiper-pagination-bullet {
	pointer-events: auto;
}

/* Same specificity trap as `.swiper-button-lock` above. */
.repeaterly-carousel-wrap .repeaterly-carousel-pagination.swiper-pagination.swiper-pagination-lock {
	display: none;
}

/*
 * ACF Image Carousel parity. That widget extends core's Image Carousel, but the
 * wrapper class is built from get_name(), so core's widget-image-carousel.css —
 * scoped to `.elementor-widget-image-carousel` — never matches. `position: static`
 * is the one that makes "Outside" work: it moves the arrows' containing block off
 * the narrowed `.swiper` and onto the widget wrapper.
 */
.elementor-widget-repeaterly-image-carousel .swiper {
	position: static;
}

.elementor-widget-repeaterly-image-carousel .swiper .swiper-slide figure {
	line-height: inherit;
}

.elementor-widget-repeaterly-image-carousel .swiper-slide {
	text-align: center;
}