/* ============================================================
   public-register-flow.css
   Page-internal styles for the multi-step registration flow
   under /{orgCode}/register/{urlCode}/{instanceId}.

   Scoped under body.fr-public + body.fr-public-register so the
   rules don't leak onto any other public-layout page.

   NB: The donor-sponsorship flow reuses every selector here verbatim,
   so every selector below is also matched against body.fr-public-sponsor
   via :is(). If you add a register-only rule, drop the :is() wrapper
   and use body.fr-public-register alone.

   Builds on the visual language established by public-event-page.css;
   reuses .fr-presenter and .fr-cta-bar primitives shipped last round.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) main {
  padding-top: var(--fr-space-7);
  padding-bottom: var(--fr-space-10);
}

@media (max-width: 640px) {
  :is(body.fr-public-register, body.fr-public-sponsor) main {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    /* leave room for sticky CTA bar */
    padding-bottom: calc(var(--fr-space-10) + 5rem);
  }
}

/* ============================================================
   Layout — form column + context aside.
   Mirrors the event page's main+aside shape so the donor doesn't
   feel they've left the surface they clicked from.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 30%, 22rem);
  gap: var(--fr-space-8);
  align-items: start;
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout__main {
  min-width: 0;
  max-width: 40rem;
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout__context {
  position: sticky;
  top: calc(3.75rem + var(--fr-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-4);
}

@media (max-width: 960px) {
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fr-space-6);
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout__context {
    position: static;
    order: -1;            /* context band sits ABOVE the form on tablet */
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout__main {
    max-width: 44rem;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout {
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-layout__main {
    padding: 0 var(--fr-container-pad-x);
  }
}

/* ============================================================
   Context band — the headline persistence move.
   Desktop / tablet: full card. Phone: a slim sticky strip that
   stays visible as the donor scrolls a long form.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context {
  display: flex;
  flex-direction: column;
  background: var(--fr-color-surface);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
}

/* — Event header inside the context band — */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4);
  border-bottom: 1px solid var(--fr-color-border);
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__thumb {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface-sunken);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__thumb > img,
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__thumb > svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event-title {
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.01em;
  color: var(--fr-color-ink);
  margin: 0;
  line-height: var(--fr-leading-snug);
  /* allow wrap to 2 lines, clip the rest with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event-when {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* — Back-to-event link sitting above the event row — */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__back {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: var(--fr-space-3) var(--fr-space-4);
  border-bottom: 1px solid var(--fr-color-border);
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink-muted);
  text-decoration: none;
  background: var(--fr-color-surface-sunken);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__back:hover {
  color: var(--fr-color-ink);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__back-arrow {
  font-size: var(--fr-text-md);
  line-height: 1;
  font-weight: var(--fr-weight-regular);
}

/* — Presenter slot inside the context band — */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__presenter {
  padding: var(--fr-space-4);
}
/* Flatten a <fr-presenter variant="card"> when nested inside the
   context band — the band already provides the surface + border. */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__presenter .fr-presenter--card {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__presenter .fr-presenter--inline {
  width: 100%;
}

/* — Step indicator inside the context band — */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  flex-wrap: nowrap;
  padding: var(--fr-space-3) var(--fr-space-4);
  border-top: 1px solid var(--fr-color-border);
  background: var(--fr-color-surface-sunken);
  font-size: 0.7rem;
  font-weight: var(--fr-weight-semibold);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  color: var(--fr-color-ink-subtle);
  white-space: nowrap;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-border-strong);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps-dot.is-done {
  background: var(--fr-color-primary);
  opacity: 0.55;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps-dot.is-current {
  background: var(--fr-color-primary);
  width: 18px;
}

/* ============================================================
   Context band — phone treatment
   ============================================================ */

@media (max-width: 640px) {
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context {
    position: sticky;
    top: 0;
    z-index: var(--fr-z-sticky);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: color-mix(in oklch, var(--fr-color-surface), transparent 4%);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
            backdrop-filter: saturate(140%) blur(8px);
  }
  /* Single-row layout: back-arrow, presenter+event collapsed into a strip */
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__back {
    border-bottom: 0;
    padding: var(--fr-space-3) var(--fr-space-4);
    background: transparent;
    flex-shrink: 0;
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__back-label {
    display: none;             /* show just the arrow on phone */
  }
  /* Stack rows compactly */
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event {
    padding: var(--fr-space-3) var(--fr-space-4);
    gap: var(--fr-space-3);
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--fr-radius-sm);
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event-title {
    font-size: var(--fr-text-sm);
    -webkit-line-clamp: 1;
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__event-when {
    font-size: var(--fr-text-xs);
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__presenter {
    padding: var(--fr-space-3) var(--fr-space-4);
    border-top: 1px solid var(--fr-color-border);
  }
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-context__steps {
    padding: var(--fr-space-2) var(--fr-space-4);
    font-size: 0.7rem;
  }
}

/* ============================================================
   Step header — H1 carries the step's question.
   Eyebrow shows what step / what event for orientation.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-step {
  margin-bottom: var(--fr-space-5);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-step__eyebrow {
  font-size: var(--fr-text-xs);
  letter-spacing: var(--fr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink-subtle);
  margin-bottom: var(--fr-space-2);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-step__question {
  font-size: clamp(var(--fr-text-xl), 2.5vw + 0.5rem, var(--fr-text-2xl));
  letter-spacing: -0.02em;
  line-height: var(--fr-leading-tight);
  margin: 0;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-register-step__lead {
  margin-top: var(--fr-space-3);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-normal);
  max-width: 50ch;
}

@media (max-width: 640px) {
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-register-step {
    padding-top: var(--fr-space-6);
    margin-bottom: var(--fr-space-4);
  }
}

/* ============================================================
   Form card — slimmer than the default <fr-card> chrome.
   The H1 lives above the card, so we don't want a heavy header.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-card {
  /* nothing — keep default visual */
}

/* Form actions — primary + back-link pair */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-space-3) var(--fr-space-5);
  margin-top: var(--fr-space-6);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form__actions .fr-btn--text {
  /* Secondary action ("Back to event") sits at lower weight */
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 640px) {
  /* On phone, the primary CTA lives in the sticky bottom bar.
     Hide the in-form actions to avoid a duplicate. */
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-form__actions {
    display: none;
  }
}

/* ============================================================
   Radio-card pattern — promoted from public-flow.css and aligned
   with the event page's instance/pricing rows. Used for both the
   RegistrantKind step (two options) and PriceCategory step.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-3);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio-group > legend {
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  margin-bottom: var(--fr-space-2);
  padding: 0;
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4) var(--fr-space-5);
  border: 1.5px solid var(--fr-color-border);
  border-radius: var(--fr-radius-md);
  background: var(--fr-color-surface);
  cursor: pointer;
  transition:
    border-color var(--fr-duration-base) var(--fr-ease),
    box-shadow   var(--fr-duration-base) var(--fr-ease),
    background   var(--fr-duration-base) var(--fr-ease);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card:hover {
  border-color: var(--fr-color-ink-muted);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card:has(input:focus-visible) {
  border-color: var(--fr-color-primary);
  box-shadow: var(--fr-shadow-focus);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card:has(input:checked) {
  border-color: var(--fr-color-primary);
  background: var(--fr-color-primary-soft);
}

/* Native radio: keep it real but draw our own circle alongside */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card input[type='radio'] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  margin: 0.2rem 0 0 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--fr-radius-pill);
  border: 2px solid var(--fr-color-border-strong);
  background: var(--fr-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--fr-duration-base) var(--fr-ease);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card input[type='radio']::after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-primary);
  transform: scale(0);
  transition: transform var(--fr-duration-base) var(--fr-ease);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card input[type='radio']:checked {
  border-color: var(--fr-color-primary);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio--card input[type='radio']:checked::after {
  transform: scale(1);
}

/* Radio body — heading + price + eligibility */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__body {
  flex: 1 1 auto;
  min-width: 0;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fr-space-3);
  flex-wrap: wrap;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__name {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__price {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  white-space: nowrap;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__eligibility,
:is(body.fr-public-register, body.fr-public-sponsor) .fr-radio__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-snug);
}

/* ============================================================
   Confirm step — summary list and totals strip.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-account {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  margin-bottom: var(--fr-space-5);
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary {
  margin: 0 0 var(--fr-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) 0;
  border-top: 1px solid var(--fr-color-border);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary > div:first-child {
  border-top: 0;
  padding-top: 0;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary > div > dt {
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  margin: 0;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary > div > dd {
  margin: 0;
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary--notes {
  grid-template-columns: minmax(0, 1fr) !important;
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-summary--notes > dd {
  text-align: left !important;
  font-weight: var(--fr-weight-regular) !important;
  color: var(--fr-color-ink-muted) !important;
  margin-top: 2px !important;
  white-space: pre-wrap;
}

/* — Totals strip — the unmissable bottom line — */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fr-space-4);
  padding: var(--fr-space-4) var(--fr-space-5);
  background: var(--fr-color-primary-soft);
  border-radius: var(--fr-radius-md);
  margin-bottom: var(--fr-space-6);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-total__label {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-total__amount {
  font-size: var(--fr-text-2xl);
  font-weight: var(--fr-weight-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-total--free {
  background: var(--fr-color-success-soft);
}

/* ============================================================
   Terms — the readable callout for event-specific terms.
   Tighter than the legacy .fr-prose block.
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-confirm-terms {
  margin: 0 0 var(--fr-space-4);
  padding: var(--fr-space-4) var(--fr-space-5);
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-md);
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
}

/* Checkbox row — promoted to a self-contained pattern.
   The view-models use <input type="checkbox"> + <label>, so we
   target raw markup rather than a tag-helper class. */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) 0;
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-snug);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox + .fr-form-checkbox {
  border-top: 1px solid var(--fr-color-border);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox input[type='checkbox'] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  margin: 0.15rem 0 0 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--fr-radius-xs);
  border: 1.5px solid var(--fr-color-border-strong);
  background: var(--fr-color-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--fr-duration-base) var(--fr-ease),
    background   var(--fr-duration-base) var(--fr-ease);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox input[type='checkbox']:checked {
  background: var(--fr-color-primary);
  border-color: var(--fr-color-primary);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox input[type='checkbox']:checked::after {
  content: '';
  width: 0.55rem;
  height: 0.35rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0.05rem, -0.05rem);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: var(--fr-shadow-focus);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-form-checkbox label {
  flex: 1 1 auto;
  cursor: pointer;
}

/* ============================================================
   <fr-section> within the form — tighter rhythm
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-card .fr-section + .fr-section {
  margin-top: var(--fr-space-6);
  padding-top: var(--fr-space-5);
  border-top: 1px solid var(--fr-color-border);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-card .fr-section__header {
  margin-bottom: var(--fr-space-3);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-card .fr-section__title {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-semibold);
  letter-spacing: -0.01em;
}

/* Reusable "intro" lead paragraph above a form */
:is(body.fr-public-register, body.fr-public-sponsor) .fr-card__intro {
  font-size: var(--fr-text-base);
  color: var(--fr-color-ink-muted);
  margin-bottom: var(--fr-space-5);
  line-height: var(--fr-leading-normal);
}

/* ============================================================
   Terminal pages — Full / RegistrationReturn
   ============================================================ */

:is(body.fr-public-register, body.fr-public-sponsor) .fr-terminal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--fr-radius-pill);
  margin-bottom: var(--fr-space-4);
  font-size: var(--fr-text-xl);
  font-weight: var(--fr-weight-bold);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-terminal-badge--success {
  background: var(--fr-color-success-soft);
  color: var(--fr-color-success);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-terminal-badge--pending {
  background: var(--fr-color-warning-soft);
  color: var(--fr-color-warning);
}
:is(body.fr-public-register, body.fr-public-sponsor) .fr-terminal-badge--full {
  background: var(--fr-color-danger-soft);
  color: var(--fr-color-danger);
}

:is(body.fr-public-register, body.fr-public-sponsor) .fr-terminal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-3);
  margin-top: var(--fr-space-5);
}

/* ============================================================
   Sticky mobile CTA bar overrides — register flow has different
   button-density needs to the event page. Reuses the shared
   .fr-cta-bar primitive shipped last round.
   ============================================================ */

@media (max-width: 640px) {
  :is(body.fr-public-register, body.fr-public-sponsor) .fr-cta-bar .fr-btn--text {
    flex: 0 0 auto;
  }
}