/* ===== TraPay · Bank-accounts page (/bank-accounts) — scoped under .tp-banks ===== */
/* Design-system tokens (trapay-tokens.css): --color-primary #0d3e7e. RTL. */

.tp-banks{ --tpb-primary:#0d3e7e; --tpb-ink:#0f172a; --tpb-muted:#64748b; --tpb-line:#e5e7eb;
  --tpb-card:#ffffff; --tpb-soft:#f8fafc; direction:rtl; }
.dark .tp-banks{ --tpb-ink:#e5e7eb; --tpb-muted:#94a3b8; --tpb-line:#334155;
  --tpb-card:#111827; --tpb-soft:#0f172a; }

.tp-banks-lead{ font-size:1.05rem; line-height:2; color:var(--tpb-muted);
  margin:0 0 2rem; text-align:center; }
.tp-banks-lead strong{ color:var(--tpb-ink); font-weight:700; }

.tp-banks-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px){ .tp-banks-grid{ grid-template-columns:1fr; } }

.tp-bank-card{ background:var(--tpb-card); border:1px solid var(--tpb-line);
  border-radius:18px; padding:1.25rem 1.25rem 1rem; box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.tp-bank-card:hover{ box-shadow:0 12px 28px -12px rgba(13,62,126,.28);
  transform:translateY(-2px); border-color:rgba(13,62,126,.25); }

.tp-bank-head{ display:flex; align-items:center; gap:.75rem;
  padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid var(--tpb-line); }
.tp-bank-logo{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:var(--tpb-soft);
  border:1px solid var(--tpb-line); overflow:hidden; }
.tp-bank-logo svg{ display:block; border-radius:12px; }
.tp-bank-logo-img{ width:32px; height:32px; object-fit:contain; display:block; }
.tp-bank-name{ margin:0; font-size:1.15rem; font-weight:700; color:var(--tpb-ink); }

.tp-bank-rows{ margin:0; display:flex; flex-direction:column; gap:.55rem; }
.tp-bank-row{ display:grid; grid-template-columns:6.5rem 1fr; align-items:center; gap:.5rem; }
.tp-bank-row dt{ font-size:.82rem; color:var(--tpb-muted); font-weight:600; }
.tp-bank-row dd{ margin:0; display:flex; align-items:center; gap:.5rem;
  background:var(--tpb-soft); border:1px solid var(--tpb-line); border-radius:10px;
  padding:.45rem .6rem; min-width:0; }
.tp-num{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--tpb-ink);
  letter-spacing:.02em; min-width:0; }
/* Card/account numbers stay on one line; sheba (long, LTR) may wrap so it's never cut off. */
.tp-bank-row dd .tp-num[dir="ltr"]{ font-size:.86rem; word-break:break-all; }
.tp-bank-row dd:not(:has(.tp-num[dir="ltr"])) .tp-num{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tp-copy{ flex:0 0 auto; width:30px; height:30px; margin-inline-start:auto;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--tpb-line); border-radius:8px; background:var(--tpb-card);
  color:var(--tpb-primary); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.tp-copy:hover{ background:var(--tpb-primary); color:#fff; border-color:var(--tpb-primary); }
.tp-copy:focus-visible{ outline:3px solid rgba(13,62,126,.4); outline-offset:2px; }
.tp-copy::before{ content:""; width:15px; height:15px;
  -webkit-mask:var(--tpb-copy-ic) center/contain no-repeat; mask:var(--tpb-copy-ic) center/contain no-repeat;
  background:currentColor; }
.tp-copy.is-copied{ background:#10b981; color:#fff; border-color:#10b981; }
.tp-copy.is-copied::before{ -webkit-mask:var(--tpb-check-ic) center/contain no-repeat;
  mask:var(--tpb-check-ic) center/contain no-repeat; }
.tp-banks{
  --tpb-copy-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --tpb-check-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.tp-banks-note{ display:flex; align-items:flex-start; gap:.6rem; margin:1.75rem 0 0;
  padding:.9rem 1rem; border-radius:12px; background:rgba(13,62,126,.06);
  border:1px solid rgba(13,62,126,.18); color:var(--tpb-ink); font-size:.9rem; line-height:1.9; }
.dark .tp-banks-note{ background:rgba(96,165,250,.1); border-color:rgba(96,165,250,.3); }
.tp-banks-note-ic{ flex:0 0 auto; width:20px; height:20px; margin-top:.15rem;
  background:var(--tpb-primary);
  -webkit-mask:var(--tpb-info-ic) center/contain no-repeat; mask:var(--tpb-info-ic) center/contain no-repeat; }
.tp-banks{ --tpb-info-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion:reduce){
  .tp-bank-card,.tp-copy{ transition:none; }
  .tp-bank-card:hover{ transform:none; }
}