/* payclient (A4): payment-method picker, pay screen, history card. Uses the core design tokens. */
.payclient-card.payclient-stale { opacity: .72; transition: opacity .2s; }
.payclient-methods { display: grid; gap: 8px; }
.payclient-method {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px;
  border: 1px solid var(--f-border, rgba(190,145,255,.18)); border-radius: var(--f-radius-md, 16px);
  background: var(--f-bg-elevated, #090511); color: var(--f-text, #f8f4ff); text-align: left;
}
.payclient-method.active { border-color: var(--f-primary-bright, #b879ff); box-shadow: 0 0 0 1px var(--f-primary, #8f52ff) inset; }
.payclient-method:disabled { opacity: .5; }
.payclient-method-icon {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px;
  background: var(--f-surface-raised, #160d25); color: var(--f-primary-bright, #b879ff);
}
.payclient-method-icon svg { width: 18px; height: 18px; }
.payclient-method-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.payclient-method-copy b { font-size: 14px; }
.payclient-method-copy small { font-size: 12px; color: var(--f-text-muted, #8d849b); overflow-wrap: anywhere; }
.payclient-method > i { display: grid; place-items: center; width: 20px; height: 20px; opacity: 0; color: var(--f-primary-bright, #b879ff); }
.payclient-method.active > i { opacity: 1; }
.payclient-method > i svg { width: 16px; height: 16px; }
.payclient-note { display: block; margin-top: 10px; font-size: 12px; color: var(--f-text-muted, #8d849b); }

.payclient-summary dl { display: grid; margin: 0; }
.payclient-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.payclient-summary dl > div:last-child { border: 0; }
.payclient-summary dt { font-size: 12px; color: var(--f-text-muted, #8d849b); }
.payclient-summary dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.payclient-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 10px; min-width: 0; }
.payclient-copy > span { font-size: 12px; color: var(--f-text-muted, #8d849b); }
.payclient-copy .copy-field { width: 100%; height: auto; min-height: 44px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* a 48-character TON address wraps inside the card at phone width (the core .copy-field code is nowrap) */
.payclient-copy .copy-field { min-width: 0; max-width: 100%; box-sizing: border-box; }
.payclient-copy .copy-field code { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: 13px; color: var(--f-text, #f8f4ff); overflow-wrap: anywhere; word-break: break-all; text-align: left; }
.payclient-copy .copy-field svg { flex: 0 0 auto; }
.payclient-input {
  width: 100%; min-height: 44px; margin: 10px 0; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--f-border, rgba(190,145,255,.18)); border-radius: 13px;
  background: var(--f-bg-elevated, #090511); color: var(--f-text, #f8f4ff); font-size: 14px;
}
.payclient-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.payclient-upload { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; cursor: pointer; }
.payclient-upload.disabled { opacity: .6; pointer-events: none; }
.payclient-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.payclient-done p { margin: 0 0 8px; }
.payclient-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payclient-history-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.payclient-history-row small { color: var(--f-text-muted, #8d849b); overflow-wrap: anywhere; }
.payclient-history-row button { flex: 0 0 auto; width: auto; padding: 0 16px; }