/**
 * Order Tracking — styles WooCommerce's native [woocommerce_order_tracking]
 * shortcode output (order/form-tracking.php for the lookup form,
 * order/tracking.php + the shared woocommerce_view_order hook for the
 * result). The order-details table, address blocks, and status <mark>
 * styling are already shared from components.css — nothing duplicated here.
 */

.order-tracking-subtitle {
	color: var(--color-text-muted);
	margin-block-end: var(--space-6);
}

/* The native form is one flat container — style it directly as the
   reference's centered white card instead of adding a wrapper. */
.woocommerce-form-track-order {
	max-width: 640px;
	margin-inline: auto;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-7);
}
.woocommerce-form-track-order > p:first-child {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
	margin-block-end: var(--space-6);
}

/* Reference shows both fields stacked full-width, not side by side. */
.woocommerce-form-track-order .form-row-first,
.woocommerce-form-track-order .form-row-last {
	flex: 1 1 100%;
}

.woocommerce-form-track-order button.button {
	width: 100%;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-weight: var(--font-weight-bold);
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}
.woocommerce-form-track-order button.button:hover { background: var(--color-accent-strong); }

/* ---- Result state ----
   order/tracking.php uses its own (older) note-list markup — plain
   .commentlist/.comment_container, not the .woocommerce-OrderUpdate-*
   classes myaccount/view-order.php uses for the same data — so it needs
   its own rule here rather than reusing account.css's. */
.commentlist.notes {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-block-start: var(--space-4);
	margin-block-end: var(--space-7);
}
.commentlist.notes .comment_container {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.commentlist.notes .meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-block-end: var(--space-1); }

/* ---- Quick Order tracking (order number + phone) ----
   A second, clearly separate lookup for Quick Orders, which have no billing
   email and so can't use the native tracker above. Same card treatment as
   .woocommerce-form-track-order for visual consistency, with its own
   heading/divider so the two are never mistaken for one form. */
.quick-order-tracking {
	max-width: 640px;
	margin-inline: auto;
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--color-border);
}
.quick-order-tracking__heading {
	font-size: var(--text-lg);
	margin-block-end: var(--space-2);
}
.quick-order-tracking__description {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--line-height-relaxed);
	margin-block-end: var(--space-6);
}
.quick-order-tracking__form {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-7);
}
.quick-order-tracking__form .form-row-first,
.quick-order-tracking__form .form-row-last {
	flex: 1 1 100%;
}
.quick-order-tracking__form button.button {
	width: 100%;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-weight: var(--font-weight-bold);
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}
.quick-order-tracking__form button.button:hover { background: var(--color-accent-strong); }
.quick-order-tracking__result-heading {
	font-size: var(--text-lg);
	margin-block-start: var(--space-8);
	margin-block-end: var(--space-4);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--color-border);
}

@media (max-width: 576px) {
	.woocommerce-form-track-order { padding: var(--space-5); }
	.quick-order-tracking__form { padding: var(--space-5); }
}