/*
 * GA4 consent banner — app/views/shared/_analytics_consent.html.erb
 *
 * A sticky slot at the end of each shell's content column, never position: fixed.
 * Sticky keeps its own space in the flow, so the banner floats at the bottom of
 * the viewport while content continues below it, and sits after the last control
 * once the page is scrolled to the end. A fixed banner would permanently cover
 * whatever lands underneath it (a form's submit button, the referrer tab bar).
 *
 * Sits below the referrer tab bar (--z-nav) and toasts (--z-toast) in the stack.
 */

.analytics-consent {
  position: sticky;
  z-index: var(--z-sticky);
}

.analytics-consent__card {
  box-shadow: var(--shadow-lg);
}

.analytics-consent__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.analytics-consent__action {
  flex: 1;
}

@media (min-width: 640px) {
  .analytics-consent__actions {
    flex-direction: row-reverse;
  }
}

/* Business desktop: a card at the bottom-right of the content column. The
   column is stretched to the rail's full height, so margin-top: auto pins it
   to the viewport bottom on short pages too. */
.analytics-consent--business {
  bottom: var(--space-6);
  align-self: flex-end;
  width: 100%;
  max-width: 400px;
  margin-top: auto;
}

/* Referrer mobile shell: inside the phone-width column, clear of the fixed tab
   bar (whose height .referrer-content already pads for). */
.analytics-consent--referrer {
  bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom) + var(--space-3));
  margin-top: var(--space-6);
}

/* .referrer-content has no side padding at phone widths (each page carries its
   own p-4), so the card takes the same 16px gutter itself. */
@media (max-width: 767px) {
  .analytics-consent--referrer {
    margin-inline: var(--space-4);
  }
}

/* The two buttons stay stacked on the phone column even above 640px. */
.analytics-consent--referrer .analytics-consent__actions {
  flex-direction: column;
}

/* Public auth column: bottom of the column, safe-area aware. */
.analytics-consent--public,
.analytics-consent--landing {
  bottom: 0;
  width: 100%;
  margin-top: auto;
  padding-block: var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}

/* The wide public variant has no auth column to sit in, so it borrows that
   column's width and gutter rather than stretching across the landing page. */
.analytics-consent--landing {
  max-width: calc(var(--shell-public-col) + (var(--space-4) * 2));
  margin-inline: auto;
  padding-inline: var(--space-4);
}