/**
 * Layout for the shared checkout buttons (assets/js/checkout-buttons.js):
 * PayPal, guest debit/credit card, and Apple Pay, stacked full width.
 * The buttons themselves are PayPal's and Apple's own custom elements
 * (inline by default); these rules only size and space them.
 */

.wppg-checkout-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.wppg-checkout-buttons paypal-button,
.wppg-checkout-buttons paypal-basic-card-container,
.wppg-checkout-buttons paypal-basic-card-button,
.wppg-checkout-buttons apple-pay-button {
	display: block;
	width: 100%;
}

/* Apple's element is sized through its own custom properties. */
.wppg-checkout-buttons apple-pay-button {
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 45px;
	--apple-pay-button-border-radius: 4px;
	--apple-pay-button-padding: 0;
	--apple-pay-button-box-sizing: border-box;
	cursor: pointer;
}