/* Order tracking. The [woocommerce_order_tracking] shortcode prints into the
   page content, so this file loads wherever the shortcode is used rather than
   with a page template. */

.entry__header {
	text-align: center;
}

.entry__title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin: var(--wp--preset--spacing--10) auto 0;
	border-radius: 999px;
	background: var(--astm-info);
}

.woocommerce form.track_order {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--30) auto 0;
	padding: var(--wp--preset--spacing--35);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
}

.woocommerce form.track_order>p {
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 1.5;
}

.woocommerce form.track_order>p:first-child {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* WooCommerce floats the two fields at 48% of the row; the card stacks them.
   Its own rules carry .woocommerce form, so these selectors have to match. */

.woocommerce form.track_order .form-row {
	float: none;
	width: auto;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
}

.woocommerce form.track_order .form-row:has(button) {
	margin-bottom: 0;
}

.woocommerce form.track_order .clear {
	display: none;
}

.woocommerce form.track_order label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce form.track_order .input-text {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	font: inherit;
}

.woocommerce form.track_order .input-text::placeholder {
	color: var(--wp--preset--color--muted);
}

.woocommerce form.track_order button {
	width: 100%;
}

/* The tracked order: a status line, the shop notes and the order tables. */

.entry__content .order-info {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--astm-success);
	border-radius: 12px;
	background: var(--astm-success-soft);
	color: var(--astm-success);
	line-height: 1.5;
}

.entry__content .order-info mark {
	background: none;
	color: inherit;
	font-weight: 600;
}

.entry__content .commentlist.notes {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.entry__content .commentlist.notes .comment_container {
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

.entry__content .commentlist.notes .meta {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.entry__content .commentlist.notes .description>:last-child {
	margin-bottom: 0;
}

/* Same clearfix pseudo elements as the account addresses: they would take grid
   cells of their own, and the columns carry percentage widths. */

.entry__content .col2-set::before,
.entry__content .col2-set::after {
	content: none;
}

.entry__content .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.entry__content .woocommerce-column {
	float: none;
	width: auto;
}

.entry__content .woocommerce-column address {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.5;
}

@media (max-width: 30em) {
	.woocommerce form.track_order {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
}