/* ============================================================
   AffPromoBanner (Atlas) — collapsible pink→purple gradient promo
   ============================================================
   Extracted from ShoppingPowerBanner's scoped styles; selectors renamed
   .shopping-power-* → .aff-promo-*. Same full-bleed gradient shell, 718px
   centered content column, responsive horizontal padding, chevron rotation,
   and 240ms max-height collapse transition. Gradient uses the canonical Atlas
   --gradient-pink-purple token (ShoppingPowerBanner keeps its own orange→pink).
   ============================================================ */

/* ── Banner shell ──────────────────────────────────────────────
   Pink→purple gradient (Atlas --gradient-pink-purple token), full-bleed
   (radius 0, no horizontal margin), white text. Sits directly below the
   surrounding nav/TopBar. */
.aff-promo-banner {
  background: var(--gradient-pink-purple, linear-gradient(90deg, #E51866 0%, #A230C1 100%));
  border-radius: 0;
  color: var(--color-white, #FFFFFF);
  overflow: hidden;
  margin-bottom: 0;
  width: 100%;
}

/* Per-instance gradient override (DtmPromoBanner) — the canonical Atlas
   --gradient-orange-pink token, which resolves to pink→orange (Brand-Pink
   #F91D71 left → Brand Light-Orange #FF5709 right). NAMING SMELL: the modifier
   is called --orange-pink but renders pink→orange (it tracks the token name, not
   the visual direction); left as-is to avoid churning the DtmPromoBanner
   reference for a demo. Compound selector so it beats the base .aff-promo-banner
   background regardless of source order. The shared default above is untouched —
   ApplyNow and other base consumers keep pink→purple. Now applied to DTC. */
.aff-promo-banner.aff-promo-banner--orange-pink {
  background: var(--gradient-orange-pink, linear-gradient(90deg, #F91D71 0%, #FF5709 100%));
}

/* Per-instance pink→purple override (DtmPromoBanner). Value copied verbatim from
   the base .aff-promo-banner default above so DTM renders identically to DTC's
   former look — a true swap, not an approximation. DTM carries an explicit
   modifier (rather than riding the bare base) so it stays decoupled from whatever
   the shared default becomes. Compound selector to beat the base regardless of
   source order. */
.aff-promo-banner.aff-promo-banner--pink-purple {
  background: var(--gradient-pink-purple, linear-gradient(90deg, #E51866 0%, #A230C1 100%));
}

/* ── Header (clickable toggle) ─────────────────────────────────
   Native button reset; flex row [icon] [headline] [chevron]. Content
   column capped at 718px and centered to align with page content. */
.aff-promo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 718px;
  margin: 0 auto;
  padding: 14px 16px 0 16px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Collapsed: header carries its own bottom padding (no body below it). */
.aff-promo-header[aria-expanded="false"] {
  padding-bottom: 14px;
}
.aff-promo-header:focus-visible {
  outline: 2px solid var(--color-white, #FFFFFF);
  outline-offset: -2px;
}

/* ── Icon / headline / chevron ─────────────────────────────────── */
.aff-promo-icon {
  font-size: 26px;
  flex-shrink: 0;
  color: var(--color-white, #FFFFFF);
}
/* Icon + headline as one centered group: the GROUP grows to fill the space
   between (left edge) and the right-pinned chevron, and centers its contents,
   so the icon sits directly beside the title and the pair centers together
   (fixes the icon being stranded at the far-left edge). min-width:0 lets the
   group shrink so a long headline (DTM) still ellipsizes instead of overflowing
   and shoving the chevron off the edge.
   NOTE: the icon+text pair sits a hair off true-banner-center because the
   right-pinned chevron occupies space the left side doesn't mirror — acceptable,
   reads as centered. */
.aff-promo-group {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.aff-promo-headline {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-body, Roboto, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: 17px;
  line-height: 22px;
  color: var(--color-white, #FFFFFF);
}
.aff-promo-chevron {
  font-size: 18px;
  flex-shrink: 0;
  color: var(--color-white, #FFFFFF);
  transition: transform 200ms ease;
}
/* Open → chevron points up. */
.aff-promo-header[aria-expanded="true"] .aff-promo-chevron {
  transform: rotate(180deg);
}

/* ── Collapsible content region ────────────────────────────────
   Animates via max-height (cheap, no JS measure) + opacity. 718px
   centered content column matches the header. */
.aff-promo-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px;
  max-width: 718px;
  margin: 0 auto;
  box-sizing: border-box;
  transition: max-height 240ms ease, opacity 200ms ease, padding 240ms ease;
}
.aff-promo-content.is-open {
  max-height: 320px;
  opacity: 1;
  padding: 24px 16px 16px 16px;
}

/* Responsive horizontal padding so the content edges align with page
   content across breakpoints (mirrors ShoppingPowerBanner). */
@media (min-width: 403px) and (max-width: 744px) {
  .aff-promo-header {
    padding-left: 32px;
    padding-right: 32px;
  }
  .aff-promo-content,
  .aff-promo-content.is-open {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (min-width: 745px) {
  .aff-promo-header {
    padding-left: 24px;
    padding-right: 24px;
  }
  .aff-promo-content,
  .aff-promo-content.is-open {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── CTA pill ──────────────────────────────────────────────────
   White stroke / transparent fill pill on the dark gradient
   (on-dark inversion of Atlas Action Button Secondary). */
.aff-promo-cta {
  display: block;
  width: 50%;
  max-width: 300px;
  min-width: 200px;
  height: 32px;
  margin: 0 auto;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--color-white, #FFFFFF);
  border-radius: var(--radius-full, 1000px);
  color: var(--color-white, #FFFFFF);
  font-family: var(--font-body, Roboto, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-button, 16px);
  line-height: var(--font-lh-button, 16px);
  letter-spacing: var(--font-ls-button, 0.2px);
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.aff-promo-cta:hover {
  background: rgba(255, 255, 255, 0.12);
}
.aff-promo-cta:active {
  background: rgba(255, 255, 255, 0.20);
}
.aff-promo-cta:focus-visible {
  outline: 2px solid var(--color-white, #FFFFFF);
  outline-offset: 2px;
}

/* ── Footer disclaimer note ────────────────────────────────────── */
.aff-promo-footer-note {
  margin: 14px auto 0 auto;
  max-width: 360px;
  text-align: center;
  font-family: var(--font-body, Roboto, sans-serif);
  font-weight: var(--font-weight-regular, 400);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-white, #FFFFFF);
  opacity: 0.9;
}