/*
 * Checkout page (checkout.html). Only the tokens of style.css: no colour of its own except the QR code,
 * which stays dark on light (drawn on its canvas) so every scanner reads it.
 */
.co-layout { max-width: 1040px; margin: 0 auto; padding: 16px; display: grid; gap: var(--gap); }
.co-programs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.co-card { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.co-card-title { font-size: 15px; font-weight: 650; color: var(--text); }
.co-option, .co-net, .co-wallet {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; text-align: left; white-space: normal;
}
.co-price { font-weight: 650; color: var(--text); white-space: nowrap; }
.co-networks, .co-wallets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 10px; }
.co-wallet { justify-content: flex-start; }
.co-wallet img { width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto; }
.co-reset { display: grid; gap: 4px; }
.co-state { font-size: 15px; font-weight: 600; color: var(--text); margin: 6px 0 10px; }
.co-state[data-step="ready"] { color: var(--up); }
.co-state[data-step="problem"] { color: var(--down); }
.co-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-big { font-size: 22px; font-weight: 700; color: var(--text); }
.co-modes { gap: 6px; margin: 14px 0 10px; }
.co-mode { margin-top: 6px; }
.co-scan { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.co-qr { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; }
.co-qr-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.co-addr { display: grid; gap: 6px; min-width: 0; }
.co-address { font-size: 14px; overflow-wrap: anywhere; color: var(--text); }
.co-paid { margin-top: 16px; }
.co-paid .btn { justify-self: start; }
@media (max-width: 640px) {
  .co-facts { grid-template-columns: minmax(0, 1fr); }
  .co-scan { grid-template-columns: minmax(0, 1fr); }
  .co-qr { margin: 0 auto; }
  .co-big { font-size: 19px; }
}

/* Inside the trader space frame (space/space.css): the page wears the same surfaces as the other pages of the space. */
.page-space .co-layout { max-width: 1220px; padding: 32px; gap: 18px; }
.page-space .co-layout > .panel { padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); }
.page-space .co-layout > .sp-pagehead { margin-bottom: 4px; }
.page-space .co-card-title { font-size: 16px; letter-spacing: -0.012em; }
.page-space .co-big { letter-spacing: -0.02em; }
@media (max-width: 899px) {
  .page-space .co-layout { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
}