/**
 * The main buttons — one definition, three pages.
 *
 * Add to cart, Proceed to checkout and Place order are the same button doing
 * the same job at three points in the same journey, so they are drawn from one
 * place rather than restyled per template. Before this file they had drifted:
 * 14px bold uppercase on the product page, 15px regular on the cart, 15px
 * semibold with 30px of bottom padding on the checkout.
 *
 * The rules carry !important because custom.css reaches these same buttons
 * through longer selectors of its own; the override is deliberate and the
 * declarations it overrides have been removed where they could be.
 *
 * Loaded on the product, cart and checkout pages — see inc/buttons.php.
 *
 * @package BuddyBoss Theme Child (Adorno)
 */

:root {
	--ad-btn-ink: #000;
	/* Hover lifts the black rather than tinting it. Light enough to register
	   as a response, dark enough that the button is still black. */
	--ad-btn-ink-hover: #333;
}

/* --------------------------------------------------------------- the button */

.adorno-btn,
.woocommerce #content div.product button.single_add_to_cart_button,
.woocommerce #content div.product form.cart button.single_add_to_cart_button,
.woocommerce #content div.product button.single_buy_now_button,
.woocommerce #content div.product form.cart button.single_buy_now_button,
.adorno-cart .checkout-button,
.adorno-cart a.checkout-button,
.adorno-cart button.checkout-button,
.adorno-cart-empty .button,
.adorno-co button.adorno-co-place-order,
.adorno-co #payment button.button,
.adorno-co .woocommerce-checkout-payment button.button {
	box-sizing: border-box;
	border-radius: 100px !important;
	padding: 14px 24px !important;
	font-size: 15px !important;
	/* Never bold. */
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center !important;
	height: auto !important;
	min-height: 0 !important;
	background-image: none !important;
	background-size: auto !important;
	cursor: pointer;
	/* Colour is deliberately not in this list: the label has to go the instant
	   the button is pressed, not fade out over a fifth of a second. */
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* The filled state: black pill, white label. */
.adorno-btn,
.woocommerce #content div.product button.single_add_to_cart_button.active,
.woocommerce #content div.product form.cart button.single_add_to_cart_button.active,
.woocommerce #content div.product button.single_buy_now_button.active,
.woocommerce #content div.product form.cart button.single_buy_now_button.active,
.adorno-cart .checkout-button,
.adorno-cart a.checkout-button,
.adorno-cart button.checkout-button,
.adorno-cart-empty .button,
.adorno-co button.adorno-co-place-order,
.adorno-co #payment button.button,
.adorno-co .woocommerce-checkout-payment button.button {
	background-color: var(--ad-btn-ink) !important;
	border: 1px solid var(--ad-btn-ink) !important;
	color: #fff !important;
}

/* Hover: no underline, the black simply lifts. */
.adorno-btn:hover,
.adorno-btn:focus,
.woocommerce #content div.product button.single_add_to_cart_button.active:hover,
.woocommerce #content div.product form.cart button.single_add_to_cart_button.active:hover,
.woocommerce #content div.product button.single_buy_now_button.active:hover,
.woocommerce #content div.product form.cart button.single_buy_now_button.active:hover,
.adorno-cart .checkout-button:hover,
.adorno-cart a.checkout-button:hover,
.adorno-cart button.checkout-button:hover,
.adorno-cart .checkout-button:focus,
.adorno-cart button.checkout-button:focus,
.adorno-cart-empty .button:hover,
.adorno-co button.adorno-co-place-order:hover,
.adorno-co #payment button.button:hover,
.adorno-co .woocommerce-checkout-payment button.button:hover,
.adorno-co button.adorno-co-place-order:focus,
.adorno-co #payment button.button:focus {
	background-color: var(--ad-btn-ink-hover) !important;
	border-color: var(--ad-btn-ink-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
	background-position: 0 0 !important;
}

/* The outline state on the product page, where two buttons sit side by side
   and only the one under the cursor is filled. */
.woocommerce #content div.product button.single_add_to_cart_button:not(.active),
.woocommerce #content div.product form.cart button.single_add_to_cart_button:not(.active),
.woocommerce #content div.product button.single_buy_now_button:not(.active),
.woocommerce #content div.product form.cart button.single_buy_now_button:not(.active) {
	background-color: #fff !important;
	border: 1px solid var(--ad-btn-ink) !important;
	color: var(--ad-btn-ink) !important;
}

/* Keyboard focus still needs to be visible; the pointer states above are not
   enough on their own. */
.adorno-btn:focus-visible,
.woocommerce #content div.product button.single_add_to_cart_button:focus-visible,
.adorno-cart .checkout-button:focus-visible,
.adorno-cart button.checkout-button:focus-visible,
.adorno-co button.adorno-co-place-order:focus-visible,
.adorno-co #payment button.button:focus-visible {
	outline: 2px solid var(--ad-btn-ink) !important;
	outline-offset: 2px !important;
}

/* ------------------------------------------------------------- the spinner */

/*
 * Pressed, the button says so straight away rather than waiting for the next
 * page: the label goes, a spinner takes its place, and the button stops
 * accepting a second press. The width does not change — the label is made
 * transparent rather than removed, so the pill holds its shape.
 */
.adorno-btn-loading {
	position: relative !important;
	color: transparent !important;
	pointer-events: none;
	/* Safari paints the text shadow even when the colour is transparent. */
	text-shadow: none !important;
}

.adorno-btn-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: adorno-btn-spin 0.6s linear infinite;
}

/* On an outline button the spinner is drawn in ink, not in white. */
.adorno-btn-loading.adorno-btn-loading--ink::after {
	border-color: rgba(0, 0, 0, 0.2);
	border-top-color: var(--ad-btn-ink);
}

@keyframes adorno-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.adorno-btn-loading::after {
		animation-duration: 1.6s;
	}
}