/*!
 * My Account — table polish (2026-09-29).
 *
 * The Elementor "My Account" widget on page #200 already sets the brand
 * colours (navy links #0F0D9F, black text, green action buttons) — those are
 * left untouched. What was missing is visual STRUCTURE: WooCommerce core's
 * own `.woocommerce table.shop_table` rule draws its border and cell
 * dividers at 20% opacity, which reads as almost invisible on a table's
 * left/right edges while the horizontal cell borders stack up and look
 * comparatively heavy — so every table on Dashboard, Orders, My
 * Subscription, Downloads etc. looked like a loose stack of rows rather
 * than one object. There was also no header shading and no row striping,
 * so a wide table (Orders, Related orders) was hard to scan.
 *
 * Selectors are written one level more specific than WooCommerce core's
 * `.woocommerce table.shop_table …` ((0,2,1)/(0,2,2)) by adding the
 * `body.woocommerce-account` class WooCommerce already puts on every My
 * Account page, so this wins regardless of stylesheet load order — no
 * `!important` needed. Scoped to `.woocommerce-MyAccount-content` so
 * nothing outside My Account is touched: the store checkout, cart and
 * results-page tables are untouched.
 */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 1px solid #d6d4ea;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 13, 159, 0.04);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	/* !important: Elementor Pro's widget CSS zeroes the start/top padding on
	 * these cells from selectors at (0,5,1) and above, which nothing in this
	 * file can outrank cleanly. */
	padding: 14px 18px !important;
	border-color: #e6e5f2;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
	background: #ecebf6;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(even) td {
	background: #f6f6fb;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* The table sits directly under its section heading ("Subscription totals",
 * "Related orders") with no breathing room — 28px matches the gap Elementor
 * already gives between other stacked elements on this widget. */
body.woocommerce-account .woocommerce-MyAccount-content h2 + table.shop_table {
	margin-top: 28px;
}

/*
 * Column proportions (client, 2026-09-29: every table the same width, and a
 * clear, even gap between the columns). All tables keep WooCommerce's 100%
 * width so they line up with each other; the two label/value tables get a
 * fixed split so the value always starts at the same place instead of
 * wherever the browser's auto layout leaves it:
 *   .subscription_details  Status / Start date / … : label 40%, value 60%
 *   .order_details         Subscription totals      : product 60%, total 40%
 * The Orders list and Related orders tables (5 columns) are left to auto.
 */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.subscription_details td:first-child {
	width: 40%;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details th:first-child,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details td:first-child,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details tfoot th {
	width: 60%;
}