/**
 * DJMWeb WooCommerce Brand Styles
 *
 * Light-touch styling that applies the brand colour to WooCommerce's own
 * components without overriding theme typography, spacing or layout.
 *
 * Variables (declared inline by the plugin):
 *   --djm-primary        Brand colour
 *   --djm-primary-hover  ~12% darker
 *   --djm-primary-dark   ~25% darker
 *   --djm-primary-light  rgba 15% — translucent fill
 *   --djm-primary-tint   rgba 6%  — very pale fill
 *   --djm-on-primary     Legible foreground colour for the primary
 */

/* -------------------------------------------------------------------------
 * Buttons
 * Only target buttons that already carry .button (i.e. theme has opted in
 * to Woo button styling) — avoids hijacking unrelated theme buttons.
 * ---------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var( --djm-primary );
	color: var( --djm-on-primary );
	border-color: var( --djm-primary );
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce-page a.button:hover,
.woocommerce-page a.button:focus,
.woocommerce-page button.button:hover,
.woocommerce-page button.button:focus,
.woocommerce-page input.button:hover,
.woocommerce-page input.button:focus {
	background-color: var( --djm-primary-hover );
	border-color: var( --djm-primary-hover );
	color: var( --djm-on-primary );
}

/* Primary / alt variant Woo uses on checkout, my-account, order buttons. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
	background-color: var( --djm-primary );
	color: var( --djm-on-primary );
	border-color: var( --djm-primary );
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit.alt:focus {
	background-color: var( --djm-primary-dark );
	border-color: var( --djm-primary-dark );
}

/* Disabled state — keep the brand colour but visually flat. */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
	background-color: var( --djm-primary );
	opacity: 0.5;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Notices (success / info / error banners across cart, checkout, etc.)
 * Woo's default green is jarring against most brand palettes — tone the
 * success banner to use the brand colour, and add a coloured left border
 * to give the banner more visual presence without changing layout.
 * ---------------------------------------------------------------------- */

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	border-top-color: var( --djm-primary );
	background-color: var( --djm-primary-tint );
}

.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before {
	color: var( --djm-primary );
}

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	border-top-color: var( --djm-primary );
	background-color: var( --djm-primary-tint );
}

.woocommerce .woocommerce-info::before,
.woocommerce-page .woocommerce-info::before {
	color: var( --djm-primary );
}

/* Leave .woocommerce-error red — semantic colour for errors should stay
   recognisable across sites. */

/* -------------------------------------------------------------------------
 * Sale badges
 * ---------------------------------------------------------------------- */

.woocommerce span.onsale,
.woocommerce-page span.onsale {
	background-color: var( --djm-primary );
	color: var( --djm-on-primary );
	border-color: var( --djm-primary );
}

/* -------------------------------------------------------------------------
 * Product price colour — Woo doesn't apply a colour by default but many
 * themes do. We don't fight the theme; we only colour the price *inside*
 * the cart/order summary where it sits in a known structure.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	color: var( --djm-primary );
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Links inside Woo-rendered components (breadcrumbs, my-account nav,
 * order tables, etc.) — keep theme link colour outside Woo intact.
 * ---------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul li.is-active a {
	color: var( --djm-primary );
	font-weight: 600;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	color: var( --djm-primary-hover );
}

.woocommerce-breadcrumb a {
	color: var( --djm-primary );
}

.woocommerce-breadcrumb a:hover {
	color: var( --djm-primary-hover );
}

/* -------------------------------------------------------------------------
 * Form focus states
 * Subtle ring in the brand colour on Woo's own inputs. Themes will style
 * inputs in their own way; this only kicks in for inputs *inside* Woo
 * containers, so it won't bleed into other forms on the site.
 * ---------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	border-color: var( --djm-primary );
	box-shadow: 0 0 0 3px var( --djm-primary-light );
	outline: none;
}

/* Select2 (Woo's default country/state dropdowns) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
	border-color: var( --djm-primary );
	box-shadow: 0 0 0 3px var( --djm-primary-light );
	outline: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var( --djm-primary );
	color: var( --djm-on-primary );
}

/* -------------------------------------------------------------------------
 * Quantity inputs — brand-colour focus ring only, no layout changes.
 * ---------------------------------------------------------------------- */

.woocommerce .quantity input.qty:focus,
.woocommerce-page .quantity input.qty:focus {
	border-color: var( --djm-primary );
	box-shadow: 0 0 0 3px var( --djm-primary-light );
	outline: none;
}

/* -------------------------------------------------------------------------
 * Tabs — single product page tabs (Description, Additional info, etc.)
 * Just colour the active tab marker; don't restyle tab shape.
 * ---------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var( --djm-primary );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --djm-primary );
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Pagination — Woo's own pagination block on shop pages.
 * ---------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
	background-color: var( --djm-primary );
	color: var( --djm-on-primary );
	border-color: var( --djm-primary );
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce-page nav.woocommerce-pagination ul li a:hover,
.woocommerce-page nav.woocommerce-pagination ul li a:focus {
	background-color: var( --djm-primary-tint );
	color: var( --djm-primary );
}

/* -------------------------------------------------------------------------
 * Checkout progress / order summary table accents
 * ---------------------------------------------------------------------- */

.woocommerce table.shop_table tfoot th,
.woocommerce-page table.shop_table tfoot th {
	color: var( --djm-primary-dark );
}

/* -------------------------------------------------------------------------
 * Cart progress bar (free shipping, mix and match completion etc.) when
 * a theme/plugin uses the standard Woo progress-bar markup.
 * ---------------------------------------------------------------------- */

.woocommerce-cart-progress-bar__fill,
.wc-block-components-progress-bar__progress {
	background-color: var( --djm-primary ) !important;
}

/* -------------------------------------------------------------------------
 * Reduced motion preference — kill button transitions for users who
 * prefer reduced motion.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		transition: none;
	}
}