/*
 * Dark cart / checkout / account pages.
 * These pages use the default page template, which leaves the page background
 * white; the Shop page is dark only via a YellowPencil rule (#main{background:#020710}).
 * Loaded only on those pages from functions.php.
 */

:root {
	--bpk-page-bg: #020710;   /* header + shop page background */
	--bpk-card-bg: #13171f;   /* theme card colour */
	--bpk-field-bg: #1c222b;  /* theme select colour */
	--bpk-border: #2a3240;
	--bpk-muted: #6d7c90;
	--bpk-text: #b6bdc5;
}

/* Page background, top to bottom (including the strip below a short page's footer). */
html:has(body.woocommerce-cart),
html:has(body.woocommerce-checkout),
html:has(body.woocommerce-account),
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-cart #page,
body.woocommerce-checkout #page,
body.woocommerce-account #page,
body.woocommerce-cart #site-content,
body.woocommerce-checkout #site-content,
body.woocommerce-account #site-content {
	background-color: var(--bpk-page-bg) !important;
}

/* Section headings ("Cart totals", "Billing details", "Your order") were grey. */
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart_totals h4,
body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout .woocommerce h4,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3,
body.woocommerce-account .woocommerce h4 {
	color: #ffffff !important;
}

/* Text inputs, textareas and selects: dark, matching the country/state dropdowns. */
body.woocommerce-cart .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-account .woocommerce form .form-row .input-text,
body.woocommerce-cart .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-account .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-account .woocommerce form .form-row textarea,
body.woocommerce-cart table.cart td.actions .coupon .input-text,
body.woocommerce-checkout form.checkout_coupon .input-text,
body.woocommerce-cart .quantity .qty,
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single {
	background-color: var(--bpk-field-bg) !important;
	border: 1px solid var(--bpk-border) !important;
	border-radius: 8px;
	color: #ffffff !important;
	box-shadow: none;
}

body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-account .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea {
	padding: 0.75rem 1rem;
	line-height: 1.5;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #ffffff;
}

body.woocommerce-cart .woocommerce form .input-text::placeholder,
body.woocommerce-checkout .woocommerce form .input-text::placeholder,
body.woocommerce-account .woocommerce form .input-text::placeholder,
body.woocommerce-checkout .woocommerce form textarea::placeholder {
	color: var(--bpk-muted);
	opacity: 1;
}

body.woocommerce-cart .woocommerce form .input-text:focus,
body.woocommerce-checkout .woocommerce form .input-text:focus,
body.woocommerce-account .woocommerce form .input-text:focus,
body.woocommerce-checkout .woocommerce form textarea:focus,
body.woocommerce-cart .quantity .qty:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--primary-color, #36bb91) !important;
	outline: none;
}

/* Browser autofill paints inputs pale yellow/white; keep them dark. */
body.woocommerce-checkout input.input-text:-webkit-autofill,
body.woocommerce-account input.input-text:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--bpk-field-bg) inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
}

/* Validation states stay visible on the dark fields. */
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: #e2401c !important;
}

/* Select dropdown panel (opens attached to <body>, outside the form). */
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-account .select2-dropdown {
	background-color: var(--bpk-field-bg);
	border-color: var(--bpk-border);
	color: var(--bpk-text);
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field,
body.woocommerce-account .select2-search--dropdown .select2-search__field {
	background-color: var(--bpk-card-bg);
	border: 1px solid var(--bpk-border);
	color: #ffffff;
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-results__option--highlighted[data-selected],
body.woocommerce-account .select2-results__option--highlighted[aria-selected],
body.woocommerce-account .select2-results__option--highlighted[data-selected] {
	background-color: var(--primary-color, #36bb91);
	color: #ffffff;
}

/* Order review + payment box on checkout. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout #payment {
	background-color: var(--bpk-card-bg);
	border-color: var(--bpk-border);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	color: var(--bpk-text);
	border-color: var(--bpk-border);
}
body.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--bpk-border);
}
body.woocommerce-checkout #payment ul.payment_methods li label {
	color: #ffffff;
}
body.woocommerce-checkout #payment div.payment_box {
	background-color: var(--bpk-field-bg);
	color: var(--bpk-text);
}
body.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--bpk-field-bg);
}

/* Order received page and its tables. */
body.woocommerce-checkout .woocommerce-order-overview,
body.woocommerce-checkout .woocommerce-order-details,
body.woocommerce-checkout .woocommerce-customer-details address {
	color: var(--bpk-text);
	border-color: var(--bpk-border);
}

/* Loading overlay while totals refresh: dark instead of a white wash. */
body.woocommerce-cart .blockUI.blockOverlay,
body.woocommerce-checkout .blockUI.blockOverlay {
	background-color: var(--bpk-page-bg) !important;
}

/* Empty-cart state. */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message {
	color: #ffffff;
}