/**
 * NXTL dark Stripe checkout styling (modal iframe + My Account add card).
 * Scoped to modal body and account pages with .nxtl-v2-stripe-checkout.
 */

.nxtl-v2-modal-checkout-body,
body.woocommerce-account.nxtl-v2-stripe-checkout {
	color-scheme: dark;
}

/*
 * WooCommerce Stripe samples these for UPE theme (light bg => white Link row).
 * Use opaque dark colors — transparent overlays still sample as light on white body.
 */
html.nxtl-v2-modal-checkout-html,
.nxtl-v2-modal-checkout-body,
body.woocommerce-account.nxtl-v2-stripe-checkout {
	background-color: #11131a !important;
}

.nxtl-v2-modal-checkout-body #payment,
.nxtl-v2-modal-checkout-body #payment .payment_methods,
.nxtl-v2-modal-checkout-body #payment .payment_box,
.nxtl-v2-modal-checkout-body .woocommerce-PaymentBox,
.nxtl-v2-modal-checkout-body #payment ul.payment_methods,
.nxtl-v2-modal-checkout-body #payment div.form-row,
.nxtl-v2-modal-checkout-body #payment div.form-row.place-order,
body.woocommerce-account.nxtl-v2-stripe-checkout #payment,
body.woocommerce-account.nxtl-v2-stripe-checkout #payment .payment_box,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-PaymentBox {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * WooCommerce Stripe reads computed styles from this hidden input to build UPE
 * appearance on checkout. On our dark modal it must not sample white inputs.
 */
.nxtl-v2-modal-checkout-body #wc-stripe-hidden-style-input,
body.woocommerce-account.nxtl-v2-stripe-checkout #wc-stripe-hidden-style-input {
	background-color: #181b24 !important;
	color: #f5f7fa !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	caret-color: #f5f7fa !important;
}

/* Express checkout — stack full-width buttons, no bright outer tiles.
 * 8px+ clear space on all sides for Google Pay brand guidelines. */
.nxtl-v2-modal-checkout-body #wc-stripe-express-checkout-element,
body.nxtl-v2-stripe-checkout #wc-stripe-express-checkout-element {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 8px 0 !important;
	margin: 8px 0 !important;
	clear: both !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	overflow: visible !important;
}

.nxtl-v2-modal-checkout-body #wc-stripe-express-checkout-element > div,
body.nxtl-v2-stripe-checkout #wc-stripe-express-checkout-element > div {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 48px !important;
	width: 100% !important;
}

.nxtl-v2-modal-checkout-body #wc-stripe-express-checkout-element iframe,
body.nxtl-v2-stripe-checkout #wc-stripe-express-checkout-element iframe {
	width: 100% !important;
	min-height: 48px !important;
	border-radius: 12px !important;
	display: block !important;
}

.nxtl-v2-modal-checkout-body #wc-stripe-express-checkout-button-separator,
body.nxtl-v2-stripe-checkout #wc-stripe-express-checkout-button-separator {
	color: #6b7689 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin: 14px 0 18px !important;
	text-align: center !important;
}

/* Payment Element / UPE inner wrappers (padding lives on .payment_box below) */
.nxtl-v2-modal-checkout-body #wc-stripe-upe-form,
body.woocommerce-account.nxtl-v2-stripe-checkout #wc-stripe-upe-form,
.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe fieldset.wc-upe-form,
body.woocommerce-account.nxtl-v2-stripe-checkout li.payment_method_stripe fieldset.wc-upe-form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color-scheme: dark;
}

/*
 * Stripe card fields — align with gateway row label padding (modal: 20px;
 * account: 20px in payment_box). Earlier rules used padding-top/bottom only,
 * which made the Payment Element hug the left edge.
 */
.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe .payment_box {
	padding: 4px 18px 18px !important;
	margin: 0 !important;
	background-color: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

body.woocommerce-account.nxtl-v2-stripe-checkout li.payment_method_stripe .payment_box {
	padding: 4px 20px 20px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe fieldset.wc-upe-form,
body.woocommerce-account.nxtl-v2-stripe-checkout li.payment_method_stripe fieldset.wc-upe-form {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe .wc-stripe-upe-element,
body.woocommerce-account.nxtl-v2-stripe-checkout .wc-stripe-upe-element {
	padding: 10px 0 8px !important;
	margin: 0 !important;
	min-height: 120px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe .wc-stripe-upe-element > div,
body.woocommerce-account.nxtl-v2-stripe-checkout .wc-stripe-upe-element > div {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.nxtl-v2-modal-checkout-body .wc-stripe-upe-element iframe,
body.woocommerce-account.nxtl-v2-stripe-checkout .wc-stripe-upe-element iframe {
	display: block !important;
	width: 100% !important;
}

.nxtl-v2-modal-checkout-body #wc-stripe-upe-errors,
body.woocommerce-account.nxtl-v2-stripe-checkout #wc-stripe-upe-errors {
	color: #ff6b6b !important;
	font-size: 13px !important;
	margin: 10px 0 0 !important;
}

/* Legacy card element wrappers — let Stripe appearance API own the look.
 * Do NOT force min-height:0 on account add-payment-method: that collapses the UPE iframe. */
.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe .wc-stripe-elements-field,
.nxtl-v2-modal-checkout-body #payment li.payment_method_stripe .StripeElement {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
}

/* Account Stripe UPE: transparent shell, keep usable height for the Payment Element */
body.woocommerce-account.nxtl-v2-stripe-checkout li.payment_method_stripe .wc-stripe-elements-field,
body.woocommerce-account.nxtl-v2-stripe-checkout li.payment_method_stripe .StripeElement,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod li.payment_method_stripe .wc-stripe-elements-field,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod li.payment_method_stripe .StripeElement,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-PaymentMethods li.payment_method_stripe .payment_box .wc-stripe-elements-field,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-PaymentMethods li.payment_method_stripe .payment_box .StripeElement,
body.woocommerce-account.nxtl-v2-stripe-checkout #payment li.payment_method_stripe .payment_box .wc-stripe-elements-field,
body.woocommerce-account.nxtl-v2-stripe-checkout #payment li.payment_method_stripe .payment_box .StripeElement {
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
	padding: 0 !important;
	box-shadow: none !important;
	min-height: 120px !important;
}

/* Add-card page: never clip the Stripe iframe; restore gateway title */
body.woocommerce-account.nxtl-v2-stripe-checkout form#add_payment_method li.payment_method_stripe,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod li.payment_method_stripe {
	overflow: visible !important;
}
body.woocommerce-account.nxtl-v2-stripe-checkout form#add_payment_method .wc-stripe-upe-element,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod .wc-stripe-upe-element {
	min-height: 160px !important;
	padding: 8px 0 12px !important;
}
body.woocommerce-account.nxtl-v2-stripe-checkout form#add_payment_method .wc-stripe-upe-element iframe,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod .wc-stripe-upe-element iframe {
	display: block !important;
	width: 100% !important;
	min-height: 140px !important;
}
body.woocommerce-account.nxtl-v2-stripe-checkout form#add_payment_method li.payment_method_stripe > label,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod li.payment_method_stripe > label {
	font-size: 14px !important;
	line-height: 1.35 !important;
	color: #f5f7fa !important;
}
body.woocommerce-account.nxtl-v2-stripe-checkout form#add_payment_method li.payment_method_stripe > label::before,
body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-AddPaymentMethod li.payment_method_stripe > label::before {
	display: block !important;
	content: var(--nxtl-v2-card-gateway-label, "Credit Card") !important;
	color: #f5f7fa !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin-right: auto !important;
}

body.woocommerce-account.nxtl-v2-stripe-checkout .woocommerce-PaymentMethods li.payment_method_stripe .payment_box label,
body.woocommerce-account.nxtl-v2-stripe-checkout #payment li.payment_method_stripe .payment_box label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #aeb5c0 !important;
	margin-bottom: 8px !important;
}

/*
 * WooCommerce Stripe Link email field (classic checkout only — outside Payment Element iframe).
 * Payment Element Link rows are styled via Appearance API in class-nxtl-v2-payment.php.
 */
.nxtl-v2-modal-checkout-body .stripe-gateway-checkout-email-field,
body.woocommerce-account.nxtl-v2-stripe-checkout .stripe-gateway-checkout-email-field {
	background: #181b24 !important;
	border-radius: 10px !important;
}

.nxtl-v2-modal-checkout-body .stripe-gateway-checkout-email-field .input-text,
body.woocommerce-account.nxtl-v2-stripe-checkout .stripe-gateway-checkout-email-field .input-text {
	background: #181b24 !important;
	color: #f5f7fa !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

.nxtl-v2-modal-checkout-body .stripe-gateway-checkout-email-field button.stripe-gateway-stripelink-modal-trigger,
body.woocommerce-account.nxtl-v2-stripe-checkout .stripe-gateway-checkout-email-field button.stripe-gateway-stripelink-modal-trigger {
	filter: none !important;
	opacity: 1 !important;
}