/**
 * Figma: full 16px radius, soft left feather, brown accent stroke (top/left emphasis).
 */

@media (min-width: 1101px) {
	/* Intro sits right of the white sheet — sheet is % width so cap left with max() above 1440px */
	.elementor-widget-evoport-expert-steps .evo-expert-steps {
		--evo-expert-intro-gap: 24px;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__intro-col {
		left: max(
			calc(var(--evo-expert-x0) + min(736px, 51.1vw)),
			calc(var(--evo-expert-sheet-width, 55.625%) + var(--evo-expert-intro-gap, 24px))
		) !important;
		right: var(--evo-expert-x0) !important;
		width: auto !important;
		max-width: min(496px, 34.44vw) !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__panel-row {
		/* Sit slightly right so glass feather meets white sheet, not step labels */
		left: calc(var(--evo-expert-x0) + min(528px, 36.67vw)) !important;
	}

	/* Figma half left accent — pill stroke, inset from top corner, fades into glass */
	.elementor-widget-evoport-expert-steps .evo-expert-steps__panel-row::before {
		content: "";
		position: absolute;
		left: 0;
		top: var(--evo-expert-panel-radius, 16px);
		z-index: 6;
		width: 2px;
		height: max(
			48px,
			calc(var(--evo-expert-panel-left-rule-h, 55%) - var(--evo-expert-panel-radius, 16px))
		);
		border-radius: 999px;
		pointer-events: none;
		background: linear-gradient(
			180deg,
			rgba(174, 107, 62, 0.68) 0%,
			rgba(174, 107, 62, 0.52) 28%,
			rgba(174, 107, 62, 0.24) 62%,
			rgba(174, 107, 62, 0.08) 82%,
			rgba(174, 107, 62, 0) 100%
		);
		box-shadow: 0 0 6px rgba(174, 107, 62, 0.12);
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__panel-scene {
		border-radius: var(--evo-expert-panel-radius, 16px) !important;
		overflow: hidden !important;
		background: transparent !important;
		/* Soft feather on left only — no hard vertical band */
		-webkit-mask-image: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.35) 5%,
			rgba(0, 0, 0, 0.82) 12%,
			rgba(0, 0, 0, 1) 18%,
			rgba(0, 0, 0, 1) 100%
		);
		mask-image: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.35) 5%,
			rgba(0, 0, 0, 0.82) 12%,
			rgba(0, 0, 0, 1) 18%,
			rgba(0, 0, 0, 1) 100%
		);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__panel-bg {
		border-radius: var(--evo-expert-panel-radius, 16px) !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__glass {
		border-radius: var(--evo-expert-panel-radius, 16px) !important;
		padding: 12px 48px 24px 56px !important;
		background: rgba(255, 255, 255, 0.57) !important;
		-webkit-backdrop-filter: blur(var(--evo-expert-glass-blur, 28px)) !important;
		backdrop-filter: blur(var(--evo-expert-glass-blur, 28px)) !important;
		/* Figma — warm brown frame (stronger top + left over white sheet) */
		border-style: solid !important;
		border-width: 1px !important;
		border-color: rgba(174, 107, 62, 0.42) !important;
		border-top-width: 1.5px !important;
		border-left-width: 0 !important;
		border-top-color: rgba(174, 107, 62, 0.72) !important;
		border-left-color: transparent !important;
		border-right-color: rgba(174, 107, 62, 0.48) !important;
		border-bottom-color: rgba(174, 107, 62, 0.48) !important;
		box-shadow: 0 10px 36px rgba(26, 24, 20, 0.07) !important;
		box-sizing: border-box !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__panel-scene {
		box-shadow: inset 0 0 0 1px rgba(174, 107, 62, 0.38) !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__glass .evo-expert-steps__item {
		border: none !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		box-shadow: 0 1px 2px rgba(26, 24, 20, 0.05) !important;
		padding: 24px 24px 24px 16px !important;
		min-height: 76px !important;
	}

	/* Each step block (Step 1 / 2 / 3 panel) — 20px breathing room top + bottom when scrolled into view */
	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		box-sizing: border-box !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps__glass .evo-expert-steps__panel-head {
		margin-bottom: 16px !important;
	}

	.evo-gtm-expert-stack .elementor-widget-evoport-expert-steps .evo-expert-steps__panel-scene,
	.evo-gtm-expert-stack .elementor-widget-evoport-expert-steps .evo-expert-steps__glass,
	.evo-gtm-expert-stack .elementor-widget-evoport-expert-steps .evo-expert-steps__panel-bg {
		border-radius: var(--evo-expert-panel-radius, 16px) !important;
	}

	/* Desktop panel — fixed viewport; list items scroll when overflow */
	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__glass {
		display: flex !important;
		flex-direction: column !important;
		height: 100% !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-body {
		display: flex !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		min-height: 0 !important;
		height: auto !important;
		overflow: hidden !important;
		transition: none !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-track {
		transition: transform 0.95s cubic-bezier(0.33, 0, 0.15, 1);
		will-change: transform;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		grid-area: unset !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer .evo-expert-steps__panel-head,
	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer .evo-expert-steps__panel-lottie {
		flex: none !important;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer .evo-expert-steps__items {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		-webkit-overflow-scrolling: touch;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer .evo-expert-steps__items::-webkit-scrollbar {
		width: 6px;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-layer .evo-expert-steps__items::-webkit-scrollbar-thumb {
		background: rgba(174, 107, 62, 0.35);
		border-radius: 999px;
	}

	.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-bg {
		transition: opacity 0.85s ease !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-track {
			transition: none !important;
		}

		.elementor-widget-evoport-expert-steps .evo-expert-steps:not(.is-mobile-layout) .evo-expert-steps__panel-bg {
			transition: opacity 0.2s ease !important;
		}
	}
}