/* Analytics consent: a short floating bar at the bottom of the page, the
   question and a link on one side, decline and allow on the other, equal in
   weight so declining is as easy as allowing. Where the bar is too narrow for
   both, the answers wrap below the question to its right; a phone stacks the
   bar and puts the two answers side by side. */
.analytics-consent {
  align-items: center;
  background: var(--color-surface-1);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-overlay);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  inline-size: min(calc(100% - 2 * var(--space-s)), 42rem);
  inset: auto auto var(--space-s) 50%;
  padding: var(--space-s) var(--space-m);
  position: fixed;
  translate: -50% 0;
  z-index: var(--z-overlay);

  &[hidden] {
    display: none;
  }

  h2 {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }
}

/* With the checkout dock up, the bar floats above it rather than over it */
body:has(.checkout-bar--visible) .analytics-consent {
  inset-block-end: calc(var(--space-s-m) + 4.25rem + var(--space-xs));
}

/* On a desktop with a sidebar on the window's right (page-sidebar.css, the
   seat picker) the bar centres in the column beside it, clear of the
   sidebar's foot; the dock steps aside there, so the bar keeps to the bottom */
@media (min-width: 60rem) {
  body:has(.page-sidebar, .seat-picker[data-map-choices]) .analytics-consent {
    inline-size: min(calc(100% - var(--sidebar-width) - 2 * var(--space-s)), 42rem);
    inset-block-end: var(--space-s);
    inset-inline-start: calc((100% - var(--sidebar-width)) / 2);
  }
}

.analytics-consent__copy {
  display: flex;
  flex: 1 1 22rem;
  flex-direction: column;
  gap: var(--space-3xs);
  min-inline-size: 0;
}

.analytics-consent__body {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.analytics-consent__link {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.analytics-consent__actions {
  display: flex;
  flex: none;
  gap: var(--space-2xs);
  margin-inline-start: auto;
}

@media (max-width: 40rem) {
  .analytics-consent {
    align-items: stretch;
    flex-direction: column;
    padding: var(--space-s);
  }

  .analytics-consent__copy {
    flex-basis: auto;
  }

  .analytics-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline-start: 0;

    form,
    .button {
      inline-size: 100%;
    }
  }
}

/* What a buyer has decided so far, on the preferences page */
.consent-status {
  align-items: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-m);
  display: flex;
  gap: var(--space-s);
  padding: var(--space-s);
}

.consent-status__dot {
  background: var(--color-muted);
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0.3rem color-mix(in oklch, currentColor 15%, transparent);
  flex: none;
  inline-size: 0.625rem;
}

.consent-status[data-decision="granted"] .consent-status__dot {
  background: var(--color-green);
}

.consent-status[data-decision="denied"] .consent-status__dot {
  background: var(--color-amber);
}