/* sticky_cta block. Fixed to the viewport bottom, revealed on scroll.
   No literal colour, every value a token. The inline JS (sticky_cta.php) drops
   the [hidden] attribute and toggles .sticky-cta--visible once the page has
   scrolled past data-show-after; the positioning + reveal transition were never
   defined, so the bar just sat inline in the flow and never stuck. */

.sticky-cta {
  position: fixed; z-index: 900;
  left: 50%; bottom: 1rem;
  width: max-content; max-width: min(680px, calc(100% - 2rem));
  background: var(--surface-brand); border-radius: var(--radius-pill);
  box-shadow: 0 10px 34px rgba(var(--shadow-rgb), .32);
  transform: translate(-50%, calc(100% + 1.5rem)); opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.sticky-cta--visible { transform: translate(-50%, 0); opacity: 1; }

/* Full-width bar variant: flush to the bottom edge, square. */
.sticky-cta--bar {
  left: 0; right: 0; bottom: 0;
  width: auto; max-width: none; border-radius: 0;
  transform: translateY(100%);
}
.sticky-cta--bar.sticky-cta--visible { transform: translateY(0); }
.sticky-cta--bar .sticky-cta__inner { max-width: 1200px; margin-inline: auto; }

.sticky-cta__inner { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.2rem .8rem 1.4rem; flex-wrap: nowrap; }
.sticky-cta--bar .sticky-cta__inner { flex-wrap: wrap; }
.sticky-cta__content { display: flex; align-items: center; gap: .7rem; flex: 1 1 auto; }
.sticky-cta__icon { flex: 0 0 auto; color: var(--white); }
.sticky-cta__text { display: flex; flex-direction: column; }
.sticky-cta__message { font-size: var(--fs-min); font-weight: 700; color: var(--white); }
.sticky-cta__countdown { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .85); }
.sticky-cta__button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; background: var(--white); color: var(--surface-brand); padding: .7rem 1.4rem; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; }
.sticky-cta__arrow { flex: 0 0 auto; width: 1.1em; height: 1.1em; }
.sticky-cta__dismiss { flex: 0 0 auto; color: rgba(var(--on-dark-rgb), .85); padding: .4rem .6rem; }

/* Pulse affordance on the button (motion-safe). */
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta--pulse .sticky-cta__button { animation: sticky-cta-pulse 2s ease-in-out infinite; }
  @keyframes sticky-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
}

/* --- Position variants ---------------------------------------------------
   `position` registers three values and only `bar` had a rule, so `responsive`
   and `floating` fell through to the base pill. `responsive` is the FIELD
   DEFAULT, which meant most instances silently rendered as something the
   editor had not chosen.

   floating   the centred pill. That is what the base .sticky-cta already is,
              so this only has to stop it being an unstyled unknown and pin the
              intent, rather than restate the geometry.
   responsive full-width bar on small screens, centred pill from 40em up. Built
              from the same declarations as --bar so the two cannot drift. */
.sticky-cta--floating {
  left: 50%; right: auto; bottom: 1rem;
  width: max-content; max-width: min(680px, calc(100% - 2rem));
  border-radius: var(--radius-pill);
}

@media (max-width: 39.9375em) {
  .sticky-cta--responsive {
    left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; border-radius: 0;
    transform: translateY(100%);
  }
  .sticky-cta--responsive.sticky-cta--visible { transform: translateY(0); }
  .sticky-cta--responsive .sticky-cta__inner { max-width: 1200px; margin-inline: auto; flex-wrap: wrap; }
}

@media (min-width: 40em) {
  .sticky-cta--responsive {
    left: 50%; right: auto; bottom: 1rem;
    width: max-content; max-width: min(680px, calc(100% - 2rem));
    border-radius: var(--radius-pill);
    transform: translate(-50%, calc(100% + 1.5rem));
  }
  .sticky-cta--responsive.sticky-cta--visible { transform: translate(-50%, 0); }
}