/**
 * WooCommerce Wholesale Order Form (WWOF) — brand alignment.
 *
 * The order form is a Vue app (mounted on .order-form-app) built on
 * ant-design-vue, whose runtime-injected styles use :where()-reduced
 * specificity — so these ordinary selectors out-cascade them reliably.
 *
 * Buttons re-use the theme's --button-* token contract from buttons.css so
 * they follow the active color scheme, the pill radius, and the label-large
 * type role — and pick up any future token change automatically.
 *
 * The per-row Add to Cart button also reads the plugin's own
 * --wwof-button-color / --wwof-button-text-color custom properties (set as
 * inline vars from form-builder settings on .add-to-cart-btn-box). Those are
 * redirected to the theme tokens ON the button element, which beats the
 * inherited inline values regardless of load order.
 */

/* ── Add to Cart buttons (per-row + "Add Selected to Cart" footer) ────────── */

.order-form-app :is(.add-to-cart-btn-box, .add-selected-to-cart-button-box) .ant-btn {
	--wwof-button-color: var(--button-background-color);
	--wwof-button-text-color: var(--button-text-color);

	background-color: var(--button-background-color);
	border-color: transparent;
	border-radius: var(--button-border-radius);
	box-shadow: none;
	color: var(--button-text-color);
	font-family: var(--button-font-family);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	text-transform: var(--button-text-transform);
	transition: var(--button-transition);
}

.order-form-app :is(.add-to-cart-btn-box, .add-selected-to-cart-button-box) .ant-btn:not(:disabled):hover {
	--wwof-button-color: var(--button-hover-background-color);
	--wwof-button-text-color: var(--button-hover-text-color);

	background-color: var(--button-hover-background-color);
	border-color: transparent;
	color: var(--button-hover-text-color);
}

.order-form-app :is(.add-to-cart-btn-box, .add-selected-to-cart-button-box) .ant-btn:focus-visible {
	outline: var(--button-focus-outline-width) var(--button-focus-outline-style) var(--button-focus-outline-color);
	outline-offset: var(--button-focus-outline-offset);
	box-shadow: none;
}

/* Disabled — mirror the theme's button state set: de-emphasised, no hover
   response (§14 in buttons.css). */
.order-form-app :is(.add-to-cart-btn-box, .add-selected-to-cart-button-box) .ant-btn:disabled,
.order-form-app :is(.add-to-cart-btn-box, .add-selected-to-cart-button-box) .ant-btn[disabled] {
	background-color: var(--button-background-color);
	border-color: transparent;
	color: var(--button-text-color);
	cursor: not-allowed;
	opacity: var(--ftps-disabled-opacity, 0.5);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

/* Ant's default marks the active page and hover accents in its own blue.
   Re-point to the theme's current-page treatment (see the posts-pagination
   block: red-dark fill, transparent border, white numeral). */

.order-form-app .ant-pagination .ant-pagination-item-active,
.order-form-app .ant-pagination .ant-pagination-item-active:hover {
	background-color: var(--red-dark, var(--color-primary-800));
	border-color: transparent;
}

.order-form-app .ant-pagination .ant-pagination-item-active a,
.order-form-app .ant-pagination .ant-pagination-item-active:hover a {
	color: var(--color-white, #fff);
}

/* Hover / jump affordances follow the brand primary instead of ant blue. */
.order-form-app .ant-pagination .ant-pagination-item:not(.ant-pagination-item-active):hover a,
.order-form-app .ant-pagination .ant-pagination-item-link-icon {
	color: var(--color-primary);
}