/* Stacked Card Slider for Elementor */

.mim-scs {
	--sc-offset: 32%;
	--sc-offset-y: 0%;
	--sc-scale: 0.1;
	--sc-rotate: 0deg;
	--sc-fade: 0.12;
	--sc-dim: 0.15;
	--sc-dim-color: #000;
	--sc-duration: 600ms;
	--sc-easing: cubic-bezier(.22, .61, .36, 1);
	--sc-offset-b: 4.5%;
	--sc-scale-b: 0.05;
	--sc-layer-1: #ec4e68;
	--sc-layer-2: #f8a5b5;
	--sc-layer-3: #fbd0d9;
	--sc-stack-h: 0px; /* set by JS: room needed below the front card */
	--sc-dir: 1; /* set by JS: 1 = LTR, -1 = RTL */
	--sc-vis: 2; /* set by JS: effective visible cards */

	position: relative;
	width: 100%;
	box-sizing: border-box;
	outline: none;
}

.mim-scs *,
.mim-scs *::before,
.mim-scs *::after {
	box-sizing: border-box;
}

.mim-scs:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.mim-scs-empty {
	padding: 24px;
	text-align: center;
	border: 1px dashed #b5b5b5;
	color: #777;
}

/* ---------- Viewport & stage ---------- */

.mim-scs__viewport {
	overflow: hidden;
	padding-block: 30px;
	padding-inline: 0;
}

.mim-scs__stage {
	position: relative;
	width: 46%;
	max-width: 100%;
	margin-inline: auto;
	aspect-ratio: 4 / 3;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

/* One-sided layout: keep the whole stack visually centered. */
.mim-scs--end .mim-scs__stage {
	translate: calc(var(--sc-dir) * var(--sc-vis) * var(--sc-offset) * -0.5) 0;
}

/* ---------- Cards ---------- */

.mim-scs__card {
	--o: 0;
	--a: 0;
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
	background: #e9e9ee;
	cursor: pointer;
	will-change: transform, opacity;
	transform:
		translate3d(
			calc(var(--o) * var(--sc-dir) * var(--sc-offset)),
			calc(var(--a) * var(--sc-offset-y)),
			0
		)
		rotate(calc(var(--o) * var(--sc-dir) * var(--sc-rotate)))
		scale(calc(1 - var(--a) * var(--sc-scale)));
	opacity: max(0, calc(1 - var(--a) * var(--sc-fade)));
	transition:
		transform var(--sc-duration) var(--sc-easing),
		opacity var(--sc-duration) var(--sc-easing);
}

.mim-scs__card.is-active {
	cursor: default;
}

.mim-scs__card.is-active .mim-scs__link[href] {
	cursor: pointer;
}

.mim-scs__card.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Dim overlay for cards behind the front one. */
.mim-scs__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sc-dim-color);
	opacity: min(1, calc(var(--a) * var(--sc-dim)));
	pointer-events: none;
	transition: opacity var(--sc-duration) var(--sc-easing);
}

.mim-scs__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	outline-offset: -3px;
}

.mim-scs__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-user-drag: none;
	transition: transform .5s ease;
}


/* ---------- Layout: stacked below (vertical) ---------- */

.mim-scs--bottom .mim-scs__stage {
	margin-bottom: var(--sc-stack-h);
}

.mim-scs--bottom .mim-scs__card {
	box-shadow: none;
	opacity: 1;
	transform:
		translate3d(0, calc(var(--a) * var(--sc-offset-b)), 0)
		scale(calc(1 - var(--a) * var(--sc-scale-b)), 1);
}

/* The card that just left the front slides up and away. */
.mim-scs--bottom .mim-scs__card.is-exit {
	transform: translate3d(0, -14%, 0) scale(1.02, 1);
}

.mim-scs--bottom .mim-scs__card.is-hidden {
	opacity: 0;
}

/* Solid colored back layers (like a paper stack). */
.mim-scs--solid .mim-scs__card::after {
	background: var(--sc-layer-3);
	opacity: 1;
	transition: opacity var(--sc-duration) var(--sc-easing), background-color var(--sc-duration) var(--sc-easing);
}
.mim-scs--solid .mim-scs__card[data-layer="0"]::after { opacity: 0; }
.mim-scs--solid .mim-scs__card[data-layer="1"]::after { background: var(--sc-layer-1); }
.mim-scs--solid .mim-scs__card[data-layer="2"]::after { background: var(--sc-layer-2); }

/* ---------- Arrows ---------- */

.mim-scs__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	cursor: pointer;
	line-height: 1;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, scale .2s ease;
}

.mim-scs__arrow:hover {
	scale: 1.06;
}

.mim-scs__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mim-scs__arrow svg {
	display: block;
	width: 22px;
	height: 22px;
}

.mim-scs__arrow--prev {
	inset-inline-start: 10px;
}

.mim-scs__arrow--next {
	inset-inline-end: 10px;
}

/* Icons mirror automatically on RTL sites. */
.mim-scs[data-rtl="1"] .mim-scs__arrow svg {
	transform: scaleX(-1);
}

/* ---------- Dots ---------- */

.mim-scs__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.mim-scs__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #c7c7cc;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.mim-scs__dot.is-active {
	background: #111;
	transform: scale(1.3);
}

.mim-scs__dot:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mim-scs .mim-scs__card,
	.mim-scs .mim-scs__card::after {
		transition-duration: 0.01ms !important;
	}
	.mim-scs__img,
	.mim-scs__arrow,
	.mim-scs__dot {
		transition: none;
	}
}