/*
 * My account (inc/account.php) and the order-received page (inc/checkout.php). The pages are WooCommerce's,
 * laid out by Blocksy; these rules add the dashboard cards and fit the account menu on a phone.
 */

/* Account menu: two columns on phones, so the page content isn't a long scroll away. */
@media (max-width: 47.99rem) {
	.woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dashboard: latest order and help, side by side where there's room. */
.ca-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--ca-space-4);
	margin-block-start: var(--ca-space-6);
}

.ca-account-card {
	padding: var(--ca-space-5);
	border: 1px solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
}

.ca-account-card > * {
	margin-block: 0 var(--ca-space-3);
}

.ca-account-card > :last-child {
	margin-block-end: 0;
}

.ca-account-card .ca-account-card__title {
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

.ca-account-card__status {
	font-weight: 600;
}

/* Order received: next steps under a Wheat rule, before the order details. */
.ca-next-steps {
	margin-block: var(--ca-space-6) var(--ca-space-8);
	padding: var(--ca-space-5) var(--ca-space-6);
	border-inline-start: var(--ca-border-width-accent) solid var(--ca-decor-gold);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-brand-subtle);
}

.ca-next-steps h2 {
	margin-block: 0 var(--ca-space-3);
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

.ca-next-steps ol {
	margin: 0;
	padding-inline-start: var(--ca-space-5);
}

.ca-next-steps li + li {
	margin-block-start: var(--ca-space-2);
}

/* Targets: at least 48px. The button in WooCommerce's notices ("Confirm email address"), the "Edit" links on
 * the addresses page, and the order number in the orders table (taller without spacing the row out). */
.woocommerce-account :is(.woocommerce-info, .woocommerce-message) .button {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
}

.woocommerce-account .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	display: inline-block;
	padding-block: calc((var(--ca-size-control) - 1lh) / 2);
	margin-block: calc((1lh - var(--ca-size-control)) / 2);
}

/* Order received: the order number, date, email, total and payment method as even cards (Blocksy's grid lines
 * up only the left column). */
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--ca-space-3);
	margin-block: var(--ca-space-6);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-order ul.woocommerce-order-overview li {
	margin: 0;
	padding: var(--ca-space-4) var(--ca-space-5);
	border: 1px solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
	overflow-wrap: anywhere;
}