/* ---------- Cobros (modules/payments.js) ---------- */
.pay-note { padding: 10px 14px; margin-bottom: 16px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--amber); font-size: 13px; }
.pay-connections { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.pay-conn { display: flex; flex-direction: column; gap: 14px; }
.pay-conn-h { display: flex; flex-direction: column; gap: 2px; }
.pay-conn-h strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pay-conn-h span { font-size: 13px; color: var(--text3); }
.pay-conn-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pay-conn-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.pay-conn-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pay-hook { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); }
.pay-hook small { color: var(--text3); font-size: 12px; line-height: 1.45; }
.pay-copy { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pay-copy input { flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); font-size: 12px; height: 32px; }
.btn-like { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text); border: 1px solid var(--border-strong); background: var(--surface); text-decoration: none; }
.btn-like:hover { background: var(--surface-2); color: var(--text); }
.pay-tabs { margin-bottom: 16px; }
.pay-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pay-summary > div { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.pay-summary > div + div { border-left: 1px solid var(--border); }
.pay-summary span { font-size: 13px; color: var(--text2); }
.pay-summary strong { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.pay-summary strong small { font-size: 14px; font-weight: 500; color: var(--text3); margin-left: 3px; letter-spacing: 0; }
.pay-summary strong.warn { color: var(--red); }
.pay-summary em { font-style: normal; font-size: 12.5px; color: var(--text3); }
.pay-bulk { display: flex; gap: 6px; }
.pay-check { width: 34px; }
.pay-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.pay-late { color: var(--red); }
.pay-hint { padding: 10px 20px; font-size: 13px; color: var(--text3); border-top: 1px solid var(--border); }
#payBody > .pay-hint { border: 0; padding: 0 0 12px; }
.pay-linkcard { margin-bottom: 16px; }
.pay-linkcard .card-h { margin-bottom: 10px; }
.pay-checkline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.pay-checkline input { width: 16px; height: 16px; accent-color: var(--accent); }
.pay-public { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-public > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.pay-public > div:first-child span { font-size: 13px; color: var(--text3); }
.pay-public .pay-copy { flex: 1 1 380px; }
.pay-card-h { padding: 16px 20px 12px; margin: 0; }
.pay-row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.pay-title { font-size: 15px; font-weight: 600; }
.pay-note-text { margin: 6px 0 0; color: var(--text3); font-size: 13px; max-width: 62ch; }
.pay-row-days { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
@media (max-width: 640px) {
  .pay-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
  .pay-tabs button { flex: 1 1 auto; }
  .pay-summary { grid-template-columns: 1fr; }
  .pay-summary > div + div { border-left: 0; border-top: 1px solid var(--border); }
}