/* WB Design System — Step Indicator */

.wb-step-indicator {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.wb-step-item {
	flex: 1;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: calc(var(--wb-ctx-radius, 0.9375rem) / 2);
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 500;
	opacity: 0.6;
	min-width: 5.625rem;
	transition: opacity 0.2s, background 0.2s;
}

.wb-step-item.wb-step-done {
	cursor: pointer;
	opacity: 0.8;
	background: var(--wb-ctx-primary);
}

.wb-step-item.wb-step-done:hover {
	opacity: 1;
}

.wb-step-item.wb-step-active {
	opacity: 1;
	background: var(--wb-ctx-text);
}

.wb-step-item.wb-step-active * {
	color: var(--wb-ctx-primary) !important;
}

.wb-step-num {
	display: inline-block;
	width: 1.375rem;
	height: 1.375rem;
	line-height: 1.375rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.75rem;
}

.wb-step-item.wb-step-active .wb-step-num { 
	background: var(--wb-ctx-primary);
	color: var(---wb-ctx-text) !important;
}

.wb-step-name {
	display: block;
}

/* Step navigation container */
.wb-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	gap: 0.75rem;
}

/* Responsive */
@media (max-width: 37.5rem) {
	.wb-step-indicator {
		flex-direction: column;
	}
}