/**
 * WooCommerce WhatsApp Checkout — front-end styles.
 *
 * Uses CSS custom properties injected per-store (see Assets::inline_css) so the
 * merchant's configured colours drive the button while it still inherits the
 * theme's WooCommerce button shape and spacing.
 */

.wwc-button.wwc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background-color: var( --wwc-button-bg, #25d366 );
	color: var( --wwc-button-color, #fff );
	border-color: var( --wwc-button-bg, #25d366 );
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.wwc-button.wwc-button:hover,
.wwc-button.wwc-button:focus {
	background-color: var( --wwc-button-bg-hover, #1faa52 );
	color: var( --wwc-button-color, #fff );
}

.wwc-button:focus-visible {
	outline: 2px solid var( --wwc-button-color, #fff );
	outline-offset: 2px;
}

.wwc-button__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

.wwc-button--loading {
	opacity: 0.65;
	pointer-events: none;
}

.wwc-button--loading .wwc-button__text::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-inline-start: 0.5em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: -0.15em;
	animation: wwc-spin 0.6s linear infinite;
}

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

/* Full-width in narrow/side-cart contexts. */
.wwc-button--mini,
.wwc-button--side,
.wwc-button--block {
	width: 100%;
}

.wwc-block-actions {
	margin-top: 1em;
}

/*
 * Cart Block fallback: the block's native "Proceed to Checkout" button cannot be
 * removed server-side, so hide it when our block button is present.
 */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button {
	display: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.wwc-button--loading .wwc-button__text::after {
		animation: none;
	}
}