/**
 * SPD Order — Phase 8 stylesheet (confirmation + tracking).
 *
 * Reproduces the React OrderConfirmationPage / OrderTrackingPage
 * (design-spd/src/pages/OrderConfirmationPage.tsx /
 * OrderTrackingPage.tsx) on the native WooCommerce order-received
 * endpoint and the suivi-commande page.
 *
 * Scoping:
 *   - #spd-order-confirmation-page (order-received endpoint)
 *   - #spd-order-tracking-page    (suivi-commande page)
 *   - .spd-timeline*               (shared order-timeline component)
 *   - .spd-btn*                    (shared page buttons)
 * so nothing leaks to home / shop / product / cart / checkout pages —
 * and the file is only enqueued on those two surfaces (inc/enqueue.php).
 *
 * Breakpoints mirror the React Tailwind design:
 *   - sm (≥640px): 2-col info grids, horizontal banners
 *   - below:       single column, stacked cards, vertical timeline
 */

/* ==============================================================
 * Page shells — React: max-w-4xl mx-auto px-4 sm:px-6 py-8 py-6
 * space-y-8 pb-16
 * ==============================================================*/

#spd-order-confirmation-page,
#spd-order-tracking-page {
	max-width: 56rem;               /* max-w-4xl */
	margin: 0 auto;
	padding-left: 16px;             /* px-4 */
	padding-right: 16px;
	padding-bottom: 64px;           /* pb-16 */
	font-family: var(--spd-font-family);
	color: var(--spd-text);
}

#spd-order-confirmation-page { padding-top: 32px; } /* py-8 */
#spd-order-tracking-page    { padding-top: 24px; } /* py-6 */

#spd-order-confirmation-page > * + *,
#spd-order-tracking-page > * + * {
	margin-top: 32px;              /* space-y-8 */
}

/* Astra's #content > .ast-container is display:flex; on this custom
 * template the bare <main id="main"> is the flex item and, with the
 * default flex behavior, only takes its content width — so the whole
 * max-w-4xl shell hugged the left edge and left a large empty area on
 * the right. Let it fill the container so the shell's margin:auto can
 * actually center the content (same behavior as Astra's #primary). */
body.spd-tracking-page #main {
	width: 100%;
}

/* React pages own their heading — the Astra page title is hidden on
 * both surfaces (the checkout form keeps its validated title). */
body.woocommerce-order-received .entry-header,
body.spd-tracking-page .entry-header { display: none; }

/* Shared page buttons — React: flex items-center gap-2 font-bold
 * rounded-xl text-xs sm:text-sm px-5 py-3 (lg) / py-2.5 (default). */
.spd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;                       /* gap-2 */
	font-family: var(--spd-font-family);
	font-weight: var(--spd-font-weight-bold);
	font-size: var(--spd-font-size-xs);
	line-height: 1.25;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--spd-radius-lg); /* rounded-xl */
	cursor: pointer;
	padding: 10px 20px;             /* py-2.5 px-5 */
	transition: background var(--spd-transition-fast), color var(--spd-transition-fast), border-color var(--spd-transition-fast);
}
.spd-btn--lg { padding: 12px 20px; } /* py-3 px-5 */
.spd-btn--primary {
	background: var(--spd-ui-blue);
	color: #fff;
	box-shadow: var(--spd-shadow-xs);
}
.spd-btn--primary:hover,
.spd-btn--primary:focus-visible {
	background: var(--spd-ui-blue-dark);
	color: #fff;
}
.spd-btn--ghost {
	background: var(--spd-surface);
	border-color: var(--spd-border);
	color: #334155;                  /* slate-700 */
}
.spd-btn--ghost:hover,
.spd-btn--ghost:focus-visible {
	background: var(--spd-bg);       /* slate-50 */
	color: #334155;
}
.spd-btn .spd-icon { width: 16px; height: 16px; }
@media (min-width: 640px) {
	.spd-btn { font-size: var(--spd-font-size-sm); }
}

/* ==============================================================
 * 8A — Confirmation page (OrderConfirmationPage.tsx)
 * ==============================================================*/

/* ── Header banner — React: bg-emerald-50 rounded-3xl border
 *    border-emerald-200 p-6 sm:p-8 text-center space-y-3 ── */
.spd-confirm__banner {
	background: #ECFDF5;            /* emerald-50 */
	border: 1px solid #A7F3D0;       /* emerald-200 */
	border-radius: var(--spd-radius-2xl);
	padding: 24px;
	text-align: center;
}
.spd-confirm__banner > * + * { margin-top: 12px; } /* space-y-3 */
@media (min-width: 640px) {
	.spd-confirm__banner { padding: 32px; } /* sm:p-8 */
}

.spd-confirm__banner-icon {
	width: 64px;                    /* w-16 h-16 */
	height: 64px;
	border-radius: var(--spd-radius-full);
	background: #059669;            /* emerald-600 */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	box-shadow: var(--spd-shadow-md);
}
.spd-confirm__banner-icon .spd-icon { width: 36px; height: 36px; }

.spd-confirm__banner-eyebrow {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	text-transform: uppercase;
	letter-spacing: 0.1em;          /* tracking-widest */
	color: #047857;                 /* emerald-700 */
}

.spd-confirm__banner-title {
	margin: 0;
	font-size: var(--spd-font-size-2xl); /* text-2xl */
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);          /* slate-900 */
}
@media (min-width: 640px) {
	.spd-confirm__banner-title { font-size: var(--spd-font-size-3xl); } /* sm:text-3xl */
}

.spd-confirm__banner-text {
	margin: 0;
	font-size: var(--spd-font-size-xs);
	color: #475569;                  /* slate-600 */
	max-width: 28rem;                 /* max-w-md */
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 640px) {
	.spd-confirm__banner-text { font-size: var(--spd-font-size-sm); }
}

/* React: pill wrapper pt-2 → white pill border-emerald-300. */
.spd-confirm__banner-order { padding-top: 8px; }
.spd-confirm__order-number {
	display: inline-block;
	background: var(--spd-surface);
	padding: 8px 16px;
	border-radius: var(--spd-radius-lg);
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	border: 1px solid #6EE7B7;       /* emerald-300 */
	box-shadow: var(--spd-shadow-2xs);
}
.spd-confirm__order-number strong { color: var(--spd-ui-blue); }

/* ── Account-created notice — React: mt-4 p-4 rounded-2xl bg-white
 *    border-[#0F5B94]/30 max-w-lg text-left flex gap-3 ── */
.spd-confirm__account {
	margin-top: 16px;                /* mt-4 */
	padding: 16px;
	border-radius: var(--spd-radius-xl); /* rounded-2xl */
	background: var(--spd-surface);
	border: 1px solid rgba(15, 91, 148, 0.30); /* #0F5B94/30 */
	box-shadow: var(--spd-shadow-xs);
	max-width: 32rem;                 /* max-w-lg */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	display: flex;
	align-items: flex-start;
	gap: 12px;                       /* gap-3 */
}
.spd-confirm__account-icon {
	width: 36px;                    /* w-9 h-9 */
	height: 36px;
	border-radius: var(--spd-radius-lg);
	background: #EBF3F9;            /* #EBF3F9 */
	color: var(--spd-ui-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.spd-confirm__account-icon .spd-icon { width: 20px; height: 20px; }
.spd-confirm__account-title {
	margin: 0;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
}
@media (min-width: 640px) {
	.spd-confirm__account-title { font-size: var(--spd-font-size-sm); }
}
.spd-confirm__account-text {
	margin: 4px 0 0;
	font-size: 11px;                 /* text-[11px] */
	color: #475569;
	line-height: 1.625;              /* leading-relaxed */
}
@media (min-width: 640px) {
	.spd-confirm__account-text { font-size: var(--spd-font-size-xs); }
}

/* ── Action buttons — React: flex-wrap justify-center gap-3 ── */
.spd-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;                       /* gap-3 */
}

/* ── Breakdown card — React: bg-white rounded-3xl border p-6 sm:p-8
 *    shadow-xs space-y-6 ── */
.spd-confirm__card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: 24px;
	box-shadow: var(--spd-shadow-xs);
}
@media (min-width: 640px) {
	.spd-confirm__card { padding: 32px; }
}
.spd-confirm__card > * + * { margin-top: 24px; } /* space-y-6 */

.spd-confirm__card-head {
	display: flex;
	flex-direction: column;
	gap: 8px;                       /* gap-2 */
	justify-content: space-between;
	border-bottom: 1px solid #F1F5F9; /* slate-100 */
	padding-bottom: 16px;            /* pb-4 */
}
@media (min-width: 640px) {
	.spd-confirm__card-head {
		flex-direction: row;
		align-items: center;
	}
}
.spd-confirm__card-title {
	margin: 0;
	font-size: var(--spd-font-size-base);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
}
.spd-confirm__card-date {
	display: block;
	margin-top: 4px;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);   /* slate-400 */
}
.spd-confirm__status-badge {
	display: inline-block;
	align-self: flex-start;          /* self-start (mobile) */
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-extrabold);
	background: #EBF3F9;
	color: var(--spd-ui-blue);
	padding: 4px 12px;
	border-radius: var(--spd-radius-full);
	white-space: nowrap;
}
@media (min-width: 640px) {
	.spd-confirm__status-badge { align-self: auto; }
}

/* ── Items — React: divide-y, py-3 rows ── */
.spd-confirm__items { display: flex; flex-direction: column; }
.spd-confirm__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;                 /* py-3 */
	font-size: var(--spd-font-size-xs);
}
@media (min-width: 640px) {
	.spd-confirm__item { font-size: var(--spd-font-size-sm); }
}
.spd-confirm__item + .spd-confirm__item { border-top: 1px solid #F1F5F9; } /* divide-y */
.spd-confirm__item-main {
	display: flex;
	align-items: center;
	gap: 12px;                       /* gap-3 */
	min-width: 0;
}
.spd-confirm__item-thumb {
	width: 48px;                    /* w-12 h-12 */
	height: 48px;
	border-radius: var(--spd-radius-lg);
	background: var(--spd-bg);       /* slate-50 */
	border: 1px solid var(--spd-border);
	padding: 4px;                    /* p-1 */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.spd-confirm__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;             /* object-contain */
}
.spd-confirm__item-name {
	margin: 0;
	font-size: inherit;
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
}
.spd-confirm__item-qty {
	display: block;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);
}
.spd-confirm__item-total {
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	white-space: nowrap;
}

/* ── Delivery / payment grid — React: grid sm:grid-cols-2 gap-6 ── */
.spd-confirm__info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                       /* gap-6 */
	border-top: 1px solid #F1F5F9;
	padding-top: 16px;               /* pt-4 */
}
@media (min-width: 640px) {
	.spd-confirm__info-grid { grid-template-columns: 1fr 1fr; }
}
.spd-confirm__info { font-size: var(--spd-font-size-xs); }
.spd-confirm__info > * + * { margin-top: 8px; } /* space-y-2 */
.spd-confirm__info-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;                       /* gap-1.5 */
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
}
.spd-confirm__info-icon { display: inline-flex; }
.spd-confirm__info-icon .spd-icon { width: 15px; height: 15px; }
.spd-confirm__info-icon--blue { color: var(--spd-ui-blue); }
.spd-confirm__info-icon--green { color: #059669; } /* emerald-600 */
.spd-confirm__info-text {
	margin: 0;
	color: #475569;                  /* slate-600 */
	line-height: 1.625;
}
.spd-confirm__total {
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-red);        /* #D93829 */
	font-size: var(--spd-font-size-sm);
}

/* ── Shop link — React: text-center pt-4 ── */
.spd-confirm__shop-link {
	text-align: center;
	padding-top: 16px;               /* pt-4 */
}
.spd-confirm__shop-link a {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-ui-blue);
	text-decoration: none;
}
.spd-confirm__shop-link a:hover,
.spd-confirm__shop-link a:focus-visible {
	text-decoration: underline;
}

/* ── Failed order branch ── */
.spd-confirm__failed {
	background: #FEF2F2;            /* red-50 */
	border: 1px solid #FECACA;       /* red-200 */
	border-radius: var(--spd-radius-2xl);
	padding: 32px;
	text-align: center;
}
.spd-confirm__failed-icon {
	width: 64px;
	height: 64px;
	border-radius: var(--spd-radius-full);
	background: #D93829;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	box-shadow: var(--spd-shadow-md);
}
.spd-confirm__failed-icon .spd-icon { width: 32px; height: 32px; }
.spd-confirm__failed-title {
	margin: 0 0 8px;
	font-size: var(--spd-font-size-xl);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
}
.spd-confirm__failed-text {
	margin: 0 0 20px;
	font-size: var(--spd-font-size-sm);
	color: #475569;
}
.spd-confirm__failed-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ── Generic no-order state ── */
.spd-confirm__none {
	text-align: center;
	padding: 48px 16px;
}
.spd-confirm__none .woocommerce-notice {
	font-size: var(--spd-font-size-base);
	color: var(--spd-text);
}

/* Gateway instructions (Mobile Money) inside the confirmation flow. */
#spd-order-confirmation-page .spd-momo-thankyou {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: 20px 24px;
	box-shadow: var(--spd-shadow-xs);
}

/* ==============================================================
 * 8B — Tracking page (OrderTrackingPage.tsx)
 * ==============================================================*/

/* ── Header — React: text-center space-y-2 ── */
.spd-track__header {
	text-align: center;
}
.spd-track__header > * + * { margin-top: 8px; } /* space-y-2 */
.spd-track__eyebrow {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	text-transform: uppercase;
	letter-spacing: 0.1em;           /* tracking-widest */
	color: var(--spd-ui-blue);
}
.spd-track__title {
	margin: 0;
	font-size: var(--spd-font-size-2xl);
	font-weight: var(--spd-font-weight-extrabold);
	letter-spacing: var(--spd-tracking-tight);
	color: var(--spd-text);
}
@media (min-width: 640px) {
	.spd-track__title { font-size: var(--spd-font-size-4xl); } /* sm:text-4xl */
}
.spd-track__intro {
	margin: 0;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);   /* slate-500 */
	max-width: 32rem;                /* max-w-lg */
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 640px) {
	.spd-track__intro { font-size: var(--spd-font-size-sm); }
}

/* ── Lookup form — React: white card rounded-2xl border p-3 sm:p-4
 *    shadow-xs max-w-xl mx-auto (SPD adds the secure contact field) ── */
.spd-track__form {
	max-width: 36rem;                 /* max-w-xl */
	margin: 0 auto;
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-xl); /* rounded-2xl */
	padding: 12px;
	box-shadow: var(--spd-shadow-xs);
	display: flex;
	flex-direction: column;
	gap: 8px;                       /* gap-2 */
}
@media (min-width: 640px) {
	.spd-track__form { padding: 16px; } /* sm:p-4 */
}
.spd-track__form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
@media (min-width: 480px) {
	.spd-track__form-row {
		flex-direction: row;
		align-items: center;
	}
}
.spd-track__search,
.spd-track__contact {
	position: relative;
	display: flex;
	flex: 1;
	min-width: 0;
}
.spd-track__search-icon,
.spd-track__contact-icon {
	position: absolute;
	left: 14px;                     /* left-3.5 */
	top: 50%;
	transform: translateY(-50%);
	color: var(--spd-text-light);
	display: inline-flex;
	pointer-events: none;
}
.spd-track__search-icon .spd-icon,
.spd-track__contact-icon .spd-icon { width: 18px; height: 18px; } /* Search size 18 */
/* Page-ID scoping raises specificity above the inline
 * input[type="text"]{padding:12px 16px} / Astra input{padding:.75em}
 * rules that otherwise override padding-left and let the placeholder
 * run under the icon. */
#spd-order-tracking-page .spd-track__input {
	width: 100%;
	padding: 10px 12px;             /* py-2.5 pr-3 */
	padding-left: 40px;             /* pl-10 */
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
	background: var(--spd-surface);
}
@media (min-width: 640px) {
	.spd-track__input { font-size: var(--spd-font-size-sm); }
}
.spd-track__input--code { text-transform: uppercase; }
.spd-track__input:focus {
	outline: none;
	border-color: var(--spd-ui-blue);
	box-shadow: 0 0 0 2px var(--spd-ui-blue); /* focus:ring-2 */
}
.spd-track__submit {
	flex-shrink: 0;
	padding: 10px 20px;             /* px-5 py-2.5 */
	background: var(--spd-ui-blue);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--spd-radius-lg);
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	cursor: pointer;
	transition: background var(--spd-transition-fast);
}
@media (min-width: 640px) {
	.spd-track__submit { font-size: var(--spd-font-size-sm); }
}
.spd-track__submit:hover,
.spd-track__submit:focus-visible {
	background: var(--spd-ui-blue-dark);
}
.spd-track__submit[disabled] { opacity: 0.7; cursor: wait; }
.spd-track__form-hint {
	margin: 0;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-light);
	text-align: center;
}

/* ── Status banner — React: bg-sky-50 border-sky-200 rounded-3xl ── */
.spd-track__banner {
	background: #F0F9FF;            /* sky-50 */
	border: 1px solid #BAE6FD;       /* sky-200 */
	border-radius: var(--spd-radius-2xl);
	padding: 20px;                  /* p-5 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;                       /* gap-4 */
}
@media (min-width: 640px) {
	.spd-track__banner {
		flex-direction: row;
		padding: 24px;               /* sm:p-6 */
	}
}
.spd-track__banner-main {
	display: flex;
	align-items: center;
	gap: 16px;                       /* gap-4 */
	text-align: center;
}
@media (min-width: 640px) {
	.spd-track__banner-main { text-align: left; }
}
.spd-track__banner-icon {
	width: 48px;                    /* w-12 h-12 */
	height: 48px;
	border-radius: var(--spd-radius-xl); /* rounded-2xl */
	background: var(--spd-ui-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.spd-track__banner-icon .spd-icon { width: 24px; height: 24px; }
.spd-track__banner-eyebrow {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	text-transform: uppercase;
	letter-spacing: 0.05em;          /* tracking-wider */
	color: var(--spd-ui-blue);
}
.spd-track__banner-title {
	margin: 2px 0 0;
	font-size: var(--spd-font-size-base);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
}
@media (min-width: 640px) {
	.spd-track__banner-title { font-size: var(--spd-font-size-lg); }
}
.spd-track__banner-dest {
	margin: 2px 0 0;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
}
.spd-track__slot {
	background: var(--spd-surface);
	padding: 10px 16px;              /* py-2.5 px-4 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl */
	border: 1px solid #E0F2FE;       /* sky-100 */
	text-align: right;
	flex-shrink: 0;
}
.spd-track__slot-label {
	display: block;
	font-size: 11px;
	color: var(--spd-text-light);
}
.spd-track__slot-value {
	display: block;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	color: #1E293B;                  /* slate-800 */
}

/* ── Timeline — shared component (order-timeline.php) ── */
.spd-timeline-card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: 24px;
	box-shadow: var(--spd-shadow-xs);
}
@media (min-width: 640px) {
	.spd-timeline-card { padding: 32px; }
}
.spd-timeline-card__title {
	margin: 0 0 24px;               /* mb-6 */
	font-size: var(--spd-font-size-base);
	font-weight: var(--spd-font-weight-extrabold);
	color: var(--spd-text);
}
.spd-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
.spd-timeline::before {
	content: "";
	position: absolute;
	left: 14px;                     /* before:left-3.5 */
	top: 12px;                      /* before:top-3 */
	bottom: 12px;                   /* before:bottom-3 */
	width: 2px;                      /* before:w-0.5 */
	background: var(--spd-border);   /* slate-200 */
}
.spd-timeline__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;                       /* gap-4 */
	padding-left: 4px;              /* pl-1 */
}
.spd-timeline__step + .spd-timeline__step { margin-top: 32px; } /* space-y-8 */
.spd-timeline__dot {
	width: 24px;                    /* w-6 h-6 */
	height: 24px;
	border-radius: var(--spd-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-black);
	flex-shrink: 0;
	position: relative;
	z-index: 1;                      /* z-10 over the line */
	background: var(--spd-surface);
	color: var(--spd-text-muted);
	border: 2px solid var(--spd-border); /* slate-200 */
}
.spd-timeline__step.is-done .spd-timeline__dot {
	background: var(--spd-ui-blue); /* bg-[#0F5B94] */
	border-color: var(--spd-ui-blue);
	color: #fff;
	box-shadow: 0 0 0 4px #E0F2FE;   /* ring-4 ring-sky-100 */
}
.spd-timeline__dot .spd-icon { width: 14px; height: 14px; } /* CheckCircle2 14 */
.spd-timeline__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;                       /* gap-1 */
	padding-top: 3px;               /* optical centering on the 24px dot */
}
@media (min-width: 640px) {
	.spd-timeline__body {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.spd-timeline__label { min-width: 0; }
.spd-timeline__step-title {
	display: block;
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text-light);   /* slate-400 (pending) */
}
.spd-timeline__step.is-done .spd-timeline__step-title { color: var(--spd-text); }
.spd-timeline__step-desc {
	display: block;
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);   /* slate-500 */
}
.spd-timeline__time {
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-semibold);
	color: var(--spd-text-light);
	flex-shrink: 0;
}
.spd-timeline-card__halted {
	margin: 24px 0 0;
	padding: 12px 16px;
	background: var(--spd-bg);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-lg);
	font-size: var(--spd-font-size-xs);
	color: var(--spd-text-muted);
}

/* ── Delivery & destination cards — React: grid sm:grid-cols-2 ── */
.spd-track__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                       /* gap-6 */
}
@media (min-width: 640px) {
	.spd-track__cards { grid-template-columns: 1fr 1fr; }
}
.spd-track__card {
	background: var(--spd-surface);
	border: 1px solid var(--spd-border);
	border-radius: var(--spd-radius-2xl);
	padding: 20px;                  /* p-5 */
	box-shadow: var(--spd-shadow-xs);
}
@media (min-width: 640px) {
	.spd-track__card { padding: 24px; } /* sm:p-6 */
}
.spd-track__card > * + * { margin-top: 16px; } /* space-y-4 */
.spd-track__card-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;                       /* gap-2 */
	font-size: var(--spd-font-size-sm);
	font-weight: var(--spd-font-weight-bold);
	color: var(--spd-text);
}
.spd-track__card-icon { display: inline-flex; }
.spd-track__card-icon .spd-icon { width: 16px; height: 16px; }
.spd-track__card-icon--blue { color: var(--spd-ui-blue); }
.spd-track__card-icon--red { color: var(--spd-ui-red); }
.spd-track__card-lines { display: flex; flex-direction: column; gap: 4px; } /* space-y-1 */
.spd-track__card-lines p { margin: 0; }
.spd-track__card-lines strong { color: var(--spd-text); }
.spd-track__card-lines,
.spd-track__card-lines p {
	font-size: var(--spd-font-size-xs);
	color: #475569;
}
.spd-track__landmark {
	background: var(--spd-bg);       /* slate-50 */
	padding: 8px;                    /* p-2 */
	border-radius: var(--spd-radius-md);
	border: 1px solid #F1F5F9;       /* slate-100 */
	color: #334155;                  /* slate-700 */
}
.spd-track__card-actions {
	display: flex;
	align-items: center;
	gap: 8px;                       /* gap-2 */
	padding-top: 8px;                /* pt-2 */
}
.spd-track__action {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;                       /* gap-1.5 */
	padding: 10px 0;                /* py-2.5 */
	border-radius: var(--spd-radius-lg);
	font-size: var(--spd-font-size-xs);
	font-weight: var(--spd-font-weight-bold);
	text-decoration: none;
	transition: background var(--spd-transition-fast);
}
.spd-track__action .spd-icon { width: 14px; height: 14px; }
.spd-track__action--call {
	background: var(--spd-surface-muted); /* slate-100 */
	color: #1E293B;                  /* slate-800 */
}
.spd-track__action--call:hover,
.spd-track__action--call:focus-visible { background: var(--spd-border); } /* slate-200 */
.spd-track__action--whatsapp {
	background: #25D366;
	color: #fff;
}
.spd-track__action--whatsapp:hover,
.spd-track__action--whatsapp:focus-visible { background: #1EBE5D; }

/* Empty state inherits the shared .spd-empty-state component
 * (spd-shell.css) — only the max-width is relaxed to match the
 * React tracking card. */
#spd-order-tracking-page .spd-empty-state--card { max-width: 36rem; }

/* ==============================================================
 * Print — "Imprimer le reçu / Facture proforma" (window.print)
 * Simple mechanism: the receipt prints clean, the shell does not.
 * ==============================================================*/
@media print {
	body.woocommerce-order-received .spd-site-header,
	body.woocommerce-order-received .spd-topbar,
	body.woocommerce-order-received .spd-site-footer,
	body.woocommerce-order-received .spd-mobile-nav,
	body.woocommerce-order-received .spd-whatsapp,
	body.woocommerce-order-received .spd-overlays,
	body.woocommerce-order-received .spd-cart-drawer,
	body.woocommerce-order-received .spd-search-modal,
	body.woocommerce-order-received .spd-confirm__actions,
	body.woocommerce-order-received .spd-confirm__shop-link,
	body.woocommerce-order-received .spd-momo-thankyou {
		display: none !important;
	}
	body.woocommerce-order-received #spd-order-confirmation-page {
		max-width: none;
		padding: 0;
	}
	.spd-confirm__banner {
		break-inside: avoid;
	}
	.spd-confirm__card {
		box-shadow: none;
	}
}