/* Booking-site stepper (STEP-002)
 * Presentational only. Brand-aligned per shared-booking-ui-contract.md §1/§2/§3/§6/§9.
 * No horizontal overflow on mobile. Uses literal fallbacks (brand colours)
 * so it works even if --primary/--success variables are not defined on the
 * booking site.
 */

.wsb-stepper {
	margin: 16px auto 24px;
	padding: 0 12px;
	max-width: 980px;
}

.wsb-stepper__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 8px 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wsb-stepper__step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	color: #6b7280; /* muted/upcoming */
	font: inherit;
}

.wsb-stepper__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	background: #fff;
	color: #6b7280;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	flex: 0 0 auto;
}

.wsb-stepper__label {
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

/* Completed step: success tint + check */
.wsb-stepper__step.is-completed {
	color: #15803d;
}

.wsb-stepper__step.is-completed .wsb-stepper__marker {
	border-color: #16a34a;
	background: #16a34a;
	color: #fff;
}

/* Current step: primary-filled gradient (red→purple per contract §3) */
.wsb-stepper__step.is-current {
	color: #111827;
}

.wsb-stepper__step.is-current .wsb-stepper__marker {
	border-color: transparent;
	background: linear-gradient(135deg, #e11d48, #7c3aed);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.wsb-stepper__step.is-current .wsb-stepper__label {
	font-weight: 700;
}

/* Connector between steps (subtle) */
.wsb-stepper__step + .wsb-stepper__step::before {
	content: "";
	width: 24px;
	height: 2px;
	background: #e5e7eb;
	margin-right: 8px;
	order: -1;
}

/* Mobile: stack cleanly, keep labels reachable, no horizontal scroll */
@media (max-width: 680px) {
	.wsb-stepper {
		padding: 0 8px;
	}

	.wsb-stepper__list {
		justify-content: flex-start;
	}

	.wsb-stepper__step {
		padding: 4px 6px;
	}

	.wsb-stepper__label {
		font-size: 13px;
	}

	.wsb-stepper__step + .wsb-stepper__step::before {
		width: 14px;
	}
}