/* Order summary: what is being bought — the event, the lines, the total and
   the tax beneath it. Only the amount actually paid is set large. */
.order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.order-summary__event {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
}

.order-summary__thumb {
  border-radius: var(--radius-s);
  flex-shrink: 0;
  inline-size: 3.25rem;
}

.order-summary__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--font-display-tracking);
  line-height: var(--leading-snug);
}

.order-summary__lines {
  border-block-start: var(--border-width) solid var(--color-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-start: var(--space-s);
}

.order-summary__line {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  justify-content: space-between;

  &[data-tone="muted"] {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  & > :last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

.order-summary__total {
  align-items: baseline;
  display: flex;
  font-weight: var(--weight-semibold);
  gap: var(--space-xs);
  justify-content: space-between;
}

.order-summary__amount {
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}

/* When a voucher pays part of it, the total steps back for the amount due */
.order-summary__total[data-quiet] {
  font-weight: var(--weight-medium);

  .order-summary__amount {
    font-size: var(--step-0);
    font-weight: var(--weight-medium);
  }
}

.order-summary__fine-print {
  color: var(--color-muted);
  font-size: var(--step--1);
}