/**
 * Scroll-synced steps + Lottie section
 *
 * Desktop (≥1025): sticky pin + Lottie scrub, white panel 1280 → right edge
 * Mobile (≤1024): stacking sticky cards, per-step image, no Lottie
 *
 * Elementor class map:
 *   .faddom-scroll-steps
 *   .faddom-scroll-steps__pin
 *   .faddom-scroll-steps__content
 *   .faddom-scroll-steps__step (+ .is-active on desktop)
 *   .faddom-scroll-steps__step-visual  — image inside each step (mobile only)
 *   .faddom-scroll-steps__media
 *   .faddom-scroll-steps__lottie
 */

.faddom-scroll-steps.e-con,
.faddom-scroll-steps {
	--faddom-ss-steps: 4;
	--faddom-ss-vh-per-step: 100vh;
	--faddom-ss-container: 1280px;
	--faddom-ss-panel-height: 639px;
	--faddom-ss-panel-bg: var(--faddom-color-white, #ffffff);
	--faddom-ss-media-bg: var(--faddom-color-aqua-25, #f7fbfb);
	--faddom-ss-content-max: 520px;
	--faddom-ss-inline-pad: 24px;
	--faddom-ss-rail: max(var(--faddom-ss-inline-pad), calc((100vw - var(--faddom-ss-container)) / 2));
	--faddom-ss-header-height: 76px;
	--faddom-ss-pin-gap: 8px;
	--faddom-ss-pin-top: calc(var(--faddom-ss-header-height) + var(--faddom-ss-pin-gap));
	position: relative;
	overflow: visible !important;
	background-color: transparent;
}


.faddom-scroll-steps__highlights .elementor-icon-list-item {
	background-color: var(--faddom-color-aqua-75);
	border-radius: 8px;
	width: fit-content !important;
	max-width: 100%;
	flex: 0 0 auto !important;
	padding: 4px 16px 4px 8px !important;
}

.faddom-scroll-steps__step-visual {
	display: none;
}

.faddom-scroll-steps__lottie svg,
.faddom-scroll-steps__lottie canvas {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: contain;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1025px) {
	.faddom-scroll-steps.e-con,
	.faddom-scroll-steps {
		height: calc(var(--faddom-ss-steps) * var(--faddom-ss-vh-per-step)) !important;
		min-height: 0 !important;
		align-items: flex-start !important;
		align-content: flex-start !important;
		justify-content: flex-start !important;
	}

	.faddom-scroll-steps > .e-con-inner,
	.faddom-scroll-steps.e-con > .e-con-inner {
		display: block !important;
		width: 100%;
		height: 100% !important;
		min-height: 0 !important;
		max-width: none !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	.faddom-scroll-steps__pin {
		position: sticky !important;
		top: var(--faddom-ss-pin-top) !important;
		left: 0;
		height: calc(100vh - var(--faddom-ss-pin-top));
		min-height: calc(100vh - var(--faddom-ss-pin-top));
		max-height: calc(100vh - var(--faddom-ss-pin-top));
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		overflow: visible;
		align-self: flex-start !important;
		background-color: transparent !important;
	}

	.faddom-scroll-steps__pin::after {
		content: "";
		position: absolute;
		top: 50%;
		left: var(--faddom-ss-rail);
		width: calc(100vw - var(--faddom-ss-rail));
		height: var(--faddom-ss-panel-height);
		transform: translateY(-50%);
		background-color: var(--faddom-ss-panel-bg);
		z-index: 0;
		pointer-events: none;
	}

	.faddom-scroll-steps__pin.e-con,
	.faddom-scroll-steps__pin > .e-con-inner,
	.faddom-scroll-steps__pin.e-con > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		width: 100% !important;
		max-width: none !important;
		height: 100%;
		min-height: calc(100vh - var(--faddom-ss-pin-top));
		max-height: calc(100vh - var(--faddom-ss-pin-top));
		gap: 0 !important;
		padding: 0 !important;
		overflow: visible;
		background-color: transparent !important;
		position: relative;
		z-index: 1;
	}

	.faddom-scroll-steps__content {
		flex: 0 0 auto;
		width: auto;
		max-width: var(--faddom-ss-content-max);
		position: relative;
		min-height: 0;
		height: var(--faddom-ss-panel-height);
		align-self: center;
		box-sizing: border-box;
		margin-left: var(--faddom-ss-rail);
		padding: 0;
		background-color: transparent !important;
		z-index: 1;
		display: grid !important;
		align-content: center;
	}

	.faddom-scroll-steps__content.e-con,
	.faddom-scroll-steps__content > .e-con-inner,
	.faddom-scroll-steps__content.e-con > .e-con-inner {
		background-color: transparent !important;
		padding: 0 !important;
		max-width: var(--faddom-ss-content-max);
		width: 100%;
		display: grid !important;
		align-content: center;
	}

	.faddom-scroll-steps__media {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: var(--faddom-ss-panel-height);
		max-height: var(--faddom-ss-panel-height);
		align-self: center;
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		background-color: transparent;
		overflow: hidden;
		z-index: 1;
	}

	.faddom-scroll-steps__media.e-con,
	.faddom-scroll-steps__media > .e-con-inner,
	.faddom-scroll-steps__media.e-con > .e-con-inner {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 0 !important;
		background-color: transparent;
	}

	.faddom-scroll-steps__lottie {
		width: 100%;
		height: 100%;
		max-width: none;
		pointer-events: none;
	}

	/* Crossfade steps in one grid cell */
	.faddom-scroll-steps__step {
		grid-area: 1 / 1;
		position: relative !important;
		width: 100%;
		max-width: var(--faddom-ss-content-max);
		margin: 0 !important;
		opacity: 0;
		visibility: hidden;
		transform: translateY(16px);
		filter: blur(3px);
		transition:
			opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1),
			transform 1.9s cubic-bezier(0.22, 1, 0.36, 1),
			filter 1.9s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 1.9s;
		transition-delay: 0s;
		pointer-events: none;
		will-change: opacity, transform, filter;
		z-index: 0;
	}

	.faddom-scroll-steps__step.is-active {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		filter: blur(0);
		pointer-events: auto;
		transition-delay: 0.5s;
		z-index: 1;
	}
}

/* ==========================================================================
   Mobile — stacking sticky cards
   ========================================================================== */

@media (max-width: 1024px) {
	.faddom-scroll-steps,
	.faddom-scroll-steps.e-con {
		--faddom-ss-stack-gap: 48px;
		--faddom-ss-card-inset: 50px;
		--faddom-ss-card-radius: 8px;
		height: auto !important;
		min-height: 0 !important;
	}

	.faddom-scroll-steps > .e-con-inner,
	.faddom-scroll-steps.e-con > .e-con-inner {
		display: block !important;
		height: auto !important;
		max-width: none !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.faddom-scroll-steps__pin {
		position: relative !important;
		top: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		overflow: visible !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.faddom-scroll-steps__pin::after {
		content: none !important;
		display: none !important;
	}

	.faddom-scroll-steps__pin.e-con,
	.faddom-scroll-steps__pin > .e-con-inner,
	.faddom-scroll-steps__pin.e-con > .e-con-inner {
		display: block !important;
		flex-direction: unset !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100% !important;
		gap: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		background: transparent !important;
	}

	.faddom-scroll-steps__media {
		display: none !important;
	}

	.faddom-scroll-steps__content {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 var(--faddom-ss-card-inset) !important;
		background: transparent !important;
	}

	.faddom-scroll-steps__content.e-con,
	.faddom-scroll-steps__content > .e-con-inner,
	.faddom-scroll-steps__content.e-con > .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.faddom-scroll-steps__step {
		position: sticky !important;
		top: calc(
			var(--faddom-ss-card-inset) + (var(--faddom-ss-index, 0) * var(--faddom-ss-stack-gap))
		) !important;
		z-index: calc(20 + var(--faddom-ss-index, 0)) !important;
		grid-area: unset !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		filter: none !important;
		pointer-events: auto !important;
		transition: none !important;
		will-change: auto;
		background-color: var(--faddom-color-white, #fff) !important;
		border-radius: var(--faddom-ss-card-radius);
		min-height: calc(100svh - 76px);
	}

	.faddom-scroll-steps__step:nth-child(odd) {
		background-color: var(--faddom-color-white, #fff) !important;
	}

	.faddom-scroll-steps__step:nth-child(even) {
		background-color: var(--faddom-color-aqua-25, #f7fbfb) !important;
	}

	.faddom-scroll-steps__step.is-active {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		filter: none !important;
		z-index: calc(20 + var(--faddom-ss-index, 0)) !important;
		transition: none !important;
		transition-delay: 0s !important;
	}

	.faddom-scroll-steps__step:last-child {
		margin-bottom: 0 !important;
	}

	
.faddom-scroll-steps__highlights .elementor-icon-list-item {
	padding: 4px 8px !important;
	margin: 0 !important;
}

	.faddom-scroll-steps__step-visual {
		display: block !important;
		overflow: hidden;
		background-color: var(--faddom-color-aqua-25, #f7fbfb);
	}

	.faddom-scroll-steps__step-visual img,
	.faddom-scroll-steps__step-visual .elementor-widget-image img {
		width: 100%;
		height: auto;
		display: block;
	}
}