/* ============================================================
   Checkout — stage #017B composition
   A purchase moment, not a form: order summary (what you buy,
   what is at stake — never a promise) beside the payment panel
   (legal agreements → exact total → pay). No fake payment
   brands, no fake security claims; the dev note is honest.
   ============================================================ */

/* ---------- two-panel layout ---------- */
.checkout-grid { display: grid; gap: 16px; }
@media (min-width: 860px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .checkout-summary { position: sticky; top: calc(var(--topbar-h) + 16px); }
}

/* ---------- order summary ---------- */
.checkout-summary { padding: 22px; }
.checkout-summary-title { margin-top: 12px; font-size: 19px; }
.checkout-summary > .muted { margin-top: 6px; }
.summary-rows { margin-top: 16px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; }
.summary-row + .summary-row { border-top: 1px solid var(--line); }
.summary-row.total { font-weight: 800; font-size: 15.5px; }
.summary-row .val { font-variant-numeric: tabular-nums; }
.checkout-perks { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0; }
.checkout-perks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.checkout-perks svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.checkout-summary .tiny { display: block; margin-top: 14px; }

/* ---------- payment panel ---------- */
.checkout-pay {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.pay-total { font-size: 19px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

.checkout-pay .check { align-items: flex-start; }
.checkout-pay .check a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.check-hint {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.check-hint.done { color: var(--ok); }

/* ---------- success ---------- */
.ticket-card {
  margin: 20px 0;
  background: linear-gradient(180deg, rgba(244, 176, 33, 0.12), rgba(244, 176, 33, 0.03));
  border: 1px solid rgba(244, 176, 33, 0.4);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.ticket-card .t-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ticket-card .t-row b { font-variant-numeric: tabular-nums; }
.success-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* quiet auto-redirect hint on the success state */
.success-redirect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.success-redirect .spinner {
  border-color: rgba(244, 176, 33, 0.22);
  border-top-color: var(--gold);
}

/* ---------- responsive ---------- */
@media (min-width: 768px) {
  .success-actions { flex-direction: row; }
  .success-actions .btn { flex: 1; }
}