/* NMI Apple Pay / Google Pay wallet buttons */

.wc-nmi-wallet-container {
	margin: 0.75em 0 0.25em;
}

.wc-nmi-applepay-button,
.wc-nmi-googlepay-button {
	display: block;
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
}

/* Apple Pay's native button is rendered by Collect.js as an <apple-pay-button>
 * element. Make sure it stretches the full width of the payment panel. */
.wc-nmi-applepay-button apple-pay-button {
	display: block;
	width: 100%;
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 44px;
	--apple-pay-button-border-radius: 6px;
}

/* Google Pay renders its button inside a div Collect.js injects; ensure the
 * wrapper sizes correctly. */
.wc-nmi-googlepay-button > div,
.wc-nmi-googlepay-button > button {
	width: 100% !important;
	min-width: 100% !important;
}

.wc-nmi-applepay-description,
.wc-nmi-googlepay-description {
	margin-bottom: 0.5em;
	font-size: 0.95em;
	color: #555;
}

.wc-nmi-wallet-error {
	margin-top: 0.5em;
	padding: 8px 10px;
	border: 1px solid #c93030;
	background: #fdecea;
	color: #8a1f1f;
	border-radius: 4px;
	font-size: 0.9em;
}

.wc-nmi-wallet-unsupported {
	margin-top: 0.5em;
	padding: 8px 10px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	color: #555;
	border-radius: 4px;
	font-size: 0.9em;
}

/* Hide WooCommerce's Place Order button while a wallet method is active —
 * the wallet button itself drives the order. */
.wc-nmi-wallets-hidden {
	display: none !important;
}

/* Transparent click-blocker overlay. Sits on top of the Apple Pay /
 * Google Pay button and catches clicks while the checkout form is still
 * missing required input (terms checkbox, signature, etc.) — JS toggles
 * `wc-nmi-form-valid` on the container when prerequisites are met.
 *
 * Default state: pointer-events:auto, the overlay catches the click and
 * the JS click handler shows the validation error.
 * Valid state:   pointer-events:none, the click goes through to the real
 * wallet button which opens the wallet sheet.
 */
.wc-nmi-wallet-button-wrap {
	position: relative;
}
.wc-nmi-wallet-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}
.wc-nmi-applepay-container.wc-nmi-form-valid .wc-nmi-applepay-overlay,
.wc-nmi-googlepay-container.wc-nmi-form-valid .wc-nmi-googlepay-overlay {
	pointer-events: none;
	cursor: auto;
}