/* ── EMBEDDED CHECKOUT OVERLAY — shared by shop.html, system.html's Shop tab, and billing.html
   (operator 2026-08-14: keep the transaction on sfti-ai.org instead of a Stripe-hosted redirect).
   embedded-checkout.js builds this markup once per page and toggles `.open`; nothing here assumes
   which of the three callers mounted it, so a fix here fixes all three at once. */
#sfti-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
}
#sfti-checkout-overlay.open { display: block; }

.sfti-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 9, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sfti-checkout-panel {
  /* ★ TRUE inset:0, NOT height:100% IN NORMAL FLOW (operator 2026-08-14: "its not attached to the
     bottom and top of page"). A `position:relative` block with `height:100%` only fills its
     parent's box IF nothing about its own content ever asks for more — and Stripe's iframe is
     free to report its own intrinsic size to the layout engine. `position:absolute; inset:0`
     makes this panel occupy the fixed overlay's box by DEFINITION, not by a height calculation
     that content sizing could ever win. */
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0 auto;
  /* the iframe Stripe mounts inside #sfti-checkout-mount sizes itself; this just bounds how wide
     it's allowed to get on a desktop browser so the payment form isn't stretched edge to edge. */
  max-width: 560px;
  width: 100%;
  overflow-y: auto;
  background: var(--bg-elevated, #0d0d12);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
}
@media (min-width: 640px) {
  .sfti-checkout-panel {
    top: 5vh;
    bottom: 5vh;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
}

.sfti-checkout-close {
  position: absolute;
  /* ★ CLEARS THE NOTCH/DYNAMIC ISLAND (operator 2026-08-14: "its X is too high stuck behind my
     clock"). `top: 10px` alone is measured from this panel's own padding-box edge, which the
     `padding: env(safe-area-inset-top) ...` above already pushes past the status bar — the button
     ignored that same padding because position:absolute takes an element out of flow entirely, so
     it never inherits the push the padding gives normal content. It needs the identical env()
     value applied to ITS OWN offset, not a borrowed assumption that the parent's padding covers it. */
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 14, 0.6);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 50%;
  color: var(--text-dim, #999);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.sfti-checkout-close:hover { color: var(--accent-gold, #d4af37); }

#sfti-checkout-mount { min-height: 320px; }