/* Payment panel fixed at the bottom of the screen above the scroll: the total (or the amount line), the consent, both buttons;
   same column as the page. The bottom padding is the larger of its own and the phone's safe area, never their sum.
   No line on top: a fade from transparent to the page color says the page goes on under the panel */

.panel {
  position: fixed;
  z-index: var(--z-panel);
  inset-inline: 0;
  inset-block-end: 0;
  max-inline-size: var(--column);
  margin-inline: auto;
  padding-block: var(--space-sm) max(var(--space-ml), env(safe-area-inset-bottom));
  padding-inline: max(var(--space-ml), env(safe-area-inset-left)) max(var(--space-ml), env(safe-area-inset-right));
  background: var(--color-bg);
  box-sizing: content-box;
}
.panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--fade);
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
/* Total line: «To pay» on the left, the total and «≈ …» on the right; data-state hidden (the amount line stands instead), appearing, settled.
   The numbers count in app.js; here only the appearance: fade in and a short rise */
.total { min-block-size: var(--total-min); line-height: var(--leading-snug); font-variant-numeric: tabular-nums; white-space: nowrap; }
.total[data-state="hidden"] { display: none; }
.total[data-state="appearing"] { animation: total-in var(--dur-appear) var(--ease-out) both; }
.total-label { font-size: var(--size-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.total-amount { font-family: var(--font-display); font-weight: var(--weight-heavy); font-size: var(--size-l); letter-spacing: var(--tracking-snug); }
.total-approx { font-size: var(--size-2xs); color: var(--color-text-muted); }
@keyframes total-in { from { opacity: 0; transform: translateY(var(--space-s)); } }

/* The amount line instead of the total: one small accent line as high as the total, a tap leads into the amount field;
   its tap area reaches into the gaps of the panel, the panel does not grow */
.need { min-block-size: var(--total-min); text-align: center; font-size: var(--size-xs); line-height: var(--leading-snug); }
.need-btn {
  inline-size: 100%;
  padding-block: var(--space-s);
  margin-block: calc(-1 * var(--space-s));
  font-size: inherit;
  font-weight: var(--weight-semibold);
  line-height: inherit;
  color: var(--color-accent);
}

.pay {
  inline-size: 100%;
  min-block-size: var(--control-m);
  border-radius: var(--radius-m);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}
.pay[data-variant="wallet"] { background: var(--color-wallet); color: var(--color-on-wallet); }
.pay[data-variant="card"] { background: var(--color-accent); color: var(--color-on-accent); }
/* Greyed: the payment does not start, the tap leads to what is missing (aria-disabled, not disabled: a disabled button gets no taps) */
.pay[aria-disabled="true"] { background: var(--color-off); color: var(--color-on-off); }
/* The card emulation runs on the button itself: a spinner, the button stays green */
.pay[data-state="loading"] { background: var(--color-accent); color: var(--color-on-accent); cursor: wait; }
.pay .apple-logo { inline-size: var(--size-base); block-size: var(--icon-s); margin-block-start: calc(-1 * var(--space-2xs)); }

.spinner {
  display: none;
  inline-size: var(--icon-s);
  block-size: var(--icon-s);
  border: var(--border) solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin var(--dur-spin) linear infinite;
}
.pay[data-state="loading"] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }