/* Container Carousel Widget — native Elementor containers as Swiper slides. */

.dea-cc {
	position: relative;
	width: 100%;
}

.dea-cc__inner {
	position: relative;
	min-width: 0;
}

.dea-cc__swiper {
	position: relative;
	width: 100%;
	min-width: 0;
	height: var(--dea-cc-height, auto);
	overflow: hidden;
}

.dea-cc--overflow-visible .dea-cc__swiper {
	overflow: visible;
}

.dea-cc__wrapper {
	align-items: stretch;
	height: 100%;
}

/* ─── Slides (real Elementor containers) ─── */
.dea-cc__wrapper > .dea-cc__slide {
	/* Elementor's `.elementor-element { flex-shrink: var(--flex-shrink) }` loads
	   after swiper.min.css with the same specificity, so it cancels Swiper's
	   `.swiper-slide { flex-shrink: 0 }` and the slides shrink to fit instead of
	   keeping the width Swiper assigns for Slides Per View. */
	flex-shrink: 0;
	flex-grow: 0;
	height: auto;
	min-width: 0;
	max-width: none;
	opacity: var(--dea-cc-inactive-opacity, 1);
	transform: var(--dea-cc-inactive-transform, none);
	transition: opacity var(--dea-cc-state-transition, 400ms) ease, transform var(--dea-cc-state-transition, 400ms) ease;
}

.dea-cc__wrapper > .dea-cc__slide.swiper-slide-visible,
.dea-cc__wrapper > .dea-cc__slide.swiper-slide-active {
	opacity: 1;
	transform: none;
}

/* Vertical carousels need a resolved height to scroll inside. */
.dea-cc--vertical .dea-cc__swiper {
	height: var(--dea-cc-height, 420px);
}

/* Before Swiper boots, keep the slides from stacking full-width. */
.dea-cc:not(.dea-cc--ready) .dea-cc__wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* ─── Arrows ─── */
.dea-cc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dea-cc-arrow-size, 44px);
	height: var(--dea-cc-arrow-size, 44px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 5;
	font-size: var(--dea-cc-arrow-icon-size, 18px);
	line-height: 1;
	color: var(--dea-cc-arrow-color, #ffffff);
	background: var(--dea-cc-arrow-bg, rgba(17, 24, 39, 0.65));
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dea-cc__arrow:hover,
.dea-cc__arrow:focus-visible {
	color: var(--dea-cc-arrow-color-hover, var(--dea-cc-arrow-color, #ffffff));
	background: var(--dea-cc-arrow-bg-hover, var(--dea-cc-arrow-bg, rgba(17, 24, 39, 0.9)));
}

.dea-cc__arrow i {
	font-size: inherit;
	line-height: 1;
}

.dea-cc__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dea-cc__arrow.swiper-button-disabled {
	opacity: var(--dea-cc-arrow-disabled-opacity, 0.35);
	pointer-events: none;
}

.dea-cc__arrow.swiper-button-lock {
	display: none;
}

/* Arrows inside, over the slides */
.dea-cc--arrows-inside .dea-cc__inner {
	display: block;
}

.dea-cc--arrows-inside .dea-cc__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.dea-cc--arrows-inside .dea-cc__arrow--prev {
	inset-inline-start: var(--dea-cc-arrow-gap, 12px);
}

.dea-cc--arrows-inside .dea-cc__arrow--next {
	inset-inline-end: var(--dea-cc-arrow-gap, 12px);
}

.dea-cc--arrows-hover .dea-cc__arrow {
	opacity: 0;
	pointer-events: none;
}

.dea-cc--arrows-hover:hover .dea-cc__arrow,
.dea-cc--arrows-hover:focus-within .dea-cc__arrow {
	opacity: 1;
	pointer-events: auto;
}

.dea-cc--arrows-hover:hover .dea-cc__arrow.swiper-button-disabled,
.dea-cc--arrows-hover:focus-within .dea-cc__arrow.swiper-button-disabled {
	opacity: var(--dea-cc-arrow-disabled-opacity, 0.35);
}

/* Arrows beside the slides */
.dea-cc--arrows-outside .dea-cc__inner {
	display: flex;
	align-items: center;
	gap: var(--dea-cc-arrow-gap, 16px);
}

.dea-cc--arrows-outside .dea-cc__swiper {
	flex: 1 1 auto;
}

/* Arrows above, aligned to the inline end */
.dea-cc--arrows-top .dea-cc__inner {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas:
		". prev next"
		"slider slider slider";
	column-gap: 8px;
	row-gap: var(--dea-cc-arrow-gap, 16px);
}

/* Arrows below, centered */
.dea-cc--arrows-bottom .dea-cc__inner {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
	grid-template-areas:
		"slider slider slider slider"
		". prev next .";
	column-gap: 8px;
	row-gap: var(--dea-cc-arrow-gap, 16px);
}

.dea-cc--arrows-top .dea-cc__arrow--prev,
.dea-cc--arrows-bottom .dea-cc__arrow--prev {
	grid-area: prev;
}

.dea-cc--arrows-top .dea-cc__arrow--next,
.dea-cc--arrows-bottom .dea-cc__arrow--next {
	grid-area: next;
}

.dea-cc--arrows-top .dea-cc__swiper,
.dea-cc--arrows-bottom .dea-cc__swiper {
	grid-area: slider;
}

/* ─── Pagination ─── */
.dea-cc .dea-cc__pagination {
	position: relative;
	inset: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--dea-cc-dot-gap, 8px);
	width: 100%;
	margin-top: var(--dea-cc-pagination-spacing, 16px);
	transform: none;
}

.dea-cc--pagination-inside .dea-cc__pagination {
	position: absolute;
	/* left + translate keeps the row centered in both LTR and RTL. */
	left: 50%;
	bottom: var(--dea-cc-pagination-spacing, 16px);
	width: auto;
	margin: 0;
	transform: translateX(-50%);
	z-index: 6;
}

.dea-cc .swiper-pagination-bullet {
	width: var(--dea-cc-dot-size, 10px);
	height: var(--dea-cc-dot-size, 10px);
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 1;
	cursor: pointer;
	border-radius: var(--dea-cc-dot-radius, 50%);
	background: var(--dea-cc-dot-color, rgba(17, 24, 39, 0.25));
	transition: background-color 0.25s ease, width 0.25s ease, color 0.25s ease;
}

.dea-cc .swiper-pagination-bullet-active {
	width: var(--dea-cc-dot-active-width, var(--dea-cc-dot-size, 10px));
	background: var(--dea-cc-dot-active-color, #2563eb);
}

.dea-cc .swiper-pagination-bullets-dynamic {
	overflow: visible;
}

/* Fraction */
.dea-cc--pagination-type-fraction .dea-cc__pagination {
	color: var(--dea-cc-dot-color, inherit);
}

.dea-cc .swiper-pagination-current {
	color: var(--dea-cc-dot-active-color, inherit);
}

/* Progress bar */
.dea-cc--pagination-type-progressbar .dea-cc__pagination {
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: var(--dea-cc-dot-radius, 999px);
	background: var(--dea-cc-dot-color, rgba(17, 24, 39, 0.15));
}

.dea-cc .swiper-pagination-progressbar-fill {
	background: var(--dea-cc-dot-active-color, #2563eb);
}

/* A progress bar placed over the slides spans the full width instead of centering. */
.dea-cc--pagination-type-progressbar.dea-cc--pagination-inside .dea-cc__pagination {
	left: 0;
	width: 100%;
	transform: none;
}

/* Custom labels */
.dea-cc--pagination-type-labels .swiper-pagination-bullet {
	width: auto;
	height: auto;
	padding: 0.45em 1em;
	font: inherit;
	color: var(--dea-cc-dot-color, inherit);
	background: var(--dea-cc-label-bg, transparent);
	border-radius: var(--dea-cc-dot-radius, 999px);
}

.dea-cc--pagination-type-labels .swiper-pagination-bullet-active {
	width: auto;
	color: var(--dea-cc-dot-active-color, #ffffff);
	background: var(--dea-cc-label-bg-active, #2563eb);
}

/* ─── Responsive visibility ─── */
@media (max-width: 767px) {
	.dea-cc--hide-arrows-mobile .dea-cc__arrow {
		display: none;
	}

	.dea-cc--hide-pagination-mobile .dea-cc__pagination {
		display: none;
	}
}

/* ─── Editor ─── */
.elementor-editor-active .dea-cc__swiper,
.elementor-editor-preview .dea-cc__swiper {
	min-height: 60px;
}