/**
 * Shared WooCommerce overrides — loaded on every WooCommerce-owned page
 * (shop, product, cart, checkout, my account). Restyles WooCommerce's own
 * generic buttons/notices/price/quantity markup to the approved dark
 * system; page-specific layout lives in shop.css, single-product.css,
 * cart.css, checkout.css and my-account.css.
 *
 * Every rule below is scoped under .u3ds-shop/.u3ds-product/.u3ds-cart/
 * .u3ds-checkout/.u3ds-my-account (the content wrapper each template.html
 * gives its page). WordPress' generic classes (.wp-element-button, .button)
 * appear on WooCommerce's buttons but are NOT unique to them — the header's
 * "Start a Project" button carries .wp-element-button too, and the header
 * renders on every one of these pages. Scoping to the content wrapper is
 * what keeps this file from ever touching the header/footer.
 */

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) {
	color: var(--wp--preset--color--text-primary);
}

/* Buttons — mirrors the existing .wp-block-button__link treatment used
   sitewide (page-shell.css / header.css), applied to every real-world class
   WooCommerce's classic templates and WooCommerce Blocks put on their
   buttons (add to cart, buy now, place order, update cart, form submits).
   !important guards against WooCommerce Blocks' own default button
   stylesheet, which loads after ours and is otherwise more specific. */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.button,
	.wp-element-button,
	.add_to_cart_button,
	.single_add_to_cart_button,
	.checkout-button,
	.wc-block-components-button,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button
) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--button) !important;
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid transparent !important;
	text-transform: uppercase;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xl) !important;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
	cursor: pointer;
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.button,
	.wp-element-button,
	.add_to_cart_button,
	.wc-block-components-button,
	.wc-block-cart__submit-button
):hover {
	background-color: var(--wp--preset--color--accent-highlight) !important;
	color: var(--wp--preset--color--text-primary) !important;
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.button.loading, .wc-block-components-button.is-loading) {
	opacity: 0.7;
	cursor: progress;
}

/* Add to Cart "+" treatment — decorative only (Chrome/most AT do not
   announce ::after generated content, so the button's real accessible
   name stays "Add to Cart"). Pure CSS, sits on top of the native
   .add_to_cart_button — no WooCommerce markup or behavior is touched.
   Excludes the "View cart" link (.added_to_cart) and Buy Now
   (.u3ds-buy-now-button), neither of which carries this class. */
:is(.u3ds-shop, .u3ds-product) :is(.add_to_cart_button, .single_add_to_cart_button)::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.2);
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

:is(.u3ds-shop, .u3ds-product) :is(.add_to_cart_button, .single_add_to_cart_button):hover::after {
	background-color: rgba(255, 255, 255, 0.3);
}

/* Secondary / outline button — "Continue shopping" (classic cart page). */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) .wc-backward {
	background-color: transparent !important;
	color: var(--wp--preset--color--text-primary) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) .wc-backward:hover {
	border-color: var(--wp--preset--color--accent) !important;
	background-color: transparent !important;
}

/* Notices (added-to-cart, errors, info). */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.wc-block-components-notice-banner
) {
	background-color: var(--wp--preset--color--surface-elevated);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--text-primary);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--l);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
	border-left-color: var(--wp--preset--color--error);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.wc-block-components-notice-banner.is-success, .woocommerce-message) {
	border-left-color: var(--wp--preset--color--success);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button {
	margin-left: var(--wp--preset--spacing--m);
}

/* Price formatting. */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.woocommerce-Price-amount,
	.wc-block-components-formatted-money-amount,
	.price
) {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text-primary);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) del .woocommerce-Price-amount {
	color: var(--wp--preset--color--text-secondary);
	opacity: 0.7;
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) ins {
	text-decoration: none;
}

/* Quantity input. */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.quantity .qty, .wc-block-components-quantity-selector__input) {
	background-color: var(--wp--preset--color--bg-secondary);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--bg-secondary);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--text-secondary);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) .wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--text-primary);
}

/* Form fields (checkout, my-account forms, lost-password, etc). */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.wc-block-components-text-input input,
	.wc-block-components-textarea textarea,
	.wc-block-components-address-form select
) {
	background-color: var(--wp--preset--color--bg-secondary);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button);
	color: var(--wp--preset--color--text-primary);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.woocommerce form .form-row label,
	.wc-block-components-text-input label,
	.wc-block-components-textarea label
) {
	color: var(--wp--preset--color--text-secondary);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(
	.woocommerce form .form-row input.input-text:focus,
	.woocommerce form .form-row textarea:focus,
	.wc-block-components-text-input input:focus
) {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

/* Tables (cart totals, order review, order history). */
:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.shop_table, .woocommerce-table, .wc-block-components-totals-item) {
	border-color: var(--wp--preset--color--border);
}

:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.shop_table th, .shop_table td) {
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-primary);
}

/* Compact rating summary (u3ds/rating-summary block) — shared between
   product cards (shop.css positions it) and the single product page
   (single-product.css positions it). Real WooCommerce data only; the CSS
   star fill is driven entirely by the --fg width the PHP render sets. */
.u3ds-rating-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	text-decoration: none;
}

.u3ds-rating-summary__stars {
	position: relative;
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1;
	letter-spacing: 2px;
}

.u3ds-rating-summary__stars-bg,
.u3ds-rating-summary__stars-fg {
	display: block;
	white-space: nowrap;
}

.u3ds-rating-summary__stars-bg {
	color: var(--wp--preset--color--border);
}

.u3ds-rating-summary__stars-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--wp--preset--color--accent);
}

.u3ds-rating-summary__text {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.u3ds-rating-summary:hover .u3ds-rating-summary__text {
	color: var(--wp--preset--color--text-primary);
}

/* Available Colors swatches (u3ds/product-details-extra block). */
.u3ds-color-swatch-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
}

.u3ds-color-swatch {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2-xs);
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--s);
	background-color: var(--wp--preset--color--surface-elevated);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}

.u3ds-color-swatch__block {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
}

/* "Rainbow" / "Multicolor" — a genuine multi-hue swatch rather than one
   arbitrary flat color standing in for values that mean many colors. */
.u3ds-color-swatch__block--multi {
	background: conic-gradient(
		from 0deg,
		#E4373F 0deg 60deg,
		#F5C518 60deg 120deg,
		#35D07F 120deg 180deg,
		#3B6FE0 180deg 240deg,
		#8B5CF6 240deg 300deg,
		#F472B6 300deg 360deg
	);
}

.u3ds-color-swatch__name {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--small);
	text-transform: capitalize;
}

@media (prefers-reduced-motion: reduce) {
	:is(.u3ds-shop, .u3ds-product, .u3ds-cart, .u3ds-checkout, .u3ds-my-account) :is(.button, .wc-block-components-button) {
		transition: none;
	}
}