/* ==================================================
   OWBOOST · CHECKOUT MODAL — F3 .pay-* fit
   --------------------------------------------------
   When owb_f3_checkout_enabled is on, the override
   (boosting/templates/public/product/checkout.php) renders the COMPACT
   single-column F3 ".pay-*" checkout (the approved _owb-preview-boost.html modal,
   styled by boost-page.css; tokens from f3-tokens.css) into
   #boosting-modal-content as `.owb-rd.owb-pay`. The parent boosting/main.css sizes
   #boosting-modal (~700px) and prints its own .boosting-modal-header ("Checkout"
   title + close); the .pay-* design carries its own .pay-head + .pay-close, so
   this sizes the modal to the compact layout, HIDES the plugin header, and gives
   .owb-pay the modal-box padding + positioning context for the absolute close.
   Loaded (gated) after boost-page.css on the product pages. Scoped to .owb-pay /
   :has(.owb-pay) so the gift/tip modal is untouched.
   ================================================== */

/* ---- RE-HOME the plugin modal overlay + positioning ----
   The fixed-popup mechanics for #boosting-modal / #boosting-modal-bg live ONLY in
   the parent boosting/main.css (base .boosting-modal{position:fixed;top:-120%} +
   .bm-visible show toggle + the .boosting-modal-bg full-screen overlay). On the
   boost page main.css is BLANKED at the <link> (functions.php style_loader_tag
   strip, owb_is_f3_page), and nothing else supplies these rules — so #boosting-modal
   had static positioning and the checkout rendered inline at the BOTTOM of the page
   instead of popping up (adding .bm-visible did nothing). Reproduce the essential
   overlay + centred-card + show toggles here. This sheet only loads when the F3
   checkout is on (owb_f3_checkout_enabled), i.e. exactly the boost/product page, and
   AFTER the strip. Bare selectors (not :has) so they style the shell for ANY modal
   on the page (checkout + gift/tip); the :has(.owb-pay) rules below then resize the
   shell to the compact checkout. */
.boosting-modal-bg {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background-color: rgba(0,0,0,.45);
  backdrop-filter: blur(3.3px); -webkit-backdrop-filter: blur(3.3px);
}
.boosting-modal-bg.bmbg-visible { display: block; }
/* Open transition — a short top-down POP from just above the resting spot (translateY
   + scale + fade), NOT the old full-screen `top: -120% -> 50%` slide that flew the card
   down through the whole viewport (read as "weird"). The card stays centred (top:50%)
   and only travels ~34px down while scaling .96 -> 1 and fading in (UI batch 7 —
   "checkout should move from top down as a pop up"). visibility/opacity replace the
   off-screen top trick so the hidden modal can't catch pointer events. */
/* ID-qualified + !important: the parent boosting/main.css "checkout4" block
   (.boosting-modal.bm-visible { animation: co-cardUp … !important }) is supposed to be
   stripped on the F3 page, but if the strip misses (stale page/CDN cache, a combined-CSS
   bundle baked when a gate was off) that parent rule wins over a bare .boosting-modal
   selector and the pop never shows (user: "still the same as before"). #boosting-modal
   + !important beats it regardless, and `animation: none !important` kills co-cardUp. */
#boosting-modal.boosting-modal {
  position: fixed !important; z-index: 100001;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, calc(-50% - 34px)) scale(.96) !important;
  opacity: 0; visibility: hidden;
  width: 80%; max-width: 1267.2px;
  background: #fff; border-radius: 13.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 50px -12px rgba(0,0,0,.35);
  animation: none !important;
  transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .26s ease, visibility 0s linear .34s !important;
}
#boosting-modal.boosting-modal.bm-visible {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1; visibility: visible;
  animation: none !important;
  transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .22s ease, visibility 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  #boosting-modal.boosting-modal { transform: translate(-50%, -50%) scale(1) !important; animation: none !important; transition: opacity .2s ease, visibility 0s linear .2s !important; }
  #boosting-modal.boosting-modal.bm-visible { transition: opacity .2s ease, visibility 0s !important; }
}
.boosting-modal-content { overflow-y: auto; max-height: 90vh; }

/* size the modal to the compact .pay-modal width. :has(.owb-pay) keeps the
   gift/tip modal — which has no .owb-pay inside — at its native size. */
#boosting-modal:has(.owb-pay) {
  max-width: 748px !important;
  width: calc(100% - 44px) !important;
  max-height: 92vh !important;
}
#boosting-modal:has(.owb-pay) #boosting-modal-content {
  padding: 0 !important;
  max-height: 92vh;
  overflow-y: auto;
}

/* the plugin's modal header (its "Checkout" title + close) is replaced by the
   .pay-head eyebrow/title and the .pay-close button rendered inside .owb-pay */
#boosting-modal:has(.owb-pay) .boosting-modal-header { display: none !important; }

/* .owb-pay is the modal body: give it the .pay-modal box padding and make it the
   positioning context for the absolute .pay-close. The #boosting-modal surface is
   already white, so keep this transparent.
   COMPOUND `.owb-rd.owb-pay` (0,2,0) on purpose: .owb-pay is itself a `.owb-rd`, and
   home-page.css (loaded on the product page for the calculator) carries the
   `.owb-rd, .owb-rd * { padding:0 }` reset (0,1,0) which loads after this sheet — a
   bare `.owb-pay` (also 0,1,0) loses the padding to it and the content sits flush to
   the edges. The compound class wins regardless of load order; min-height:0 also
   undoes the .owb-rd { min-height:100vh } leak. */
.owb-rd.owb-pay { position: relative; padding: 44px 44px 39.6px; background: transparent; min-height: 0; }

/* ---- AESTHETIC REFINEMENTS (live modal only) ----
   More breathing room + larger type than the compact preview defaults, and force
   the F3 display font onto the total so the price matches the order panel instead
   of the plugin's "lion number" League font (.discount-currency). */

/* PRICE FONT — the parent main.css styles `#totaloutcost { font-family: League
   !important }` (ID, 1,0,0). Use `.owb-pay #totaloutcost` (1,1,0) + !important to win,
   and put the whole total on Barlow (--font-body) so it MATCHES the "Your Order" panel
   price (Barlow 800) instead of League, which read badly small (UI batch 9). */
.owb-pay #totaloutcost,
.owb-pay #totaloutcost .discount-currency,
.owb-pay .pay-recap-total-amt,
.owb-pay .discount-currency { font-family: var(--font-body) !important; font-variant-numeric: tabular-nums; }

/* recap — compact padding so the bigger (80px) minis don't feel cramped (UI batch 10) */
.owb-pay .pay-recap { padding: 13.76px 20.6px; margin: 31.68px 0; }
.owb-pay .pay-recap-total-lbl { font-size: 12.54px; }
.owb-pay .pay-recap-total-amt { font-size: 39.6px; letter-spacing: -0.03em; }
.owb-pay .pay-recap-journey .order-mini span { font-size: 14.52px; }
.owb-pay .pay-recap-journey .order-mini small { font-size: 11.22px; }

/* head — a touch more room under the title */
.owb-pay .pay-eyebrow { font-size: 14.52px; }
.owb-pay .pay-head { margin-bottom: 5.28px; }

/* fields — bigger labels + inputs, more gap */
.owb-pay .pay-fields { gap: 19.8px; }
.owb-pay .pay-field { gap: 9.9px; }
.owb-pay .pay-label { font-size: 14.52px; }
.owb-pay .pay-label small { font-size: 13.2px; }
.owb-pay .pay-field input { font-size: 19.8px; padding: 16.5px 18.7px; }

/* payment method — bigger names/subs, more padding */
.owb-pay .pay-methods-label { font-size: 14.52px; margin: 27.72px 0 13.2px; }
.owb-pay .pay-methods { gap: 15.84px; }
.owb-pay .pay-method-card { padding: 19.8px 21.12px; gap: 4.62px; }
.owb-pay .pay-method-name { font-size: 21.78px; }
.owb-pay .pay-method-sub { font-size: 15.84px; }

/* terms + submit + trust — bigger, more spacing */
.owb-pay .pay-tos { font-size: 17.82px; margin: 27.72px 0 23.76px; }
.owb-pay .pay-submit { font-size: 19.8px; padding: 23.1px; }
.owb-pay .pay-trust { font-size: 13.86px; gap: 26.4px; margin-top: 21.12px; }

/* compact phones: single-column fields + tighter padding */
@media (max-width: 560px) {
  .owb-rd.owb-pay { padding: 30.8px 24.2px 33px; }
  .owb-pay .pay-fields, .owb-pay .pay-methods { grid-template-columns: 1fr; }
}

/* round 3 — halve the checkout modal body side padding on phones (was 24.2px) */
@media (max-width: 480px) {
  .owb-rd.owb-pay { padding: 26.4px 15px 28px; }
}

/* Hide the recap TOTAL at the top of the checkout modal — the price belongs
   only in the bottom pay bar. Mirrors eloboostleague; owboost was missing this
   rule so the total showed at the top too. */
.owb-pay .pay-recap-total { display: none; }