/**
 * Make the WooCommerce pages that stay on the WP domain (cart, checkout,
 * my-account, order-received) visually match the Next.js storefront:
 * light blue-gray background, white rounded cards, blue primary buttons.
 */

:root {
	--d4-bg: #eff3f6;
	--d4-primary: #1a73c7;
	--d4-primary-hover: #155fa6;
	--d4-border: #e2e8f0;
	--d4-radius: 16px;
	--d4-radius-sm: 10px;
}

/* Page background */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account,
body.woocommerce-order-received,
body.woocommerce-order-received-page {
	background-color: var(--d4-bg) !important;
}

/* ── Block cart / checkout cards ─────────────────────────────────────────── */
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__sidebar {
	background: #fff !important;
	border: 1px solid var(--d4-border) !important;
	border-radius: var(--d4-radius) !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
	padding: 24px !important;
}

/* ── Classic cart / checkout / account cards ─────────────────────────────── */
.woocommerce-cart-form,
.cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-order {
	background: #fff;
	border: 1px solid var(--d4-border);
	border-radius: var(--d4-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	padding: 20px 24px;
}

/* ── Primary buttons (place order, proceed, etc.) ────────────────────────── */
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--d4-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
	transition: background-color 0.15s ease !important;
}

.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: var(--d4-primary-hover) !important;
}

/* Secondary/ghost buttons keep a lighter look */
.woocommerce a.button:not(.alt):not(.checkout-button),
.woocommerce button.button:not(.alt) {
	background-color: #fff !important;
	color: var(--d4-primary) !important;
	border: 1px solid var(--d4-border) !important;
}
.woocommerce a.button:not(.alt):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):hover {
	background-color: #f8fafc !important;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-text-input select,
.wc-block-components-select select,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea {
	border-radius: var(--d4-radius-sm) !important;
	border-color: var(--d4-border) !important;
}

/* Accent color for links and focus states */
.woocommerce a:not(.button),
.wc-block-components-button:not(.contained) {
	color: var(--d4-primary);
}

/* ── My Account: two-column layout (sidebar + content) ───────────────────── */
body.woocommerce-account .woocommerce {
	display: grid !important;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	align-items: start;
	max-width: 1080px;
	margin-inline: auto;
}

@media (max-width: 782px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* Force nav + content into their grid columns, overriding WooCommerce's
   default float + percentage widths that break the grid. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 12px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--d4-radius-sm);
	color: #334155 !important;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background-color: #f1f5f9;
	color: var(--d4-primary) !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--d4-primary);
	color: #fff !important;
	font-weight: 600;
}

/* Content card spacing + readable dashboard text */
body.woocommerce-account .woocommerce-MyAccount-content {
	padding: 24px 28px;
	line-height: 2;
}

body.woocommerce-account .woocommerce-MyAccount-content p {
	color: #475569;
}

/* Page title: align to the right (RTL) and tame the size */
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account .entry-title {
	text-align: right;
	font-size: 1.75rem;
	margin-bottom: 1.25rem;
}

/* ── Order received / thank-you page (block-based confirmation) ───────────── */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status {
	text-align: center;
	font-size: 1.05rem;
	line-height: 2;
	color: #334155;
	background: #fff;
	border: 1px solid var(--d4-border);
	border-radius: var(--d4-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	padding: 24px 28px;
	margin-bottom: 18px;
}

/* The big green check / success accent */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status strong {
	color: var(--d4-primary);
}

body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-shipping-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-billing-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
	background: #fff;
	border: 1px solid var(--d4-border);
	border-radius: var(--d4-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	padding: 20px 24px;
	margin-bottom: 18px;
}

/* Section headings inside the confirmation */
body.woocommerce-order-received h2,
body.woocommerce-order-received h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1e293b;
}

/* Summary key/value list */
body.woocommerce-order-received .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
	color: #64748b;
	font-size: 0.8rem;
}
body.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
	font-weight: 700;
	color: #1e293b;
}

/* Order totals table */
body.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
body.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
	padding: 10px 8px;
	border-bottom: 1px solid #f1f5f9;
}

/* Center + constrain the whole confirmation column for a tidy layout */
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-status,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-shipping-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-billing-wrapper,
body.woocommerce-order-received .wp-block-woocommerce-order-confirmation-additional-information {
	max-width: 820px;
	margin-inline: auto;
}