/* Klero — inline iframe inside the Credit Card payment method panel */
.klero-inline-wrap {
  margin-top: 8px;
  padding-top: 8px;
}

/* Microcopy under the iframe. The iframe's own button reads "Save" (Helcim
   locks it in verify mode), so this banner tells the customer explicitly
   that clicking Save submits the order. */
.klero-submit-notice {
  margin: 14px 0 0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: 'Lato', sans-serif !important;
  color: #0f172a !important;
  background: #fef3c7 !important;
  border-left: 3px solid #d97706 !important;
  border-radius: 3px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.klero-submit-notice strong {
  font-weight: 700 !important;
}

/* When Klero is the selected gateway, the Save button INSIDE the iframe is
   the submit — the WC Place Order button below would be a duplicate that
   confuses customers. Hide it. JS still triggers a programmatic click on it
   after the iframe tokenizes, so the element must remain in the DOM. */
body.klero-gateway-selected #place_order,
body.klero-gateway-selected .woocommerce-checkout-payment #place_order,
body.klero-gateway-selected button#place_order {
  display: none !important;
}

/* Terms gate: blocks the iframe's Save button until the WC #terms checkbox
   is checked. Without this, the customer can tokenize the card (a $0
   Helcim verify tx) and THEN get rejected by WC's checkout_process for an
   unchecked Terms box — which orphans a useless tokenization on Helcim
   and forces the customer to re-enter their card.
   The overlay sits OUTSIDE .klero-iframe-container because insertIframe()
   wipes that container's innerHTML on every session refresh. It lives in
   a sibling wrapper .klero-iframe-wrap and is absolutely positioned to
   cover the iframe. pointer-events: auto intercepts clicks. */
.klero-iframe-wrap {
  position: relative;
}
.klero-terms-overlay {
  display: none;
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  padding: 20px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lato', sans-serif !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  cursor: not-allowed !important;
  border-radius: 8px !important;
}
body.klero-terms-needed .klero-terms-overlay {
  display: flex !important;
}
.klero-terms-overlay strong {
  display: block;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.klero-terms-overlay-sub {
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 400 !important;
}
.klero-iframe-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 1px 2px rgba(30,58,95,0.08);
  transition: height 0.15s ease;
}
.klero-iframe-container iframe {
  display: block;
  width: 100%;
  height: 0;
  border: 0;
  background: #fff;
}
.klero-iframe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 14px;
  background: #ffffff;
  pointer-events: none;
}
.klero-iframe-loading::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #1e3a5f;
  border-radius: 50%;
  margin-bottom: 12px;
  animation: klero-spin 0.9s linear infinite;
}
@keyframes klero-spin {
  to { transform: rotate(360deg); }
}
.klero-modal-intro { padding: 6px 0 0; }

/* Full-page processing overlay */
.klero-processing-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 999999 !important;
  justify-content: center !important;
  align-items: center !important;
}
.klero-processing-overlay.active {
  display: flex !important;
  visibility: visible !important;
}
.klero-processing-content {
  background: white !important;
  padding: 40px !important;
  border-radius: 12px !important;
  text-align: center !important;
  max-width: 500px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  z-index: 1000000 !important;
}
.klero-processing-content h3 {
  margin: 0 0 15px !important;
  font-size: 24px !important;
  color: #333 !important;
}
.klero-processing-content p {
  margin: 10px 0 !important;
  font-size: 16px !important;
  color: #666 !important;
}
.klero-processing-content p.warning {
  color: #d32f2f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-top: 15px !important;
}
.klero-processing-spinner {
  border: 5px solid #f3f3f3 !important;
  border-top: 5px solid #1e3a5f !important;
  border-radius: 50% !important;
  width: 60px !important;
  height: 60px !important;
  animation: klero-spin 1s linear infinite !important;
  margin: 0 auto 20px !important;
}