/*
 * Surgemint Track Parcel: page, result card and the "Track" call-to-action.
 * Colours, fonts and radius come from the theme's global design variables
 * (--pbd-*) with neutral fallbacks, so it follows Surgemint Theme → Design
 * and still looks right under any other theme.
 */

.surgemint-track {
	--sm-t-brand: var(--pbd-brand, #7c1d2b);
	--sm-t-on-brand: var(--pbd-on-brand, #ffffff);
	--sm-t-ink: var(--pbd-ink, #1f1a17);
	--sm-t-muted: var(--pbd-muted, #6c635b);
	--sm-t-line: var(--pbd-line, #e7dfd3);
	--sm-t-surface: var(--pbd-surface, #ffffff);
	--sm-t-tint: var(--pbd-tint, #f7f2ea);
	--sm-t-radius: var(--pbd-radius, 10px);
	--sm-t-success: var(--pbd-success, #1f7a4d);
	--sm-t-error: var(--pbd-error, #b42318);

	max-width: 640px;
	margin: 0 0 32px; /* left-aligned with the page container (logo, breadcrumb, content) */
	box-sizing: border-box;
	color: var(--sm-t-ink);
	font-family: var(--pbd-font-ui, inherit);
}

.surgemint-track *,
.surgemint-track *::before,
.surgemint-track *::after {
	box-sizing: border-box;
}

.surgemint-track__form,
.surgemint-track__result {
	padding: 20px 16px;
	border: 1px solid var(--sm-t-line);
	border-radius: calc(var(--sm-t-radius) * 1.6);
	background: var(--sm-t-surface);
}

@media (min-width: 600px) {
	.surgemint-track__form,
	.surgemint-track__result {
		padding: 28px;
	}
}

.surgemint-track__title {
	margin: 0 0 8px;
	font-family: var(--pbd-font-display, inherit);
	font-size: 1.5rem;
	line-height: 1.2;
}

.surgemint-track__lead,
.surgemint-track__meta,
.surgemint-track__note {
	margin: 0 0 16px;
	color: var(--sm-t-muted);
}

.surgemint-track__error {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: var(--sm-t-radius);
	background: var(--pbd-error-soft, #fdebe9);
	color: var(--sm-t-error);
	font-weight: 600;
}

.surgemint-track__field {
	margin: 0 0 16px;
}

.surgemint-track__field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.surgemint-track__field input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--pbd-field-border, var(--pbd-line-strong, #cfc4b3));
	border-radius: var(--sm-t-radius);
	background: var(--sm-t-surface);
	color: inherit;
	font: inherit;
}

.surgemint-track__field input:focus-visible,
.surgemint-track-btn:focus-visible {
	outline: 3px solid var(--pbd-focus, #1a5fd0);
	outline-offset: 2px;
}

/* Button: the same look wherever it appears (page, order view, thank-you) */
.surgemint-track-btn,
.surgemint-track-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 22px;
	border: 2px solid var(--sm-t-brand, var(--pbd-brand, #7c1d2b));
	border-radius: var(--pbd-btn-radius, var(--pbd-radius, 10px));
	background: var(--pbd-brand, #7c1d2b);
	color: var(--pbd-on-brand, #ffffff);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.surgemint-track-btn.surgemint-track-btn {
	text-decoration: none;
}

.surgemint-track-btn:hover {
	background: var(--pbd-brand-dark, #5f1420);
	border-color: var(--pbd-brand-dark, #5f1420);
	color: var(--pbd-on-brand, #ffffff);
}

.surgemint-track-cta {
	margin: 16px 0;
}

.surgemint-track__alt,
.surgemint-track__again {
	margin: 12px 0 0;
	font-size: 0.9375rem;
}

/* Result header */
.surgemint-track__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 4px;
}

.surgemint-track__head .surgemint-track__title {
	margin: 0;
}

.surgemint-track__status {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--pbd-info-soft, #e8f0fb);
	font-size: 0.8125rem;
	font-weight: 700;
}

.surgemint-track__status--completed {
	background: var(--pbd-success-soft, #e6f4ec);
	color: var(--sm-t-success);
}

.surgemint-track__status--cancelled,
.surgemint-track__status--failed,
.surgemint-track__status--refunded {
	background: var(--pbd-error-soft, #fdebe9);
	color: var(--sm-t-error);
}

/* Progress: horizontal on wide screens, stacked on phones */
.surgemint-track__steps {
	display: grid;
	gap: 0;
	margin: 20px 0;
	padding: 0;
	list-style: none;
	counter-reset: sm-step;
}

.surgemint-track__steps li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--sm-t-muted);
	counter-increment: sm-step;
}

.surgemint-track__steps li::before {
	content: counter(sm-step);
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--sm-t-line);
	border-radius: 50%;
	background: var(--sm-t-surface);
	font-size: 0.8125rem;
	font-weight: 700;
}

.surgemint-track__steps li.is-done,
.surgemint-track__steps li.is-current {
	color: var(--sm-t-ink);
	font-weight: 600;
}

.surgemint-track__steps li.is-done::before {
	border-color: var(--sm-t-success);
	background: var(--sm-t-success);
	color: #fff;
}

.surgemint-track__steps li.is-current::before {
	border-color: var(--pbd-brand, #7c1d2b);
	background: var(--pbd-brand, #7c1d2b);
	color: var(--pbd-on-brand, #fff);
}

@media (min-width: 600px) {
	.surgemint-track__steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.surgemint-track__steps li {
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		text-align: center;
	}
}

/* Parcels */
.surgemint-track__parcels {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.surgemint-track__parcel {
	padding: 14px;
	border: 1px solid var(--sm-t-line);
	border-radius: var(--sm-t-radius);
	background: var(--sm-t-tint);
}

.surgemint-track__parcel dl {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
}

.surgemint-track__parcel dl > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
}

.surgemint-track__parcel dt {
	color: var(--sm-t-muted);
}

.surgemint-track__parcel dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.surgemint-track__number {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.surgemint-track__parcel .surgemint-track-btn {
	width: 100%;
}

@media (min-width: 600px) {
	.surgemint-track__parcel .surgemint-track-btn {
		width: auto;
	}
}