/* ── Steps Progress Widget ─────────────────────────────────────────── */

.cew-steps-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 236px;
	width: 100%;
	gap: 0;
	margin: 0 auto;
}

/* ── Individual Step ───────────────────────────────────────────────── */

.cew-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Circle ────────────────────────────────────────────────────────── */

.cew-step__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 16777200px;
	background: #2A2A2A;
	color: #666;
	font-family: 'Config';
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 18px;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cew-step__circle svg {
	width: 45%;
	height: 45%;
}

/* ── Connector Line ────────────────────────────────────────────────── */

.cew-step__line {
	flex: 1;
	height: 2px;
	background: #2A2A2A;
	min-width: 24px;
	margin-bottom: auto;
	margin: 0px 8px;  
	transition: background 0.25s ease;
}

/* ── States ────────────────────────────────────────────────────────── */

/* Active */
.cew-step--active .cew-step__circle {
	background: #fff;
	color: #000;
}

/* Completed */
.cew-step--completed .cew-step__circle {
	background: #e63946;
	color: #ffffff;
}

.cew-step__line--completed {
	background: #333333;
}