/* Upsell modal + processing overlay for Delayed Initial Charge funnels.
   Loaded on payment.html and d-payment.html.

   Design intent: when shown, the modal looks indistinguishable from a real
   page navigation to the upsell page — full viewport, opaque background.
   The actual upsell.html / d-upsell.html DOM is lifted in verbatim, so
   visuals match exactly. css/upsell.css is loaded alongside this file. */

#upsell-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#upsell-modal[data-show="1"] { display: block; }

/* Keep the underlying payment page from scrolling while the modal is up */
body.upsell-modal-open { overflow: hidden; }

/* Hide the reCAPTCHA Enterprise badge — same pattern xShield 4FB uses.
   Per Google TOS, the legal notice must be visible somewhere on the page. */
.grecaptcha-badge { visibility: hidden !important; }

/* Processing overlay (spinner) */
#processing-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.85);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#processing-overlay[data-show="1"] { display: flex; }

#processing-overlay .spinner {
  width: 56px;
  height: 56px;
  border: 5px solid #e5e7eb;
  border-top-color: #16a34a;
  border-radius: 50%;
  animation: kspin 0.9s linear infinite;
}
#processing-overlay p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  font-family: 'Open Sans', sans-serif;
}

@keyframes kspin {
  to { transform: rotate(360deg); }
}

/* Checkout error banner (above the form on the payment page) */
#checkout-error {
  display: none;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 12px auto;
  max-width: 600px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
#checkout-error strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}