/* Process Steps for Elementor - structural styles.
   Colors, sizes and typography come from --eps-* CSS variables
   set inline per widget instance, so the whole thing stays editable
   from the Elementor Style tab without touching this file. */

.eps-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	row-gap: var(--eps-row-gap, 40px);
}

.eps-step {
	flex: 1 1 0;
	min-width: var(--eps-step-min-width, 160px);
	display: flex;
	flex-direction: column;
	text-align: var(--eps-align, left);
	align-items: var(--eps-align-items, flex-start);
	padding-right: var(--eps-col-gap, 20px);
	box-sizing: border-box;
}

.eps-step:last-child {
	padding-right: 0;
}

.eps-step:first-child .eps-step__line--left {
	visibility: hidden;
}

.eps-step:last-child .eps-step__line--right {
	visibility: hidden;
}

/* top row: icon circle (with number behind it) + connector line */
.eps-step__top {
	display: flex;
	align-items: center;
	width: 100%;
}

.eps-step__circle-wrap {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--eps-circle-size, 80px);
	height: var(--eps-circle-size, 80px);
}

/* the number, sitting BEHIND the icon */
.eps-step__number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
	font-family: var(--eps-number-font-family, inherit);
	font-size: var(--eps-number-font-size, 48px);
	font-weight: var(--eps-number-font-weight, 700);
	color: var(--eps-number-color, #C9A227);
	opacity: var(--eps-number-opacity, 0.35);
}

.eps-step__circle {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--eps-circle-bg, transparent);
	border-style: solid;
	border-width: var(--eps-circle-border-width, 1px);
	border-color: var(--eps-circle-border-color, #C9A227);
	box-sizing: border-box;
}

.eps-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--eps-icon-size, 24px);
	color: var(--eps-icon-color, #C9A227);
	line-height: 1;
}

.eps-step__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* connector line: split into a left and right segment around the icon
   circle, each solid near the icon and fading out toward the far end
   (static, no animation). Which segment grows depends on the chosen
   Icon Alignment (see .eps-align-* rules below) — that's what lets the
   circle actually sit left / center / right instead of always being
   shoved to the left edge by a single line eating all the space. */
.eps-step__line {
	flex: 0 1 0%;
	height: var(--eps-line-height, 1px);
	margin: 0 var(--eps-line-gap, 10px);
}

.eps-step__line--left {
	flex-grow: 0;
	background-image: linear-gradient(
		to left,
		var(--eps-line-color-start, #C9A227) 0%,
		var(--eps-line-color-start, #C9A227) var(--eps-line-fade-start, 60%),
		var(--eps-line-color-end, rgba(201, 162, 39, 0)) 100%
	);
}

.eps-step__line--right {
	flex-grow: 1;
	background-image: linear-gradient(
		to right,
		var(--eps-line-color-start, #C9A227) 0%,
		var(--eps-line-color-start, #C9A227) var(--eps-line-fade-start, 60%),
		var(--eps-line-color-end, rgba(201, 162, 39, 0)) 100%
	);
}

/* Icon Alignment: Left (default) — matches the original look exactly,
   line only trails to the right of the icon. */

/* Icon Alignment: Center — both segments grow equally, so the fixed-size
   circle lands exactly in the middle with line trailing symmetrically. */
.eps-align-center .eps-step__line--left {
	flex-grow: 1;
}

/* Icon Alignment: Right — mirror of the default; the line trails to the
   left of the icon instead. */
.eps-align-flex-end .eps-step__line--left {
	flex-grow: 1;
}
.eps-align-flex-end .eps-step__line--right {
	flex-grow: 0;
}

.eps-step__title {
	width: 100%;
	margin: var(--eps-title-margin, 20px 0 10px);
	font-family: var(--eps-title-font-family, inherit);
	font-size: var(--eps-title-font-size, 20px);
	font-weight: var(--eps-title-font-weight, 700);
	line-height: var(--eps-title-line-height, 1.3);
	letter-spacing: var(--eps-title-letter-spacing, normal);
	text-transform: var(--eps-title-text-transform, none);
	color: var(--eps-title-color, #FFFFFF);
}

.eps-step__desc {
	width: 100%;
	margin: var(--eps-desc-margin, 0);
	font-family: var(--eps-desc-font-family, inherit);
	font-size: var(--eps-desc-font-size, 15px);
	font-weight: var(--eps-desc-font-weight, 400);
	line-height: var(--eps-desc-line-height, 1.6);
	letter-spacing: var(--eps-desc-letter-spacing, normal);
	color: var(--eps-desc-color, #999999);
}

/* Note: "Items Per Row" already has its own Tablet/Mobile values in the
   Elementor Style > Layout section (responsive control), so it stacks
   correctly on its own. The rules below are a safety net that hides the
   connector line once items wrap to their own line, since a horizontal
   line stops making visual sense in a stacked layout. */
@media (max-width: 767px) {
	.eps-step__line {
		visibility: hidden !important;
	}
	.eps-step__top {
		margin-bottom: 10px;
	}
}