/* ============================================================
   CHECKOUT WIDGET — playground widget-type axis + flow surface
   ------------------------------------------------------------
   Checkout is a distinct widget TYPE (not an exchange mode): a
   single-column, guided multi-screen pay-in flow that renders
   either INLINE on the canvas or inside a MODAL. Driven by
   checkout.js (window.LifiCheckout). Themed automatically via
   [data-palette-canvas] like the swap widget — no per-component
   theming here.

   Tier-3 .ui-checkout-* product primitives + the data-widget-type
   gate that swaps the exchange widget for the Checkout flow.
   See CLAUDE.md → "Checkout widget".
   ============================================================ */

/* ── Widget-type axis — swap .widget-stage ⇄ .checkout-stage ──
   body[data-widget-type] is the sole gate (set by checkout.js,
   default "exchange" — the code-level cold-load fallback). The
   exchange widget keeps running behind display:none; nothing is
   torn down, so switching back is instant. .checkout-stage
   defaults hidden so there's no first-paint flash before JS. */
.checkout-stage { display: none; }
body[data-widget-type="checkout"] .widget-stage   { display: none; }
body[data-widget-type="checkout"] .checkout-stage { display: flex; }

/* Rail sections gate by type: Layout is exchange-only, the Checkout
   section is checkout-only; Widget / Wallet / Theme stay shared. */
body[data-widget-type="checkout"]       .playground-rail__section--exchange { display: none; }
body:not([data-widget-type="checkout"]) .playground-rail__section--checkout { display: none; }

/* ── Checkout stage — centers the flow on the canvas ── */
.checkout-stage {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}

/* Host blocks — inline shows the flow panel; modal shows a launcher.
   body[data-checkout-host] gates (set by checkout.js, default inline).
   Pinned to the 416 column (the centered stage doesn't stretch its
   children, so the inner .ui-card width:100% needs a sized parent). */
.checkout-stage > [data-checkout-host] {
  display: none;
  width: var(--w-7);
  max-width: 100%;
}
body[data-checkout-host="inline"] .checkout-stage > [data-checkout-host="inline"],
body[data-checkout-host="modal"]  .checkout-stage > [data-checkout-host="modal"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Flow panel — a 416px column, host-agnostic ──
   Inline:  .panel.ui-card.ui-checkout  (ui-card → --w-7 width + surface + padding)
   Modal:   .modal.panel.ui-checkout    (matched to the same 416 column) */
.ui-checkout { min-height: 0; }
.modal.ui-checkout { width: 100%; max-width: var(--w-7); }

/* Center the screen-header title on no-back screens too. The shared
   .screen-header centers only when a back button reserves a matching
   left column; Checkout centers throughout (matching the Figma), so on
   a no-back screen we reserve a left spacer equal to the trailing min
   width — the 1fr title column is then symmetrically flanked. The title
   + trailing must be placed EXPLICITLY (cols 2 + 3): with no back
   element, grid auto-placement would drop the title into the empty
   spacer column. Scoped to .ui-checkout (a consumer override, NOT a
   change to shared chrome). */
.ui-checkout .screen-header:not(:has(.screen-header__back)):has(.screen-header__trailing) {
  grid-template-columns: var(--space-40) 1fr minmax(var(--space-40), auto);
}
.ui-checkout .screen-header:not(:has(.screen-header__back)):has(.screen-header__trailing) .screen-header__title    { grid-column: 2; }
.ui-checkout .screen-header:not(:has(.screen-header__back)):has(.screen-header__trailing) .screen-header__trailing { grid-column: 3; }

/* The screen body + the persistent "Powered by LI.FI" footer are
   rendered by checkout.js into the flow panel (the .panel surface +
   padding come from .ui-card / .modal). */
.ui-checkout__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 0;
}
.ui-checkout__powered {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.ui-checkout__powered-mark {
  height: var(--space-16);
  width: auto;
  color: var(--text-primary);
}

/* ── Merchant identity lockup — the partner being paid (config.merchant).
   A quiet centered row at the top of the decision screens; org mark (rounded
   — the entity shape) + name. "Powered by LI.FI" still anchors the footer. ── */
.ui-checkout-merchant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ui-checkout-merchant__label strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ── Modal launcher — the partner-page "open checkout" affordance,
   shown on the canvas when the host is Modal. ── */
.checkout-launcher {
  gap: var(--space-16);
  text-align: center;
  max-width: var(--w-7);
}

/* ── Funding-source screen — the entry chooser ──
   Composed from .list--cards + .list-item--interactive (lead spot-icon ·
   title/desc body · trailing chain stack) + an "or" divider. */
.ui-checkout-funding-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);            /* label hugs its card group */
}
.ui-checkout-funding__label { font-size: var(--text-sm); }

/* Rows span the panel's content width (the Figma insets them only by the
   panel padding); drop the .list--cards group padding. The default
   .list-item tier carries the Figma type (title 16 / desc 14) — the --lg
   tier bumps desc to 16 and wraps the longer labels. A scoped 16px row
   padding restores the Figma's comfortable ~72px row height. */
.ui-checkout .list--cards { padding: 0; }
.ui-checkout .list--cards > .list-item { padding: var(--space-16); }

/* Funding-row lead now uses the promoted .spot-icon--neutral (styles.css);
   the "or" separator now uses the promoted .divider--label. Both were
   Checkout-scoped one-offs before June 2026. */

/* Trailing chain stack — 20px marks (matches the Figma; smaller than the
   --xs 24 tier) so the body keeps room for one-line descriptions. */
.ui-checkout .list-item__trail .avatar-stack { --avatar-size: var(--space-20); }
.ui-checkout-funding__count { color: var(--text-secondary); }

/* ── Select-token — reuses the widget's canonical .ui-token-picker
   (head/.search + .ui-token-list rows + token-list-module). The picker
   normally fills a viewport-capped swap .ui-card; the checkout panel
   isn't capped, so we bound the picker body's scroll height here and
   ensure the picker lays out as a flex column inside .ui-checkout__body. ── */
.ui-checkout .ui-token-picker { display: flex; flex-direction: column; min-height: 0; }
.ui-checkout .ui-token-picker__body { max-height: 50vh; }

/* ── Amount screen — stacked Send/Receive cards + quote details ──
   Single column (no .ui-amount-pair FAB seam / swap arrow). */
.ui-checkout-amounts {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* Details disclosure — chevron flips, rows reveal below the receive card.
   rotate (not transform) so it composes with any button hover. */
.ui-checkout-details-toggle svg { transition: rotate 0.15s ease; }
.ui-checkout-details-toggle.is-open svg { rotate: 180deg; }
.ui-checkout-details { margin-top: var(--space-4); }

/* ── In-progress / completed status block — centered ring/disc + label
   (composes .card for the surface). ── */
.ui-checkout-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}
.ui-checkout-status .spinner { --spinner-size: var(--space-64); }
.ui-checkout-status__label { font-size: var(--text-body); color: var(--text-secondary); }

/* The "watching for deposit" line — inline spinner + label (not a card). */
.ui-checkout-status--inline { flex-direction: row; gap: var(--space-8); }
.ui-checkout-status--inline .spinner { --spinner-size: var(--space-20); }
.ui-checkout-status--inline .ui-checkout-status__label { font-size: var(--text-sm); }

/* ── Deposit-address screen (Transfer Crypto) ── */
.ui-checkout-qr-card {
  display: flex;
  justify-content: center;
  padding: var(--space-20);
  border-radius: var(--card-radius);
  /* A QR must read dark-on-light to scan reliably in BOTH themes —
     so the card is fixed white with dark modules (functional, not
     themed; same spirit as a 1px hairline exception). */
  background: #ffffff;
}
.ui-checkout-qr { position: relative; width: 66%; aspect-ratio: 1 / 1; }
.ui-checkout-qr__code { color: #0b0d12; }
.ui-checkout-qr__code svg { display: block; width: 100%; height: 100%; }
.ui-checkout-qr__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--space-40);
  height: var(--space-40);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: #ffffff;
  box-shadow: 0 0 0 var(--space-4) #ffffff;   /* knockout ring so modules don't crowd the mark */
}
.ui-checkout-qr__logo .avatar { --avatar-size: var(--space-32); }

.ui-checkout-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.ui-checkout-address__text {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
}
.ui-checkout-pay-marks { display: inline-flex; align-items: center; gap: var(--space-8); }
.ui-checkout-pay-marks img { height: var(--space-24); width: auto; display: block; }

/* ════════════════════════════════════════════════════════════
   DEPOSIT WITH CASH (Transak) — the fiat on-ramp method.
   Front spine + back half are LI.FI-themed (canvas-driven); the
   Transak provider sub-modal is a FIXED-brand surface (below).
   ════════════════════════════════════════════════════════════ */

/* ── cash-amount — fiat Send + derived stETH Receive (reuses the .ui-amount-card
   surface; the head carries the asset identity instead of a right-side pill) ── */
.ui-checkout-fiat { display: flex; flex-direction: column; gap: var(--space-12); }
.ui-checkout-fiat__head { display: flex; align-items: center; gap: var(--space-12); }
.ui-checkout-fiat__head .avatar { --avatar-size: var(--space-32); flex: 0 0 auto; }
.ui-checkout-fiat__head .avatar-tandem { flex: 0 0 auto; }
.ui-checkout-fiat__id { display: flex; flex-direction: column; line-height: var(--lh-caption); }
.ui-checkout-fiat__role { font-size: var(--text-caption); color: var(--text-secondary); }
.ui-checkout-fiat__code { font-size: var(--text-body); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ui-checkout-quote-spin { margin-left: auto; display: inline-flex; }
.ui-checkout-quote-spin .spinner { --spinner-size: var(--space-20); }
.ui-checkout-fiat__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.ui-checkout-info { display: inline-flex; vertical-align: middle; color: var(--text-faint); }
.ui-checkout-info svg { width: var(--space-12); height: var(--space-12); }

/* ── In-progress pipeline checklist — neutral-grey .status-row stack (uses the
   shared --success / --active / --pending states). The base .status-row tints
   its bg by tone; the cash checklist neutralises every row so only the icon
   disc carries state (matching the Figma). ── */
.ui-checkout-steps { display: flex; flex-direction: column; gap: var(--space-8); }
.ui-checkout-steps .status-row { background: color-mix(in oklch, var(--text-primary) 4%, transparent); padding: var(--space-12) var(--space-16); }
.ui-checkout-steps .status-row__label { font-size: var(--text-sm); }
.ui-checkout-steps .status-row__actions { display: inline-flex; align-items: center; gap: var(--space-4); }

/* ── Countdown ring (in-progress) — the canonical spinner with the time centered ── */
.ui-checkout-status--compact { gap: var(--space-12); }
.ui-checkout-countdown { position: relative; width: var(--space-72); height: var(--space-72); display: flex; align-items: center; justify-content: center; }
.ui-checkout-countdown .spinner { --spinner-size: var(--space-72); position: absolute; inset: 0; }
.ui-checkout-countdown__time { font-size: var(--text-body); font-weight: var(--fw-semibold); color: var(--text-primary); }

/* ── Received card (completed) ── */
.ui-checkout-received { display: flex; flex-direction: column; gap: var(--space-12); }
.ui-checkout-received__row { display: flex; align-items: center; gap: var(--space-12); }
.ui-checkout-received__body { display: flex; flex-direction: column; }
.ui-checkout-received__amount { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ui-checkout-received__meta { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Deposit-details receipt ── */
.ui-checkout-receipt { display: flex; flex-direction: column; gap: var(--space-16); }
.ui-checkout-receipt__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); }
.ui-checkout-rate { font-size: var(--text-sm); color: var(--text-secondary); }

/* ── Transfer-ID card ── */
.ui-checkout-transfer { display: flex; flex-direction: column; gap: var(--space-12); }
.ui-checkout-transfer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.ui-checkout-transfer__actions { display: inline-flex; align-items: center; gap: var(--space-8); }
.ui-checkout-transfer__id { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-secondary); word-break: break-all; line-height: var(--lh-body); }

/* ── Two-button action group (completed / error / refund footers) ── */
.ui-checkout-actions { display: flex; flex-direction: column; gap: var(--space-8); }
.ui-checkout-actions--row { flex-direction: row; }
.ui-checkout-actions--row > .btn-block { flex: 1; }

/* ════════════════════════════════════════════════════════════
   TRANSAK PROVIDER SUB-MODAL — a FIXED-BRAND surface (theme exception).
   The embedded Transak widget: white surface + Transak blue in BOTH
   themes, representing the third-party iframe. The SECOND documented
   exception to theme-via-canvas after the QR plate — a surface that
   represents an external system wears the external system's identity,
   not the LI.FI theme. render() flags the host data-checkout-provider.
   ════════════════════════════════════════════════════════════ */
.ui-checkout[data-checkout-provider="transak"] {
  --tk-blue: #2563eb;
  --tk-ink: #0b0d12;
  --tk-muted: #6b7280;
  --tk-faint: #9ca3af;
  --tk-field: #f3f4f6;
  --tk-border: #e8eaed;
  background: #ffffff;
  color: var(--tk-ink);
  padding: 0;          /* the Transak chrome owns its own header/body/footer padding */
}
.ui-transak { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; font-family: var(--font-sans); color: var(--tk-ink); }

/* Headers — back+title+gear · plain (centered)+gear · Buy/Sell tabs */
.ui-transak__head { display: grid; grid-template-columns: var(--space-24) 1fr var(--space-24); align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-20); border-bottom: 1px solid var(--tk-border); }
.ui-transak__title { font-size: var(--text-body); font-weight: var(--fw-semibold); text-align: center; color: var(--tk-ink); }
.ui-transak__back, .ui-transak__gear { display: inline-flex; align-items: center; justify-content: center; width: var(--space-24); height: var(--space-24); border: 0; background: transparent; color: var(--tk-muted); cursor: pointer; font-family: var(--font-sans); }
.ui-transak__gear { justify-self: end; }
.ui-transak__back svg, .ui-transak__gear svg { width: var(--space-20); height: var(--space-20); }
.ui-transak__head-spacer { width: var(--space-24); }
.ui-transak__tabs { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--space-20) var(--space-4); }
.ui-transak__tab { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--tk-muted); background: transparent; border: 0; border-radius: var(--space-8); padding: var(--space-4) var(--space-12); cursor: pointer; font-family: var(--font-sans); }
.ui-transak__tab.is-active { color: var(--tk-blue); background: color-mix(in srgb, var(--tk-blue) 10%, transparent); }
.ui-transak__tabs .ui-transak__gear { margin-left: auto; }

/* Body region — shared padding for the middle content of every Transak screen */
.ui-transak__body { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16) var(--space-20); flex: 1 1 auto; min-height: 0; }

/* Footer — pinned, top hairline, Transak button(s) + "Powered by Transak" */
.ui-transak__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-20); border-top: 1px solid var(--tk-border); }
.ui-transak__foot-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.ui-transak__powered { display: flex; align-items: center; justify-content: center; gap: var(--space-4); font-size: var(--text-caption); color: var(--tk-faint); }
.ui-transak__mark { height: var(--space-16); width: auto; }
.ui-transak__btn-pair { display: flex; gap: var(--space-12); }
.ui-transak__btn-pair .ui-transak-btn { flex: 1; }
.ui-transak-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--space-12); background: var(--tk-blue); color: #fff; font-size: var(--text-body); font-weight: var(--fw-semibold); font-family: var(--font-sans); cursor: pointer; }
.ui-transak-btn--ghost { background: color-mix(in srgb, var(--tk-blue) 12%, transparent); color: var(--tk-blue); }

/* Trade card (enter amount) */
.ui-transak-card { border: 1px solid var(--tk-border); border-radius: var(--space-16); padding: var(--space-16); }
.ui-transak-trade { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.ui-transak-trade__col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-transak-trade__label { font-size: var(--text-sm); color: var(--tk-muted); }
.ui-transak-trade__val { font-size: var(--text-h3); font-weight: var(--fw-semibold); color: var(--tk-ink); }
.ui-transak-trade__rule { height: 1px; background: var(--tk-border); margin: var(--space-16) 0; }
.ui-transak-pill { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--r-full); background: var(--tk-field); font-weight: var(--fw-semibold); font-size: var(--text-sm); flex: 0 0 auto; }
.ui-transak-pill .avatar { --avatar-size: var(--space-20); }
.ui-transak-pill svg { width: var(--space-16); height: var(--space-16); color: var(--tk-muted); }
.ui-transak-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); font-size: var(--text-caption); color: var(--tk-muted); }
.ui-transak-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--tk-ink); }
.ui-transak-method { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--space-12); background: var(--tk-field); }
.ui-transak-method__icon { display: inline-flex; color: var(--tk-muted); }
.ui-transak-method__icon svg { width: var(--space-20); height: var(--space-20); }
.ui-transak-method__body { display: flex; flex-direction: column; flex: 1; }
.ui-transak-method__name { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.ui-transak-method__sub { font-size: var(--text-caption); color: var(--tk-muted); }
.ui-transak-method > svg { width: var(--space-16); height: var(--space-16); color: var(--tk-muted); flex: 0 0 auto; }

/* Fields (wallet / confirm / card) */
.ui-transak-field { display: flex; flex-direction: column; gap: var(--space-8); }
.ui-transak-field-row { display: flex; gap: var(--space-12); }
.ui-transak-field-row .ui-transak-field { flex: 1; }
.ui-transak-field__label-row { display: flex; align-items: center; justify-content: space-between; }
.ui-transak-field__label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--tk-ink); }
.ui-transak-tag { font-size: var(--text-caption); color: var(--tk-muted); background: var(--tk-field); border-radius: var(--space-8); padding: var(--space-2) var(--space-8); }
.ui-transak-input { display: flex; align-items: center; gap: var(--space-8); background: var(--tk-field); border-radius: var(--space-12); padding: var(--space-12) var(--space-16); min-height: var(--space-48); }
.ui-transak-input.is-readonly { opacity: .75; }
.ui-transak-input__icon { --avatar-size: var(--space-20); flex: 0 0 auto; }
.ui-transak-input__text { font-size: var(--text-sm); color: var(--tk-ink); }
.ui-transak-input__text.is-placeholder { color: var(--tk-faint); }
.ui-transak-select { display: flex; align-items: center; justify-content: space-between; background: var(--tk-field); border-radius: var(--space-12); padding: var(--space-12) var(--space-16); min-height: var(--space-48); font-size: var(--text-sm); color: var(--tk-ink); }
.ui-transak-select svg { width: var(--space-16); height: var(--space-16); color: var(--tk-muted); }
.ui-transak-note { font-size: var(--text-caption); color: var(--tk-muted); text-align: center; }
.ui-transak-muted { color: var(--tk-muted); }
.ui-transak-link { color: var(--tk-blue); font-size: var(--text-sm); font-weight: var(--fw-semibold); cursor: pointer; }

/* Order list (confirm) */
.ui-transak-order { display: flex; flex-direction: column; gap: var(--space-12); }
.ui-transak-order__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); font-size: var(--text-sm); }
.ui-transak-order__row dt { color: var(--tk-muted); }
.ui-transak-order__row dd { color: var(--tk-ink); white-space: nowrap; }
.ui-transak-order__row--total { padding-top: var(--space-12); border-top: 1px solid var(--tk-border); }
.ui-transak-order__row--total dt, .ui-transak-order__row--total dd { font-weight: var(--fw-bold); color: var(--tk-ink); font-size: var(--text-body); }
.ui-transak-info { display: inline-flex; vertical-align: middle; color: var(--tk-faint); }
.ui-transak-info svg { width: var(--space-12); height: var(--space-12); }

/* Card screen extras */
.ui-transak-billing { background: var(--tk-field); border-radius: var(--space-12); padding: var(--space-16); }
.ui-transak-billing__head { display: flex; align-items: center; justify-content: space-between; }
.ui-transak-billing__addr { font-size: var(--text-sm); color: var(--tk-muted); margin-top: var(--space-8); }
.ui-transak-secure { display: flex; flex-direction: column; gap: var(--space-8); font-size: var(--text-caption); color: var(--tk-muted); }
.ui-transak-secure span { display: flex; align-items: flex-start; gap: var(--space-8); }
.ui-transak-secure svg { width: var(--space-16); height: var(--space-16); flex: 0 0 auto; color: var(--tk-muted); }

/* Payment-status screens (auth / done) */
.ui-transak-status { align-items: center; justify-content: center; text-align: center; gap: var(--space-16); }
.ui-transak-status__clock { color: var(--tk-muted); }
.ui-transak-status__clock svg { width: var(--space-72); height: var(--space-72); }
.ui-transak-status__title { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--tk-ink); }
.ui-transak-status__sub { font-size: var(--text-sm); color: var(--tk-muted); max-width: 34ch; }

/* ── Error / warning / refund states (LI.FI chrome) — centered tone disc +
   heading + description, reusing .ui-checkout-status. ── */
.ui-checkout-status--message { gap: var(--space-12); padding: var(--space-16) 0; }
.ui-checkout-status__title { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ui-checkout-status__desc { font-size: var(--text-sm); color: var(--text-secondary); max-width: 34ch; }
.ui-checkout-refund { display: flex; flex-direction: column; }
.ui-checkout-refund__chip { display: inline-flex; align-items: center; gap: var(--space-4); }
.ui-checkout-refund__chip svg { width: var(--space-12); height: var(--space-12); }