/* ==========================================================================
   F4-5/F4-6 -- Buy Now flow UI (Frontend Spec Document Section 9).
   No committed dimensions/z-index exist for this surface in Section 7.1
   (that table only commits F1/F2/F10) -- these values are chosen to sit
   consistently within the existing overlay stack already established by
   F6's cart drawer (.mfuk-cart-drawer*, site_style.css: scrim/panel at
   1071/1072, above F10/cookie-consent/Bootstrap modals at ~1050-1060,
   below the social-proof toast layer at 1080 so a global error toast can
   still surface above this flow) -- [VERIFY AGAINST SOURCE] against any
   future, explicitly committed F4 value.
   ========================================================================== */

.mfuk-buy-now-trigger-wrap {
  margin-top: 0.75rem;
}

.mfuk-buy-now-scrim {
  position: fixed;
  inset: 0;
  background: var(--mfuk-scrim, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 1073;
}

.mfuk-buy-now-scrim.is-open {
  opacity: 1;
}

.mfuk-buy-now {
  position: fixed;
  inset: 0;
  z-index: 1074;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mfuk-buy-now__panel {
  width: 100%;
  max-height: 92dvh;
  /* Redesign (2026-09-01, "very messy" feedback): overflow-y:auto used to
     live HERE, on the rounded-corner panel itself -- a plain OS scrollbar
     is a straight rectangle and doesn't respect border-radius, so on any
     browser/OS that shows a classic (non-overlay) scrollbar, it visibly
     cuts through both the top-right and bottom-right rounded corners.
     Fix: this outer panel now only clips (overflow: hidden, so its
     border-radius is always a clean, uninterrupted curve) and is a flex
     column; the header stays fixed at the top, and ONLY the body below
     scrolls, on its own non-rounded element -- so even a plain rectangular
     scrollbar is clipped away to nothing outside the panel's rounded
     silhouette by the overflow:hidden here, instead of poking through it. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: var(--mfuk-elevation-2, 0 8px 24px rgba(0, 0, 0, 0.18));
  transform: translateY(100%);
  transition: transform 200ms ease;
}

.mfuk-buy-now.is-open .mfuk-buy-now__panel {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .mfuk-buy-now {
    align-items: center;
  }

  .mfuk-buy-now__panel {
    width: 480px;
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 24px;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  .mfuk-buy-now.is-open .mfuk-buy-now__panel {
    transform: translateY(0);
    opacity: 1;
  }
}

.mfuk-buy-now__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.75rem;
  background: #fff;
}

.mfuk-buy-now__title {
  margin: 0;
  padding-left: 0.85rem;
  position: relative;
  font-family: "Sora", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--product-dark, #081120);
}

/* Same left accent bar used on the packages/category page headings --
   ties the modal back to the rest of the site's visual language instead
   of reading as a generic, unbranded system dialog. */
.mfuk-buy-now__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 4px;
  height: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-color, #081120), var(--accent-cyan, #081120));
}

.mfuk-buy-now__close {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(8, 17, 32, 0.08);
  color: var(--primary-color, #081120);
  transition: background 150ms ease, transform 150ms ease;
}

.mfuk-buy-now__close:hover {
  background: rgba(8, 17, 32, 0.15);
  transform: rotate(90deg);
}

.mfuk-buy-now__close:focus-visible,
.mfuk-buy-now button:focus-visible,
.mfuk-buy-now input:focus-visible,
.mfuk-buy-now a:focus-visible {
  outline: none;
  box-shadow: var(--mfuk-focus-ring, 0 0 0 3px rgba(13, 110, 253, 0.35));
}

.mfuk-buy-now__body {
  flex: 1 1 auto;
  min-height: 0; /* required for a flex child to actually shrink/scroll instead of forcing the panel to grow */
  overflow-y: auto;
  padding: 0 1.25rem 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  font-size: 1rem; /* 16px body-text floor -- ui-ux-pro-max readable-font-size */
  /* Thin, subtle scrollbar for browsers that support styling one --
     Firefox/modern Chromium via scrollbar-width+color, WebKit/Blink via
     the ::-webkit-scrollbar rules below. Purely cosmetic: the panel's own
     overflow:hidden above is what actually prevents any scrollbar shape
     from ever crossing the rounded corners, regardless of whether a given
     browser honors this styling. */
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 17, 32, 0.22) transparent;
}

.mfuk-buy-now__body::-webkit-scrollbar {
  width: 6px;
}

.mfuk-buy-now__body::-webkit-scrollbar-track {
  background: transparent;
}

.mfuk-buy-now__body::-webkit-scrollbar-thumb {
  background: rgba(8, 17, 32, 0.22);
  border-radius: 999px;
}

.mfuk-buy-now__loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 0;
  color: var(--grey, #4f5968);
}

.mfuk-buy-now__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(8, 17, 32, 0.15);
  border-top-color: var(--primary-color, #081120);
  animation: mfuk-buy-now-spin 800ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mfuk-buy-now__spinner {
    animation: none;
  }

  .mfuk-buy-now-scrim,
  .mfuk-buy-now__panel {
    transition: none;
  }
}

@keyframes mfuk-buy-now-spin {
  to {
    transform: rotate(360deg);
  }
}

.mfuk-buy-now__state {
  padding: 1.5rem 0;
  text-align: center;
}

.mfuk-buy-now__state .btn {
  min-height: 44px;
}

/* Redesign (2026-09-01, user feedback: "this model is not good not easy to
   read"): the order summary, free-likes note, and upsell used to be three
   separately bordered/colored boxes stacked in a row (neutral gray, then
   green, then a pink dashed box) -- reads as visual noise before the
   customer even reaches the form. Fix: ONE card holds the summary and the
   free-likes note together (joined by a hairline divider, not a second
   box), and the upsell drops its own heavy border/tint entirely so pink is
   reserved for the one thing that should actually stand out -- the price
   and the primary action -- not spent on three different elements at once. */
.mfuk-buy-now__summary-card {
  border: 1px solid rgba(8, 17, 32, 0.08);
  border-radius: 18px;
  background: rgba(8, 17, 32, 0.025);
  margin-bottom: 1rem;
  overflow: hidden;
}

.mfuk-buy-now__summary {
  display: grid;
  gap: 0.4rem;
  padding: 1rem;
}

.mfuk-buy-now__price {
  display: inline-flex;
  align-items: baseline;
  width: fit-content;
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 17, 32, 0.1), rgba(102, 112, 133, 0.1));
  font-family: "Sora", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary-color, #081120);
}

.mfuk-buy-now__links {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--grey, #4f5968);
  font-size: 1rem;
  line-height: 1.5;
}

.mfuk-buy-now__link-note {
  color: var(--grey, #4f5968);
  font-size: 0.9375rem;
}

/* Deliberately quiet -- this used to be a solid pink dashed box, which made
   THREE differently-colored boxes compete at the top of the modal (gray
   summary, green free-likes note, pink upsell). Pink is now spent only on
   the link text itself (still clearly a click target) and the price/CTA
   elsewhere, not on a whole background+border of its own. */
.mfuk-buy-now__upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(8, 17, 32, 0.08);
  background: transparent;
  margin-bottom: 1rem;
}

.mfuk-buy-now__upsell-link {
  font-weight: 700;
  color: var(--primary-color, #081120);
}

.mfuk-buy-now__upsell-skip {
  border: 0;
  background: transparent;
  color: var(--grey, #4f5968);
  font-size: 1rem;
  text-decoration: underline;
  min-height: 44px;
  padding: 0 0.25rem;
}

.mfuk-buy-now__banner {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(184, 134, 11, 0.12);
  border: 1px solid var(--mfuk-warning, var(--bs-warning, #ffc107));
  color: var(--product-dark, #081120);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.mfuk-buy-now__field-error {
  display: block;
  color: var(--mfuk-error, var(--bs-danger, #dc3545));
  font-size: 0.9375rem;
  margin-top: 0.4rem;
  font-weight: 600;
}

.mfuk-buy-now__hint {
  color: var(--grey, #4f5968);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
}

/* -- Section rhythm (identity/payment/terms+submit): a visible label plus a
   subtle top divider on every section after the first gives the form clear,
   scannable groups instead of one long run of fields -- readability was the
   explicit complaint this pass addresses. -------------------------------- */
.mfuk-buy-now__section {
  margin-bottom: 1.75rem;
}

.mfuk-buy-now__section + .mfuk-buy-now__section {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(8, 17, 32, 0.08);
}

.mfuk-buy-now__section-title {
  margin: 0 0 0.85rem;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--product-dark, #081120);
}

.mfuk-buy-now__section--terms {
  margin-bottom: 0;
}

/* Always-visible checkout footer (user-reported: the Add Extras checklist
   could push "Place order" far down the page, requiring a scroll to even
   find it). A first attempt used position:sticky on an element still
   INSIDE the scrolling .mfuk-buy-now__body -- that doesn't work for "visible
   from the very first render": sticky only keeps an element in view once
   scrolling would otherwise carry it past that point, it does not pull
   something into view from a scroll position of zero. The actual fix is
   structural, mirroring how .mfuk-buy-now__header is already handled: this
   is a TRUE flex sibling of .mfuk-buy-now__body (see .mfuk-buy-now__panel's
   flex-column layout), created once in buy-now.js's buildOverlayDom() and
   given real content in renderCheckoutForm() -- flex: 0 0 auto keeps it a
   fixed-height row that never scrolls, always pinned below the scrollable
   body regardless of that body's content height. */
.mfuk-buy-now__footer {
  flex: 0 0 auto;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid rgba(8, 17, 32, 0.08);
  box-shadow: 0 -8px 16px rgba(8, 17, 32, 0.06);
}

#bn_identity_block .form-label {
  font-size: 1rem;
  font-weight: 600;
}

#bn_identity_block .form-control {
  min-height: 48px;
  font-size: 1rem;
}

.mfuk-buy-now__signin-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  color: var(--primary-color, #081120);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
}

.mfuk-buy-now__signin-panel {
  margin-top: 0.85rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(8, 17, 32, 0.03);
  border: 1px solid rgba(8, 17, 32, 0.08);
}

.mfuk-buy-now__signin-panel p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--grey, #4f5968);
}

.mfuk-buy-now__signin-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.mfuk-buy-now__signin-actions .btn {
  min-height: 44px;
}

.mfuk-buy-now__signin-cancel {
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--grey, #4f5968);
  font-size: 0.9375rem;
  text-decoration: underline;
}

.mfuk-buy-now__payment-methods {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.mfuk-buy-now__payment-methods .payment-method-option {
  display: block;
  cursor: pointer;
}

.mfuk-buy-now__payment-methods .payment-method-option input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 44px;
}

.mfuk-buy-now__payment-methods .method-card {
  position: relative;
  display: block;
  padding: 0.85rem 3.4rem 0.85rem 3rem;
  border: 1.5px solid rgba(8, 17, 32, 0.1);
  border-radius: 16px;
  min-height: 44px;
  font-size: 1rem;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

/* Explicit radio dot -- selection must never rely on border/tint color
   alone (ui-ux-pro-max color-not-only). Positioned absolutely so it doesn't
   shift the card's own text layout between selected/unselected states.
   Left side, unchanged from before -- the input's own absolutely-positioned
   (opacity:0) hit target has no explicit left/top of its own, so it inherits
   its in-flow position from the markup order (<input> before <span>, i.e.
   the LEFT edge of the label); moving the visual dot away from that would
   leave a keyboard/screen-reader focus target that visually doesn't line up
   with anything. Native <label> click-anywhere behavior isn't affected
   either way, but focus should still land where the dot actually is. */
.mfuk-buy-now__payment-methods .method-card::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 1.1rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(8, 17, 32, 0.22);
  background: #fff;
  box-sizing: border-box;
}

/* Icon badge -- a small colored circle behind each method's own FontAwesome
   icon, one accent color per method so the three cards read as visually
   distinct options at a glance instead of three identical rows of plain
   text (the "generic/plain" feedback this pass addresses). Targets the icon
   classes directly rather than adding new modifier classes in buy-now.js,
   since fa-wallet/fa-bitcoin/fa-university are already unique per method.
   Right side, opposite the radio dot -- doesn't disturb its left-side
   position or the input's matching hit target at all. */
.mfuk-buy-now__payment-methods .method-card strong i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.mfuk-buy-now__payment-methods .fa-wallet {
  background: rgba(8, 17, 32, 0.12);
  color: var(--primary-color, #081120);
}

.mfuk-buy-now__payment-methods .fa-bitcoin {
  background: rgba(102, 112, 133, 0.12);
  color: var(--secondary-color, #667085);
}

.mfuk-buy-now__payment-methods .fa-university {
  background: rgba(8, 17, 32, 0.14);
  color: #1591b3;
}

.mfuk-buy-now__payment-methods .method-card strong {
  display: block;
  padding-left: 0.1rem;
}

.mfuk-buy-now__payment-methods input:checked + .method-card {
  border-color: var(--primary-color, #081120);
  background: linear-gradient(135deg, rgba(8, 17, 32, 0.05), rgba(102, 112, 133, 0.05));
  box-shadow: 0 4px 14px rgba(8, 17, 32, 0.14);
}

.mfuk-buy-now__payment-methods .payment-method-option:hover .method-card {
  border-color: rgba(8, 17, 32, 0.35);
}

.mfuk-buy-now__payment-methods input:checked + .method-card::before {
  border-color: var(--primary-color, #081120);
  border-width: 6px;
}

.mfuk-buy-now__payment-methods .method-card small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  color: var(--grey, #4f5968);
}

.mfuk-buy-now__payment-methods .method-price {
  display: block;
  font-weight: 800;
  margin-top: 0.3rem;
}

.mfuk-buy-now__terms {
  margin: 0 0 1.1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.mfuk-buy-now__terms .form-check-input {
  width: 22px;
  height: 22px;
  margin-top: 0;
  margin-right: 0.65rem;
  flex: 0 0 auto;
}

#bn_submit {
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
}

#bn_submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mfuk-buy-now__result {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.5;
}

.mfuk-buy-now__result--error {
  background: rgba(220, 53, 69, 0.08);
  color: var(--mfuk-error, var(--bs-danger, #dc3545));
}

.mfuk-buy-now__result--warning {
  background: rgba(184, 134, 11, 0.1);
  color: var(--product-dark, #081120);
}

.mfuk-buy-now__success {
  text-align: center;
  padding: 1rem 0;
}

.mfuk-buy-now__success i {
  font-size: 2.5rem;
  color: var(--mfuk-success, var(--bs-success, #198754));
}

.mfuk-buy-now__bank-details {
  text-align: left;
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
}

.mfuk-buy-now__bank-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(8, 17, 32, 0.08);
  border-radius: 12px;
  font-size: 0.9375rem;
}

.mfuk-buy-now__account-prompt {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(8, 17, 32, 0.08);
}

.mfuk-buy-now__account-prompt .btn {
  min-height: 44px;
}

/* Redesign (2026-09-01): this used to be its OWN bordered, green-tinted box
   sitting directly under the (gray) order summary box -- two competing
   "cards" back to back. Now it lives INSIDE .mfuk-buy-now__summary-card, as
   a plain row separated by a hairline top divider instead of a second box,
   so the order summary and the free-likes note read as one connected
   "here's your order" unit. The combined-class selector
   (.mfuk-free-likes-promo.mfuk-buy-now__free-likes-promo) beats
   site_style.css's own single-class rule on specificity regardless of load
   order, so the background/border it sets there are fully overridden here. */
.mfuk-free-likes-promo.mfuk-buy-now__free-likes-promo {
  margin: 0;
  padding: 0.75rem 1rem;
  gap: 0.6rem;
  border: 0;
  border-top: 1px solid rgba(8, 17, 32, 0.08);
  border-radius: 0;
  background: transparent;
}

.mfuk-buy-now__free-likes-promo .mfuk-free-likes-promo__icon {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  background: transparent;
}

.mfuk-buy-now__free-likes-promo .mfuk-free-likes-promo__copy strong {
  font-size: 0.9375rem;
}

.mfuk-buy-now__free-likes-promo .mfuk-free-likes-promo__copy span {
  font-size: 0.875rem;
}

/* Add Extras checklist -- compact modifier for the Buy Now modal's narrower
   body, same "combined-class selector beats the single-class base rule on
   specificity" technique as .mfuk-free-likes-promo.mfuk-buy-now__free-likes-promo
   above: smaller title/row font-size and tighter padding than the full-width
   product/cart-page rendering of the same component, never a second,
   independent set of class names. */
.mfuk-add-extras.mfuk-add-extras--buy-now {
  margin: 0.85rem 0 0;
  padding: 0.85rem 0.9rem;
}

.mfuk-add-extras--buy-now .mfuk-add-extras__title {
  font-size: 0.9375rem;
}

.mfuk-add-extras--buy-now .mfuk-add-extras__detail {
  margin-left: 2.1rem;
}

.mfuk-add-extras--buy-now .mfuk-add-extras__select,
.mfuk-add-extras--buy-now .mfuk-add-extras__link-input,
.mfuk-add-extras--buy-now .mfuk-add-extras__confirm-btn,
.mfuk-add-extras--buy-now .mfuk-add-extras__remove-btn {
  font-size: 0.9375rem;
}

.mfuk-add-extras--buy-now .mfuk-add-extras__total {
  font-size: 0.9375rem;
}

/* forced-colors (Windows High Contrast) support -- Frontend Spec Section 16 */
@media (forced-colors: active) {
  .mfuk-buy-now__panel {
    border: 1px solid CanvasText;
  }

  .mfuk-buy-now__payment-methods .method-card {
    border: 1px solid CanvasText;
  }

  .mfuk-buy-now__payment-methods .method-card::before {
    border-color: CanvasText;
    background: Canvas;
  }

  .mfuk-buy-now__payment-methods input:checked + .method-card {
    outline: 2px solid Highlight;
  }

  .mfuk-buy-now__payment-methods input:checked + .method-card::before {
    border-color: Highlight;
  }

  .mfuk-buy-now__signin-panel {
    border: 1px solid CanvasText;
  }
}