/* =============================================================================
	 Stepper / wizard step indicator, light system
	 Trust-blue active, muted green completed, neutral connecting line.
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-stepper {
	display:     flex;
	align-items: flex-start;
	position:    relative;
}

.shiftora-stepper__step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex:           1;
	position:       relative;
}

/* Connecting line */
.shiftora-stepper__step::before {
	content:           '';
	position:          absolute;
	inset-block-start: 0.875rem;
	inset-inline-start: calc(-50% + 1.25rem);
	inset-inline-end:  calc(50% + 1.25rem);
	block-size:        2px;
	background-color:  var(--shiftora-color-border);
	z-index:           0;
}

.shiftora-stepper__step:first-child::before {
	display: none;
}

.shiftora-stepper__step.is-completed::before {
	background-color: var(--shiftora-color-success);
}

.shiftora-stepper__step.is-active::before {
	background-color: var(--shiftora-color-primary-border);
}

/* Circle */
.shiftora-stepper__circle {
	position:         relative;
	z-index:          1;
	inline-size:      1.75rem;
	block-size:       1.75rem;
	border-radius:    50%;
	background-color: var(--shiftora-color-bg-surface);
	border:           2px solid var(--shiftora-color-border);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	font-size:        var(--shiftora-font-size-xs);
	font-weight:      var(--shiftora-font-weight-semibold);
	color:            var(--shiftora-color-text-muted);
	transition:
		border-color     var(--shiftora-transition-fast),
		background-color var(--shiftora-transition-fast),
		color            var(--shiftora-transition-fast);
	margin-block-end: var(--shiftora-space-2);
}

.shiftora-stepper__step.is-active .shiftora-stepper__circle {
	background:       var(--shiftora-gradient-primary);
	box-shadow:       var(--shiftora-glow-primary);
	border-color:     var(--shiftora-color-primary);
	color:            var(--shiftora-color-on-primary);
}

.shiftora-stepper__step.is-completed .shiftora-stepper__circle {
	background-color: var(--shiftora-color-success);
	border-color:     var(--shiftora-color-success);
	color:            var(--shiftora-color-on-primary);
}

/* Label */
.shiftora-stepper__label {
	font-size:   var(--shiftora-font-size-xs);
	font-weight: var(--shiftora-font-weight-medium);
	color:       var(--shiftora-color-text-muted);
	text-align:  center;
	transition:  color var(--shiftora-transition-fast);
}

.shiftora-stepper__step.is-active .shiftora-stepper__label {
	color:       var(--shiftora-color-primary);
	font-weight: var(--shiftora-font-weight-semibold);
}

.shiftora-stepper__step.is-completed .shiftora-stepper__label {
	color: var(--shiftora-color-success);
}