/* Minimal Swiper layout fallback, in case Elementor's own Swiper CSS is not
   present on the page for any reason. Safe to keep even when it is, since
   these rules are the same base layout Swiper itself ships. */
.coconut-carousel.swiper {
	position: relative;
	width: 100%;
	overflow-x: hidden !important;
	overflow-y: visible !important;
	padding: 20px 0 80px;
	box-sizing: border-box;
}

.ccs-outer {
	padding: 0 10px;
	box-sizing: border-box;
}
.coconut-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
}
.coconut-carousel .swiper-slide {
	flex-shrink: 0;
	width: var( --ccs-slide-width, 100% );
	height: auto;
	align-self: stretch;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	transition: transform 0.35s ease;
}

.coconut-carousel.ccs-mode-left .swiper-slide-active .ccs-card {
	transform-origin: left center;
}

.coconut-carousel .swiper-slide-active {
	z-index: 5;
}

.ccs-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 24px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
	transform: scale(1);
	transform-origin: center center;
}

.ccs-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ede9fe;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.ccs-icon i {
	font-size: 26px;
	color: #5b4fe9;
}

.ccs-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a2e;
}

.ccs-desc {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #6b7280;
}

.ccs-image {
	margin-top: auto;
	width: 100%;
	border-radius: 10px;
	display: block;
}

/* Self-contained pagination + navigation styles, not dependent on
   Elementor's own Swiper CSS being present on the page. */
.coconut-carousel .swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 10;
	text-align: center;
	line-height: 0;
}

.coconut-carousel .swiper-pagination-bullet {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 5px;
	border-radius: 50%;
	background: #d6d3f0;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.coconut-carousel .swiper-pagination-bullet-active {
	background: #5b4fe9;
}

.coconut-carousel .swiper-button-prev,
.coconut-carousel .swiper-button-next {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	color: #5b4fe9;
	cursor: pointer;
}

.coconut-carousel .swiper-button-prev {
	left: 10px;
}

.coconut-carousel .swiper-button-next {
	right: 10px;
}

.coconut-carousel .swiper-button-prev::after,
.coconut-carousel .swiper-button-next::after {
	font-family: swiper-icons;
	font-size: 16px;
}