/*
 * GA Checkout UX (ga-custom-checkout 1.1.3). Every rule keys off the feature list the JS
 * writes on <html data-ga-cux-features="...">, so turning a feature off turns its CSS off too.
 */

.ga-cux-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── place_order_busy ─────────────────────────────────────────────────────── */
[data-ga-cux-features~="place_order_busy"] .wc-block-components-checkout-place-order-button[data-ga-cux-busy="1"] {
	position: relative;
	cursor: progress;
}
/* WooCommerce keeps rendering its own spinner (.wc-block-components-spinner, visible while the button
 * is --loading) and hides its own text; we add NO spinner of ours. Spinner + our label are centred as a
 * pair: the label is centred in the button with 22px of left padding (room for the spinner), and the
 * spinner is moved left by half the label width (--ga-cux-label-w, measured by the JS; 9em fallback).
 * The JS also picks the shorter copy when the full label would not fit. */
[data-ga-cux-features~="place_order_busy"] .wc-block-components-checkout-place-order-button[data-ga-cux-busy="1"] .wc-block-components-button__text {
	visibility: hidden;
}
[data-ga-cux-features~="place_order_busy"] .wc-block-components-checkout-place-order-button[data-ga-cux-busy="1"] .wc-block-components-spinner {
	left: calc(var(--ga-cux-label-w, 9em) / -2 - 4px);
}
[data-ga-cux-features~="place_order_busy"] .wc-block-components-checkout-place-order-button[data-ga-cux-busy="1"]::after {
	content: attr(data-ga-cux-label);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.5em 0 calc(22px + 0.5em);
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Reassurance line: lives inside .wc-block-checkout__actions_row (WooCommerce 10.6 pins that row to the
 * bottom of the screen on phones) as a full-width flex item after the button. The row is flagged
 * data-ga-cux-note only while the line exists, and only then forced to wrap. */
[data-ga-cux-features~="place_order_busy"] .wc-block-checkout__actions_row[data-ga-cux-note="1"] {
	flex-wrap: wrap;
}
.wc-block-checkout__actions_row[data-ga-cux-note="1"] > .wc-block-components-checkout-place-order-button {
	order: 2;
}
.ga-cux-po-still {
	order: 3;
	flex: 1 1 100%;
	flex-basis: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 0.5em;
	font-size: 0.8125em;
	line-height: 1.3;
	text-align: center;
	color: #5f6368;
	width: 100%;
}
/* On phones WooCommerce 10.6 pins the row as a plain column (flex-direction: column), so the DOM order
   (link, button, line) is the visual order: the line sits directly under the button. */

/* ── stripe_ready_guard ───────────────────────────────────────────────────── */
/* Muted only; the button still takes clicks (no `disabled`, no pointer-events change). */
[data-ga-cux-features~="stripe_ready_guard"] .wc-block-components-checkout-place-order-button[data-ga-cux-pay-loading="1"]:not([data-ga-cux-busy="1"]) {
	opacity: 0.6;
}
.ga-cux-pay-hint {
	margin: 0.5em 0 0;
	font-size: 0.875em;
	opacity: 0.8;
}

/* ── cart_qty_busy ────────────────────────────────────────────────────────── */
[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty-busy="1"] .wc-block-components-quantity-selector {
	opacity: 0.6;
	transition: opacity 0.15s;
}
[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty-lock="1"] .wc-block-components-quantity-selector {
	pointer-events: none;
	cursor: progress;
}
[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty-busy="1"] .wc-block-cart-item__quantity[data-ga-cux-label]::after {
	content: attr(data-ga-cux-label);
	display: block;
	margin-top: 0.25em;
	font-size: 0.8125em;
	opacity: 0.8;
}
/* 44 x 44 px touch target on phones, paid rows only, without changing the drawn size or the
   row layout: an invisible hit area on the existing button.
   CONSTRAINT: the hit area may only grow AWAY from the quantity input (outward horizontally,
   and vertically). It must never paint over the input, or a tap near the input's edge would
   step the quantity instead of focusing the input. So "-" is anchored on its right edge and
   grows left; "+" is anchored on its left edge and grows right. The input keeps its width. */
@media (max-width: 480px) {
	[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty="ok"] .wc-block-components-quantity-selector__button {
		position: relative;
		touch-action: manipulation;
	}
	[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty="ok"] .wc-block-components-quantity-selector__button::before {
		content: "";
		position: absolute;
		top: 50%;
		width: 44px;
		height: 44px;
		transform: translateY(-50%);
	}
	[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty="ok"] .wc-block-components-quantity-selector__button--minus::before {
		right: 0;
	}
	[data-ga-cux-features~="cart_qty_busy"] .wc-block-cart-items__row[data-ga-cux-qty="ok"] .wc-block-components-quantity-selector__button--plus::before {
		left: 0;
	}
}

/* ── shipping_placeholder_focus ───────────────────────────────────────────── */
/* Only the "Enter a shipping address…" line: it shows only while the address is empty, so a
   tap always does something. Estimated Delivery keeps its normal cursor (it is information
   once the address is filled). */
[data-ga-cux-features~="shipping_placeholder_focus"] .wc-block-checkout .wc-block-components-shipping-rates-control__no-shipping-address-message {
	cursor: pointer;
}

/* ── place_order_focus (Wave 2 item 2.13; dark by default) ─────────────────── */
/* WC Blocks sets `outline: 3px solid transparent` on the button, so keyboard focus shows nothing but a
 * thin ring the theme restyle hides. #0675c4 is about 5:1 on white. Only the outline: never `disabled`. */
html[data-ga-cux-features~="place_order_focus"] .wp-block-woocommerce-checkout button.wc-block-components-checkout-place-order-button:focus-visible,
html[data-ga-cux-features~="place_order_focus"] .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
	outline: 3px solid #0675c4;
	outline-offset: 3px;
}

/* ── cookie_bar_a11y (Wave 2 item 2.12; dark by default) ───────────────────── */
/* --ga-cux-cookie-h (bar height + 16px) and data-ga-cux-cookiebar are set by the JS only while the
 * bar is visible, so these rules vanish when the bar is accepted or removed. */
html[data-ga-cux-features~="cookie_bar_a11y"][data-ga-cux-cookiebar] {
	scroll-padding-bottom: var(--ga-cux-cookie-h, 0px);
}
html[data-ga-cux-features~="cookie_bar_a11y"][data-ga-cux-cookiebar] .wc-block-checkout__actions {
	padding-bottom: var(--ga-cux-cookie-h, 0px);
}