/* Carousel block. Splide's theme (splide.min.css) draws arrows + dots; this file lays out the slides. */
.wb-carousel .wb-carousel__slide {
	display: flex; /* every slide box stretches to the tallest slide */
}
.wb-carousel .wb-carousel__slide > .wab-nested-item {
	width: 100%;
	min-width: 0;
}
/* A slide holding one container: the container fills the slide too (Elementor's nested carousel). */
.wb-carousel .wb-carousel__slide > .wab-nested-item > .wab-econ:only-child {
	height: 100%;
}

/* Splide's arrows and dots are <button>s: undo theme button styles (padding, borders,
   min sizes, backgrounds on hover) so only Splide's theme + the block's controls apply. */
.wb-carousel .splide__arrow,
.wb-carousel .splide__pagination__page {
	padding: 0;
	margin: 3px;
	border: 0;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	text-transform: none;
	line-height: 0;
}
.wb-carousel .splide__arrow {
	margin: 0;
}
.wb-carousel .splide__arrow:focus:not(:focus-visible),
.wb-carousel .splide__pagination__page:focus:not(:focus-visible) {
	outline: none;
}

/* Dots below the slides instead of over them. */
.wb-carousel .splide__pagination {
	position: static;
	padding: 0;
}
/* Default Spacing Above (zero specificity: the control always wins). */
:where(.wb-carousel .splide__pagination) { margin-top: 20px; }
.wb-carousel .splide__pagination__page {
	position: relative;
	transition: transform .2s linear, background-color .2s;
}

/*
 * Timer ring (Autoplay + Pagination + Timer Ring): a ring around the active dot that fills
 * clockwise over the autoplay interval. The pagination list carries .wb-dot-timer (added by
 * frontend.js after Splide mounts, and by editor.js on the canvas) and --wb-dot-progress
 * (0–360deg): on the frontend Splide's autoplay rate drives it every frame, so the ring pauses
 * and resets with the autoplay; the editor shows it part-filled, since nothing plays there.
 * The ring is a conic gradient cut to a band by a radial mask.
 */
.splide__pagination {
	--wb-dot-ring-width: 2px;
	--wb-dot-ring-offset: 3px;
}
.splide__pagination.wb-dot-timer .splide__pagination__page.is-active::after {
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--wb-dot-ring-offset) + var(--wb-dot-ring-width)));
	border-radius: 50%;
	background: conic-gradient(var(--wb-dot-ring-color, currentColor) var(--wb-dot-progress, 0deg), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--wb-dot-ring-width) - 0.5px), #000 calc(100% - var(--wb-dot-ring-width) + 0.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - var(--wb-dot-ring-width) - 0.5px), #000 calc(100% - var(--wb-dot-ring-width) + 0.5px));
	pointer-events: none;
}

/*
 * Bars (Pagination Style: Bars): every page is a bar, the active one fills from the left with
 * the Active Color. With the timer on, the fill grows over the autoplay interval
 * (--wb-dot-rate, 0–1, set by frontend.js); without it the active bar is full. The list
 * carries .wb-pagination--bars (frontend.js on every pagination mount, editor.js on the
 * canvas). The rules are specific enough to beat the Color / Active Color controls' own
 * background rules, which are written for dots; bars take those colours as variables.
 */
.splide__pagination.wb-pagination--bars li {
	line-height: 0;
}
/* Default sizes are var() fallbacks: declaring the variables here would tie with the controls' rules. */
.wb-carousel .splide__pagination.wb-pagination--bars .splide__pagination__page {
	width: var(--wb-bar-width, 32px);
	height: var(--wb-bar-height, 4px);
	border-radius: var(--wb-bar-radius, 2px);
	background: var(--wb-dot-color, rgba(0, 0, 0, .15));
	opacity: 1;
	overflow: hidden;
	transform: none;
}
.wb-carousel .splide__pagination.wb-pagination--bars .splide__pagination__page.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0; /* undo the dots' timer ring (rules above) */
	-webkit-mask: none;
	mask: none;
	background: var(--wb-dot-active-color, currentColor);
	transform-origin: left center;
	transform: scaleX(1);
	pointer-events: none;
}
.wb-carousel .splide__pagination.wb-pagination--bars.wb-dot-timer .splide__pagination__page.is-active::after {
	transform: scaleX(var(--wb-dot-rate, 0));
}
.splide__pagination--rtl.wb-pagination--bars .splide__pagination__page.is-active::after {
	transform-origin: right center;
}
/* Full Width: the bars share the row. */
.splide__pagination.wb-pagination--stretch {
	flex-wrap: nowrap;
}
.splide__pagination.wb-pagination--stretch li {
	flex: 1 1 0;
	min-width: 0;
}
.wb-carousel .splide__pagination.wb-pagination--stretch .splide__pagination__page {
	width: 100%;
}

/*
 * Before Splide mounts (and with JS off): the same row Splide will draw, so the
 * first paint matches and nothing shifts when it mounts. Slides Per View and Gap
 * come from the block as CSS variables, per breakpoint; Fade (no per-view
 * setting) falls back to 1.
 */
.wb-carousel .splide:not(.is-initialized) {
	visibility: visible;
}
.wb-carousel .splide:not(.is-initialized) .splide__track {
	overflow: hidden;
}
.wb-carousel .splide:not(.is-initialized) .splide__list {
	display: flex;
	gap: var(--wb-carousel-gap, 20px);
}
.wb-carousel .splide:not(.is-initialized) .splide__slide {
	flex: 0 0 calc((100% - (var(--wb-carousel-per-page, 1) - 1) * var(--wb-carousel-gap, 20px)) / var(--wb-carousel-per-page, 1));
}