/**
 * MP Stepper - Styles
 * Eigenständige Komponente (KEIN Modal-Bestandteil) - kann genauso in
 * einer normalen Seite stehen (Onboarding, Angebotsaufforderung) wie in
 * einem Modal-Body. Vorher Prototyp inline im [mp_modal_demo]-Snippet,
 * jetzt ausgelagert, weil eine zweite Verwendung ansteht.
 *
 * Ablage: wp-content/themes/EUER-CHILD-THEME/assets/css/mp-stepper.css
 * Konsumiert ausschließlich Tokens aus mp-tokens.css.
 */

.mp-stepper {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--mp-space-6);
}
.mp-stepper__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mp-space-2);
	flex: 0 0 auto;
	width: 96px;
}
.mp-stepper__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--mp-radius-pill);
	border: 2px solid var(--mp-ink-300);
	background: var(--mp-surface);
	color: var(--mp-ink-500);
	font-size: 14px;
	font-weight: 600;
}
.mp-stepper__label {
	font-size: var(--mp-fs-caption);
	color: var(--mp-ink-500);
	text-align: center;
}
.mp-stepper__step--active .mp-stepper__circle {
	border-color: var(--mp-primary);
	color: var(--mp-primary);
}
.mp-stepper__step--active .mp-stepper__label {
	color: var(--mp-ink-900);
	font-weight: 600;
}
.mp-stepper__step--done .mp-stepper__circle {
	border-color: var(--mp-primary);
	background: var(--mp-primary);
	color: var(--mp-surface);
}
.mp-stepper__line {
	flex: 1;
	height: 2px;
	margin-top: 15px;
	background: var(--mp-ink-300);
}
.mp-stepper__line--done {
	background: var(--mp-primary);
}

/* .mp-step-panel selbst braucht keine eigene Optik - nur das [hidden]
   der einzelnen Panels wird von mp-stepper.js gesteuert. Abstand zum
   Stepper übernimmt der margin-bottom von .mp-stepper oben. */