/* FP Go Buttons, flyingpenguin.ai
 *
 * The buttons that move a customer towards paying (add to basket, choose options, proceed to
 * checkout, place order) get one shared "green light" treatment across all three stores, so they
 * stop blending into each store's accent colour.
 *
 * Everything keys off body classes the plugin prints (fpgo, fpgo-loop, fpgo-single, fpgo-mini,
 * fpgo-basket, fpgo-checkout, fpgo-motion-*), so switching an area off in the settings removes it
 * without touching this file. Colours arrive as custom properties from the settings page.
 *
 * Every selector starts html body:not(#fpgo-x): the :not(#id) adds ID-level weight, which is
 * needed because the checkout styling sets button#place_order with an ID selector and !important.
 *
 * The sheen and chevron are BACKGROUND LAYERS, not ::before/::after. Shoptimizer and WooCommerce
 * already use ::after on the add to basket buttons for the loading spinner, and a pseudo element
 * here would fight it.
 */

@property --fpgo-sheen-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 135%;
}

@property --fpgo-ring-size {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --fpgo-ring-alpha {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --fpgo-chev-x {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

:root {
	--fpgo-base: #0e7f39;
	--fpgo-top: #1a9a4a;
	--fpgo-bottom: #0a6b2f;
	--fpgo-ink: #ffffff;
	--fpgo-ring: #0a5c2b;
	--fpgo-glow: rgba(20, 150, 70, 0.42);
	--fpgo-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fpgo-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ the shared green light */

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_grouped,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button {
	--fpgo-sheen-x: 135%;
	--fpgo-chev-x: 0px;
	position: relative;
	color: var(--fpgo-ink) !important;
	background-color: var(--fpgo-base) !important;
	background-image:
		linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%),
		linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom)) !important;
	background-size: 260% 100%, 100% 100% !important;
	background-position: var(--fpgo-sheen-x) 0, 0 0 !important;
	background-repeat: no-repeat !important;
	border: 0 !important;
	text-shadow: 0 1px 0 rgba(0, 40, 15, 0.28);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -2px 0 rgba(0, 40, 15, 0.22),
		0 4px 12px -6px var(--fpgo-glow),
		0 0 0 var(--fpgo-ring-size) rgba(26, 154, 74, var(--fpgo-ring-alpha));
	transition:
		transform 180ms var(--fpgo-ease),
		box-shadow 220ms var(--fpgo-ease),
		filter 180ms var(--fpgo-ease),
		--fpgo-chev-x 220ms var(--fpgo-ease);
}

/* The big three carry the chevron: product page add to basket, proceed, place order. */
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button {
	background-image:
		var(--fpgo-chevron),
		linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%),
		linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom)) !important;
	background-size: 16px 16px, 260% 100%, 100% 100% !important;
	background-position:
		calc(100% - 18px + var(--fpgo-chev-x)) 50%,
		var(--fpgo-sheen-x) 0,
		0 0 !important;
	padding-right: 44px !important;
	padding-left: 44px !important;
}

/* ------------------------------------------------------------------ hover, press, focus */

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_grouped:hover,
	html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:not(.disabled):hover,
	html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:hover,
	html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:hover,
	html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:hover,
	html body:not(#fpgo-x).fpgo-checkout #place_order:hover,
	html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:hover {
		--fpgo-chev-x: 4px;
		color: var(--fpgo-ink) !important;
		background-color: var(--fpgo-base) !important;
		transform: translateY(-2px);
		filter: brightness(1.06) saturate(1.12);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.28),
			inset 0 -2px 0 rgba(0, 40, 15, 0.2),
			0 12px 22px -10px var(--fpgo-glow),
			0 3px 6px -2px rgba(0, 40, 15, 0.18),
			0 0 0 var(--fpgo-ring-size) rgba(26, 154, 74, var(--fpgo-ring-alpha));
	}
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:active,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:active,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:active,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:not(.disabled):active,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:active,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:active,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:active,
html body:not(#fpgo-x).fpgo-checkout #place_order:active,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:active {
	transform: translateY(0) scale(0.985);
	transition-duration: 90ms;
	box-shadow:
		inset 0 2px 4px rgba(0, 40, 15, 0.28),
		0 2px 6px -4px var(--fpgo-glow);
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:focus-visible,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:focus-visible,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:focus-visible,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:focus-visible,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:focus-visible,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:focus-visible,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:focus-visible,
html body:not(#fpgo-x).fpgo-checkout #place_order:focus-visible,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 3px solid var(--fpgo-ring) !important;
	outline-offset: 3px !important;
}

/* ------------------------------------------------------------------ not ready yet */

/* A variable product before its options are picked. The button is still there, but it should read
   as "not yet" rather than as a green light that does nothing when pressed. */
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button.disabled,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:disabled {
	filter: saturate(0.25) brightness(1.08);
	opacity: 0.62 !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	animation: none !important;
}

/* Place order while WooCommerce is processing: the form is blocked, so stop the invitation. */
html body:not(#fpgo-x).fpgo-checkout form.processing #place_order,
html body:not(#fpgo-x).fpgo-checkout #place_order:disabled {
	filter: saturate(0.5);
	animation: none !important;
	transform: none !important;
}

/* The loading spinner Shoptimizer draws with ::after stays white on the green. */
html body:not(#fpgo-x).fpgo .ajax_add_to_cart.add_to_cart_button.loading::after,
html body:not(#fpgo-x).fpgo .single_add_to_cart_button.loading::after {
	border-color: rgba(255, 255, 255, 0.35) !important;
	border-left-color: #ffffff !important;
}

/* ------------------------------------------------------------------ motion */

/* The live loop. Big three only: product page Add to basket, Proceed to checkout, Place order.
   Garreth 2026-09-23: they should animate on their own on the product page and at checkout, not
   wait for a click, but NOT on category pages, where twenty-four moving buttons is noise. So the
   grids glint once as the pointer arrives and these three run a loop: a light sweep followed by a
   soft green ring, then a rest, about every four and a half seconds. Pure CSS so it starts with
   the page; fpgo.js only pauses it while the button is off screen. */
@keyframes fpgo-live {
	0%   { --fpgo-sheen-x: 135%; --fpgo-ring-size: 0px; --fpgo-ring-alpha: 0; }
	6%   { --fpgo-ring-alpha: 0.5; }
	26%  { --fpgo-sheen-x: -35%; --fpgo-ring-size: 10px; --fpgo-ring-alpha: 0; }
	100% { --fpgo-sheen-x: -35%; --fpgo-ring-size: 10px; --fpgo-ring-alpha: 0; }
}

@keyframes fpgo-glint-once {
	from { --fpgo-sheen-x: 135%; }
	to   { --fpgo-sheen-x: -35%; }
}

/* The ring that goes out when a category page add to basket lands. WooCommerce adds .added. */
@keyframes fpgo-added {
	0%   { box-shadow: 0 0 0 0 rgba(26, 154, 74, 0.55), 0 4px 12px -6px var(--fpgo-glow); }
	100% { box-shadow: 0 0 0 12px rgba(26, 154, 74, 0), 0 4px 12px -6px var(--fpgo-glow); }
}

html body:not(#fpgo-x).fpgo-motion-full.fpgo-single .single_add_to_cart_button.button:not(.disabled),
html body:not(#fpgo-x).fpgo-motion-full.fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-checkout button.wc-block-components-checkout-place-order-button {
	animation: fpgo-live 4.5s var(--fpgo-ease) 0.8s infinite both;
}

/* Off screen, the loop holds still (fpgo.js). While WooCommerce is processing, it stops. */
html body:not(#fpgo-x).fpgo .fpgo-offscreen {
	animation-play-state: paused !important;
}

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.add_to_cart_button:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.product_type_variable:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.product_type_simple:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-mini .widget_shopping_cart .buttons a.button.checkout:hover {
		animation: fpgo-glint-once 700ms var(--fpgo-ease) both;
	}
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button.added {
	animation: fpgo-added 700ms var(--fpgo-ease) 1 both !important;
}

/* Calm: hover, press and the added ring stay; no glint. */
html body:not(#fpgo-x).fpgo-motion-calm .single_add_to_cart_button,
html body:not(#fpgo-x).fpgo-motion-calm .checkout-button,
html body:not(#fpgo-x).fpgo-motion-calm a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-calm #place_order,
html body:not(#fpgo-x).fpgo-motion-calm button.wc-block-components-checkout-place-order-button,
html body:not(#fpgo-x).fpgo-motion-calm ul.products li.product a.button:hover {
	animation: none;
}

/* Off: colour only. */
html body:not(#fpgo-x).fpgo-motion-off ul.products li.product a.button,
html body:not(#fpgo-x).fpgo-motion-off .single_add_to_cart_button,
html body:not(#fpgo-x).fpgo-motion-off .checkout-button,
html body:not(#fpgo-x).fpgo-motion-off a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-off #place_order,
html body:not(#fpgo-x).fpgo-motion-off .widget_shopping_cart a.checkout {
	transform: none !important;
	animation: none !important;
	transition: box-shadow 150ms linear, filter 150ms linear !important;
}

@media (prefers-reduced-motion: reduce) {
	html body:not(#fpgo-x).fpgo ul.products li.product a.button,
	html body:not(#fpgo-x).fpgo .single_add_to_cart_button,
	html body:not(#fpgo-x).fpgo .checkout-button,
	html body:not(#fpgo-x).fpgo a.wc-block-cart__submit-button,
	html body:not(#fpgo-x).fpgo #place_order,
	html body:not(#fpgo-x).fpgo .widget_shopping_cart a.checkout {
		transform: none !important;
		animation: none !important;
		transition: box-shadow 150ms linear, filter 150ms linear !important;
	}
}