/* Money widget — the one price treatment used across the storefront.

   The whole-dollar amount sets the scale: `.money` inherits the font-size of
   whatever price slot it sits in (`.card__price`, `.product-view__price`,
   `.course-card__price`, …), so a big detail-page price and a small card price
   both keep the same "$249⁰⁰" shape. The currency symbol and cents render at
   half the number's size, hugging its top line (superscript-style), aligned
   with each other. Everything else (colour, slot sizing) is left to the host. */

.money {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.money__whole {
  font-size: 1em;
  line-height: 0.85;
  letter-spacing: -0.01em;
}

.money__symbol,
.money__cents {
  font-size: 0.5em;
  font-weight: 700;
  line-height: 1;
  /* Flex-start alignment hangs the small glyphs from the number's top LINE,
     but the half-size glyphs carry half the font's internal ascent air — their
     ink starts higher than the digits' ink, so the $ read as floating above
     the number (client). This em drop puts the $'s ink top on the digits' ink
     top at any price size (pixel-calibrated: 2px at the 2rem card price). A
     relative offset, not a margin: inline-flex takes its baseline from the
     first item (the $), so a margin would shift the whole block in inline
     hosts (catalog card price) instead of just lowering the glyphs' paint. */
  position: relative;
  top: 0.125em;
}

.money__symbol {
  margin-right: 0.06em;
}

.money__cents {
  margin-left: 0.09em;
}

/* ── Old / list price ─────────────────────────────────────────────────────
   A single strike drawn across the whole block (a plain text-decoration would
   not cross the inline-flex boundary). Colour is inherited from the muted
   old-price slot the host already provides. */

.money--struck {
  font-weight: 600;
}

.money--struck::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 52%;
  height: 0.07em;
  min-height: 1px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.85;
}

/* ── Courses-only "pay over time" hint ────────────────────────────────────
   A muted-gray "ⓘ pay over time" caption on its own row directly below the
   price. The caption hangs OUT OF FLOW: when it participated in the block's
   size, every centre-aligned host (card footer, detail chip, sticky bar)
   centred the taller-and-wider box and thereby lifted / side-shifted the
   digits — the client wants the digits exactly where they were before the
   caption existed, with the caption simply appearing underneath. */

.money--rates {
  /* Column keeps the amount on its own row; the caption hangs below it out
     of flow (see .money__rates), so the block's box stays the amount's box. */
  flex-direction: column;
  align-items: flex-start;
}

.money__amount {
  /* The price glyphs as one unbreakable unit — a nowrap row, so the cents can
     never split onto the caption's line when the footer is tight (a four-digit
     price beside the wider Spanish CTA is the case that exposed it). */
  display: inline-flex;
  align-items: flex-start;
}

.money__rates {
  /* Out of flow, pinned under the amount: the caption must never size the
     .money box, or centre-aligned hosts re-centre the enlarged box and move
     the digits (the regression the client flagged). left:0 keeps it on the
     $'s left edge, exactly as the in-flow row rendered. */
  position: absolute;
  top: 100%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.32em;
  /* Detach from the big price scale — a compact caption sized to itself. */
  font-size: 0.375em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* The client's muted gray (secondary labels), not the near-black price. */
  color: #6b6b6b;
  cursor: help;
}

.money__rates-icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* Hover / focus tooltip carrying the fuller wording ("You can pay in rates");
   the visible caption is the short label. A pure-CSS bubble (no JS / Bootstrap
   init) that opens upward from the caption's left edge, so it stays on-screen
   even where the price hugs a left edge (the mobile sticky bar). Its text uses
   a fixed size, independent of the caption's tiny em scale. */
.money__rates::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1f2430;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  padding: 7px 12px;
  border-radius: 7px;
  /* The hint is a short sentence — let it wrap into two comfortable lines
     instead of one viewport-wide strip. */
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

.money__rates::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  /* Caret over the ⓘ (the icon's centre sits ~0.6em from the caption's left). */
  left: 0.6em;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2430;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.money__rates:hover::after,
.money__rates:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.money__rates:hover::before,
.money__rates:focus-visible::before {
  opacity: 1;
}