/* price-reveal.css — visual layer for reveal-variant landers */

/* Hide the page until JS wraps price tokens, to prevent $-flash. */
html:not(.pr-ready) body { visibility: hidden; }

.pr-slot {
  display: inline-block;
  cursor: pointer;
  background: var(--gold, #C9A96E);
  color: var(--text-dark, #2D2A26);
  padding: 0.05em 0.55em;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-sans, inherit);
  font-size: 0.95em;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
  vertical-align: baseline;
  user-select: none;
}
.pr-slot:hover,
.pr-slot:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  outline: none;
}
.pr-slot:active { transform: translateY(0); }

/* Revealed state: dissolve the pill, restore the natural text rendering. */
.pr-slot.pr-revealed {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  box-shadow: none;
  cursor: default;
  white-space: normal;
  font-weight: inherit;
  font-size: inherit;
  user-select: text;
}

html.pr-loading .pr-slot {
  opacity: 0.55;
  pointer-events: none;
}

/* Heavy-weight price-card slots get a slightly bigger pill so the CTA still
   reads as the primary visual hook before reveal. */
.price-table__big .pr-slot,
.club-widget__price-club .pr-slot,
.hero__save-badge-amount .pr-slot {
  padding: 0.1em 0.7em;
  font-size: 0.7em;
}

/* ===================================================================
   REVEAL LANDER CTA NORMALIZATION — applies at ALL viewport sizes.
   Buttons + the hero save-badge contain inline $40/$28/30% tokens
   which the reveal walker wraps into pills. Pre-reveal those pills
   read awkwardly inside the CTA ("Join the Club Click-to-view Click-to-view")
   and inside the small circular save-badge. Hide them everywhere so
   buttons read clean ("Join the Club", "Claim mine →") and the
   save-badge says just "Save". Discovery still happens in the price
   card + body copy, where the pills look intentional.

   After reveal, the .pr-slot.pr-revealed rule strips pill styling so
   prices appear inline as normal text — no visual change needed here.
   =================================================================== */

/* Hide pills + strikethroughs inside button CTAs pre-reveal (all viewports). */
html:not(.pr-revealed) body[data-reveal-mode] .btn .pr-slot,
html:not(.pr-revealed) body[data-reveal-mode] .fm-banner__cta .pr-slot {
  display: none !important;
}
html:not(.pr-revealed) body[data-reveal-mode] .btn s,
html:not(.pr-revealed) body[data-reveal-mode] .btn .price-strike {
  display: none !important;
}

/* Hero save-badge — circular, can't fit a pill (all viewports). */
html:not(.pr-revealed) body[data-reveal-mode] .hero__save-badge-amount .pr-slot {
  display: none !important;
}

/* Mobile-only: the sticky-mobile bottom CTA is hidden entirely pre-reveal.
   At desktop the sticky-mobile isn't shown by main.css anyway. */
@media (max-width: 720px) {
  html:not(.pr-revealed) body[data-reveal-mode] .sticky-mobile {
    display: none !important;
  }
  html:not(.pr-revealed) body[data-reveal-mode] { padding-bottom: 0 !important; }

  /* Where pills survive (cta-trust copy, fm-banner spot counter,
     price-card body text), shrink them slightly so they stay
     within narrow containers. */
  body[data-reveal-mode] .cta-trust .pr-slot,
  body[data-reveal-mode] .fm-banner .pr-slot,
  body[data-reveal-mode] .price-table .pr-slot {
    padding: 0.05em 0.45em;
    font-size: 0.85em;
    margin: 0 0.1em;
  }
}