/*!
 * Steps Widget Pro for Elementor — Frontend Styles
 * Version: 2.0.3
 *
 * 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);
	right: calc(-50% + var(--esw-badge-size, 68px) / 2 + 2px);
	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: flex-start;
	padding: 0;
	gap: 0;
}

/* ═══════════════════════════════════════════════════════════
   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);
	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; }

.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; }
.esw-step[style*="--esw-badge-bg"]    .esw-badge { background-color: var(--esw-badge-bg); }
.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: .35; transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════════════════
   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;
	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); }

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

.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: 2px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}

/* 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 {
	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);
}
.esw-btn:hover { background-color: #4f46e5; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,.3); }
.esw-btn:active { transform: translateY(0); }

.esw-btn-style--outline .esw-btn { background: transparent; border-color: #6366f1; color: #6366f1; }
.esw-btn-style--outline .esw-btn:hover { background: #6366f1; color: #fff; }
.esw-btn-style--ghost   .esw-btn { background: transparent; border-color: transparent; color: #6366f1; }
.esw-btn-style--ghost   .esw-btn:hover { background: rgba(99,102,241,.1); }
.esw-btn-style--link    .esw-btn { background: transparent; border-color: transparent; color: #6366f1; padding-left: 0; padding-right: 0; }
.esw-btn-style--link    .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; }

/* ═══════════════════════════════════════════════════════════
   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; color: var(--esw-text-muted); margin: 0 0 8px; }

.esw-progress-track {
	width: 100%;
	height: 8px;
	background-color: #e2e8f0;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
}
.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;
}
.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%); } }

/* ═══════════════════════════════════════════════════════════
   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); }
	.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;
	}
}