/**
 * Order step indicator (Košík → Doprava a platba → Dokončenie objednávky).
 * Shared by the cart and checkout pages.
 */
.bozpo-checkout-steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 1180px;
	margin: var(--space-24, 24px) auto var(--space-8, 8px);
	padding: 0 var(--space-8, 8px);
	font-family: var(--font-body);
}

.bozpo-checkout-steps__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8, 8px);
	flex: 0 0 auto;
	text-align: center;
}

/* Linkable steps (cart, shipping/payment) */
a.bozpo-checkout-steps__step {
	text-decoration: none;
	cursor: pointer;
}

.bozpo-checkout-steps__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-circle);
	display: grid;
	place-items: center;
	background: var(--surface-soft);
	color: var(--color-muted);
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.bozpo-checkout-steps__icon svg { width: 26px; height: 26px; }

.bozpo-checkout-steps__label {
	font-size: var(--text-14, 14px);
	font-weight: 500;
	color: var(--color-muted);
	max-width: 12ch;
}

/* Completed step */
.bozpo-checkout-steps__step.is-done .bozpo-checkout-steps__icon {
	background: rgba(0, 160, 227, .12);
	color: var(--color-addtocart);
}
.bozpo-checkout-steps__step.is-done .bozpo-checkout-steps__label {
	color: var(--color-addtocart);
	font-weight: 600;
}

/* Current step */
.bozpo-checkout-steps__step.is-active .bozpo-checkout-steps__icon {
	background: rgba(0, 160, 227, .12);
	color: var(--color-addtocart);
	box-shadow: 0 0 0 4px rgba(0, 160, 227, .22);
}
.bozpo-checkout-steps__step.is-active .bozpo-checkout-steps__label {
	color: var(--color-addtocart);
	font-weight: 700;
}

.bozpo-checkout-steps__line {
	flex: 1 1 auto;
	height: 2px;
	background: var(--color-border);
	margin: 28px var(--space-8, 8px) 0;
}
.bozpo-checkout-steps__line.is-done { background: var(--color-addtocart); }

@media (max-width: 720px) {
	.bozpo-checkout-steps__icon { width: 46px; height: 46px; }
	.bozpo-checkout-steps__label { font-size: var(--text-12); }
}
