/**
 * looch payment modal styles.
 *
 * Loaded by looch.js via an injected <link>. Everything is scoped under
 * #looch-modal-overlay and uses !important so the modal renders consistently
 * even when embedded on a host page with aggressive global styles.
 */

/* Font Face - Rota. Served from looch.money, which now sends
   Access-Control-Allow-Origin: * + Content-Type: font/woff2 — so the cross-origin
   @font-face loads in Safari (browsers fetch fonts in CORS mode). */
@font-face {
  font-family: 'Rota';
  src: url('https://looch.money/fonts/Rota-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  /* optional (not swap): the font-display decision is made ONCE per page load — Rota if
     it's ready fast (preloaded/cached, the normal case), otherwise the fallback is kept
     for the whole load. Either way the modal never swaps fallback→Rota mid-session, so
     "Secured by looch" (and everything else) is identical between the pre-auth and
     post-auth views. */
  font-display: optional;
}

@font-face {
  font-family: 'Rota';
  src: url('https://looch.money/fonts/Rota-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  /* optional (not swap): the font-display decision is made ONCE per page load — Rota if
     it's ready fast (preloaded/cached, the normal case), otherwise the fallback is kept
     for the whole load. Either way the modal never swaps fallback→Rota mid-session, so
     "Secured by looch" (and everything else) is identical between the pre-auth and
     post-auth views. */
  font-display: optional;
}

/* Overlay */
#looch-modal-overlay.looch-modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  /* The project-wide looch_app barrier: bgOverlayColor #1E1F20 at 0.8 alpha (the
     same scrim every native sheet/bottom-sheet sits on in the app), so the checkout
     scrim behind the passkey flow reads as the same surface as the app. */
  background-color: rgba(30, 31, 32, 0.8) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  /* CustomOpacity: one fade setting project-wide (200ms ease-in-out) — matches the
     app barrier's 200ms fade. */
  transition: opacity 200ms ease-in-out !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay.looch-modal-overlay.looch-modal-open {
  display: flex !important;
  /* Top-anchored so the modal grows/shrinks from the bottom — switching tabs
     keeps everything above the change (the tabs) at a fixed Y. */
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 5vh 0 !important;
  opacity: 1 !important;
}

/* Disable the long-press selection / copy callout anywhere in the modal — it
   should feel like a native app, not a selectable web page. */
#looch-modal-overlay {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Exception: the email field must keep the iOS paste / selection menu so the
   customer can paste their address when signing in. */
#looch-modal-overlay .looch-modal-email-input {
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Portrait lock — when a phone is tilted to landscape, the page covers the
   screen with a "rotate to portrait" prompt. Hide the modal too (matches the
   .looch-modal-open specificity, and sits later in the cascade, so it wins). */
@media (max-width: 900px) and (orientation: landscape) {
  #looch-modal-overlay.looch-modal-overlay.looch-modal-open {
    display: none !important;
  }
}

/* Container */
#looch-modal-overlay .looch-modal-container {
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(43, 140, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    #0e1726 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  max-width: 500px !important;
  width: 90% !important;
  max-height: 90vh !important;
  /* The BODY scrolls, not the container — so the header and footer sit OUTSIDE the
     scroll area and the footer divider spans the full container width (no scrollbar
     gutter to compensate for, no thumb to overlap it). overflow: hidden clips the
     scrolling body to the rounded card. */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  /* No transform on the container, ever — the modal fades in via the overlay's own
     opacity transition. A transform here makes Stripe's Payment Element measure the
     wrong geometry while it mounts mid-animation (the iframe height freezes at the
     scaled size, so wallet/accordion rows render outside the visible box), and a
     lingering transform also suppresses Safari's native autofill popover. */
  transform: none !important;
  padding: 0 !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  /* Reset inherited text metrics at the modal boundary. The modal lives in the
     MERCHANT's DOM, so anything we don't pin inherits their globals — e.g. a site
     line-height of 24px made the Continue button 54px (vs 50), the footer 51 (vs 48)
     and the order summary 90 (vs 85): the loading skeleton (fixed-height blocks,
     immune to fonts) then mismatched the revealed content by those pixels — the
     "2-step" reveal on merchant sites. `normal` re-derives from our pinned Rota
     sizes, so every descendant renders exactly as on pay.looch.money; elements
     that pin their own line-height are unaffected. */
  line-height: normal !important;
}


/* Header + close */
#looch-modal-overlay .looch-modal-header {
  padding: 16px 24px 8px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#looch-modal-overlay .looch-modal-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.6px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: opacity 200ms ease-in-out !important;
  opacity: 1 !important;
}

#looch-modal-overlay .looch-modal-close:hover {
  background-color: transparent !important;
  opacity: 0.4 !important;
}

#looch-modal-overlay .looch-modal-close:focus {
  background-color: transparent !important;
  opacity: 0.4 !important;
  outline: 2px solid #009fd4 !important;
  outline-offset: 2px !important;
}

/* Body */
#looch-modal-overlay .looch-modal-body {
  /* 24px L/R inset; a small 8px top (the header already provides headspace) keeps
     the order summary balanced, and 16px bottom matches the stack's rhythm. */
  padding: 8px 24px 16px !important;
  /* The body is the scroll area (header + footer stay fixed outside it). `scroll` +
     scrollbar-gutter keep the gutter reserved so revealing the ACH fields never
     reflows the content. min-height: 0 lets it actually shrink/scroll inside the flex
     column. */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
  /* Force instant scrolling: a merchant page with `scroll-behavior: smooth` on html/*
     is inherited here, which turns our per-frame scrollTop writes (the New-card reveal
     auto-scroll) into queued smooth animations that never reach the bottom — so the CTA
     auto-scroll silently fails. Keep it auto so our JS controls the motion. */
  scroll-behavior: auto !important;
}

/* Shimmer / skeleton loading state. While `.looch-modal-loading` is set, the
   skeleton is shown and the real content is hidden. */
#looch-modal-overlay #looch-modal-skeleton {
  display: none !important;
}

#looch-modal-overlay .looch-modal-body.looch-modal-loading>*:not(#looch-modal-skeleton) {
  display: none !important;
}

#looch-modal-overlay .looch-modal-body.looch-modal-loading>#looch-modal-skeleton {
  display: block !important;
}

/* Settling: hold the signed-in live card view until the wallet row settles, so the
   New-card default card form never flashes before it reverts to the wallet row. The
   content stays VISIBLE + laid out — so the Stripe card form and the Apple/Google Pay
   availability probe render and fire their ready/availability events (they do NOT while
   display:none, and opacity:0 proved unreliable for the wallet probe) — but an OPAQUE
   skeleton is laid over it. The card-form → wallet-row swap happens under the cover;
   once it settles, looch.js removes this class to reveal the resolved view. */
#looch-modal-overlay .looch-modal-body.looch-modal-settling {
  position: relative !important;
  overflow: hidden !important;
  /* Reserve the settled card-view height (2 rows + the black wallet CTA). The skeleton
     is absolute (inset:0), so it doesn't drive the body's size, and while settling the
     covered content can be shorter than the skeleton (the wallet CTA isn't laid out yet).
     Without this floor the body shrinks to that short content and overflow:hidden CLIPS
     the black Apple/Google Pay CTA block off the bottom — it goes missing. 447 = the
     skeleton stack (8 top pad → wallet CTA bottom 431 → 16 bottom pad). Safe w.r.t. the
     warm-up: the card form is absolutely positioned, so its width/height don't depend on
     the body's box model (the subscribe elastic bounce is a Stripe setup-mandate issue,
     not this). */
  min-height: 447px !important;
  box-sizing: border-box !important;
}

#looch-modal-overlay .looch-modal-body.looch-modal-settling>*:not(#looch-modal-skeleton) {
  pointer-events: none !important;
}

/* Opaque skeleton laid over the content while settling. */
#looch-modal-overlay .looch-modal-body.looch-modal-settling>#looch-modal-skeleton {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 8px 24px 16px !important;
  background: #0e1726 !important;
}

/* Warm-up: while settling, "New card" is selected so the Stripe card form renders (its
   height settles now → no first-tap overshoot), but the form is held OUT OF FLOW so its
   tall height doesn't stretch the compact, covered modal — the body's height comes from
   the collapsed rows above it. Positioned at the card panel's width so Stripe measures
   the same geometry it will use when shown. */
#looch-modal-overlay .looch-modal-body.looch-modal-settling .looch-pay-newcard-body {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  top: 0 !important;
  z-index: 0 !important;
}

/* When the skeleton clears, fade the real content in rather than popping it in — the
   looch app's CustomOpacity (200ms ease-in-out). looch.js sets .looch-modal-revealed for
   the length of the fade. Pure opacity (no transform, which would break Stripe's Payment
   Element measurement). */
#looch-modal-overlay .looch-modal-body.looch-modal-revealed>*:not(#looch-modal-skeleton) {
  animation: loochFadeIn 200ms ease-in-out both !important;
}

@keyframes loochFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #looch-modal-overlay .looch-modal-body.looch-modal-revealed>*:not(#looch-modal-skeleton) {
    animation: none !important;
  }
}

#looch-modal-overlay .looch-skeleton-block {
  position: relative !important;
  overflow: hidden !important;
  background-color: rgba(255, 255, 255, 0.11) !important;
}

/* Per-block shimmer: each skeleton block runs its own diagonal sweep (same
   loochShimmerDiagonal band as the "Pay as a guest" wallet button), clipped to the
   block by its overflow:hidden. */
#looch-modal-overlay .looch-skeleton-block::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.14) 50%, transparent 75%) !important;
  transform: translate(-100%, -100%);
  /* Negative delay (half the cycle) starts the sweep already mid-block, so the
     shimmer is visible the instant the skeleton appears — no dead off-screen lead-in. */
  animation: loochShimmerDiagonal 1.4s ease-in-out -0.7s infinite !important;
}

/* The diagonal band sweeps from the top-left corner to the bottom-right. */
@keyframes loochShimmerDiagonal {
  100% {
    transform: translate(100%, 100%);
  }
}

/* Dims mirror the real rendered blocks (summary + email label/field are the same
   DOM in the guest and signed-in views, so one set matches both skeletons):
   summary 56 / gap 16, label 16 / gap 6, field 50 / gap 16. */
#looch-modal-overlay .looch-skeleton-summary {
  height: 56px !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}

#looch-modal-overlay .looch-skeleton-label {
  height: 16px !important;
  width: 40% !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
}

#looch-modal-overlay .looch-skeleton-field {
  height: 50px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

#looch-modal-overlay .looch-skeleton-button {
  height: 50px !important;
  border-radius: 14px !important;
}

/* Card-view rows: the Card tab pill + the two card rows (wallet + New card). Hidden by
   default (the generic loading skeleton is summary/label/field/button); shown only while
   settling the signed-in card view, so that skeleton mirrors the 2-row card layout. */
#looch-modal-overlay .looch-skeleton-tab,
#looch-modal-overlay .looch-skeleton-row {
  display: none !important;
}

#looch-modal-overlay .looch-modal-body.looch-modal-settling .looch-skeleton-tab {
  display: block !important;
  height: 47px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

#looch-modal-overlay .looch-modal-body.looch-modal-settling .looch-skeleton-row {
  display: block !important;
  height: 62px !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
}

/* Card-view CTA: mirror the wallet button (48px, 16px gap below the New card row).
   margin-top 16 wins the collapse against the row's 12px margin-bottom → 16px gap.
   Black (the Apple/Google Pay button that reveals here), matching the express
   placeholder's loading color, so there's no slate→black flip on reveal — the
   diagonal shimmer (.looch-skeleton-block::after) still reads on the black. */
#looch-modal-overlay .looch-modal-body.looch-modal-settling .looch-skeleton-button {
  height: 48px !important;
  margin-top: 16px !important;
  background-color: #000000 !important;
}

/* No wallet on this merchant (remembered per-origin from the probe's last verdict):
   the settled view reveals the blue Pay CTA here, not a black wallet button — keep
   the block the standard slate so there's no black flash for a button that never
   comes. First-ever open on a site has no memory yet and keeps the black guess. */
#looch-modal-overlay .looch-modal-body.looch-modal-settling.looch-skeleton-no-wallet .looch-skeleton-button {
  background-color: rgba(255, 255, 255, 0.11) !important;
}

/* Guest wallet skeleton ("Pay as a guest" hairline + Apple/Google Pay button). Hidden by
   default; shown only in the initial-load skeleton for a non-subscribe button
   (looch-skeleton-guest on the body). Subscribe buttons (and unknown) omit it. */
#looch-modal-overlay .looch-skeleton-guest-divider,
#looch-modal-overlay .looch-skeleton-guest-wallet {
  display: none !important;
}

/* Mirrors the real "Pay as a guest" divider box (32px: 16px gap + 16px text line,
   16px gaps above/below). The thin centered bar sits on the real text's center so
   the wallet block below lands exactly on the rendered Apple/Google Pay button. */
#looch-modal-overlay .looch-modal-body.looch-modal-loading.looch-skeleton-guest .looch-skeleton-guest-divider {
  display: block !important;
  height: 14px !important;
  width: 45% !important;
  margin: 33px auto 17px !important;
  border-radius: 6px !important;
}

/* Black (the Apple/Google Pay button the express placeholder reveals into), matching
   the .looch-pay-express-loading color so this skeleton hands off without a color
   flip. The diagonal shimmer (.looch-skeleton-block::after) still reads on the black. */
#looch-modal-overlay .looch-modal-body.looch-modal-loading.looch-skeleton-guest .looch-skeleton-guest-wallet {
  display: block !important;
  height: 48px !important;
  border-radius: 14px !important;
  background-color: #000000 !important;
}

/* "Pay as a guest" wallet button: the Stripe Express Checkout Element takes a moment
   to mount and probe the device for Apple/Google Pay support. Until it fires `ready`
   (looch.js toggles .looch-pay-express-loading), show a shimmering skeleton bar the
   same size as the rendered button — 48px tall (buttonHeight) and 8px radius (the
   Stripe appearance) — so the section doesn't pop in empty. Its own sweep is needed
   because the modal-wide shimmer only runs during the initial load. */
#looch-modal-overlay #looch-pay-stripe-express.looch-pay-express-loading {
  position: relative !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* Black to match the Apple/Google Pay button that replaces it (same as the guest
     wallet slot), so the swap is seamless rather than slate-box → black-button. */
  background-color: #000000 !important;
}

#looch-modal-overlay #looch-pay-stripe-express.looch-pay-express-loading::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  /* Brighter than the slate skeleton's sweep so it's visible on black. */
  background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.12) 50%, transparent 75%) !important;
  transform: translate(-100%, -100%);
  /* Negative delay (half the cycle) starts the sweep already mid-block, so the
     shimmer is visible the instant the skeleton appears — no dead off-screen lead-in. */
  animation: loochShimmerDiagonal 1.4s ease-in-out -0.7s infinite !important;
}

/* Order summary */
#looch-modal-overlay .looch-modal-order-summary {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  /* Column layout so the broken-out card-fee rows (base, Total with card fee) stack
     with even spacing; a no-op for the single-row case. */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#looch-modal-overlay .looch-modal-order-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-order-item.looch-modal-total {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* Tone down the order label ("Order #1234") — keep the amount prominent. */
#looch-modal-overlay .looch-modal-total .looch-modal-order-item-label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

#looch-modal-overlay .looch-modal-order-item-value {
  font-weight: 500 !important;
  color: #ffffff !important;
}

/* Billing-period suffix on a subscription's price lines ("$49.99/month"). Same
   Rota, but lighter and smaller than the amount — the figure stays dominant and
   the cadence reads as a quiet tag. Scales with its row (em), so it sits right
   on both the 14px base line and the 18px Total; slightly muted and tracked a
   touch tighter than the row's 0.6px so it doesn't sprawl at the small size. */
#looch-modal-overlay .looch-modal-per-suffix {
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.72em !important;
  font-weight: 400 !important;
  letter-spacing: 0.4px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Subscription manage line closing the order summary ("Cancel anytime at
   portal.looch.money"), and the trial line that replaces it for trials. Same
   font and style as the NACHA mandate note
   (.looch-modal-recurring-note, left-aligned mandate variant); the summary
   column's gap provides the spacing, so no margin of its own. */
#looch-modal-overlay .looch-modal-manage-note {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
}

/* Email field */
#looch-modal-overlay .looch-modal-email-form {
  margin: 0 !important;
  padding: 0 !important;
}

#looch-modal-overlay .looch-modal-email-container {
  margin-bottom: 16px !important;
}

#looch-modal-overlay .looch-modal-email-label {
  display: block !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  line-height: 16px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-email-input {
  width: 100% !important;
  padding: 12px 12px !important;
  /* Same opaque on-brand fill + hairline as the card/account fields; keeps its
     original 14px radius. */
  background-color: #0b1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 24px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  letter-spacing: 0.6px !important;
  box-shadow: none !important;
}

#looch-modal-overlay .looch-modal-email-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Locked email (signed in) — shows which account, not editable. */
#looch-modal-overlay .looch-modal-email-input:disabled {
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  /* Signed-in: the locked email keeps its previous (pre-card-field) fill + hairline;
     only the editable email field adopts the card/account-field styling. */
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

#looch-modal-overlay .looch-modal-email-input:focus {
  outline: none !important;
  border-color: #009fd4 !important;
}

#looch-modal-overlay .looch-modal-email-input:-webkit-autofill,
#looch-modal-overlay .looch-modal-email-input:-webkit-autofill:hover,
#looch-modal-overlay .looch-modal-email-input:-webkit-autofill:focus,
#looch-modal-overlay .looch-modal-email-input:-webkit-autofill:active {
  /* Same autofill treatment as the card/account fields — the on-brand #344153 inset
     fill with white text (no extra drop shadow). */
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #344153 inset !important;
  box-shadow: 0 0 0 1000px #344153 inset !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

#looch-modal-overlay .looch-modal-email-error {
  color: #df1b41 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  margin-top: 4px !important;
  display: none !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-email-error.looch-modal-email-error-visible {
  display: block !important;
}

/* Payment element (Stripe) */
#looch-modal-overlay .looch-modal-payment-element {
  min-height: 80px !important;
  margin-bottom: 16px !important;
}

#looch-modal-overlay .looch-modal-payment-element iframe {
  border-radius: 8px !important;
}

#looch-modal-overlay .looch-modal-payment-element .StripeElement {
  border-radius: 8px !important;
}

/* Top-level error banner */
#looch-modal-overlay .looch-modal-error {
  display: none !important;
  color: #df1b41 !important;
  background-color: rgba(223, 27, 65, 0.08) !important;
  border: 1px solid rgba(223, 27, 65, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-error.looch-modal-error-visible {
  display: block !important;
}

/* NOTE: the old `.looch-modal-loading` spinner rule (flex-centered, 40px padding)
   was removed — that class now lives only on the modal body for the shimmer
   skeleton, and its centering/padding fought the body's own top-aligned, 24px-inset
   layout, shifting every skeleton block off the position its content reveals into.
   The body's base rule now governs the loading state, so skeleton and content align. */

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

/* Submit button */
/* Supporting text above the Pay button — recurring/trial details. Muted and
   smaller than the CTA so the button stays the focal action. */
#looch-modal-overlay .looch-modal-recurring-note {
  margin: 0 0 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
}
/* The ACH authorization mandate (regular saved bank account) is left-aligned to
   match the other bank supporting notes. The subscription recurring text is also
   left-aligned when paying with an RfP bank account, so it matches the RfP
   "payment request" note below it. */
#looch-modal-overlay .looch-modal-recurring-note.looch-modal-recurring-note-mandate,
#looch-modal-overlay .looch-modal-recurring-note.looch-modal-recurring-note-left {
  text-align: left !important;
}

#looch-modal-overlay .looch-modal-submit {
  width: 100% !important;
  padding: 15px 32px !important;
  /* looch signature gradient (matches the portal checkout CTA). */
  background: linear-gradient(105deg, #9df4f4, #27d3e8 40%, #2b8cff 75%, #7c6bff) !important;
  color: #04121b !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(43, 140, 255, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-submit:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 14px 38px rgba(43, 140, 255, 0.36) !important;
}

#looch-modal-overlay .looch-modal-submit:active {
  transform: translateY(0) !important;
}

#looch-modal-overlay .looch-modal-submit:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  filter: saturate(0.55) !important;
  transform: none !important;
  box-shadow: none !important;
}

#looch-modal-overlay .looch-modal-submit:focus {
  outline: 2px solid #27d3e8 !important;
  outline-offset: 2px !important;
}

/* Continue with looch Pay — the gated live flow's signed-out CTA. Same primary
   treatment as the Pay button (it occupies the same slot while signed out). */
#looch-modal-overlay .looch-modal-continue {
  width: 100% !important;
  padding: 15px 32px !important;
  background: linear-gradient(105deg, #9df4f4, #27d3e8 40%, #2b8cff 75%, #7c6bff) !important;
  color: #04121b !important;
  border: none !important;
  border-radius: 14px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(43, 140, 255, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0.6px !important;
}

#looch-modal-overlay .looch-modal-continue:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 14px 38px rgba(43, 140, 255, 0.36) !important;
}

#looch-modal-overlay .looch-modal-continue:active {
  transform: translateY(0) !important;
}

#looch-modal-overlay .looch-modal-continue:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  filter: saturate(0.55) !important;
  transform: none !important;
  box-shadow: none !important;
}

#looch-modal-overlay .looch-modal-continue:focus {
  outline: 2px solid #27d3e8 !important;
  outline-offset: 2px !important;
}

/* "Pay as a guest" — wallet-only guest checkout under the Continue CTA: a
   hairline with a small centered label, then the Express Checkout mount. */
#looch-modal-overlay .looch-modal-guest-section {
  margin-top: 20px !important;
}

#looch-modal-overlay .looch-modal-guest-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  white-space: nowrap !important;
}

#looch-modal-overlay .looch-modal-guest-divider::before,
#looch-modal-overlay .looch-modal-guest-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Guest controls injected by the shared presenter (coEnsureGuestControls) — the
   demo page's Continue / "Pay as a guest" / faux-wallet chrome. These live here (not
   in the demo page's own <style>) so the live <looch-pay-button> checkout renders
   them identically. "Pay as a guest" labels the wallet section: a single top hairline
   separating it from the Continue flow, with even 16px gaps (continue→line,
   line→label, label→wallet). */
#looch-modal-overlay #looch-pay-guest-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 16px 0;
  padding-top: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 0.6px;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Plain separator (no wording) — used in signed-in mode. */
#looch-modal-overlay #looch-pay-guest-divider.looch-pay-divider-plain {
  padding-top: 0;
}

/* The demo Apple Pay button is a provided image (plain "Apple Pay", swapped to the
   "Subscribe with Apple Pay" variant for subscriptions). The <button> is a full-width
   black pill matching the blue CTA's width + 16px corners; the image (logo + label)
   keeps its size and centres on it, its black blending into the button so only the
   width and corner radius change. (Hidden in live mode — Stripe renders the real one.) */
#looch-modal-overlay #looch-pay-applepay {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: #000;
  border-radius: 16px;
  cursor: pointer;
  display: block;
}

#looch-modal-overlay #looch-pay-applepay img {
  display: block;
  height: 48px;
  width: auto;
  margin: 0 auto;
}

/* Demo Google Pay button container — the SDK's createButton (buttonSizeMode:'fill',
   buttonRadius:16) fills this to match the other CTAs' width + corners. */
#looch-modal-overlay #looch-pay-googlepay {
  width: 100%;
  height: 48px;
}

/* While the Express Checkout Element probes the device for wallet support, hold a
   wallet-button-sized skeleton so the guest section doesn't pop in empty. looch.js
   toggles the class. The signed-in wallet slot (the Pay button's stand-in when an
   Apple/Google Pay accordion row is selected) shares the treatment.
   Black (matching the Apple/Google Pay button that replaces it) with a diagonal
   shimmer, so it reads as a loading button rather than a flat gray placeholder. */
#looch-modal-overlay .looch-modal-signedin-express.looch-pay-express-loading,
#looch-modal-overlay .looch-modal-guest-express.looch-pay-express-loading {
  position: relative !important;
  overflow: hidden !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  background-color: #000000 !important;
}

#looch-modal-overlay .looch-modal-signedin-express.looch-pay-express-loading::after,
#looch-modal-overlay .looch-modal-guest-express.looch-pay-express-loading::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  /* Brighter than the slate skeleton's sweep so it's visible on black. */
  background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.12) 50%, transparent 75%) !important;
  transform: translate(-100%, -100%);
  /* Negative delay (half the cycle) starts the sweep already mid-block, so the
     shimmer is visible the instant the skeleton appears — no dead off-screen lead-in. */
  animation: loochShimmerDiagonal 1.4s ease-in-out -0.7s infinite !important;
}

/* Reserve the wallet-button height at ALL times (not just while the skeleton is up),
   so the slot never collapses when the placeholder's min-height is dropped and the
   mounted button is momentarily unsized — which jumped the layout (collapse → re-expand)
   on ready. Matches the skeleton height. */
#looch-modal-overlay #looch-pay-stripe-express,
#looch-modal-overlay .looch-modal-guest-express,
#looch-modal-overlay .looch-modal-signedin-express {
  min-height: 48px !important;
}

/* Fade the mounted wallet button in over the placeholder — the looch app's
   CustomOpacity (200ms ease-in-out) — so it never blinks empty between the skeleton
   closing and the button opening. The button sits above the shimmer; it's hidden while
   the skeleton is up (loading, not yet ready) and fades to full once ready. looch.js
   holds the placeholder behind it for the fade, then clears it (EXPRESS_FADE_MS). */
#looch-modal-overlay #looch-pay-stripe-express > *,
#looch-modal-overlay .looch-modal-guest-express > *,
#looch-modal-overlay .looch-modal-signedin-express > * {
  position: relative !important;
  z-index: 2 !important;
  transition: opacity 200ms ease-in-out !important;
}
#looch-modal-overlay #looch-pay-stripe-express.looch-pay-express-loading:not(.looch-pay-express-ready) > *,
#looch-modal-overlay .looch-modal-guest-express.looch-pay-express-loading:not(.looch-pay-express-ready) > *,
#looch-modal-overlay .looch-modal-signedin-express.looch-pay-express-loading:not(.looch-pay-express-ready) > * {
  opacity: 0 !important;
}

/* Signed-in method list spacing: the wallet express row, the "New card" row and
   the bare Stripe card form stack with the demo rows' 12px rhythm. */
#looch-modal-overlay #looch-modal-signedin-express,
#looch-modal-overlay #looch-modal-newcard-row {
  margin-bottom: 12px !important;
}

/* Gate state helper — looch.js toggles the Pay button, Continue, the guest
   section, the New card row, and the card area with this class. The component
   rules above use display …!important at the same specificity, so this must stay
   LAST among the display rules (equal specificity: last declaration wins) and
   carries a doubled class to stay ahead of future additions. */
#looch-modal-overlay .looch-modal-gate-hidden.looch-modal-gate-hidden {
  display: none !important;
}

/* Footer / "Secured by looch" */
#looch-modal-overlay .looch-modal-footer {
  padding: 16px 24px !important;
  /* Fixed at the bottom, outside the scroll area — so its border-top divider spans
     the full container width edge-to-edge (no scrollbar gutter or thumb in the way). */
  flex: 0 0 auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: center !important;
}

#looch-modal-overlay .looch-modal-powered-by {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  letter-spacing: 0.6px !important;
}

/* looch logo → portal link. No hover or tapped state. */
#looch-modal-overlay .looch-modal-portal-link,
#looch-modal-overlay .looch-modal-portal-link:hover,
#looch-modal-overlay .looch-modal-portal-link:active,
#looch-modal-overlay .looch-modal-portal-link:focus,
#looch-modal-overlay .looch-modal-portal-link:visited {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  opacity: 1 !important;
  outline: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

#looch-modal-overlay .looch-modal-powered-by-logo {
  height: 14px !important;
  width: auto !important;
  /* display:block (not inline-block) removes the inline baseline/descender gap that made
     the logo sit low and vary between views. Flex align-items:center on the row then
     centers it against "Secured by"; -2px optically trues it up. Matches /auth's footer. */
  display: block !important;
  margin-top: -2px !important;
}

/* Demo-mode mock card fields (shown when no Stripe key is configured) */
#looch-modal-overlay .looch-pay-field {
  width: 100% !important;
  padding: 12px !important;
  /* One opaque on-brand fill for every input field (card number/expiry/CVC/ZIP,
     the instant-pay + ACH routing/account fields, the verification digits). Opaque
     (not a translucent black) so it reads identically on the dark card panel and the
     light bank sections, and deliberately darker than the #344153 autofill fill. */
  background-color: #0b1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.6px !important;
}

/* Same clean 1px border on focus as the ACH fields (no default browser ring). */
#looch-modal-overlay .looch-pay-field:focus {
  outline: none !important;
  border-color: #009fd4 !important;
}

/* Autofill: browsers force a bright yellow/beige fill on card + bank inputs. Override
   it with the same on-brand fill the email field uses (#344153) via the box-shadow
   inset trick, so autofilled fields stay on the looch dark surface with white text
   instead of the off-brand mustard. The long background-color transition defeats the
   brief yellow flash Chrome shows before the inset shadow paints. */
#looch-modal-overlay .looch-pay-field:-webkit-autofill,
#looch-modal-overlay .looch-pay-field:-webkit-autofill:hover,
#looch-modal-overlay .looch-pay-field:-webkit-autofill:focus,
#looch-modal-overlay .looch-pay-field:-webkit-autofill:active,
#looch-modal-overlay .looch-pay-bank-field:-webkit-autofill,
#looch-modal-overlay .looch-pay-bank-field:-webkit-autofill:hover,
#looch-modal-overlay .looch-pay-bank-field:-webkit-autofill:focus,
#looch-modal-overlay .looch-pay-bank-field:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #344153 inset !important;
  box-shadow: 0 0 0 1000px #344153 inset !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

#looch-modal-overlay select.looch-pay-field {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
}

#looch-modal-overlay select.looch-pay-field option {
  color: #ffffff !important;
  background-color: #283036 !important;
}

#looch-modal-overlay .looch-pay-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#looch-modal-overlay .looch-pay-row .looch-pay-field {
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

#looch-modal-overlay .looch-pay-note {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  margin: 6px 0 14px !important;
  letter-spacing: 0.6px !important;
}

/* Card / Bank tabs — iOS-26 "Liquid Glass" with a gel pill: a translucent,
   blurred, recessed track and a glossy gel indicator that springs between tabs. */
#looch-modal-overlay .looch-pay-tabs {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  border-radius: 14px !important;
  /* Flat, premium track (matches the portal checkout surfaces). */
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
}

#looch-modal-overlay .looch-pay-tab-indicator {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  bottom: 4px !important;
  width: calc(50% - 4px) !important;
  border-radius: 11px !important;
  /* iOS-style "liquid glass": a translucent, blurred pane that refracts the surface
     behind it, with a bright rim, a glossy top specular highlight, and soft depth
     shadows for the wet gel look. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -8px 14px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.5, 1) !important;
}

/* Glossy gel sheen — a bright specular highlight across the top that fades out by
   the middle, giving the pill its wet, liquid-glass surface. Sits behind the label. */
#looch-modal-overlay .looch-pay-tab-indicator::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 60%) !important;
  pointer-events: none !important;
}

#looch-modal-overlay .looch-pay-tabs[data-active='bank'] .looch-pay-tab-indicator {
  transform: translateX(100%) !important;
}

#looch-modal-overlay .looch-pay-tab {
  position: relative !important;
  z-index: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  padding: 9px 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer !important;
  transition: color 0.25s ease !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#looch-modal-overlay .looch-pay-tab:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.8) !important;
}

#looch-modal-overlay .looch-pay-tab.is-active {
  /* White label on the translucent glass pill; a faint shadow keeps it crisp over
     the glossy sheen. */
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* Bank-only mode (card_payments: "false" merchants): a single full-width tab. */
#looch-modal-overlay .looch-pay-tabs.looch-pay-tabs-single {
  grid-template-columns: 1fr !important;
}

#looch-modal-overlay .looch-pay-tabs.looch-pay-tabs-single .looch-pay-tab-indicator {
  left: 4px !important;
  width: calc(100% - 8px) !important;
  transform: none !important;
}

/* Saved cards / saved bank accounts (signed-in flow). The tabs' own 16px bottom
   margin supplies the gap above. */
#looch-modal-overlay .looch-pay-saved {
  /* 12px is the modal's universal row/section gap — keeps the spacing from the last
     saved row to the next item (New card, or the instant-pay section) identical to
     the gap between the saved rows themselves. */
  margin-bottom: 12px !important;
}

/* Bank-tab payment-method options (radio + label). */
#looch-modal-overlay .looch-pay-bank-method {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}

#looch-modal-overlay .looch-pay-bank-method-other {
  /* Sits at the ACH box's padding edge — the box's own margin separates it from
     the instant-pay box above (no extra top margin needed). */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Target area ends just past the label (not the full row width). */
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding-right: 6px !important;
}

#looch-modal-overlay .looch-pay-bank-method input[type='radio'] {
  accent-color: #009fd4 !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  margin: 1px 0 0 !important;
  cursor: pointer !important;
}

#looch-modal-overlay .looch-pay-bank-method-label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.6px !important;
}

/* Instant-pay + "any US bank account" (ACH) sections — both shaded like the
   saved payment components, with identical box settings. The instant-pay box
   holds the header label and the grid of selectable white bank tiles; the ACH
   box holds its label and the routing/account fields. */
#looch-modal-overlay .looch-pay-rfp,
#looch-modal-overlay .looch-pay-ach-debit {
  /* Same card surface as the saved-payment rows (.looch-pay-card-row) so every row
     and section in the modal shares one treatment — and the dark routing/account
     fields inside read against it just like the card fields do on the card panel. */
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  /* The universal 12px row/section gap above and below (margins collapse with
     adjacent ones, so the gap between the saved rows, the instant-pay section and
     the ACH section is a consistent 12px, never doubled). */
  margin: 12px 0 !important;
  /* Default arrow over the section (header/gaps/padding); only tiles show the
     hand — they're the actual selectable action. */
  cursor: default !important;
}

#looch-modal-overlay .looch-pay-rfp-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#looch-modal-overlay .looch-pay-rfp-head input[type='radio'] {
  accent-color: #009fd4 !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  margin: 0 !important;
  /* Display-only: the RfP radio is checked by picking a tile, not directly. */
  pointer-events: none !important;
}

/* Fade-in for the tile scrim (used while "Instant pay by bank" is selected). */
@keyframes loochTileScrimIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* "Any US bank account" — routing + account fields revealed when selected. */
#looch-modal-overlay .looch-pay-ach-debit-fields {
  display: none !important;
}

#looch-modal-overlay .looch-pay-ach-debit:has(input[value='ach_debit']:checked) .looch-pay-ach-debit-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

/* "Enter a different account" prompt below the account number (retry flow). */
#looch-modal-overlay .looch-pay-ach-debit-retry-note {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

#looch-modal-overlay .looch-pay-bank-field {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  /* Same opaque on-brand field fill as .looch-pay-field (see note there). */
  background-color: #0b1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  letter-spacing: 0.6px !important;
  /* Dark, numbers-only keyboard on mobile (paired with inputmode="numeric"). */
  color-scheme: dark !important;
}

#looch-modal-overlay .looch-pay-bank-field::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Keyboard theme follows the merchant's button background (set by the demo page
   via body.looch-pay-btn-light): dark button → dark keyboard, light → light.
   Covers every numeric field — bank routing/account, the verification code, and
   the card fields (number, expiry, CVC, ZIP). */
#looch-modal-overlay .looch-pay-field,
#looch-modal-overlay .looch-pay-ach-debit-digit {
  color-scheme: dark !important;
}

body.looch-pay-btn-light #looch-modal-overlay .looch-pay-bank-field,
body.looch-pay-btn-light #looch-modal-overlay .looch-pay-ach-debit-digit,
body.looch-pay-btn-light #looch-modal-overlay .looch-pay-field {
  color-scheme: light !important;
}

/* Reinforce at the modal root so the keyboard follows the button background even
   where iOS reads a higher-level color-scheme than the focused field. Scoped to
   the modal, so the page theme never affects it. */
#looch-modal-overlay {
  color-scheme: dark !important;
}

body.looch-pay-btn-light #looch-modal-overlay {
  color-scheme: light !important;
}

#looch-modal-overlay .looch-pay-bank-field:focus {
  outline: none !important;
  border-color: #009fd4 !important;
}

/* Invalid routing entry (1–8 digits) flagged on blur — looch app "error red".
   Cleared on focus, so it never overrides the focus border above. */
#looch-modal-overlay .looch-pay-bank-field.looch-pay-field-error {
  border-color: #ff5a75 !important;
}

/* Free trials bill later via scheduled ACH, so instant pay by bank (RfP) doesn't
   apply — hide the whole instant-pay section (header + tile grid + fields). */
#looch-modal-overlay.looch-modal-no-rfp .looch-pay-rfp {
  display: none !important;
}

/* Instant-pay routing + account fields — revealed once a bank tile is picked.
   The section expands open with the SAME settings as the auto-scroll to the CTA:
   468ms duration, ease-in-out-quad (cubic-bezier(0.45,0,0.55,1)). Always laid
   out (so it can transition); collapsed until a tile is selected. overflow is
   kept hidden during the grow, then flipped to visible (delayed 468ms) so the
   routing combobox dropdown isn't clipped once the section is open. */
#looch-modal-overlay .looch-pay-rfp-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition:
    max-height 468ms cubic-bezier(0.45, 0, 0.55, 1),
    margin-top 468ms cubic-bezier(0.45, 0, 0.55, 1),
    opacity 468ms cubic-bezier(0.45, 0, 0.55, 1) !important;
}

#looch-modal-overlay .looch-pay-rfp:has(.looch-pay-bank-cell input:checked) .looch-pay-rfp-fields {
  /* Empty section: routing + account fields (~102px). overflow stays hidden
     (base rule) during the grow and is flipped to visible by JS on transitionend
     so the routing dropdown isn't clipped — overflow can't be transitioned. */
  max-height: 112px !important;
  margin-top: 12px !important;
  opacity: 1 !important;
  transition:
    max-height 468ms cubic-bezier(0.45, 0, 0.55, 1),
    margin-top 468ms cubic-bezier(0.45, 0, 0.55, 1),
    opacity 468ms cubic-bezier(0.45, 0, 0.55, 1) !important;
}

/* Grow to fit the "Save to looch Pay" block once it's revealed (~166px total). */
#looch-modal-overlay .looch-pay-rfp:has(.looch-pay-bank-cell input:checked) .looch-pay-rfp-fields:has(#looch-pay-rfp-routing[data-valid='1']):has(#looch-pay-rfp-account:not(:placeholder-shown)) {
  max-height: 176px !important;
}

/* Searchable routing-number select (type-to-filter; no free-form values). */
#looch-modal-overlay .looch-pay-combobox {
  position: relative !important;
}

#looch-modal-overlay .looch-pay-combobox-list {
  display: none;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 4px !important;
  list-style: none !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  /* looch brand deep blue-black surface (matches the looch Pay sign-in card and the
     looch.money product surfaces) — replaces a neutral grey that read off-brand. */
  background: #0e1726 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

#looch-modal-overlay .looch-pay-combobox-option {
  padding: 10px !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
}

#looch-modal-overlay .looch-pay-combobox-option.is-active,
#looch-modal-overlay .looch-pay-combobox-option:hover {
  background: rgba(0, 159, 212, 0.18) !important;
}

/* Bank-specific supporting copy below the instant-pay fields. */
#looch-modal-overlay .looch-pay-rfp-note {
  text-align: left !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.3px !important;
}

#looch-modal-overlay .looch-pay-rfp-note:empty {
  display: none !important;
}

#looch-modal-overlay .looch-pay-rfp-note p {
  margin: 2px 0 8px !important;
}

#looch-modal-overlay .looch-pay-rfp-note p:last-child {
  margin-bottom: 0 !important;
}

/* Supporting copy for a selected saved "Pay instantly" account — sits at the
   bottom of the modal, just above the CTA. */
#looch-modal-overlay .looch-pay-saved-rfp-note {
  margin: 4px 0 14px !important;
}

/* Mid-flow "approve in your bank app" waiting screen (instant pay by bank). */
/* While waiting, hide the whole form (incl. the Send/Continue buttons, which
   carry their own display:flex !important) and show only the waiting screen. */
#looch-modal-overlay .looch-modal-body.looch-rfp-waiting>* {
  display: none !important;
}

#looch-modal-overlay .looch-modal-body.looch-rfp-waiting>#looch-pay-rfp-waiting,
#looch-modal-overlay .looch-modal-body.looch-rfp-waiting>#looch-pay-ach-debit-waiting {
  display: block !important;
}

#looch-modal-overlay .looch-pay-rfp-waiting {
  text-align: center !important;
  padding: 20px 6px 8px !important;
  color: #ffffff !important;
}

#looch-modal-overlay .looch-pay-rfp-waiting [hidden] {
  display: none !important;
}

/* Regular spinner. */
#looch-modal-overlay .looch-pay-rfp-spinner {
  width: 40px !important;
  height: 40px !important;
  margin: 8px auto 24px !important;
  border: 3px solid rgba(255, 255, 255, 0.15) !important;
  border-top-color: #009fd4 !important;
  border-radius: 50% !important;
  animation: loochRfpSpin 0.8s linear infinite !important;
}

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

#looch-modal-overlay .looch-pay-rfp-wait-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  color: #ffffff !important;
}

#looch-modal-overlay .looch-pay-rfp-wait-body {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 auto 10px !important;
  max-width: 360px !important;
}

#looch-modal-overlay .looch-pay-rfp-wait-sub {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 14px auto 0 !important;
  max-width: 360px !important;
}

#looch-modal-overlay .looch-pay-rfp-wait-hint {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 18px auto 0 !important;
  max-width: 360px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#looch-modal-overlay .looch-pay-rfp-wait-out {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 14px auto 0 !important;
  max-width: 360px !important;
}

/* Understated text link — matches the looch Pay sign-in page's "Use a different
   email address" link (.link): muted, no underline, hover to white. */
#looch-modal-overlay .looch-pay-link {
  background: none !important;
  border: none !important;
  padding: 4px !important;
  color: #93a2b6 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

#looch-modal-overlay .looch-pay-link:hover {
  color: #ffffff !important;
}

/* ACH-debit verification waiting screen — the "LPXXXX" example + the code-entry
   field and its Confirm button (reuses the RfP waiting-screen presentation). */
#looch-modal-overlay .looch-pay-ach-debit-code-example {
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* PIN-style code entry: "LP" label + four single-digit boxes. */
#looch-modal-overlay .looch-pay-ach-debit-code {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 18px auto 0 !important;
}

#looch-modal-overlay .looch-pay-ach-debit-code-prefix {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

#looch-modal-overlay .looch-pay-ach-debit-pin {
  display: flex !important;
  gap: 8px !important;
}

#looch-modal-overlay .looch-pay-ach-debit-digit {
  width: 44px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  text-align: center !important;
  /* ≥16px so iOS doesn't zoom the page when a box is focused. */
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  /* Same opaque on-brand field fill as the other inputs (see .looch-pay-field). */
  background-color: #0b1320 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
}

#looch-modal-overlay .looch-pay-ach-debit-digit:focus {
  outline: none !important;
  border-color: #009fd4 !important;
}

/* Wrong code — red borders + a brief shake of the whole group. */
#looch-modal-overlay .looch-pay-ach-debit-code.looch-pay-ach-debit-code-error .looch-pay-ach-debit-digit {
  border-color: #ff5a75 !important;
}

#looch-modal-overlay .looch-pay-ach-debit-code.looch-pay-ach-debit-code-error {
  animation: loochAchShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes loochAchShake {

  10%,
  90% {
    transform: translateX(-2px);
  }

  20%,
  80% {
    transform: translateX(4px);
  }

  30%,
  50%,
  70% {
    transform: translateX(-7px);
  }

  40%,
  60% {
    transform: translateX(7px);
  }
}

/* Inline error directly below the field (same red across all attempts). */
#looch-modal-overlay .looch-pay-ach-debit-error {
  max-width: 280px !important;
  margin: 10px auto 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #ff5a75 !important;
  letter-spacing: 0.3px !important;
}

/* Persistent fallback link (kept visible through the error flow), centered. */
#looch-modal-overlay .looch-pay-ach-debit-fallback {
  margin: 16px auto 0 !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: center !important;
}

/* Shared success checkmark — the one animated blue check used on every
   confirmation screen (card/bank "Payment successful" and ACH-debit "Account
   verified"), all identical: a 64px tinted circle + 32px svg, drawn on over 1s. */
#looch-modal-overlay .looch-pay-success-check {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px !important;
  border-radius: 50% !important;
  background-color: rgba(0, 159, 212, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#looch-modal-overlay .looch-pay-success-check svg {
  width: 32px !important;
  height: 32px !important;
  color: #009fd4 !important;
  display: block !important;
}

/* stroke-dashoffset must NOT be !important — important author rules override CSS
   animations, which would pin the offset and leave the check undrawn. */
#looch-modal-overlay .looch-pay-success-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  /* 0.8s = 1.0s − 20%. */
  animation: drawCheck 0.8s ease-out forwards;
}

@keyframes loochCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Lockout actions — two side-by-side buttons. */
#looch-modal-overlay .looch-pay-ach-debit-lockout-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 22px !important;
}

#looch-modal-overlay .looch-pay-ach-debit-lockout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

#looch-modal-overlay .looch-pay-ach-debit-lockout-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* "Done" escape hatch on the payment-pending screen. */
#looch-modal-overlay .looch-pay-ach-debit-done {
  width: auto !important;
  min-width: 160px !important;
  margin: 22px auto 0 !important;
}

/* RFP bank grid — white tiles (placeholders, later swapped for logo images);
   the selected tile gets a blue outline. */
#looch-modal-overlay .looch-pay-bank-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

#looch-modal-overlay .looch-pay-bank-cell {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 64px !important;
  padding: 10px !important;
  background-color: #ffffff !important;
  /* No visible border; the selected state uses an outside outline (below) so the
     blue ring sits outside the white tile instead of cutting into it. */
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 8px !important;
  color: #1a1a1a !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  /* No text/logo selection highlight when double-clicking a tile. */
  user-select: none !important;
  -webkit-user-select: none !important;
}

#looch-modal-overlay .looch-pay-bank-cell input[type='radio'] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Brand logo on the tile — contained so wide wordmarks fit the tile width while
   square marks cap at the tile height; never upscaled past their natural size. */
#looch-modal-overlay .looch-pay-bank-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 34px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Outline the chosen tile only while "Instant pay by bank" is the selected
   method (the tile is a sub-selection of that section). */
#looch-modal-overlay .looch-pay-rfp:has(.looch-pay-rfp-head input:checked) .looch-pay-bank-cell:has(input:checked) {
  /* box-shadow (not outline/border) paints the ring outside the tile without
     ever affecting layout or the scroll container's overflow, so selecting a
     tile can't expand the grid or modal. */
  box-shadow: 0 0 0 2px #009fd4 !important;
}

/* While "Instant pay by bank" is the selected method, scrim the non-selected
   tiles — all of them until a specific bank is picked, then just the others — so
   the choice stands out. pointer-events stay through so a tile is still clickable. */
#looch-modal-overlay .looch-pay-rfp:has(.looch-pay-rfp-head input:checked) .looch-pay-bank-cell:not(:has(input:checked))::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  animation: loochTileScrimIn 200ms ease-in-out !important;
}

/* Match the focused card field's settings: the selected tile shows only its 1px
   solid #009fd4 border — no focus-outline ring (which the global *:focus-visible
   rule would otherwise add, e.g. on click in Safari). */
#looch-modal-overlay .looch-pay-bank-cell input[type='radio']:focus,
#looch-modal-overlay .looch-pay-bank-cell input[type='radio']:focus-visible {
  outline: none !important;
}

#looch-modal-overlay .looch-pay-section-label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.6px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* A selectable card row — saved card or the "New card" toggle. */
#looch-modal-overlay .looch-pay-card-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  /* Uniform row height across saved-card, saved-bank and new-card rows. The bank
     rows are tallest (their 32px white logo chip), so the shorter rows (24px card
     logo, or text-only New card) pad up to match rather than the bank logo shrinking. */
  min-height: 62px !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  letter-spacing: 0.6px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#looch-modal-overlay .looch-pay-saved .looch-pay-card-row+.looch-pay-card-row {
  margin-top: 12px !important;
}

#looch-modal-overlay .looch-pay-card-row input[type='radio'] {
  accent-color: #009fd4 !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Fixed-width slot so brand logos of differing aspect ratios align and the
   "Ending in" text starts at the same x on every row. */
#looch-modal-overlay .looch-pay-card-brand {
  width: 46px !important;
  height: 24px !important;
  flex: none !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Wallet mark (Apple/Google) for the first card option — an inline SVG sized to
   the card-brand slot, left-aligned. */
#looch-modal-overlay .looch-pay-wallet-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#looch-modal-overlay .looch-pay-wallet-mark svg {
  height: 22px !important;
  width: auto !important;
}

/* Saved-bank rows use compact (stacked / emblem) official bank logos on a white
   chip — the dark modal would wash out the brand colors otherwise. Fixed chip so
   every row's logo aligns and the "Ending in" text starts at the same x. */
#looch-modal-overlay .looch-pay-bank-brand {
  width: 48px !important;
  height: 32px !important;
  max-width: none !important;
  flex: none !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
}

#looch-modal-overlay .looch-pay-card-text {
  flex: 1 !important;
}

/* "New card" is collapsed until its radio is picked. Collapsed = height:0, NOT
   display:none — the Stripe iframe inside stays RENDERED at its real width, so its
   height is always current and re-opening measures the true height immediately.
   (display:none unrendered the iframe; Safari re-laid it out lazily on reveal and
   animated the correction in view — the elastic stretch on the first open.)
   visibility:hidden keeps the collapsed form non-interactive and invisible. The
   slide animations drive height via inline setProperty(..., 'important'), which
   wins over these stylesheet rules. */
#looch-modal-overlay .looch-pay-newcard-body {
  display: block !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  margin-top: 0 !important;
}

#looch-modal-overlay .looch-pay-newcard:has(input[value='new']:checked) .looch-pay-newcard-body {
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  margin-top: 12px !important;
}

#looch-modal-overlay .looch-pay-newcard-body>*:last-child {
  margin-bottom: 0 !important;
}

/* "Save to looch Pay" opt-in shown while entering a new card. Only the head row
   (checkbox + title) is the clickable toggle; the description sits below it. */
#looch-modal-overlay .looch-pay-save {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 14px !important;
}

#looch-modal-overlay .looch-pay-save-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

#looch-modal-overlay .looch-pay-save input[type='checkbox'] {
  accent-color: #009fd4 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: none !important;
  cursor: pointer !important;
}

#looch-modal-overlay .looch-pay-save-title {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  font-family: 'Rota', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#looch-modal-overlay .looch-pay-save-desc {
  /* Aligned under the title: checkbox width (18px) + the head row gap (10px). */
  padding-left: 28px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.6px !important;
}

/* Desktop: "Faster checkout next time." sits on its own line (overridden to flow
   inline on mobile in the responsive block below). */
#looch-modal-overlay .looch-pay-save-break {
  display: block !important;
}

/* Bank "Save to looch Pay" — hidden until the customer has entered both the
   routing and account number (RfP requires a valid, exact-match routing). */
#looch-modal-overlay .looch-pay-bank-save {
  display: none !important;
}

#looch-modal-overlay .looch-pay-rfp-fields:has(#looch-pay-rfp-routing[data-valid='1']):has(#looch-pay-rfp-account:not(:placeholder-shown)) .looch-pay-rfp-save {
  display: flex !important;
}

/* ACH-debit "Save to looch Pay" expands open (instead of a display none→flex
   jump) using the SAME settings as the auto-scroll to the CTA: 468ms duration
   and ease-in-out-quad (cubic-bezier(0.45,0,0.55,1)). It's always laid out so it
   can transition; collapsed (max-height 0) until both fields are entered. */
#looch-modal-overlay .looch-pay-ach-debit-save {
  display: flex !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition:
    max-height 468ms cubic-bezier(0.45, 0, 0.55, 1),
    margin-top 468ms cubic-bezier(0.45, 0, 0.55, 1),
    opacity 468ms cubic-bezier(0.45, 0, 0.55, 1) !important;
}

#looch-modal-overlay .looch-pay-ach-debit-fields:has(#looch-pay-routing:not(:placeholder-shown)):has(#looch-pay-account:not(:placeholder-shown)) .looch-pay-ach-debit-save {
  max-height: 48px !important;
  margin-top: 14px !important;
  opacity: 1 !important;
}

/* Locked variant (ACH-debit, and RfP on a subscription) — checked + disabled,
   greyed like the legend's "Customer-entered & 3DS-authenticated"; can't toggle. */
#looch-modal-overlay .looch-pay-save-locked .looch-pay-save-head,
#looch-modal-overlay .looch-pay-save-locked input[type='checkbox'] {
  cursor: default !important;
}

#looch-modal-overlay .looch-pay-save-locked .looch-pay-save-title {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* The locked (checked + disabled) box uses the shared "Checked & Disabled"
   checkbox SVG — the same one as the legend — sized like a form checkbox. */
#looch-modal-overlay .looch-pay-save-checkbox-svg {
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
}

/* Description aligns under the title: SVG width (20px) + the head row gap (10px). */
#looch-modal-overlay .looch-pay-ach-debit-save .looch-pay-save-desc,
#looch-modal-overlay .looch-pay-rfp-save .looch-pay-save-desc {
  padding-left: 30px !important;
}

/* RfP save checkbox — one control for both states. The native checkbox is
   visually hidden; the SVG box (same shape/size as the legend's checkbox)
   renders the check, so toggling interactive↔locked never shifts the text.
   Only the colors change: looch blue when interactive, grey when locked. */
#looch-modal-overlay .looch-pay-rfp-save .looch-pay-save-head {
  position: relative !important;
}

#looch-modal-overlay .looch-pay-rfp-save input[type='checkbox'].looch-pay-save-cb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#looch-modal-overlay .looch-pay-save-box {
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* Active (interactive, one-time): checked = a filled looch-blue box with a white
   check; unchecked = a blue outline, no fill. */
#looch-modal-overlay .looch-pay-save-box-rect {
  stroke: #009fd4 !important;
  fill: transparent;
  opacity: 1 !important;
  transition: fill 160ms ease, stroke 160ms ease !important;
}

#looch-modal-overlay .looch-pay-save-cb:checked ~ .looch-pay-save-box .looch-pay-save-box-rect {
  fill: #009fd4;
}

/* The white check hand-draws on, same as the "Account verified" / "Payment
   successful" checkmark. Hidden until checked. */
#looch-modal-overlay .looch-pay-save-box-draw {
  fill: none !important;
  stroke: #ffffff !important;
  /* Thick enough to fill the clipped tick shape; overflow is clipped away. */
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  /* pathLength=1 normalises the dash. stroke-dashoffset must NOT be !important,
     or it would override (and pin) the draw animation. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

#looch-modal-overlay .looch-pay-save-cb:checked ~ .looch-pay-save-box .looch-pay-save-box-draw {
  opacity: 1;
  animation: loochCheckDraw 0.4s 0.05s ease-out forwards;
}

/* The filled tick is used only for the locked state below. */
#looch-modal-overlay .looch-pay-save-box-tick {
  display: none !important;
}

/* Locked (subscription) — grey "Checked & Disabled" look from the legend:
   outline box + filled grey tick, no blue fill, no white draw. */
#looch-modal-overlay .looch-pay-rfp-save.looch-pay-save-locked .looch-pay-save-box-rect {
  stroke: #8f92a1 !important;
  fill: transparent !important;
  opacity: 0.6 !important;
}

#looch-modal-overlay .looch-pay-rfp-save.looch-pay-save-locked .looch-pay-save-box-draw {
  display: none !important;
}

#looch-modal-overlay .looch-pay-rfp-save.looch-pay-save-locked .looch-pay-save-box-tick {
  display: inline !important;
  fill: #757575 !important;
}

/* Responsive */
@media (max-width: 600px) {

  /* Let the supporting text wrap as one paragraph on mobile (the forced
     two-line break is desktop-only). */
  #looch-modal-overlay .looch-note-break {
    display: none !important;
  }

  /* Full-screen modal on mobile (fills the viewport, no surrounding gutter). */
  #looch-modal-overlay.looch-modal-overlay.looch-modal-open {
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* Full-height sheet. The base rules already make this a flex column whose body
     fills and scrolls, so the footer pins to the bottom (no dead gap when the
     signed-out gate is short) and its divider stays edge-to-edge. */
  #looch-modal-overlay .looch-modal-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }

  #looch-modal-overlay .looch-modal-header,
  #looch-modal-overlay .looch-modal-body,
  #looch-modal-overlay .looch-modal-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Mobile: let "Faster checkout next time." flow inline with the sentence. */
  #looch-modal-overlay .looch-pay-save-break {
    display: inline !important;
  }
}

/* Scrollbar (on the body — the scroll area — so it never runs alongside the footer). */
#looch-modal-overlay .looch-modal-body::-webkit-scrollbar {
  width: 8px !important;
}

#looch-modal-overlay .looch-modal-body::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 4px !important;
}

#looch-modal-overlay .looch-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
}

#looch-modal-overlay .looch-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Focus */
#looch-modal-overlay.looch-modal-overlay:focus {
  outline: none !important;
}

#looch-modal-overlay *:focus-visible {
  outline: 2px solid #009fd4 !important;
  outline-offset: 2px !important;
}