/* Temp legend inline styles until compiled */
.es-progress__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 15px;
}
.es-progress__legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
}
.es-progress__legend-color {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	background: var(--es-progress-fill-color);
}

/* Temp step inline styles until compiled */
.es-progress__steps {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
}
.es-progress__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex: 1;
	text-align: center;
}
.es-progress__step-indicator {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--es-progress-track-color, #eee);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all 0.3s ease;
}
.es-progress__step.is-active .es-progress__step-indicator {
	background: var(--es-step-active-color, var(--es-progress-fill-color));
	color: #fff;
}
.es-progress__step-connector {
	position: absolute;
	top: 20px;
	left: 50%;
	width: 100%;
	height: 4px;
	background: var(--es-progress-track-color, #eee);
	z-index: 1;
}
.es-progress__step.is-active .es-progress__step-connector {
	background: var(--es-step-active-color, var(--es-progress-fill-color));
}
.es-progress__step:last-child .es-progress__step-connector {
	display: none;
}
.es-progress__step-content {
	margin-top: 10px;
}
.es-progress__step-title {
	font-size: 14px;
	margin: 0;
}