/* ==========================================================================
   Checkout and order confirmation
   ========================================================================== */

.checkout__title { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.checkout__loading, .checkout__empty { padding-block: var(--space-8) var(--space-9); }
.checkout__empty { display: grid; gap: var(--space-4); justify-items: start; }

.checkout {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-9);
  align-items: start;
}
@media (min-width: 62rem) {
  .checkout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-8); }
  .checkout__summary { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

.checkout__main { display: grid; gap: var(--space-6); }

.checkout__step {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.checkout__step-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
}
.checkout__step-n {
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.checkout__signed-in .checkout__step-title { margin-bottom: var(--space-3); }
.checkout__who { font-size: var(--text-sm); color: var(--ink-muted); }

.linkish {
  border: 0; background: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
  margin-left: var(--space-2);
}

.checkout__account-intro {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-sunken);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}
.tabs__tab {
  flex: 1;
  padding: var(--space-3);
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink-muted);
  cursor: pointer;
}
.tabs__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.checkout__form { display: grid; gap: var(--space-4); }
/* Fields must not stretch to match their tallest sibling. A field carrying a
   hint makes its column taller, and a stretched neighbour absorbs that slack
   into its input, so the two inputs end up different heights and start at
   different points. Aligning to the start keeps every control its natural size
   and every label and input on the same line across the row. */
.field-row {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 34rem) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--three { grid-template-columns: 1.4fr 1.4fr 1fr; }
}
.field__optional { font-weight: 400; color: var(--ink-subtle); }
textarea.input { resize: vertical; min-height: 4.5rem; }

.form-error {
  padding: var(--space-3) var(--space-4);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.checkout__or {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--ink-subtle); font-size: var(--text-sm);
}
.checkout__or::before, .checkout__or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.checkout__google-note { text-align: center; }

.checkout__pay-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--text-sm); color: var(--ink-subtle);
  margin-bottom: var(--space-5);
}
.checkout__pay-note svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex-shrink: 0; margin-top: 0.15em; }

/* --------------------------------------------------------------- summary */

.checkout__summary {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  display: grid;
  gap: var(--space-5);
}
.checkout__summary-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.summary-lines {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-3);
  font-size: var(--text-sm);
}
.summary-lines li { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.summary-lines__name { color: var(--ink-muted); }
.summary-lines__amount { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.summary-code { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.summary-code__row { display: flex; gap: var(--space-2); }
.summary-code__row .input { min-height: 2.5rem; padding-block: var(--space-2); }
.summary-code__row .btn { min-height: 2.5rem; padding-inline: var(--space-4); }
.summary-code__ok { color: var(--accent); }

.summary-reward { padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.checkbox input { margin-top: 0.2em; accent-color: var(--accent); width: 1rem; height: 1rem; }

.summary-figures {
  display: grid; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  margin: 0;
  font-size: var(--text-sm);
}
.summary-figures > div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.summary-figures dt { color: var(--ink-muted); }
.summary-figures dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.summary-figures__total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.summary-figures__total dt { color: var(--ink); font-weight: 600; }
.summary-figures__total dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}
.summary-figures__vat dt, .summary-figures__vat dd { color: var(--ink-subtle); font-size: var(--text-xs); }

.summary-earn {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); color: var(--accent-ink);
  background: var(--accent-soft);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}
/* The sentence is wrapped in a single span deliberately. Left loose, the text
   nodes either side of <strong> become separate anonymous flex items and the
   line breaks into three misaligned columns. */
.summary-earn > span { flex: 1; }
.summary-earn strong { white-space: nowrap; }
.summary-earn svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.2em; }

.summary-back { font-size: var(--text-sm); text-align: center; }

/* ------------------------------------------------------- order confirmation */

.order-page { padding-block: var(--space-7) var(--space-9); display: grid; gap: var(--space-6); }

.order-status { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.order-status h1 { font-size: var(--text-2xl); }
.order-status p { color: var(--ink-muted); max-width: var(--measure-narrow); }
.order-status__icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  font-size: 1.4rem; font-weight: 700;
}
.order-status__icon--ok   { background: var(--accent-soft); color: var(--accent); }
.order-status__icon--warn { background: var(--warn-soft);   color: var(--warn); }
.order-status__icon--bad  { background: var(--danger-soft); color: var(--danger); }

.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.order-card__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
}
.order-card__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
  margin-bottom: var(--space-1);
}
.order-card__head strong { font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink); }
.order-card__address address { font-style: normal; font-size: var(--text-sm); color: var(--ink-muted); }
.order-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }