/* contenitore generico */
.mnx-stepper {
	width: 100%;
	position: relative;
	padding-bottom: 40px; /* spazio per le label */
}

/* riga cerchi + linee */
.mnx-track {
	display: flex;
	align-items: center; /* centra linee e cerchi sullo stesso asse verticale */
	width: 100%;
}

/* wrapper dello step: alto solo quanto il cerchio */
.mnx-step {
	flex: 0 0 auto;
	width: 50px; /* = diametro cerchio */
	height: 50px;
}

/* cerchio */
.mnx-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #cfcfcf;
	background: #ffffff;
	color: #999;
	font-weight: 700;
	font-size: 1.2rem;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* stati */
.mnx-circle.active,
.mnx-circle.done {
	background: #ff8800;
	border-color: #ff8800;
	color: #ffffff;
}

.mnx-circle.upcoming {
	background: #ffffff;
	border-color: #cfcfcf;
	color: #b5b5b5;
}

/* linea tra i cerchi */
.mnx-line {
	height: 3px;
	background: rgba(0, 0, 0, 0.25);
	margin: 0 12px;
}

/* label: posizionata sotto il cerchio, NON influisce sull'altezza dello step */
.mnx-label {
	position: absolute;
	top: 100%; /* subito sotto il cerchio */
	left: 50%;
	transform: translate(-50%, 12px); /* 12px di spazio sotto il cerchio */
	white-space: nowrap;
	color: #999;
	font-size: 1rem;
	text-align: center;
}
/* linea normale */
.mnx-line {
	height: 1px;
	background: #cfcfcf;
	margin: 0 12px;
}

/* linea completata → verde */
.mnx-line.done {
	background: #ff8800;
}