/* Voucher: a gift voucher as a page — what is left on it large, the code to
   redeem in a slot that reads well aloud and on paper, and a personal note */
.voucher__balance {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);

  strong {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
  }

  span {
    color: var(--color-muted);
    font-size: var(--step--1);
  }
}

.voucher__code {
  background: var(--color-surface-2);
  border: var(--border-width) dashed var(--color-subtle);
  border-radius: var(--radius-m);
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  overflow-wrap: anywhere;
  padding: var(--space-xs) var(--space-s);
  text-align: center;
}

.voucher__message {
  border-inline-start: var(--space-3xs) solid var(--color-accent);
  color: var(--color-text);
  font-style: italic;
  padding-inline-start: var(--space-s);
}

/* The product's picture above its name on the order form */
.voucher__picture {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}