/* Crypto payment panel — additive to checkout-block.css's shared `.bo-*` design tokens
   (pink-bordered selected row, pills, sheet/kv rows, copy buttons already come from there).
   This file only adds what the crypto panel needs on top: the QR + detail-list split, the
   rate-lock countdown colour, and the pill overflow/"+N" behaviour. Shared by the classic
   checkout row, the Checkout Block row and the post-order (order-received) panel. */

.basisorbit-crypto__sheet{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:14px;align-items:center}
@media (max-width:520px){.basisorbit-crypto__sheet{grid-template-columns:1fr}}

.basisorbit-crypto__qr{display:flex;flex-direction:column;align-items:center;gap:8px}
.basisorbit-crypto__qrcode{width:192px;height:192px;border:1px solid var(--hair,#e6e7eb);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.basisorbit-crypto__qrcode svg{width:100%;height:100%}
.basisorbit-crypto__qrcode--pending{background:repeating-linear-gradient(45deg,#fafafb,#fafafb 8px,#f3f3f5 8px,#f3f3f5 16px)}
.basisorbit-crypto__qrcaption{font-size:12px;font-weight:600;color:var(--ink-2,#4b5563)}
.basisorbit-crypto__qrcaption--soft{color:var(--ink-3,#8a919c);font-weight:500}

.basisorbit-crypto__details{display:flex;flex-direction:column}
.basisorbit-crypto__details .bo-kv:first-child{border-top:0}

.basisorbit-crypto__countdown{color:var(--accent,#ff2aa6);font-weight:800;font-variant-numeric:tabular-nums}
.basisorbit-crypto__countdown--expired{color:#b42318}
.basisorbit-crypto__ratelock b{font-weight:800}

/* Pills: overflow ones are hidden until "+N" is clicked (classic checkout, plain DOM toggle —
   the Checkout Block version keeps its own React `expanded` state and never renders this class). */
.basisorbit-crypto__pills .bo-pill--overflow{display:none}
.basisorbit-crypto__pills.basisorbit-crypto__pills--expanded .bo-pill--overflow{display:inline-flex}
.basisorbit-crypto__pills.basisorbit-crypto__pills--expanded .bo-pill--more{display:none}

/* Unselected row: small plain coin dots (no pills/ticker) — hidden once selected, like the other rows. */
.basisorbit-crypto__choice.on .bo-chips--hide-on{display:none}

/* Post-order panel: same card, no outer radio/pills row. */
.basisorbit-crypto--postorder{border:1px solid var(--hair,#e6e7eb);border-radius:14px;padding:18px 20px;margin:18px 0}
.basisorbit-crypto--postorder .basisorbit-crypto__title{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.basisorbit-crypto--postorder .basisorbit-crypto__loading{color:var(--ink-2,#4b5563);font-size:13.5px}

/* 16/09 (owner): the confirmation sentence under the crypto panel stays on ONE line on desktop. */
.bo-checkout .bo-note{font-size:12.5px;line-height:1.55}
/* 17/09 (owner): never wider than the checkout column — the note wraps if it has to, the card never overflows. */
.bo-checkout{max-width:100%;box-sizing:border-box}
.bo-checkout .bo-choice,.bo-checkout .bo-sheet{min-width:0;max-width:100%;box-sizing:border-box}
.bo-checkout .bo-note{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.bo-checkout .bo-kv>span:first-child{white-space:nowrap;flex:0 0 auto;margin-right:12px}
.bo-checkout .bo-kv>b{min-width:0;text-align:right}
@media (min-width:1100px){.bo-checkout .bo-note{letter-spacing:-.01em}}

/* 17/09 (owner): the QR box can overflow narrow mobile/theme columns once the sheet's own padding is added. */
@media (max-width:520px){.basisorbit-crypto__qrcode{width:min(192px,100%);height:auto;aspect-ratio:1}.basisorbit-crypto__sheet{padding:10px}.basisorbit-crypto__details .bo-kv>b{flex-wrap:wrap;justify-content:flex-end;overflow-wrap:anywhere}}

/* 17/09 (owner): the panel adapts to the column that FRAMES it (theme sidebar, bordered wrapper, narrow
   checkout column at desktop width) — a container query on the panel root; the viewport media queries
   above remain the fallback for browsers without container queries. */
.bo-checkout,.basisorbit-crypto--postorder{container-type:inline-size}
@container (max-width:540px){
  .basisorbit-crypto__sheet{grid-template-columns:1fr;padding:10px}
  .basisorbit-crypto__qrcode{width:min(192px,100%);height:auto;aspect-ratio:1}
  .basisorbit-crypto__details .bo-kv>b{flex-wrap:wrap;justify-content:flex-end;overflow-wrap:anywhere}
}