/*
 * CC Storefront loading. Colours and texts come from the settings as variables
 * (--cc-spinner-color, --cc-overlay-bg, --cc-processing-bg, --cc-processing-title,
 * --cc-processing-note); a site can set them in its own CSS too.
 */
:root {
	--cc-icon-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E");
}
@keyframes cc-spin {
	to { transform: rotate(360deg); }
}

/*
 * WooCommerce's loading overlay, everywhere (not only inside .woocommerce, so the mini basket
 * too). WooCommerce fades the whole overlay, spinner included; the background does it instead.
 */
.blockUI.blockOverlay {
	background: var(--cc-overlay-bg, rgba(255, 255, 255, 0.6)) !important;
	opacity: 1 !important;
}
/* :is(.woocommerce, body): at least as specific as WooCommerce's own grey loader, and later. */
:is(.woocommerce, body) .blockUI.blockOverlay::before,
.woocommerce .loader::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	background: var(--cc-spinner-color, currentColor);
	-webkit-mask: var(--cc-icon-spinner) no-repeat center / contain;
	mask: var(--cc-icon-spinner) no-repeat center / contain;
	animation: cc-spin 0.7s linear infinite;
}
/*
 * Stripe's Apple Pay / Google Pay buttons reload whenever a size or colour is picked. Often
 * there are none to show (no wallet on the device), so a spinner there spins over nothing.
 */
#wc-stripe-express-checkout-element .blockUI.blockOverlay { background: transparent !important; }
:is(.woocommerce, body) #wc-stripe-express-checkout-element .blockUI.blockOverlay::before { display: none; }

/*
 * Checkout updates (a new address, a quantity): WooCommerce dims the order summary and the
 * payment box separately, a spinner in each, which can be off screen (on a phone the summary is
 * far below the address). Instead the whole screen dims lightly (the overlay colour, like the
 * basket page) with one spinner in the middle; the fields can still be typed in.
 */
.cc-checkout-one-spinner #order_review .blockUI.blockOverlay { background: transparent !important; }
.cc-checkout-one-spinner #order_review .blockUI.blockOverlay::before { display: none; }
.cc-checkout-one-spinner:has(#order_review .blockUI.blockOverlay):not(:has(form.checkout.processing))::before {
	content: "";
	position: fixed;
	z-index: 99998;
	inset: 0;
	background: var(--cc-overlay-bg, rgba(255, 255, 255, 0.6));
	pointer-events: none;
}
.cc-checkout-one-spinner:has(#order_review .blockUI.blockOverlay):not(:has(form.checkout.processing))::after {
	content: "";
	position: fixed;
	z-index: 99999;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	background: var(--cc-spinner-color, currentColor);
	-webkit-mask: var(--cc-icon-spinner) no-repeat center / contain;
	mask: var(--cc-icon-spinner) no-repeat center / contain;
	animation: cc-spin 0.7s linear infinite;
	pointer-events: none;
}

/*
 * Place order: the whole screen dims with the spinner, the title and the note until the payment
 * page or the order confirmation opens (WooCommerce marks the form .processing; an error takes
 * it away again). The form's own spinners stay out of the way.
 */
.cc-checkout-processing:has(form.checkout.processing)::before {
	content: var(--cc-processing-title, "Processing your payment");
	position: fixed;
	z-index: 99998;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 96px 24px 0;
	background: var(--cc-processing-bg, rgba(255, 255, 255, 0.85));
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.cc-checkout-processing:has(form.checkout.processing)::after {
	content: "";
	position: fixed;
	z-index: 99999;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -36px 0 0 -20px;
	background: var(--cc-spinner-color, currentColor);
	-webkit-mask: var(--cc-icon-spinner) no-repeat center / contain;
	mask: var(--cc-icon-spinner) no-repeat center / contain;
	animation: cc-spin 0.7s linear infinite;
}
.cc-checkout-processing form.checkout.processing::after {
	content: var(--cc-processing-note, "");
	position: fixed;
	z-index: 99999;
	top: calc(50% + 76px);
	right: 0;
	left: 0;
	padding: 0 24px;
	font-size: 0.875rem;
	opacity: 0.75;
	text-align: center;
}
.cc-checkout-processing form.checkout.processing .blockUI.blockOverlay::before {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.woocommerce, body) .blockUI.blockOverlay::before,
	.woocommerce .loader::before,
	.cc-checkout-one-spinner:has(#order_review .blockUI.blockOverlay)::after,
	.cc-checkout-processing:has(form.checkout.processing)::after {
		animation: none;
	}
}