/**
 * CDSWerx Carousel styles.
 *
 * Faithful mirror of Elementor Pro's widget-nested-carousel.min.css (v3.32.0).
 * Only change: 'n-carousel' → 'cdswerx-carousel' in all selectors and CSS vars.
 * Note: The original has a typo (.swiper--slide double hyphen) in the pre-init
 * fallback — we fix it to .swiper-slide (single hyphen) so it actually works.
 */

/* ── Root custom properties ── */
.elementor-widget-cdswerx-carousel {
	--e-cdswerx-carousel-slides-to-show: 3;
	--e-cdswerx-carousel-swiper-slides-gap: 10px;
	--e-cdswerx-carousel-swiper-slides-to-display: 3;
	--e-cdswerx-carousel-swiper-pagination-size: 0;
	--e-cdswerx-carousel-swiper-pagination-spacing: 10px;
	/* Per-type sizes — independent so toggling one pagination type does not resize the others.
	   Each type's visual size CSS rule below reads from its own variable. The legacy
	   --e-cdswerx-carousel-swiper-pagination-size variable is retained ONLY for the
	   outside-position padding-bottom reservation (set by .e-cdswerx-has-*-yes classes). */
	--e-cdswerx-carousel-dots-size: 6px;
	--e-cdswerx-carousel-fraction-size: 16px;
	--e-cdswerx-carousel-progressbar-size: 4px;
	--e-cdswerx-carousel-swiper-offset-size: 0;
	height: -moz-fit-content;
	height: fit-content;
	--e-cdswerx-carousel-arrow-prev-top-align: 50%;
	--e-cdswerx-carousel-arrow-prev-top-position: 0px;
	--e-cdswerx-carousel-arrow-prev-caption-spacing: 15px;
	--e-cdswerx-carousel-arrow-next-top-align: 50%;
	--e-cdswerx-carousel-arrow-next-top-position: 0px;
	--e-cdswerx-carousel-arrow-next-caption-spacing: 15px;
	--e-cdswerx-carousel-arrow-prev-left-align: 0px;
	--e-cdswerx-carousel-arrow-prev-left-position: 0px;
	--e-cdswerx-carousel-arrow-next-right-align: 0px;
	--e-cdswerx-carousel-arrow-next-right-position: 0px;
	--e-cdswerx-carousel-arrow-next-translate-x: 0px;
	--e-cdswerx-carousel-arrow-next-translate-y: 0px;
	--e-cdswerx-carousel-arrow-prev-translate-x: 0px;
	--e-cdswerx-carousel-arrow-prev-translate-y: 0px;
	--e-cdswerx-carousel-swiper-padding-bottom: calc(var(--e-cdswerx-carousel-swiper-pagination-size) + var(--e-cdswerx-carousel-swiper-pagination-spacing));
	--e-cdswerx-carousel-dots-vertical-position: 100%;
	--e-cdswerx-carousel-dots-vertical-offset: 0px;
	--e-cdswerx-carousel-dots-horizontal-position: 50%;
	--e-cdswerx-carousel-dots-horizontal-offset: 0px;
	--e-cdswerx-carousel-dots-horizontal-transform: -50%;
	--e-cdswerx-carousel-dots-vertical-transform: -100%;
	--e-cdswerx-carousel-fraction-vertical-position: 100%;
	--e-cdswerx-carousel-fraction-vertical-offset: 0px;
	--e-cdswerx-carousel-fraction-horizontal-position: 50%;
	--e-cdswerx-carousel-fraction-horizontal-offset: 0px;
	--e-cdswerx-carousel-fraction-horizontal-transform: -50%;
	--e-cdswerx-carousel-fraction-vertical-transform: -100%;
	--direction-multiplier: 1;
}

/* ── Carousel container ── */
.elementor-widget-cdswerx-carousel .e-cdswerx-carousel {
	display: flex;
	min-width: 0;
}

/* ── Active slide in editor ── */
.elementor-widget-cdswerx-carousel .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide-active.elementor-edit-area-active {
	overflow: initial;
}

/* ── Offset handling ── */
.elementor-widget-cdswerx-carousel .e-cdswerx-carousel.offset-left {
	padding-inline-start: var(--e-cdswerx-carousel-swiper-offset-size, 0);
}

.elementor-widget-cdswerx-carousel .e-cdswerx-carousel.offset-both,
.elementor-widget-cdswerx-carousel .e-cdswerx-carousel.offset-right {
	padding-inline-end: var(--e-cdswerx-carousel-swiper-offset-size, 0);
}

.elementor-widget-cdswerx-carousel .e-cdswerx-carousel.offset-both {
	padding-inline-start: var(--e-cdswerx-carousel-swiper-offset-size, 0);
}

/* ── Slide wrappers ── */
.elementor-widget-cdswerx-carousel .e-cdswerx-carousel > .swiper-wrapper .swiper-slide a.e-con {
	display: var(--display);
}

.elementor-widget-cdswerx-carousel .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide {
	flex-shrink: 0;
	height: var(--e-cdswerx-carousel-slide-height, initial);
}

.elementor-widget-cdswerx-carousel .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide > .e-con {
	height: var(--e-cdswerx-carousel-slide-container-height, initial);
	max-width: calc(100% - var(--margin-inline-start, var(--margin-left)) - var(--margin-inline-end, var(--margin-right)));
}

/* Equal-height mode: `.swiper-slide` has `height: auto` declared and is only
   stretched at *used* height by flex `align-items: stretch`. Blink and Gecko
   don't accept a flex-stretched used-height as a definite reference for child
   `height: 100%` resolution (WebKit does, hence iOS works while Chrome/Firefox
   don't). Use flex-grow instead — engine-agnostic and works at every viewport. */
.elementor-widget-cdswerx-carousel.e-cdswerx-equal-height-yes .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide {
	display: flex;
	flex-direction: column;
}

.elementor-widget-cdswerx-carousel.e-cdswerx-equal-height-yes .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide > .e-con {
	flex-grow: 1;
}

/* ── Arrow Buttons ── */
.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-next,
.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-prev {
	border-style: var(--e-cdswerx-carousel-arrow-normal-border-type);
	color: var(--e-cdswerx-carousel-arrow-normal-color, currentColor);
	font-size: var(--e-cdswerx-carousel-arrow-size, 25px);
	transition-duration: 0.25s;
	z-index: 2;
}

.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-next svg,
.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-prev svg {
	fill: var(--e-cdswerx-carousel-arrow-normal-color, currentColor);
}

.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-next:hover,
.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover {
	border-style: var(--e-cdswerx-carousel-arrow-hover-border-type);
	color: var(--e-cdswerx-carousel-arrow-hover-color, currentColor);
}

.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-next:hover svg,
.elementor-widget-cdswerx-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover svg {
	fill: var(--e-cdswerx-carousel-arrow-hover-color, currentColor);
}

/* ── Arrow positioning (per-arrow calc, mirrors original exactly) ── */
.elementor-widget-cdswerx-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next {
	right: calc(var(--e-cdswerx-carousel-arrow-next-right-align) + var(--e-cdswerx-carousel-arrow-next-right-position));
	top: calc(var(--e-cdswerx-carousel-arrow-next-top-align) + var(--e-cdswerx-carousel-arrow-next-top-position) - var(--e-cdswerx-carousel-arrow-next-caption-spacing));
	transform: translate(var(--e-cdswerx-carousel-arrow-next-translate-x), var(--e-cdswerx-carousel-arrow-next-translate-y));
}

.elementor-widget-cdswerx-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev {
	left: calc(var(--e-cdswerx-carousel-arrow-prev-left-align) + var(--e-cdswerx-carousel-arrow-prev-left-position));
	top: calc(var(--e-cdswerx-carousel-arrow-prev-top-align) + var(--e-cdswerx-carousel-arrow-prev-top-position) - var(--e-cdswerx-carousel-arrow-prev-caption-spacing));
	transform: translate(var(--e-cdswerx-carousel-arrow-prev-translate-x), var(--e-cdswerx-carousel-arrow-prev-translate-y));
}

/* ── Pagination alignment (prefix_class from dots_alignment / fraction_alignment).
   The bullet and fraction wrappers are absolutely positioned with width:max-content
   so justify-content doesn't apply — instead we drive their horizontal-position and
   horizontal-transform CSS variables to anchor the wrapper at start / center / end. */
.elementor-widget-cdswerx-carousel.cdswerx-dots-align-flex-start {
	--e-cdswerx-carousel-dots-horizontal-position: 0%;
	--e-cdswerx-carousel-dots-horizontal-transform: 0%;
}
.elementor-widget-cdswerx-carousel.cdswerx-dots-align-center {
	--e-cdswerx-carousel-dots-horizontal-position: 50%;
	--e-cdswerx-carousel-dots-horizontal-transform: -50%;
}
.elementor-widget-cdswerx-carousel.cdswerx-dots-align-flex-end {
	--e-cdswerx-carousel-dots-horizontal-position: 100%;
	--e-cdswerx-carousel-dots-horizontal-transform: -100%;
}

.elementor-widget-cdswerx-carousel.cdswerx-fraction-align-flex-start {
	--e-cdswerx-carousel-fraction-horizontal-position: 0%;
	--e-cdswerx-carousel-fraction-horizontal-transform: 0%;
}
.elementor-widget-cdswerx-carousel.cdswerx-fraction-align-center {
	--e-cdswerx-carousel-fraction-horizontal-position: 50%;
	--e-cdswerx-carousel-fraction-horizontal-transform: -50%;
}
.elementor-widget-cdswerx-carousel.cdswerx-fraction-align-flex-end {
	--e-cdswerx-carousel-fraction-horizontal-position: 100%;
	--e-cdswerx-carousel-fraction-horizontal-transform: -100%;
}

/* ── Multi-type pagination: stagger dots and fraction vertically when both are enabled,
   so they don't collide at the same bottom anchor. Users can still override via the
   *_vertical_offset CSS vars / control. Progressbar always sits at the top so it doesn't
   participate in the stagger. ── */
.elementor-widget-cdswerx-carousel.e-cdswerx-has-dots-yes.e-cdswerx-has-fraction-yes {
	--e-cdswerx-carousel-fraction-vertical-offset: -32px;
}

/* ── Pagination: legacy shared size var — used ONLY by outside-position padding calc.
   Last-wins cascade is intentional here (reserves space for whichever type is "primary"). ── */
.elementor-widget-cdswerx-carousel.e-cdswerx-has-dots-yes {
	--e-cdswerx-carousel-swiper-pagination-size: var(--e-cdswerx-carousel-dots-size);
}

.elementor-widget-cdswerx-carousel.e-cdswerx-has-fraction-yes {
	--e-cdswerx-carousel-swiper-pagination-size: var(--e-cdswerx-carousel-fraction-size);
}

.elementor-widget-cdswerx-carousel.e-cdswerx-has-progress-yes {
	--e-cdswerx-carousel-swiper-pagination-size: var(--e-cdswerx-carousel-progressbar-size);
}

/* ── Pagination: Progressbar ──
   Position at the top of the swiper area so it doesn't collide with dots/fraction
   (which default to the bottom). Manual-render mode (secondary pagination) creates
   .swiper-pagination-progressbar-fill via JS without Swiper's built-in CSS, so we
   declare position/transform-origin/transition explicitly here. */
.elementor-widget-cdswerx-carousel .swiper-pagination-progressbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--e-cdswerx-carousel-progressbar-size);
	z-index: 3;
}

.elementor-widget-cdswerx-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--e-cdswerx-carousel-progressbar-normal-color, #000);
	transform-origin: left top;
	transition: transform 0.3s ease;
}

.elementor-widget-cdswerx-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill:hover {
	background: var(--e-cdswerx-carousel-progressbar-hover-color, #000);
}

/* ── Pagination: Fraction ── */
.elementor-widget-cdswerx-carousel .swiper-pagination-fraction {
	color: var(--e-cdswerx-carousel-fraction-color, #000);
}

/* ── Pagination: Bullets ──
   Width/Height read the optional --cdswerx-dots-w/h seed and fall back to the
   historical size variable, so non-Pill dots render byte-identically to before. */
.elementor-widget-cdswerx-carousel .swiper-pagination-bullet {
	background: var(--e-cdswerx-carousel-dots-normal-color, #000);
	height: var(--cdswerx-dots-h, var(--e-cdswerx-carousel-dots-size));
	width: var(--cdswerx-dots-w, var(--e-cdswerx-carousel-dots-size));
	/* Center bullets of differing sizes on a common middle line, so a resized Hover/
	   Active dot stays vertically aligned with the inactive ones. The -outside position
	   rule below overrides this with vertical-align:top at higher specificity. */
	vertical-align: middle;
}

/* ── Dot Shape: Pill starting size ──
   Shapes get their border-radius from the dots_shape control's selectors_dictionary
   (circle 50%, square 0, pill 999px, legacy bar 0) — no per-shape radius CSS needed.
   Pill is the only preset that needs starting *dimensions* to read as a pill on first
   select: seed low-priority width/height variables that the Normal Width/Height
   sliders override the instant the user drags them. */
.elementor-widget-cdswerx-carousel.cdswerx-dots-shape-pill {
	--cdswerx-dots-w: 24px;
	--cdswerx-dots-h: 8px;
}

.elementor-widget-cdswerx-carousel .swiper-pagination-bullet:hover {
	background: var(--e-cdswerx-carousel-dots-hover-color, #000);
	opacity: 1;
}

/* Active bullet baseline: re-assert size from the Normal-size variable so the
   active dot can't diverge from inactive due to Swiper's bundled CSS or theme
   styles loading at equal specificity. User's Active-tab Width/Height overrides
   still win (their selector has element-id specificity, +1 class over this rule). */
.elementor-widget-cdswerx-carousel .swiper-pagination-bullet-active {
	width: var(--cdswerx-dots-w, var(--e-cdswerx-carousel-dots-size));
	height: var(--cdswerx-dots-h, var(--e-cdswerx-carousel-dots-size));
}

/* ── Pagination: fraction font sizing (only fraction needs text-sized layout) ── */
.elementor-widget-cdswerx-carousel .swiper-pagination-fraction {
	font-size: var(--e-cdswerx-carousel-fraction-size);
	line-height: var(--e-cdswerx-carousel-fraction-size);
}

/* ── Outside pagination spacing ── */
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper-container,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper-container {
	padding-bottom: var(--e-cdswerx-carousel-swiper-padding-bottom);
}

.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper .elementor-background-slideshow,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) > .swiper-container .elementor-background-slideshow,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper .elementor-background-slideshow,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside > .elementor-widget-container > .swiper-container .elementor-background-slideshow {
	padding-bottom: 0;
}

.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside:not(:has(> .elementor-widget-container)) .swiper-pagination-bullet,
.elementor-widget-cdswerx-carousel.elementor-pagination-position-outside > .elementor-widget-container .swiper-pagination-bullet {
	vertical-align: top;
}

/* ── Bullet pagination positioning ──
   Doubled widget class (.elementor-widget-cdswerx-carousel.elementor-widget-cdswerx-carousel)
   raises specificity to (0,3,0) so this rule wins regardless of source order against
   Swiper's bundled `.swiper-horizontal > .swiper-pagination-bullets { left:0; width:100%; bottom:10px }`
   at (0,2,0). Physical-property resets neutralize Swiper's `left`/`bottom`/`width`
   declarations so only our logical `inset-inline-start` / `top` drive position. */
.elementor-widget-cdswerx-carousel.elementor-widget-cdswerx-carousel .swiper-pagination-bullets {
	bottom: auto;
	height: -moz-max-content;
	height: max-content;
	inset-inline-end: auto;
	inset-inline-start: calc(var(--e-cdswerx-carousel-dots-horizontal-position) + var(--e-cdswerx-carousel-dots-horizontal-offset));
	top: calc(var(--e-cdswerx-carousel-dots-vertical-position) + var(--e-cdswerx-carousel-dots-vertical-offset));
	transform: translate(calc(var(--e-cdswerx-carousel-dots-horizontal-transform) * var(--direction-multiplier, 1)), var(--e-cdswerx-carousel-dots-vertical-transform));
	width: -moz-max-content;
	width: max-content;
	z-index: 3;
}

/* ── Fraction pagination positioning ── (same specificity treatment as bullets,
   pre-emptive against any future Swiper rules targeting .swiper-pagination-fraction) */
.elementor-widget-cdswerx-carousel.elementor-widget-cdswerx-carousel .swiper-pagination-fraction {
	bottom: auto;
	height: -moz-max-content;
	height: max-content;
	inset-inline-end: auto;
	inset-inline-start: calc(var(--e-cdswerx-carousel-fraction-horizontal-position) + var(--e-cdswerx-carousel-fraction-horizontal-offset));
	top: calc(var(--e-cdswerx-carousel-fraction-vertical-position) + var(--e-cdswerx-carousel-fraction-vertical-offset));
	transform: translate(calc(var(--e-cdswerx-carousel-fraction-horizontal-transform) * var(--direction-multiplier, 1)), var(--e-cdswerx-carousel-fraction-vertical-transform));
	width: -moz-max-content;
	width: max-content;
	z-index: 3;
}

/* ── Pre-init fallback: keep slides visible before Swiper loads ── */
/* Note: Original targets unscoped .swiper — we scope to our widget to avoid bleeding */
.elementor-widget-cdswerx-carousel .swiper-container:not(.swiper-container-initialized) > .swiper-wrapper,
.elementor-widget-cdswerx-carousel .swiper:not(.swiper-initialized) > .swiper-wrapper {
	gap: var(--e-cdswerx-carousel-swiper-slides-gap);
	overflow: hidden;
}

/* Note: Original has typo .swiper--slide (double hyphen) — we use correct .swiper-slide */
.elementor-widget-cdswerx-carousel .swiper-container:not(.swiper-container-initialized) > .swiper-wrapper > .swiper-slide,
.elementor-widget-cdswerx-carousel .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	--e-cdswerx-carousel-number-of-gaps: max(calc(var(--e-cdswerx-carousel-swiper-slides-to-display) - 1), 0);
	--e-cdswerx-carousel-gaps-width-total: calc(var(--e-cdswerx-carousel-number-of-gaps) * var(--e-cdswerx-carousel-swiper-slides-gap));
	max-width: calc((100% - var(--e-cdswerx-carousel-gaps-width-total)) / var(--e-cdswerx-carousel-swiper-slides-to-display, 1));
}

/* ── Equal height ── */
.e-cdswerx-equal-height-yes .e-cdswerx-carousel > .swiper-wrapper,
.e-cdswerx-carousel.e-cdswerx-equal-height-yes > .swiper-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.e-cdswerx-equal-height-yes .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide,
.e-cdswerx-carousel.e-cdswerx-equal-height-yes > .swiper-wrapper > .swiper-slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: auto;
}

.e-cdswerx-equal-height-yes .e-cdswerx-carousel > .swiper-wrapper > .swiper-slide > .e-con,
.e-cdswerx-carousel.e-cdswerx-equal-height-yes > .swiper-wrapper > .swiper-slide > .e-con {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 100%;
}