/**
 * Z2W Stripe Gateway — Payment Element Styles
 *
 * The Payment Element handles its own internal styling via the appearance API.
 * These styles control the container, error messages, and outer chrome.
 *
 * @package Z2W_Seller_Suite
 */

/* ---- Fieldset reset ---- */
.z2w-stripe-fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

/* ---- Payment Element container ---- */
.z2w-stripe-payment-wrap {
	margin-bottom: 14px;
}

#z2w-stripe-payment-element {
	min-height: 100px;
}

/* ---- Error message ---- */
.z2w-stripe-error {
	color: #e25950;
	font-size: 13px;
	margin-top: 6px;
	min-height: 0;
}

.z2w-stripe-error:not(:empty) {
	min-height: 20px;
}

/* ---- Powered by Stripe footer ---- */
.z2w-stripe-powered {
	text-align: right;
	margin-top: 4px;
	margin-bottom: 12px;
}

.z2w-stripe-powered small {
	font-size: 11px;
	color: #9ca3af;
	letter-spacing: 0.02em;
}

/* ---- Turnstile widget ---- */
.z2w-stripe-turnstile {
	margin-bottom: 16px;
}

.z2w-stripe-turnstile .cf-turnstile {
	display: flex;
	justify-content: center;
}

/* ---- Processing / loading overlay ---- */
.z2w-stripe-fieldset .z2w-stripe-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.z2w-stripe-fieldset .z2w-stripe-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #d4d4d8;
	border-top-color: #82c92b;
	border-radius: 50%;
	animation: z2w-stripe-spin 0.6s linear infinite;
}

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

/* ---- Place Order pending state (spinner + status beside the button) ---- */
#place_order.z2w-paying {
	opacity: 0.65;
	cursor: progress;
	pointer-events: none;
}

/* While our payment is confirming, hide the translucent white blockUI overlay
   that WooCommerce core drops over the checkout form during the AJAX submit /
   confirmPayment round-trip. On wide layouts it reads as a distracting white
   square covering part of the screen; the green status panel is now the clear
   "working…" signal. !important is required to beat blockUI's inline opacity.
   The overlay element still exists (so the form can't be re-submitted) — it's
   just invisible. Scoped to .z2w-pay-active so normal "updating totals" dimming
   on coupon/shipping changes is untouched. */
form.checkout.z2w-pay-active .blockUI.blockOverlay {
	opacity: 0 !important;
}

.z2w-pay-status {
	/* Sit ABOVE WooCommerce's blockUI overlay (z-index 1000), which otherwise
	   dims this element with its faint white layer and makes the text/spinner
	   look translucent. position + high z-index lifts it clear of the overlay. */
	position: relative;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #2c4d15;
	text-align: center;
	background: #eef7e4;
	border: 2px solid #72af43;
	border-radius: 6px;
}

.z2w-pay-spinner {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 4px solid #b9c4ad;
	border-top-color: #72af43;
	border-radius: 50%;
	animation: z2w-stripe-spin 0.6s linear infinite;
}

/* ---- Mobile / responsive ---- */
@media (max-width: 600px) {
	.z2w-stripe-turnstile .cf-turnstile {
		transform: scale(0.9);
		transform-origin: center;
	}
}