/*!
 * Steps Widget Pro for Elementor — Frontend Styles
 * Version: 2.11.4
 *
 * NEW HTML STRUCTURE (v2.0.3):
 *
 * .esw-step                    ← grid cell, full height
 *   .esw-connector             ← OUTSIDE the box (horizontal only), absolutely positioned
 *   .esw-step-inner            ← the visible card (equal height via align-items:stretch)
 *     .esw-badge-row           ← holds badge + vertical connector
 *       .esw-badge-wrap        ← badge + pulse ring
 *         .esw-badge
 *         .esw-badge-pulse
 *       .esw-connector--vertical  ← inside badge-row for vertical layout
 *     .esw-step-content        ← subtitle, title, description, button
 */

/* ═══════════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════════ */
.esw-wrapper {
	--esw-badge-size:   68px;
	--esw-transition:   .3s ease;
	--esw-line-color:   #e2e8f0;
	--esw-primary:      #6366f1;
	--esw-primary-dark: #4f46e5;
	--esw-muted:        #94a3b8;
	--esw-text:         #1e293b;
	--esw-text-muted:   #64748b;
	box-sizing: border-box;
	width: 100%;
}
.esw-wrapper *, .esw-wrapper *::before, .esw-wrapper *::after { box-sizing: inherit; }

/* ═══════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════ */
.esw-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Equal-height boxes: stretch all cells to the tallest in each row */
	align-items: stretch;
	column-gap: 0;
	row-gap: 40px;
	width: 100%;
}

.esw-dir--vertical .esw-grid {
	grid-template-columns: 1fr;
	row-gap: 0;
}

/* ═══════════════════════════════════════════════════════════
   STEP CELL
   The grid cell. Holds: connector (absolute) + step-inner (the card).
   Must be position:relative so the connector can be absolute inside it.
   Must be display:flex so the inner card can stretch to full height.
═══════════════════════════════════════════════════════════ */
.esw-step {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Steps are always visible — JS adds .esw-js-ready before any hide */
	opacity: 1;
	transform: none;
}

.esw-step--disabled { opacity: .5; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   CONNECTOR — HORIZONTAL
   Absolutely positioned OUTSIDE the card.
   Spans from this cell's badge centre to the next cell's badge centre.
   Sits at the TOP of the step cell, at badge-centre height.
   The card (step-inner) must have enough padding-top to not be covered.
═══════════════════════════════════════════════════════════ */
.esw-step--last .esw-connector { display: none !important; }

.esw-dir--horizontal .esw-connector {
	position: absolute;
	/* Vertically: centre on the badge */
	top: calc(var(--esw-badge-size, 68px) / 2);
	transform: translateY(-50%);
	/* Horizontally: from badge right-edge → next badge left-edge */
	left:  calc(50% + var(--esw-badge-size, 68px) / 2 + 2px);
	/* Subtract the horizontal gap so the line still reaches the next badge when cards
	   are separated (the gap maths used to assume column-gap:0). */
	right: calc(-50% + var(--esw-badge-size, 68px) / 2 + 2px - var(--esw-gap-h, 0px));
	z-index: 3;
	display: flex;
	align-items: center;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   STEP INNER (the card)
   flex:1 makes it fill the full height of the grid cell → equal heights.
   padding-top must be at least badge-size + margin so content doesn't
   sit under the connector.
═══════════════════════════════════════════════════════════ */
.esw-step-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	transition: all .3s ease;
	/* Default padding — user can override via style controls */
	padding: 24px 16px 24px;
}

.esw-dir--vertical .esw-step-inner {
	flex-direction: row;
	align-items: stretch; /* stretch the badge column so the connector can fill the height */
	padding: 0;
	gap: 0;
}

/* Vertical: one continuous rail connecting badge centres across the stacked steps.
   A per-step line of height:100% starting at the badge centre reaches exactly the next
   badge centre (steps stack with no row-gap). Replaces the trapped in-card connector.
   --esw-v-pad-x/y are the card's left/top padding (set per preset; default 0). */
.esw-dir--vertical .esw-connector--vertical { display: none; }
.esw-dir--vertical .esw-step:not(.esw-step--last)::after {
	content: '';
	position: absolute;
	z-index: 0;
	width: 2px;
	height: 100%;
	left: calc(var(--esw-v-pad-x, 0px) + var(--esw-badge-size, 68px) / 2 - 1px);
	top:  calc(var(--esw-v-pad-y, 0px) + var(--esw-badge-size, 68px) / 2);
	background: var(--esw-line-color, #e2e8f0);
}
.esw-dir--vertical .esw-step--completed:not(.esw-step--last)::after { background: var(--esw-line-active, var(--esw-primary, #6366f1)); }
/* The rail is positioned for the default left badge column; skip it for centre/right. */
.esw-badge-pos--center.esw-dir--vertical .esw-step::after,
.esw-badge-pos--right.esw-dir--vertical  .esw-step::after { display: none; }

/* ═══════════════════════════════════════════════════════════
   BADGE ROW
   Horizontal: column (badge on top, no connector here)
   Vertical:   column (badge then connector below it)
═══════════════════════════════════════════════════════════ */
.esw-badge-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}

.esw-dir--vertical .esw-badge-row {
	width: var(--esw-badge-size, 68px);
	padding: 0 0 0 0;
}

/* ═══════════════════════════════════════════════════════════
   BADGE WRAP + BADGE
═══════════════════════════════════════════════════════════ */
.esw-badge-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 16px;
}

.esw-dir--vertical .esw-badge-wrap { margin-bottom: 0; }

.esw-badge {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--esw-badge-size, 68px);
	height: var(--esw-badge-size, 68px);
	border-radius: 50%;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background-color: var(--esw-muted);
	box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .35); /* soft depth (active state overrides with its halo) */
	overflow: hidden;
	transition: background-color var(--esw-transition),
	            box-shadow var(--esw-transition),
	            transform var(--esw-transition);
}

.esw-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Inline-SVG icons (Elementor's modern icon output) inherit the badge/button text colour. */
.esw-badge svg { fill: currentColor; }

.esw-step--active    .esw-badge { background-color: #6366f1; }
.esw-step--completed .esw-badge { background-color: #22c55e; }
.esw-step--disabled  .esw-badge { background-color: #e2e8f0; color: #94a3b8; }
/* Per-step custom colour overrides the gradient — clear background-image so the solid wins. */
.esw-step[style*="--esw-badge-bg"]    .esw-badge { background-color: var(--esw-badge-bg); background-image: none; }
.esw-step[style*="--esw-badge-color"] .esw-badge { color: var(--esw-badge-color); }

/* Pulse ring */
.esw-badge-pulse {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid #6366f1;
	opacity: 0;
	pointer-events: none;
	animation: esw-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes esw-pulse {
	0%, 100% { opacity: 0; transform: scale(1); }
	50%       { opacity: .28; transform: scale(1.06); }
}

/* ═══════════════════════════════════════════════════════════
   CONNECTOR — VERTICAL (inside .esw-badge-row)
═══════════════════════════════════════════════════════════ */
.esw-connector--vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	min-height: 40px;
	width: var(--esw-badge-size, 68px);
	padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
   LINE ELEMENTS
═══════════════════════════════════════════════════════════ */

/* Solid */
.esw-line-solid {
	display: block;
	flex: 1 1 0%;
	min-width: 4px;
	align-self: center;
	height: 2px;
	border-radius: 999px; /* rounded caps for a softer, premium finish */
	background-color: var(--esw-line-color, #e2e8f0);
	transition: background-color var(--esw-transition);
}
.esw-line-solid--active { background-color: var(--esw-primary, #6366f1) !important; }

/* Vertical solid */
.esw-connector--vertical .esw-line-solid {
	flex: 1 1 auto;
	min-width: unset;
	align-self: unset;
	width: 2px;
	height: auto;
	min-height: 4px;
}
.esw-dir--vertical .esw-line-solid--active { background-color: var(--esw-primary, #6366f1) !important; }

/* Styled lines (dashed / dotted / double) */
.esw-line {
	display: block;
	flex: 1 1 0%;
	min-width: 4px;
	align-self: center;
	height: 0;
	border-top: 2px solid var(--esw-line-color, #e2e8f0);
	overflow: visible;
	transition: border-color var(--esw-transition);
}
.esw-line--dashed { border-top-style: dashed; }
.esw-line--dotted { border-top-style: dotted; }
.esw-line--double { border-top-style: double; border-top-width: 5px; }
.esw-line--active { border-top-color: var(--esw-primary, #6366f1) !important; }

/* Vertical styled lines */
.esw-connector--vertical .esw-line {
	flex: 1 1 auto;
	min-height: 4px;
	height: auto;
	width: 0;
	min-width: unset;
	align-self: unset;
	border-top: none;
	border-left: 2px solid var(--esw-line-color, #e2e8f0);
}
.esw-connector--vertical .esw-line--dashed { border-left-style: dashed; }
.esw-connector--vertical .esw-line--dotted { border-left-style: dotted; }
.esw-connector--vertical .esw-line--double { border-left-style: double; border-left-width: 5px; }
.esw-connector--vertical .esw-line--active { border-left-color: var(--esw-primary, #6366f1) !important; border-top-color: transparent !important; }

/* ═══════════════════════════════════════════════════════════
   ARROW
═══════════════════════════════════════════════════════════ */
.esw-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--esw-muted, #94a3b8);
}
.esw-arrow--start { transform: scaleX(-1); }

/* Crisp SVG arrowhead — sizes with the Arrow Size control (1em = font-size),
   colours via currentColor (Arrow Color control), always centred on the line. */
.esw-arrow-svg {
	display: block;
	width: 1em;
	height: 1em;
	overflow: visible;
}

/* Flush against the line — pull the head's centred whitespace back onto the line end.
   Scoped to heads that sit next to a line so arrow-only mode is unaffected. */
.esw-line-solid + .esw-arrow,
.esw-line + .esw-arrow        { margin-left: -0.42em; }
.esw-arrow--start             { margin-right: -0.42em; }

.esw-connector--vertical .esw-arrow        { transform: rotate(90deg);  }
.esw-connector--vertical .esw-arrow--start { transform: rotate(-90deg); }

/* Vertical connector flows top→bottom, so pull along the block axis instead. */
.esw-connector--vertical .esw-line-solid + .esw-arrow,
.esw-connector--vertical .esw-line + .esw-arrow        { margin-left: 0; margin-top: -0.42em; }
.esw-connector--vertical .esw-arrow--start             { margin-right: 0; margin-bottom: -0.42em; }

.esw-arrow-css {
	flex-shrink: 0;
	width: 0; height: 0; font-size: 0;
	border-top:    8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left:   8px solid var(--esw-muted, #94a3b8);
}
.esw-connector--vertical .esw-arrow-css {
	border-left:   8px solid transparent;
	border-right:  8px solid transparent;
	border-top:    8px solid var(--esw-muted, #94a3b8);
	border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════
   CONTENT
═══════════════════════════════════════════════════════════ */
.esw-step-content {
	text-align: center;
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Push button to bottom of card */
.esw-btn-wrap { margin-top: auto; padding-top: 16px; }

.esw-dir--vertical .esw-step-content {
	text-align: left;
	padding: 6px 0 24px 20px;
}

.esw-badge-pos--right.esw-dir--vertical  .esw-step-content  { order: -1; text-align: right; padding-left: 0; padding-right: 20px; }
.esw-badge-pos--center.esw-dir--vertical .esw-step-inner    { flex-direction: column; align-items: center; }
.esw-badge-pos--center.esw-dir--vertical .esw-step-content  { text-align: center; padding-left: 0; }

/* Subtitle */
.esw-subtitle {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--esw-primary);
	background: rgba(99,102,241,.1);
	padding: 3px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

/* Title */
.esw-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--esw-text, #1e293b);
	margin: 0 0 8px;
	line-height: 1.35;
}
.esw-step--active    .esw-title { color: var(--esw-primary-dark, #4f46e5); }
.esw-step--completed .esw-title { color: #16a34a; }

/* Description */
.esw-desc { font-size: .875rem; color: var(--esw-text-muted, #64748b); line-height: 1.65; margin: 0; }
.esw-desc p { margin: 0 0 .5em; }
.esw-desc p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════════════════════ */
.esw-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background-color: #6366f1;
	border: 2px solid transparent;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--esw-transition), color var(--esw-transition),
	            border-color var(--esw-transition), box-shadow var(--esw-transition),
	            transform var(--esw-transition);
}
/* Keep the label + icon above the glossy sheen. */
.esw-btn > * { position: relative; z-index: 1; }
/* Subtle top sheen for a premium, dimensional fill — works over any base colour. */
.esw-btn-style--filled .esw-wrapper .esw-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
	pointer-events: none;
}
.esw-btn:hover { background-color: #4f46e5; transform: translateY(-2px); box-shadow: 0 8px 22px -6px rgba(99,102,241,.45); }
.esw-btn:active { transform: translateY(0) scale(.98); }

/* Icon slides toward its direction on hover — a premium "go" cue. */
.esw-btn-icon { transition: transform .25s ease; }
.esw-btn:hover .esw-btn-icon--right { transform: translateX(3px); }
.esw-btn:hover .esw-btn-icon--left  { transform: translateX(-3px); }

/* Filled — explicit prefix-class rule so it has the same (0,2,0) specificity as the other
   styles and stays filled even where a theme/editor adds its own link/button styling
   (the base .esw-btn rule alone is too low-specificity to win there). */
.esw-btn-style--filled .esw-wrapper .esw-btn { background-color: var(--esw-primary, #6366f1); border-color: transparent; color: #fff; }
.esw-btn-style--filled .esw-wrapper .esw-btn:hover { background-color: var(--esw-primary-dark, #4f46e5); color: #fff; }

/* For the non-filled styles the text/border colour IS the visual identity, and some themes /
   the Elementor editor apply a global Theme Style link colour with high specificity. Lock our
   intended colour with !important so the style reads correctly everywhere (incl. the editor).
   Background, padding, radius, typography, shadow and size all remain control-customisable. */
.esw-btn-style--outline .esw-wrapper .esw-btn { background: transparent; border-color: var(--esw-primary, #6366f1) !important; color: var(--esw-primary, #6366f1) !important; }
.esw-btn-style--outline .esw-wrapper .esw-btn:hover { background: var(--esw-primary, #6366f1); color: #fff !important; }
.esw-btn-style--ghost   .esw-wrapper .esw-btn { background: transparent; border-color: transparent !important; color: var(--esw-primary, #6366f1) !important; }
.esw-btn-style--ghost   .esw-wrapper .esw-btn:hover { background: rgba(99,102,241,.1); }
.esw-btn-style--link    .esw-wrapper .esw-btn { background: transparent; border-color: transparent !important; color: var(--esw-primary, #6366f1) !important; padding-left: 0; padding-right: 0; }
.esw-btn-style--link    .esw-wrapper .esw-btn:hover { text-decoration: underline; transform: none; }

.esw-btn-size--xs .esw-btn { padding: 4px 12px;  font-size: .75rem; }
.esw-btn-size--sm .esw-btn { padding: 6px 16px;  font-size: .8125rem; }
.esw-btn-size--md .esw-btn { padding: 10px 24px; font-size: .9375rem; }
.esw-btn-size--lg .esw-btn { padding: 12px 30px; font-size: 1rem; }
.esw-btn-size--xl .esw-btn { padding: 14px 36px; font-size: 1.0625rem; }
.esw-btn-icon--left  { margin-right: 2px; }
.esw-btn-icon--right { margin-left:  2px; }
.esw-btn svg { fill: currentColor; width: 1em; height: 1em; }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════════ */
.esw-progress-wrap        { width: 100%; }
.esw-progress-wrap--above { margin-bottom: 24px; }
.esw-progress-wrap--below { margin-top: 24px; }
.esw-progress-label {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--esw-text-muted);
	margin: 0 0 10px;
}

.esw-progress-track {
	width: 100%;
	height: 10px;
	background-color: #e2e8f0;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	/* Recessed depth so the fill reads as sitting inside the track. */
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, .14);
}
.esw-progress-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #6366f1, #8b5cf6);
	border-radius: 30px;
	transition: width .8s cubic-bezier(.4,0,.2,1);
	position: relative;
	overflow: hidden; /* clip the gloss + shimmer to the rounded fill */
}
/* Glossy top highlight for a premium, dimensional fill. */
.esw-progress-fill::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
	pointer-events: none;
}
.esw-progress-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
	animation: esw-shimmer 2s infinite;
}
@keyframes esw-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* Pause the continuous shimmer + pulse while the widget is scrolled offscreen (JS toggles
   .esw-paused). Defaults to running, so behaviour is unchanged when JS is unavailable. */
.esw-paused .esw-progress-fill::after,
.esw-paused .esw-badge-pulse { animation-play-state: paused; }

/* Per-step markers — dots on the track, filled as steps complete (sits over the fill). */
.esw-progress-ticks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.esw-progress-tick {
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #cbd5e1;
	transform: translate(-50%, -50%);
	transition: background-color .3s ease, box-shadow .3s ease;
}
.esw-progress-tick--done {
	background-color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — safe approach
═══════════════════════════════════════════════════════════ */
.esw-js-ready[data-animation="fadeUp"]    .esw-step:not(.esw-animated) { opacity: 0; transform: translateY(28px); }
.esw-js-ready[data-animation="fadeIn"]    .esw-step:not(.esw-animated) { opacity: 0; }
.esw-js-ready[data-animation="slideLeft"] .esw-step:not(.esw-animated) { opacity: 0; transform: translateX(-28px); }
.esw-js-ready[data-animation="zoomIn"]    .esw-step:not(.esw-animated) { opacity: 0; transform: scale(.85); }
.esw-js-ready[data-animation="flipUp"]    .esw-step:not(.esw-animated) { opacity: 0; transform: perspective(600px) rotateX(18deg) translateY(18px); }

.esw-step.esw-animated {
	opacity: 1 !important;
	transform: none !important;
	transition-property: opacity, transform;
}

/* Connector draw */
.esw-js-ready[data-conn-animate="yes"] .esw-line-solid {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .7s ease, background-color var(--esw-transition);
}
.esw-js-ready[data-conn-animate="yes"] .esw-line {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .7s ease, border-color var(--esw-transition);
}
.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-line-solid,
.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-line { transform: scaleX(1); }

.esw-js-ready[data-conn-animate="yes"] .esw-connector--vertical .esw-line-solid {
	transform-origin: top center; transform: scaleY(0);
}
.esw-js-ready[data-conn-animate="yes"] .esw-connector--vertical .esw-line {
	transform-origin: top center; transform: scaleY(0);
}
.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-connector--vertical .esw-line-solid,
.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-connector--vertical .esw-line { transform: scaleY(1); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE

   TABLET (max 1024px): 2-column grid.
   The connector is absolute so it automatically spans to next cell.
   Hide connector on every even step (right column edge).

   MOBILE (max 767px): single column.
   The connector is absolute and still works — it now spans to the
   next row's badge. BUT since it's single column, top/left/right
   based positioning collapses to zero width.
   FIX: on mobile, switch connector to a centred vertical bar BELOW
   the badge, using static positioning, BEFORE the step-inner card.
═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
	.esw-dir--horizontal .esw-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Right edge of each row — no connector beyond grid boundary */
	.esw-dir--horizontal .esw-step:nth-child(2n):not(.esw-step--last) .esw-connector {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.esw-dir--horizontal .esw-grid {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	/* CRITICAL FIX: undo the tablet nth-child(2n) hide rule.
	   On mobile (1 column) every step is in its own row, so ALL
	   connectors except the last must show. */
	.esw-dir--horizontal .esw-step:nth-child(2n):not(.esw-step--last) .esw-connector {
		display: flex !important;
	}

	/* Convert absolute connector to in-flow vertical bar */
	.esw-dir--horizontal .esw-connector {
		/* Convert to in-flow vertical bar */
		position: static !important;
		transform: none !important;
		top: auto !important; left: auto !important; right: auto !important;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 6px 0;
		min-height: 36px;
		order: 2;   /* appears after .esw-step-inner (order:1) */
	}

	/* step becomes a column: [step-inner] then [connector] */
	.esw-dir--horizontal .esw-step {
		flex-direction: column;
		align-items: center;
	}

	.esw-dir--horizontal .esw-step-inner {
		order: 1;
		align-items: center;
		width: 100%;
	}

	/* Mobile lines become vertical bars */
	.esw-dir--horizontal .esw-line-solid {
		flex: 0 0 36px;
		width: 2px;
		height: 36px;
		min-width: unset;
		align-self: unset;
	}

	.esw-dir--horizontal .esw-line {
		flex: 0 0 36px;
		height: 36px;
		min-width: unset;
		width: 0;
		align-self: unset;
		border-top: none !important;
		border-left: 2px solid var(--esw-line-color, #e2e8f0);
	}

	.esw-dir--horizontal .esw-line--dashed { border-left-style: dashed !important; }
	.esw-dir--horizontal .esw-line--dotted { border-left-style: dotted !important; }
	.esw-dir--horizontal .esw-line--double { border-left-style: double !important; border-left-width: 5px !important; }
	.esw-dir--horizontal .esw-line--active { border-left-color: var(--esw-primary, #6366f1) !important; border-top-color: transparent !important; }
	.esw-dir--horizontal .esw-line-solid--active { background-color: var(--esw-primary, #6366f1); }

	/* Arrow points downward on mobile */
	.esw-dir--horizontal .esw-arrow        { transform: rotate(90deg);  }
	.esw-dir--horizontal .esw-arrow--start { transform: rotate(-90deg); }

	/* Mobile connector is a vertical column — pull the head flush along the block axis. */
	.esw-dir--horizontal .esw-line-solid + .esw-arrow,
	.esw-dir--horizontal .esw-line + .esw-arrow        { margin-left: 0; margin-top: -0.42em; }
	.esw-dir--horizontal .esw-arrow--start             { margin-right: 0; margin-bottom: -0.42em; }
	.esw-dir--horizontal .esw-arrow-css {
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid var(--esw-muted, #94a3b8);
		border-bottom: none;
	}

	/* Connector draw animation — mobile is vertical scale */
	.esw-js-ready[data-conn-animate="yes"] .esw-dir--horizontal .esw-line-solid,
	.esw-js-ready[data-conn-animate="yes"] .esw-dir--horizontal .esw-line {
		transform-origin: top center;
		transform: scaleY(0);
		transition: transform .7s ease;
	}
	.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-dir--horizontal .esw-line-solid,
	.esw-js-ready[data-conn-animate="yes"].esw-in-view .esw-dir--horizontal .esw-line {
		transform: scaleY(1);
	}

	/* Last step — no connector */
	.esw-dir--horizontal .esw-step--last .esw-connector { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ELEMENTOR EDITOR
═══════════════════════════════════════════════════════════ */
.elementor-editor-active .esw-step,
.elementor-editor-preview .esw-step {
	opacity: 1 !important;
	transform: none !important;
}
.elementor-editor-active .esw-line-solid,
.elementor-editor-active .esw-line,
.elementor-editor-preview .esw-line-solid,
.elementor-editor-preview .esw-line {
	transform: none !important;
}

/* ═══════════════════════════════════════════════════════════
   CONNECTOR WIDTH + CENTRE + CUSTOM IMAGE  (v2.0.4)
═══════════════════════════════════════════════════════════ */

/*
 * .esw-connector        = outer shell (full gap width, used for positioning)
 * .esw-connector-inner  = visible part (sized by --esw-conn-width, centred)
 *
 * By keeping the outer shell full-width we keep the absolute
 * positioning geometry intact. The inner wrapper shrinks/centres.
 */

/* Outer: still full-width, flex row so inner can be centred */
.esw-dir--horizontal .esw-connector {
	/* justify-content controlled by Elementor selector */
	display: flex;
	align-items: center;
}

/* Inner: takes the user-defined width % */
.esw-connector-inner {
	display: flex;
	align-items: center;
	width: var(--esw-conn-width, 100%);
	/* Apply the vertical offset here so it doesn't fight
	   the outer shell's translateY(-50%) centering */
	transform: translateY(var(--esw-conn-offset, 0px));
}

/* Vertical connector inner */
.esw-connector--vertical .esw-connector-inner {
	flex-direction: column;
	width: auto;
	height: var(--esw-conn-width, 100%);  /* width % becomes height % for vertical */
	transform: translateX(var(--esw-conn-offset, 0px));
}

/* Lines inside inner still grow to fill it */
.esw-connector-inner .esw-line-solid,
.esw-connector-inner .esw-line { flex: 1 1 0%; }

/* ── Custom image connector ── */
.esw-connector-image {
	display: block;
	width: 100%;
	height: 24px;        /* default; overridden by Elementor slider */
	flex-shrink: 0;
}

/* Repeat/tile mode (uses background-image via inline style) */
.esw-connector-image--repeat {
	width: 100%;
	flex: 1 1 0%;
}

/* Vertical custom image */
.esw-connector-image--vertical {
	width: 24px;
	height: 100%;
	object-fit: contain;
}

/* Flip (mirror) on completed step */
.esw-connector-image--flip { transform: scaleX(-1); }
.esw-connector-image--vertical.esw-connector-image--flip { transform: scaleY(-1); }

/* Mobile: custom image becomes vertical too */
@media (max-width: 767px) {
	.esw-dir--horizontal .esw-connector-inner {
		flex-direction: column;
		width: auto;
		height: auto;
		min-height: 36px;
	}

	.esw-dir--horizontal .esw-connector-image {
		width: 24px;
		height: 100%;
		min-height: 36px;
		object-fit: contain;
	}
}

/* ═══════════════════════════════════════════════════════════
   STEPS WIDGET PRO — v2.1.0 Additions
   © 2024 Sandipan Das · https://sandipandas.dev
   ─────────────────────────────────────────────────────────
   Accessibility, Wizard Mode, prefers-reduced-motion
═══════════════════════════════════════════════════════════ */

/* ── Semantic list reset (we use <ol> for a11y) ───────────── */
.esw-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
.esw-grid > li {
	list-style: none;
}

/* ── Screen-reader-only utility ───────────────────────────── */
.esw-sr-only,
.esw-sr-live {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── Focus-visible ring for keyboard nav ──────────────────── */
.esw-step--interactive:focus-visible {
	outline: 3px solid var(--esw-primary, #6366f1);
	outline-offset: 4px;
	border-radius: 8px;
}
.esw-step--interactive {
	cursor: pointer;
}
.esw-step--disabled {
	cursor: not-allowed;
}
/* Disabled steps: prevent pointer interaction but keep visible for context */
.esw-step--disabled .esw-step-inner {
	pointer-events: none;
}

/* ── Wizard Nav Bar ───────────────────────────────────────── */
.esw-wizard-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 28px;
}
.esw-wizard-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	border: 1.5px solid var(--esw-primary, #6366f1);
	border-radius: 10px;
	background: transparent;
	color: var(--esw-primary, #6366f1);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease,
	            box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.esw-wizard-btn:hover:not(:disabled) {
	background: var(--esw-primary, #6366f1);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(99, 102, 241, .4);
}
.esw-wizard-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.esw-wizard-btn:focus-visible {
	outline: 3px solid var(--esw-primary, #6366f1);
	outline-offset: 3px;
}
.esw-wizard-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Next — primary filled with a glossy sheen + soft glow */
.esw-wizard-next {
	background: var(--esw-primary, #6366f1);
	color: #fff;
	box-shadow: 0 4px 14px -6px rgba(99, 102, 241, .5);
}
.esw-wizard-next::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1; /* below the button label, above its background */
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}
.esw-wizard-next:hover:not(:disabled) {
	background: var(--esw-primary-dark, #4f46e5);
	border-color: var(--esw-primary-dark, #4f46e5);
	box-shadow: 0 10px 24px -6px rgba(99, 102, 241, .5);
}

/* Reset — quiet ghost action, pushed to the right */
.esw-wizard-reset {
	border-color: transparent;
	background: transparent;
	color: var(--esw-text-muted, #64748b);
	margin-left: auto;
	font-size: 0.8125rem;
	padding: 9px 16px;
}
.esw-wizard-reset:hover:not(:disabled) {
	background: rgba(15, 23, 42, .05);
	color: var(--esw-text, #1e293b);
	transform: none;
	box-shadow: none;
}

/* ── Completion message ───────────────────────────────────── */
.esw-wizard-complete {
	margin-top: 20px;
	padding: 16px 20px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	color: #15803d;
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	animation: esw-fadein 0.4s ease;
}
@keyframes esw-fadein {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Button focus-visible ─────────────────────────────────── */
.esw-btn:focus-visible {
	outline: 3px solid var(--esw-primary, #6366f1);
	outline-offset: 3px;
}

/* ── Progress bar: accessible label ──────────────────────── */
.esw-progress-track:focus-visible {
	outline: 3px solid var(--esw-primary, #6366f1);
}

/* ── prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.esw-step {
		transition: none !important;
	}
	.esw-badge-pulse {
		animation: none !important;
	}
	.esw-progress-fill {
		transition: none !important;
	}
	.esw-progress-fill::after {
		animation: none !important;
	}
	.esw-wizard-complete {
		animation: none !important;
	}
	.esw-wizard-btn {
		transition: none !important;
	}
	.esw-wizard-btn:hover:not(:disabled),
	.esw-wizard-btn:active:not(:disabled) {
		transform: none !important;
	}
	.esw-btn, .esw-btn-icon {
		transition: none !important;
	}
	.esw-btn:hover, .esw-btn:active,
	.esw-btn:hover .esw-btn-icon--left,
	.esw-btn:hover .esw-btn-icon--right {
		transform: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   STYLE PRESETS — v2.2.0
   © 2024 Sandipan Das · https://sandipandas.dev
   ─────────────────────────────────────────────────────────
   Applied as `esw-preset--X` on the widget wrapper via
   prefix_class. Presets style the card/decoration layer only
   (.esw-step-inner has no control defaults), so they act as a
   baseline — any style control the user changes still wins.
═══════════════════════════════════════════════════════════ */

/* ── Default — refined premium card (v2.4.0) ──────────────── */
.esw-preset--default .esw-step-inner {
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, .07);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
	            0 10px 30px -18px rgba(15, 23, 42, .25);
	padding: 24px 24px 28px; /* top kept aligned with the connector's badge-centre maths */
}
.esw-preset--default .esw-step-inner:hover {
	border-color: rgba(99, 102, 241, .25);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .05),
	            0 22px 44px -22px rgba(15, 23, 42, .35);
}
.esw-preset--default .esw-step--active .esw-step-inner {
	border-color: rgba(99, 102, 241, .35);
	box-shadow: 0 2px 4px rgba(99, 102, 241, .12),
	            0 22px 48px -22px rgba(99, 102, 241, .45);
}
/* Vertical layout keeps the row card flush (badge sits beside the content). */
.esw-preset--default.esw-dir--vertical .esw-step-inner {
	padding: 20px 24px;
}
/* Tell the connecting rail where the badge centre sits (card left/top padding). */
.esw-preset--default.esw-dir--vertical,
.esw-preset--elevated.esw-dir--vertical,
.esw-preset--bordered.esw-dir--vertical { --esw-v-pad-x: 24px; --esw-v-pad-y: 20px; }

/* ── Elevated — soft floating cards ───────────────────────── */
.esw-preset--elevated .esw-step-inner {
	background: #ffffff;
	border: 1px solid rgba(2, 6, 23, .05);
	border-radius: 18px;
	box-shadow: 0 12px 30px -14px rgba(2, 6, 23, .22),
	            0 3px 8px -4px rgba(2, 6, 23, .10);
}
.esw-preset--elevated .esw-step--active .esw-step-inner {
	box-shadow: 0 20px 44px -16px rgba(99, 102, 241, .40);
	transform: translateY(-4px);
}
.esw-preset--elevated .esw-step--completed .esw-step-inner {
	box-shadow: 0 16px 36px -16px rgba(34, 197, 94, .30);
}

/* ── Minimal — flat, no card ──────────────────────────────── */
.esw-preset--minimal .esw-step-inner {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 8px;
}
.esw-preset--minimal.esw-dir--vertical .esw-step-inner {
	padding: 0;
}

/* ── Bordered — outline cards that recolour per state ─────── */
.esw-preset--bordered .esw-step-inner {
	background: #ffffff;
	border: 2px solid var(--esw-line-color, #e2e8f0);
	border-radius: 14px;
	transition: border-color var(--esw-transition);
}
.esw-preset--bordered .esw-step--active .esw-step-inner {
	border-color: var(--esw-primary, #6366f1);
}
.esw-preset--bordered .esw-step--completed .esw-step-inner {
	border-color: #22c55e;
}

/* ── Timeline — connector-forward, transparent cards ──────── */
.esw-preset--timeline .esw-step-inner {
	background: transparent;
	border: none;
	box-shadow: none;
}
.esw-preset--timeline .esw-line-solid,
.esw-preset--timeline .esw-line {
	opacity: 1;
}
/* Vertical timeline reads best with a touch more breathing room */
.esw-preset--timeline.esw-dir--vertical .esw-step-content {
	padding-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════
   BADGE STRADDLE — v2.6.0
   © 2024 Sandipan Das · https://sandipandas.dev
   ─────────────────────────────────────────────────────────
   Push the card top below the connector line and lift the badge
   so its centre sits on the line. The line then lives in a band
   that holds only badges (no card at that height) → it can never
   paint across a card surface. Derived from --esw-badge-size so it
   tracks the Badge Size control. Placed after the presets so the
   padding-top reset wins the specificity tie. Horizontal only.
═══════════════════════════════════════════════════════════ */
.esw-dir--horizontal .esw-step-inner {
	margin-top: calc(var(--esw-badge-size, 68px) / 2 + 8px);
	padding-top: 0;
}
.esw-dir--horizontal .esw-badge-wrap {
	margin-top: calc(-1 * (var(--esw-badge-size, 68px) / 2 + 8px));
}

/* Mobile stacks vertically with the connector below each card — no straddle. */
@media (max-width: 767px) {
	.esw-dir--horizontal .esw-step-inner { margin-top: 0; padding-top: 24px; }
	.esw-dir--horizontal .esw-badge-wrap { margin-top: 0; }
}