/**
 * Module: Checkout Components (Stepper & Secure Badge)
 * Design: Material 3 Expressive Tokens
 */

.checkout-stepper-wrapper {
	border: 0;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	margin: 0 1rem;
	padding: 0;
	width: auto;
}

.checkout-stepper br {
	display: none !important;
}

.checkout-stepper ol {
	align-items: center;
	display: flex !important;
	flex-direction: row !important;
	gap: 0;
	justify-content: center;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
}

.checkout-stepper .step-item {
	align-items: center;
	color: var(--md-sys-color-on-surface, #f0f0f0);
	display: flex;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	position: relative;
	text-transform: uppercase;
	transition: opacity 0.3s ease;
	white-space: nowrap;
}

.checkout-stepper a,
.checkout-stepper .step-content {
	align-items: center;
	color: inherit;
	cursor: default;
	display: flex !important;
	flex-direction: row !important;
	gap: 0.75rem;
	text-decoration: none !important;
}

.checkout-stepper a {
	cursor: pointer;
}

.checkout-stepper a:focus-visible {
	border-radius: var(--md-sys-shape-corner-full, 9999px);
	outline: 2px solid var(--md-sys-color-primary, currentColor);
	outline-offset: 4px;
}

.checkout-stepper .step-number {
	align-items: center;
	border: 2px solid var(--md-sys-color-outline-variant, #48454e);
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	font-size: 0.82rem;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	line-height: 1;
	transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
	width: 28px;
}

.checkout-stepper .step-item:not(:last-child)::after {
	background-color: var(--md-sys-color-on-surface-variant, #c9c5d0);
	content: "";
	display: block;
	height: 16px;
	margin: 0 1.5rem;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	opacity: 0.35;
	width: 16px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
}

.checkout-stepper .step-item.is-pending {
	opacity: 0.45;
}

.checkout-stepper .step-item.is-pending .step-number {
	opacity: 0.6;
}

.checkout-stepper .step-item.is-completed {
	opacity: 0.9;
}

.checkout-stepper .step-item.is-completed .step-number {
	background-color: color-mix(in srgb, var(--md-sys-color-primary, #c9bfff) 16%, transparent);
	border-color: var(--md-sys-color-primary, #c9bfff);
	color: transparent;
	opacity: 1;
	position: relative;
}

.checkout-stepper .step-item.is-completed .step-number::before {
	border-bottom: 2px solid var(--md-sys-color-primary, #c9bfff);
	border-right: 2px solid var(--md-sys-color-primary, #c9bfff);
	content: "";
	display: block;
	height: 10px;
	left: 50%;
	position: absolute;
	top: 45%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 5px;
}

.checkout-stepper .step-item.is-active {
	opacity: 1;
	color: var(--md-sys-color-on-surface, #e5e1e9);
}

.checkout-stepper .step-item.is-active .step-number {
	background-color: var(--md-sys-color-primary-container, #473f77);
	border-color: var(--md-sys-color-primary, #c9bfff);
	color: var(--md-sys-color-on-primary-container, #e5deff);
	box-shadow: 0 0 12px color-mix(in srgb, var(--md-sys-color-primary, #c9bfff) 30%, transparent);
}

/* Secure Badge */
.secure-badge-wrapper {
	align-items: center;
	background: transparent;
	display: flex;
	gap: 0;
	max-width: 100%;
	padding: 0.5rem 0;
	width: fit-content;
}

.secure-badge__icon {
	align-items: center;
	color: var(--md-sys-color-primary, #c9bfff);
	display: flex;
	flex: 0 0 auto;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.secure-badge__icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.secure-badge__separator {
	background-color: var(--md-sys-color-outline-variant, #48454e);
	height: 32px;
	margin: 0 0.5rem;
	opacity: 0.5;
	width: 1px;
}

.secure-badge__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 0.5;
}

.secure-badge__title {
	color: var(--md-sys-color-on-surface, #e5e1e9);
	font-family: var(--md-sys-typescale-label-large-font, inherit);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.secure-badge__subtitle {
	color: var(--md-sys-color-on-surface-variant, #c9c5d0);
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.8;
}

@media screen and (max-width: 1024px) {
	.wc-blocks-pattern-header-distraction-free .wp-block-group.is-layout-flex {
		align-items: center !important;
		flex-wrap: wrap !important;
		gap: 1rem !important;
	}

	.wc-blocks-pattern-header-distraction-free .wp-block-site-logo {
		justify-content: left;
		order: 1;
	}

	.wc-blocks-pattern-header-distraction-free .checkout-stepper-wrapper {
		justify-content: center;
		margin: 0.5rem 0 0 0;
		order: 3;
		width: 100%;
	}

	.wc-blocks-pattern-header-distraction-free .secure-badge-wrapper {
		justify-content: flex-end;
		order: 2;
	}
}

@media screen and (max-width: 768px) {
	.checkout-stepper-wrapper {
		margin: 0;
	}

	.checkout-stepper .step-label {
		display: none;
	}

	.checkout-stepper a,
	.checkout-stepper .step-content {
		gap: 0;
	}

	.checkout-stepper .step-item:not(:last-child)::after {
		margin: 0 0.75rem;
	}

	.secure-badge__title {
		font-size: 0.85rem;
	}

	.secure-badge__subtitle {
		font-size: 0.7rem;
	}
}