/*
 * Dark/green brand reskin for every default WordPress/WooCommerce page
 * (Shop, single Product, Cart, Checkout, My Account, blog, search, 404
 * fallback, etc.) - the custom full-page templates (landing, contact,
 * legal, 404) already have their own matching design and are untouched
 * since this file is never enqueued there.
 *
 * Strategy: Twenty Twenty-Five (and WooCommerce Blocks) build almost
 * everything from the theme.json "base"/"contrast" color variables, so
 * redefining those two variables flips backgrounds/text everywhere for
 * free. Everything after that is a targeted override for the handful of
 * components (buttons, inputs, tables, notices) that hardcode colors
 * instead of using the theme palette.
 */

:root {
	--pp-bg: #06090F;
	--pp-surface: #0D1219;
	--pp-card: #121826;
	--pp-border: #1E2530;
	--pp-text: #F5F7FA;
	--pp-text-muted: #9AA4B2;
	--pp-accent: #34D399;
	--pp-accent-hover: #2BBF86;
	--pp-accent-soft: rgba(52, 211, 153, 0.14);

	/* Re-point the theme's own palette variables so every block that
	   already reads them (buttons, quote/code blocks, navigation, etc.)
	   repaints automatically without needing a per-block override. */
	--wp--preset--color--base: var(--pp-bg);
	--wp--preset--color--contrast: var(--pp-text);
	--wp--preset--color--accent-4: var(--pp-text-muted);
	--wp--preset--color--accent-5: var(--pp-card);
	--wp--preset--color--accent-6: var(--pp-border);
}

body {
	background: var(--pp-bg) !important;
	color: var(--pp-text);
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: inherit; }
hr, .wp-block-separator { border-color: var(--pp-border) !important; }

/* Header/footer template parts: force the light "Base" background some
   template-part markup sets explicitly instead of only via the variable. */
.wp-block-template-part, .site-header, .site-footer, header, footer {
	background: var(--pp-bg);
}

/* Buttons everywhere: core Buttons block, WooCommerce classic buttons,
   and WooCommerce Blocks components all get the brand green instead of
   the theme's default "Contrast" (near-black) button color. */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
#place_order,
.checkout-button {
	background-color: var(--pp-accent) !important;
	border-color: var(--pp-accent) !important;
	color: #06110C !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
#place_order:hover,
.checkout-button:hover {
	background-color: var(--pp-accent-hover) !important;
	border-color: var(--pp-accent-hover) !important;
}
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--pp-accent) !important;
	color: #06110C !important;
}

/* Cards/panels: cart totals box, checkout sections, account boxes,
   product cards, order review tables - all get the same card surface.
   The sidebar/order-summary wrappers below have ZERO padding by default
   in WooCommerce Blocks (they rely on the page's own layout gap) - once
   they get a visible card background, that turns into text touching the
   card edges, so padding/radius is set explicitly here instead of just
   inheriting whatever the block happened to have. */
.wc-block-cart__totals-title,
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar,
.wc-block-components-order-summary,
.woocommerce-checkout-review-order,
.woocommerce-checkout-payment,
.woocommerce-Message,
.woocommerce-form-coupon,
.woocommerce-account .woocommerce-MyAccount-content,
.wc-block-components-address-card,
table.shop_table,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-product-metadata {
	background: var(--pp-card) !important;
	border-color: var(--pp-border) !important;
	color: var(--pp-text);
}
/* The actual outer card wrappers - these carry zero padding by default. */
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-panel,
.woocommerce-checkout-review-order,
.woocommerce-form-coupon,
.wc-block-components-address-card {
	padding: 26px 24px !important;
	border-radius: 16px !important;
	border: 1px solid var(--pp-border);
	box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.14);
}
.wc-block-components-totals-item {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
/* The "Add coupons" accordion inherited a border on ALL 4 sides from the
   generic panel rule above, boxing it in on both top AND bottom right
   between the product line item and Subtotal - two dividers doing the
   job of one. Down to a single top rule instead, and no separate card
   background so it reads as part of the same Order Summary card instead
   of a nested box within it. */
.wc-block-components-order-summary-item + .wc-block-components-totals-coupon.wc-block-components-panel,
.wc-block-components-totals-coupon.wc-block-components-panel {
	background: transparent !important;
	border: none !important;
	border-top: 1px solid var(--pp-border) !important;
	border-radius: 0 !important;
}
/* Native number-input spinner arrows are the one leftover "1998 HTML
   form" element on an otherwise flat, custom-styled page. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
table.shop_table th, table.shop_table td { border-color: var(--pp-border) !important; padding: 14px 12px; }
.woocommerce-MyAccount-navigation ul { border-color: var(--pp-border); }
.woocommerce-MyAccount-navigation-link a {
	color: var(--pp-text-muted);
	border-bottom: 1px solid var(--pp-border);
	padding: 10px 4px;
	display: block;
}
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover { color: var(--pp-accent); }

/* Checkout steps (Contact information / Shipping address / Shipping
   options / Payment options) render as bare, unstyled <fieldset>s by
   default - no card, no shadow, no spacing between them - while the
   sidebar next to them is a polished card. That mismatch is what makes
   the form side read as "old HTML form" next to a "designed" sidebar.
   Turning each step into its own card (+ a numbered badge on the title,
   like Stripe/Shopify-style checkouts) fixes that without touching any
   markup, since Woo Blocks already wraps each step in this class. */
.wc-block-components-checkout-step {
	background: var(--pp-card) !important;
	border: 1px solid var(--pp-border) !important;
	border-radius: 16px !important;
	padding: 26px 24px !important;
	margin-bottom: 20px;
	box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.14);
}
.wc-block-components-form { counter-reset: pp-checkout-step; }
.wc-block-components-checkout-step__title {
	font-size: 19px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 12px;
}
.wc-block-components-checkout-step__title::before {
	counter-increment: pp-checkout-step;
	content: counter(pp-checkout-step);
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--pp-accent-soft);
	color: var(--pp-accent);
	font-size: 13px;
	font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.wc-block-components-checkout-step__heading-container { margin-bottom: 18px; }
.wc-block-components-checkout-step__content { display: flex; flex-direction: column; gap: 16px; }
.wc-block-components-address-form { gap: 16px 14px !important; }
.wc-block-checkout__guest-checkout-notice { color: var(--pp-text-muted); font-size: 13px; margin: 6px 0 0; }

/* Form fields: WooCommerce/Woo Blocks inputs default to a plain white
   box, which would otherwise be the one glaring leftover light element
   on every dark page. */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.select2-container .select2-selection,
.woocommerce-input-wrapper input {
	background: var(--pp-surface) !important;
	border: 1px solid var(--pp-border) !important;
	color: var(--pp-text) !important;
	border-radius: 10px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* A visible focus state is the single biggest "does this feel modern"
   tell on a form - default browser focus rings don't match the dark
   theme at all, so every input gets the same accent glow instead. */
input:not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--pp-accent) !important;
	box-shadow: 0 0 0 3px var(--pp-accent-soft) !important;
	outline: none !important;
}
::placeholder { color: var(--pp-text-muted); opacity: 1; }
.select2-dropdown, .select2-results__option {
	background: var(--pp-card) !important;
	color: var(--pp-text) !important;
}
.select2-results__option--highlighted {
	background: var(--pp-accent-soft) !important;
	color: var(--pp-text) !important;
}

/* Checkout's Country/State fields (Woo Blocks "select with floating
   label") are a DIFFERENT component from the plain text inputs above -
   its outer wrapper defaults to a hardcoded white box regardless of the
   overrides above, which left a bright white sliver/border around every
   Country and State dropdown on an otherwise all-dark page. */
.wc-blocks-components-select__container {
	background: var(--pp-surface) !important;
	border-radius: 8px !important;
}
.wc-blocks-components-select__label {
	color: var(--pp-text-muted) !important;
}

/* Checkboxes/radios (payment method, "Remember me", "Use same address for
   billing", etc.) default to the browser's plain white control, which
   reads as a stray light square on a dark page - `accent-color` recolors
   the native control without needing a full custom-checkbox rebuild. */
input[type="checkbox"], input[type="radio"] {
	accent-color: var(--pp-accent);
}

/* Notices (added-to-cart, coupon errors, empty cart, etc.) */
.woocommerce-message, .woocommerce-info,
.wc-block-store-notice, .wc-block-components-notice-banner {
	background: var(--pp-accent-soft) !important;
	border-left: 3px solid var(--pp-accent) !important;
	color: var(--pp-text) !important;
	border-radius: 10px !important;
	padding: 16px 18px !important;
}
.woocommerce-error, .wc-block-components-notice-banner.is-error {
	background: rgba(248, 113, 113, 0.12) !important;
	border-left: 3px solid #F87171 !important;
	color: var(--pp-text) !important;
	border-radius: 10px !important;
	padding: 16px 18px !important;
}

/* Prices: keep the brand green for sale/current prices instead of
   WooCommerce's default purple. */
.woocommerce-Price-amount, .price, ins .woocommerce-Price-amount { color: var(--pp-text); }
.price ins, .wc-block-components-product-price__value.is-discounted {
	color: var(--pp-accent) !important;
	text-decoration: none;
}

/* Shop archive / product grid cards */
.wc-block-grid__product, .wc-block-product-template .wp-block-woocommerce-product-image,
li.product {
	background: var(--pp-card);
	border: 1px solid var(--pp-border);
	border-radius: 16px;
	padding: 12px;
}

/* Site header (patterns/header.php): tidy spacing between the hamburger
   and the account/cart icons WooCommerce auto-injects into block-theme
   navigation - without this they sit unevenly close together. */
header.wp-block-template-part .wp-block-group[style*="justify-content:right"],
header.wp-block-template-part .wp-block-group.is-content-justification-right {
	gap: 18px;
}
.wp-block-woocommerce-customer-account .wc-block-customer-account__account-icon,
.wc-block-mini-cart__button svg {
	color: var(--pp-text);
}

/* Mobile nav overlay (core/navigation's built-in hamburger dialog): core
   only sets `background-color: inherit` on this, which was resolving to
   white instead of the page's dark background - explicit dark styling
   here instead of relying on inheritance through several wrapper layers. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog {
	background-color: var(--pp-bg) !important;
	color: var(--pp-text) !important;
}
.wp-block-navigation__responsive-container-content {
	padding: 24px 20px !important;
}
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-content a {
	color: var(--pp-text) !important;
	font-size: 17px;
	font-weight: 600;
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid var(--pp-border);
}
.wp-block-navigation__responsive-container-content a:hover,
.wp-block-navigation__responsive-container-content a:focus {
	color: var(--pp-accent) !important;
}
.wp-block-navigation__responsive-container-content a:focus-visible {
	outline: 2px solid var(--pp-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--pp-text) !important;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
}

/* Order tracking box (account order-view page + public Track Order page). */
.pp-tracking-box {
	background: var(--pp-card); border: 1px solid var(--pp-border); border-radius: 14px;
	padding: 20px; margin: 0 0 24px;
}
.pp-tracking-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pp-text-muted); margin-bottom: 6px; }
.pp-tracking-number { font-size: 18px; font-weight: 800; color: var(--pp-text); margin-bottom: 14px; letter-spacing: .02em; }
.pp-tracking-btn {
	display: inline-flex; align-items: center; gap: 8px; background: var(--pp-accent); color: #06110C !important;
	font-weight: 700; padding: 12px 22px; border-radius: 10px; text-decoration: none !important;
}
.pp-tracking-btn:hover { background: var(--pp-accent-hover); }
.pp-tracking-pending { display: flex; align-items: center; gap: 10px; color: var(--pp-text-muted); font-size: 14px; margin: 0; }
@media (max-width: 640px) { .pp-tracking-btn { width: 100%; justify-content: center; } }

/* My Account > Orders table -> stacked cards on mobile, using the
   `data-title` attributes WooCommerce already renders on every cell
   (no template override needed) instead of an unreadable shrunk table. */
@media (max-width: 767px) {
	.woocommerce-orders-table.shop_table_responsive thead { display: none; }
	.woocommerce-orders-table.shop_table_responsive tbody tr {
		display: block; margin-bottom: 16px; background: var(--pp-card);
		border: 1px solid var(--pp-border); border-radius: 14px; padding: 16px;
	}
	.woocommerce-orders-table.shop_table_responsive tbody tr td,
	.woocommerce-orders-table.shop_table_responsive tbody tr th {
		display: flex; justify-content: space-between; align-items: center;
		padding: 8px 0; border: none; text-align: right; font-size: 14px;
	}
	.woocommerce-orders-table.shop_table_responsive tbody tr td::before,
	.woocommerce-orders-table.shop_table_responsive tbody tr th::before {
		content: attr(data-title); font-weight: 700; color: var(--pp-text-muted); text-align: left; margin-right: 12px;
	}
	.woocommerce-orders-table__cell-order-actions {
		flex-direction: column !important; align-items: stretch !important; padding-top: 12px !important;
	}
	.woocommerce-orders-table__cell-order-actions::before { display: none; }
	.woocommerce-orders-table__cell-order-actions .woocommerce-button {
		width: 100%; text-align: center; margin-top: 8px;
	}
}

/* Checkout sticky "Place order" bar (mobile only) - see
   pawprecision_checkout_sticky_bar() in functions.php. Hidden on desktop
   and toggled on/off by JS depending on whether the real button is
   already in view, so it never duplicates the on-screen CTA. */
.pp-checkout-sticky-bar {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
	background: var(--pp-card); border-top: 1px solid var(--pp-border);
	padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px;
	transform: translateY(120%); transition: transform .25s ease;
	box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.pp-checkout-sticky-bar.pp-show { transform: translateY(0); }
.pp-checkout-sticky-trust { font-size: 12px; color: var(--pp-text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pp-checkout-sticky-btn {
	background: var(--pp-accent); color: #06110C; border: none; border-radius: 10px;
	padding: 13px 24px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.pp-checkout-sticky-btn:hover { background: var(--pp-accent-hover); }
@media (max-width: 767px) { .pp-checkout-sticky-bar { display: flex; } }

/* Trust line inserted right after the real "Place order" button (see
   pawprecision_checkout_sticky_bar()) - shown on every screen size, since
   reassurance right at the payment button helps regardless of device. */
.pp-checkout-trust-line {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	color: var(--pp-text-muted); font-size: 12.5px; margin: 10px 0 0;
}

/* "Switch kit" card injected at the top of the Checkout sidebar (see
   pawprecision_render_checkout_kit_switcher() in functions.php) - lets a
   shopper change package/quantity without leaving Checkout. */
.pp-kit-switcher {
	background: var(--pp-card); border: 1px solid var(--pp-border); border-radius: 16px;
	padding: 20px; margin-bottom: 20px;
	box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.14);
}
.pp-kit-switcher-label {
	display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--pp-text-muted); margin-bottom: 14px;
}
.pp-kit-switcher form {
	display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px;
}
.pp-kit-switcher-field {
	display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--pp-text-muted);
}
.pp-kit-switcher-field select,
.pp-kit-switcher-field input { height: 42px; }
.pp-kit-switcher-qty { width: 70px; }
.pp-kit-switcher-qty input { width: 100%; text-align: center; }
/* This button lives outside the landing page template, so the .pp-btn
   classes it borrowed for markup consistency don't actually exist here -
   it was rendering as a completely unstyled native OS button (grey,
   black text, outset border) sitting right next to fully custom-styled
   inputs. Styled directly instead of depending on that missing class. */
.pp-kit-switcher button {
	height: 42px; padding: 0 18px; font-size: 13.5px; font-weight: 700; font-family: inherit;
	white-space: nowrap; cursor: pointer;
	background: var(--pp-accent); color: #06110C; border: 1px solid var(--pp-accent);
	border-radius: 10px;
	transition: background-color .15s ease;
}
.pp-kit-switcher button:hover { background: var(--pp-accent-hover); }
@media (max-width: 480px) {
	.pp-kit-switcher form { grid-template-columns: 1fr; }
	.pp-kit-switcher-qty { width: 100%; }
}

/* Checkout sidebar's order summary line item: the description column
   (name + price + package label) only sized to its natural content width
   and got squeezed to a sliver by its siblings whenever space was tight,
   forcing the product name to wrap letter-by-letter instead of by word.
   Giving it a real min-width and letting the row wrap means the price
   drops to its own line instead of crushing the name when space is
   tight, rather than both fighting over the same too-narrow row. */
.wc-block-components-order-summary-item {
	flex-wrap: wrap !important;
}
.wc-block-components-order-summary-item__description {
	flex: 1 1 160px !important;
	min-width: 160px !important;
}
.wc-block-components-order-summary-item__total-price {
	margin-left: auto;
}