/* Checkout bar: the dock that rises from the bottom once a ticket is chosen
   (the cart controller adds checkout-bar--visible). Hidden, it slides far
   enough down to take its scrim along; it reserves no room, so the page
   scrolls as far with it as without. */
.checkout-bar {
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0 var(--space-2xs) var(--space-s-m);
  pointer-events: none;
  position: fixed;
  transform: translateY(calc(100% + 4rem));
  transition: transform var(--duration-slow) var(--ease-spring);
  z-index: var(--z-dock);
}

.checkout-bar--visible {
  transform: translateY(0);
}

/* The dock: a step lighter than the cards, ringed, lifted by a deep shadow
   and a glow in the event colour */
.checkout-bar__dock {
  align-items: center;
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  background: color-mix(in oklch, light-dark(var(--color-surface-1), var(--color-surface-2)) 94%, transparent);
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 0 var(--border-width) color-mix(in oklch, var(--color-text) 12%, transparent),
    var(--shadow-raised),
    0 8px 40px -10px color-mix(in oklch, var(--color-accent) 50%, transparent);
  display: flex;
  gap: var(--space-s);
  justify-content: space-between;
  margin-inline: auto;
  max-inline-size: var(--column-narrow);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-m);
  pointer-events: auto;
}

.checkout-bar__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.checkout-bar__label {
  color: var(--color-muted);
  font-size: var(--step--2);
}

.checkout-bar__amount {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
}

/* While page content scrolls beneath the dock, a scrim in the page colour
   fades it out; the scrim gives way as the footer comes in, so the footer's
   last line stays readable. Browsers without scroll-driven animations go
   without the scrim. */
@supports (animation-timeline: view()) {
  body:has(.checkout-bar) {
    timeline-scope: --site-footer;
  }

  body > .site-footer {
    view-timeline: --site-footer block;
  }

  .checkout-bar::before {
    animation: checkout-bar-scrim-out linear both;
    animation-range: entry 0 entry 8rem;
    animation-timeline: --site-footer;
    background: linear-gradient(to top, var(--color-surface-0) 20%, color-mix(in oklch, var(--color-surface-0) 75%, transparent) 55%, transparent);
    block-size: 8rem;
    content: "";
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
}

@keyframes checkout-bar-scrim-out {
  to {
    opacity: 0;
  }
}