/* Checkout: the order, who it is for, then payment, in the page's column,
   as wide as the event page's. On a desktop the order and its codes become
   the page sidebar (page-sidebar.css) and the form keeps the column, like
   the event page's tickets and the seat picker's choice. */
.checkout {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--column-content);
}

/* On a desktop the payment (.checkout__pay, the form's last card) docks as
   the sidebar's foot, the pay button bottom right where the event page has
   its way on. It stays in the form, after the fields, so the tab order runs
   from them to paying. The order above ends where it begins: checkout-form
   measures it into --checkout-pay-size. Its heading is for screen readers,
   the foot needing none. */
@media (min-width: 60rem) {
  .checkout__summary.page-sidebar {
    inset-block-end: var(--checkout-pay-size, 0);
  }

  .checkout__summary .page-sidebar__panel {
    padding-block-end: var(--space-m);
  }

  .checkout__pay {
    --card-bg: var(--color-surface-1);
    --card-radius: 0;
    --card-shadow: none;
    --card-space: var(--space-s) var(--space-m) var(--space-m);

    border-block-start: var(--border-width) solid var(--color-subtle);
    border-inline-start: var(--border-width) solid var(--color-subtle);
    inline-size: var(--sidebar-width);
    inset: auto 0 0 auto;
    max-block-size: 75dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    z-index: var(--z-raised);

    & > .card__title {
      block-size: 1px;
      clip-path: inset(50%);
      inline-size: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
  }
}