/* ============================================================
   WonderCoder Carousel - Styles
   ============================================================ */

/* === Full width breakout === */
.cp-carousel-fullwidth-wrap {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	box-sizing: border-box;
}

/* === Widget container: allow overflow for outside arrows === */
.elementor-widget-wondercoder_carousel .elementor-widget-container {
	position: relative;
	overflow: visible;
}

/* === Carousel Wrapper === */
.cp-carousel-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
}
.cp-carousel-wrap.cp-pagination-bottom {
	flex-direction: column;
}

/* === Carousel Body (swiper + arrows) === */
.cp-carousel-body {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1;
	min-width: 0;
	overflow-x: clip;
}
.cp-carousel-body .cp-carousel-swiper {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.cp-direction-vertical .cp-carousel-swiper {
	touch-action: pan-x;
}
/* Effects WITHOUT glass: use clip-path instead of overflow:hidden
   so hover scale, opacity, blur effects are not clipped. */
.cp-carousel-swiper.cp-has-effects:not(.cp-has-glass) {
	overflow: visible !important;
	clip-path: inset(-30px 0px);
	-webkit-clip-path: inset(-30px 0px);
}
/* Glass mode: use overflow:clip + overflow-clip-margin instead of
   clip-path or overflow:hidden.
   - clip-path creates a stacking context → breaks backdrop-filter
   - overflow:hidden clips scale effects and box-shadows too aggressively
   - overflow:clip does NOT create a stacking context → backdrop-filter safe
   - overflow-clip-margin gives room for scale, shadows, borders */
.cp-carousel-swiper.cp-has-glass {
	overflow: clip !important;
	overflow-clip-margin: 20px;
}



/* === Vertical direction === */
/* Vertical Swiper requires a fixed height (not min-height) to constrain
   the visible area. height:400px on the base selector has low specificity
   (0,2,0) so Elementor's Height control (0,3,0+) can override it. */
.cp-direction-vertical .cp-carousel-swiper {
	height: 400px;
	flex: 0 0 auto;
}
/* Override effects overflow:visible for vertical — must stay hidden */
.cp-direction-vertical .cp-carousel-swiper,
.cp-direction-vertical .cp-carousel-swiper.cp-has-effects,
.cp-direction-vertical .cp-carousel-swiper.cp-has-effects:not(.cp-has-glass),
.cp-direction-vertical .cp-carousel-swiper.cp-has-glass {
	overflow: hidden !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}
.cp-direction-vertical .cp-carousel-swiper .swiper-wrapper {
	flex-direction: column;
}
.cp-direction-vertical .cp-carousel-body {
	flex-direction: column;
}

/* ============================================================
   ARROWS
   ============================================================ */

/* --- Base arrow styles --- */
.cp-carousel-wrap .swiper-button-prev,
.cp-carousel-wrap .swiper-button-next {
	position: relative;
	z-index: 20;
	cursor: pointer;
	pointer-events: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.cp-carousel-wrap .swiper-button-prev::after,
.cp-carousel-wrap .swiper-button-next::after {
	transition: color 0.3s ease;
}

/* --- Arrows INSIDE (overlay on slides) --- */
.cp-carousel-wrap.cp-arrows-inside .cp-carousel-body {
	position: relative;
	display: flex !important;
}
.cp-carousel-wrap.cp-arrows-inside .cp-carousel-body .swiper-button-prev,
.cp-carousel-wrap.cp-arrows-inside .cp-carousel-body .swiper-button-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 20;
	margin: 0 !important;
	margin-top: 0 !important;
}
.cp-carousel-wrap.cp-arrows-inside .cp-carousel-body .swiper-button-prev {
	left: 12px !important;
	right: auto !important;
}
.cp-carousel-wrap.cp-arrows-inside .cp-carousel-body .swiper-button-next {
	right: 12px !important;
	left: auto !important;
}
/* Inside vertical: arrows top/bottom */
.cp-carousel-wrap.cp-arrows-inside.cp-direction-vertical .cp-carousel-body .swiper-button-prev,
.cp-carousel-wrap.cp-arrows-inside.cp-direction-vertical .cp-carousel-body .swiper-button-next {
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	transform: translateX(-50%) !important;
}
.cp-carousel-wrap.cp-arrows-inside.cp-direction-vertical .cp-carousel-body .swiper-button-prev {
	top: 10px !important;
	bottom: auto !important;
}
.cp-carousel-wrap.cp-arrows-inside.cp-direction-vertical .cp-carousel-body .swiper-button-next {
	top: auto !important;
	bottom: 10px !important;
}

/* --- Arrows OUTSIDE (separate wrapper around body) --- */
.cp-outside-layout {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cp-outside-layout > .swiper-button-prev,
.cp-outside-layout > .swiper-button-next {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	margin-top: 0 !important;
	transform: none !important;
	flex-shrink: 0;
}
.cp-outside-layout > .cp-carousel-body {
	flex: 1;
	min-width: 0;
	clip-path: inset(-30px 0px);
	-webkit-clip-path: inset(-30px 0px);
}
/* Glass + outside arrows: remove clip-path from .cp-carousel-body.
   clip-path creates a compositing layer that blocks backdrop-filter.
   overflow:clip on .cp-carousel-swiper handles clipping instead. */
.cp-carousel-wrap:has(.cp-has-glass) .cp-outside-layout > .cp-carousel-body {
	clip-path: none !important;
	-webkit-clip-path: none !important;
}
/* Vertical outside: arrows above/below */
.cp-direction-vertical .cp-outside-layout {
	flex-direction: column;
	gap: 10px;
}
.cp-direction-vertical .cp-outside-layout > .cp-carousel-body {
	width: 100%;
}

/* --- Arrows HIDDEN --- */
.cp-arrows-hidden .swiper-button-prev,
.cp-arrows-hidden .swiper-button-next {
	display: none !important;
}

/* --- Arrows style: minimal --- */
.cp-arrows-minimal .swiper-button-prev,
.cp-arrows-minimal .swiper-button-next {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
}
.cp-arrows-minimal .swiper-button-prev::after,
.cp-arrows-minimal .swiper-button-next::after {
	font-weight: bold;
}



/* ============================================================
   PAGINATION / INDICATORS
   ============================================================ */

/* --- Pagination container --- */
.cp-carousel-pagination {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	flex-shrink: 0;
	margin-top: 24px;
}

/* Override Swiper's positioning & force horizontal layout always */
.cp-carousel-pagination.swiper-pagination,
.cp-carousel-pagination.swiper-pagination-vertical,
.cp-carousel-pagination.swiper-pagination-vertical.swiper-pagination-bullets {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
}
.cp-carousel-pagination.swiper-pagination-vertical .swiper-pagination-bullet,
.cp-carousel-pagination.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) !important;
	display: inline-block !important;
}

/* --- Progress bar overrides (always horizontal, even in vertical mode) --- */
.cp-carousel-pagination.swiper-pagination-progressbar {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	height: 4px !important;
	transform: none !important;
}
.cp-carousel-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: currentColor;
}

/* --- Fraction --- */
.cp-carousel-pagination.swiper-pagination-fraction {
	color: inherit;
}

/* --- Bullets transition --- */
.cp-carousel-wrap .swiper-pagination-bullet {
	transition: background-color 0.3s ease, transform 0.3s ease;
}


/* ============================================================
   SLIDE CONTENT
   ============================================================ */

.cp-slide-inner {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cp-slide-inner .cp-slide-image {
	overflow: hidden;
	border-radius: inherit;
	flex: 0 1 auto !important;
	min-height: 0 !important;
}
.cp-slide-inner .cp-slide-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	vertical-align: middle;
}

/* === Background image mode === */
.cp-slide-bg-image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}
.cp-slide-bg-image > * {
	position: relative;
	z-index: 1;
}

.cp-slide-content {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
}

/* === Content Body (groups icon + title + description as one flex item) === */
.cp-slide-content-body {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto !important;
}

/* === Button Wrapper: always full-width so its own alignment control works
   independently from the parent .cp-slide-content align-items === */
.cp-slide-content > .cp-slide-btn-wrap,
.cp-slide-btn-wrap {
	flex: 0 0 auto !important;
	align-self: stretch !important;
	width: 100% !important;
	display: flex !important;
	box-sizing: border-box;
}
/* === Icon Wrapper (block container for text-align alignment) === */
.cp-slide-icon-wrap {
	display: block;
	line-height: 0;
}
.cp-slide-content .cp-slide-title,
.cp-slide-content .cp-slide-title-row,
.cp-slide-content .cp-slide-description,
.cp-slide-content-body .cp-slide-title,
.cp-slide-content-body .cp-slide-description,
h3.cp-slide-title,
p.cp-slide-description {
	margin: 0 !important;
	padding: 0 !important;
	transition: color 0.3s ease;
}

/* === Icon === */
.cp-slide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-sizing: border-box;
	transition: color 0.3s ease;
}
.cp-slide-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* === Icon + Title side by side (left/right of title) === */
.cp-slide-title-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px;
	flex-wrap: nowrap !important;
	max-width: 100%;
}
.cp-slide-title-row > .cp-slide-icon {
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
}
.cp-slide-title-row > .cp-slide-icon i,
.cp-slide-title-row > .cp-slide-icon svg {
	display: block !important;
}
.cp-slide-title-row > .cp-slide-title {
	flex: 1 !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* === Button === */
.cp-slide-button,
a.cp-slide-button,
a.cp-slide-button.elementor-button {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	line-height: 1.2;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, text-decoration 0.3s ease;
}
.cp-slide-button .cp-btn-text {
	display: inline-flex !important;
	align-items: center !important;
	align-self: center !important;
	line-height: 1.2;
}
.cp-slide-button .cp-btn-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	flex-shrink: 0;
	line-height: 0;
}
.cp-slide-button .cp-btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block !important;
}
.cp-slide-button .cp-btn-icon i {
	line-height: 1;
	display: block !important;
}

/* ============================================================
   EQUAL HEIGHT SLIDES
   ============================================================ */
/* Force wrapper to stretch all slides to the tallest one.
   Swiper sets display:flex on .swiper-wrapper but doesn't set align-items,
   so the default is stretch. We add !important to guarantee it. */
.cp-carousel-swiper > .swiper-wrapper {
	align-items: stretch !important;
}
/* Slides: flex column layout for inner card stretch.
   height: auto overrides Swiper's default 100% so stretch determines height.
   When Height control is set, Elementor injects height:100%!important which wins. */
.cp-carousel-swiper .swiper-slide {
	height: auto;
	display: flex !important;
	flex-direction: column !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Inner card fills the slide via flex-grow.
   Use flex shorthand with !important to prevent Elementor/theme CSS resets. */
.cp-carousel-swiper .cp-slide-inner {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
/* Glass: prevent stacking context on .swiper-slide so backdrop-filter
   on .cp-slide-inner always has a clean path to the page background.
   Effects are applied to .cp-slide-inner (not .swiper-slide) in glass mode,
   so this blanket protection is safe for both effects and no-effects cases. */
.cp-carousel-swiper.cp-has-glass .swiper-slide {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	z-index: auto !important;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
}
/* Glass: remove base GPU hint and isolation from .cp-slide-inner.
   No !important on transform — dynamic CSS can override with scale effects. */
.cp-carousel-swiper.cp-has-glass .cp-slide-inner {
	-webkit-transform: none;
	transform: none;
	isolation: auto !important;
}

/* ============================================================
   GLASSMORPHISM: Arrows & Pagination inherit glass style
   ============================================================ */
.cp-has-glass ~ .cp-outside-layout .swiper-button-prev,
.cp-has-glass ~ .cp-outside-layout .swiper-button-next,
.cp-carousel-wrap:has(.cp-has-glass) .swiper-button-prev,
.cp-carousel-wrap:has(.cp-has-glass) .swiper-button-next {
	background-color: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.cp-carousel-wrap:has(.cp-has-glass) .cp-carousel-pagination .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.4);
}
.cp-carousel-wrap:has(.cp-has-glass) .cp-carousel-pagination .swiper-pagination-bullet-active {
	background: rgba(255, 255, 255, 0.9);
}