/* =====================================================================
   Bank card visuals + 5 card templates (card_template.template_key)
   solid | gradient | glass | pattern | minimal
   متغیرها روی خود المان: --c-from --c-to --c-angle --c-text
   ===================================================================== */

.bank-card {
  --c-from: #1e3a8a; --c-to: #3b82f6; --c-angle: 135deg; --c-text: #ffffff;
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1.586; border-radius: var(--zx-r-lg); overflow: hidden;
  color: var(--c-text); isolation: isolate;
  box-shadow: var(--zc-elev-card);
  user-select: none; -webkit-user-select: none;
  transition: transform var(--zc-dur) var(--zx-ease-out), box-shadow var(--zc-dur) var(--zx-ease-out);
}
.bank-card > .bc-inner { position: absolute; inset: 0; padding: 6.2cqw 6.4cqw 5.4cqw; display: flex; flex-direction: column; z-index: 2; }

.bc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-bank { display: flex; align-items: center; gap: 2.4cqw; min-width: 0; }
.bc-logo { flex: 0 0 auto; width: 9.4cqw; height: 9.4cqw; border-radius: 2.6cqw; display: grid; place-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28); }
.bc-logo svg { width: 64%; height: 64%; }
.bc-bank-name { font-weight: 800; font-size: 4.3cqw; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-bank-en { display: block; font-size: 2.6cqw; font-weight: 500; opacity: .8; direction: ltr; text-align: right; }
.bc-label { font-size: 3.2cqw; font-weight: 700; padding: .6cqw 2.6cqw; border-radius: 99px; background: rgba(255,255,255,.18); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }

.bc-chip { width: 11cqw; height: 8.4cqw; border-radius: 1.8cqw; margin-top: 5cqw; position: relative;
  background: linear-gradient(135deg, #f4d58d 0%, #d4a93f 45%, #f7e3a8 70%, #c5972f 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.bc-chip::before, .bc-chip::after { content: ""; position: absolute; inset: 22% 0; border-top: 1px solid rgba(0,0,0,.22); border-bottom: 1px solid rgba(0,0,0,.22); }
.bc-chip::after { inset: 0 36%; border: 0; border-inline: 1px solid rgba(0,0,0,.22); }
.bc-contactless { position: absolute; top: 25cqw; inset-inline-start: 20cqw; font-size: 5cqw; opacity: .8; transform: rotate(90deg); }

.bc-number { margin-top: auto; direction: ltr; text-align: center; font-weight: 800; font-size: 6.5cqw; letter-spacing: .6cqw; word-spacing: 1.4cqw; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.bc-number.is-ph { opacity: .55; }
.bc-sheba { direction: ltr; text-align: center; font-size: 3.4cqw; font-weight: 600; opacity: .9; margin-top: .6cqw; white-space: nowrap; letter-spacing: .15cqw; }
.bc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 2.6cqw; }
.bc-owner { min-width: 0; }
.bc-owner small { display: block; font-size: 2.7cqw; opacity: .78; line-height: 1.2; }
.bc-owner b { display: block; font-size: 4.2cqw; font-weight: 800; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-flag { font-size: 2.9cqw; font-weight: 800; padding: .6cqw 2.2cqw; border-radius: 99px; background: rgba(255,255,255,.95); color: #1f1f1f; white-space: nowrap; display: inline-flex; align-items: center; gap: 1cqw; }

/* ---------- Template: solid ---------- */
.bank-card.tpl-solid { background: var(--c-from); border-radius: 18px; }
.bank-card.tpl-solid::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(90% 70% at 0% 100%, rgba(255,255,255,.10), transparent 60%); }

/* ---------- Template: gradient ---------- */
.bank-card.tpl-gradient { background: linear-gradient(var(--c-angle), var(--c-from), var(--c-to)); border-radius: 18px; }
.bank-card.tpl-gradient::before { content: ""; position: absolute; z-index: 1; width: 70%; aspect-ratio: 1; border-radius: 50%; inset-inline-end: -22%; top: -40%;
  background: rgba(255,255,255,.10); }
.bank-card.tpl-gradient::after { content: ""; position: absolute; z-index: 1; width: 55%; aspect-ratio: 1; border-radius: 50%; inset-inline-start: -18%; bottom: -45%;
  background: rgba(0,0,0,.08); }

/* ---------- Template: glass ---------- */
.bank-card.tpl-glass { background: linear-gradient(var(--c-angle), var(--c-from), var(--c-to)); border-radius: 20px; }
.bank-card.tpl-glass::before { content: ""; position: absolute; z-index: 0; inset: -20%;
  background:
    radial-gradient(30% 40% at 20% 25%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(35% 45% at 85% 80%, color-mix(in srgb, var(--c-to) 60%, #fff), transparent 70%),
    radial-gradient(25% 35% at 70% 15%, rgba(255,255,255,.35), transparent 70%);
  filter: blur(14px); }
.bank-card.tpl-glass::after { content: ""; position: absolute; z-index: 1; inset: 3.2cqw; border-radius: 16px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.bank-card.tpl-glass > .bc-inner { padding: 8cqw 8.4cqw 7cqw; }

/* ---------- Template: pattern ---------- */
.bank-card.tpl-pattern { background: linear-gradient(var(--c-angle), var(--c-from), var(--c-to)); border-radius: 18px; }
.bank-card.tpl-pattern::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q15 5 30 20 T60 20 T90 20 T120 20' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M0 36 Q15 21 30 36 T60 36 T90 36 T120 36' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 20px; }
.bank-card.tpl-pattern::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.22)); }

/* ---------- Template: minimal ---------- */
.bank-card.tpl-minimal {
  background: var(--zc-surface); color: var(--c-text); border-radius: 14px; box-shadow: var(--zc-elev-2);
  border: 1px solid var(--zc-outline);
}
.bank-card.tpl-minimal::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2.2cqw; z-index: 1; background: linear-gradient(180deg, var(--c-from), var(--c-to)); }
.bank-card.tpl-minimal .bc-logo { background: var(--c-from); border-color: transparent; color: #fff; }
.bank-card.tpl-minimal .bc-label { background: color-mix(in srgb, var(--c-from) 12%, transparent); color: var(--c-from); }
.bank-card.tpl-minimal .bc-number { text-shadow: none; }
.bank-card.tpl-minimal .bc-flag { background: var(--c-from); color: #fff; }
.bank-card.tpl-minimal .bc-chip { opacity: .9; }

/* Dark text variant (for light colors: auto contrast) */
.bank-card.text-dark-mode .bc-logo { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); }
.bank-card.text-dark-mode .bc-label { background: rgba(0,0,0,.08); }
.bank-card.text-dark-mode .bc-number { text-shadow: none; }

/* Mini (for pickers / lists) */
.bank-card.mini { border-radius: 12px; box-shadow: var(--zc-elev-1); }

/* Interactive states */
.card-item { position: relative; }
.card-item .bank-card { cursor: pointer; }
.card-item .bank-card:active { transform: scale(.985); }

/* Template picker */
.tpl-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tpl-option { border: 2px solid transparent; border-radius: var(--zx-r-md); padding: 4px; background: none; cursor: pointer; font: inherit; color: inherit; position: relative; }
.tpl-option[aria-checked="true"] { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.tpl-option:hover { border-color: var(--border-strong); }
.tpl-option .tpl-name { font-size: 11.5px; font-weight: 500; margin-top: 4px; display: block; text-align: center; }
.tpl-option .bank-card { border-radius: var(--zx-r-sm); box-shadow: var(--zc-elev-1); }
.tpl-option .lock-badge { top: 0; inset-inline-end: 0; width: 20px; height: 20px; font-size: 10px; }
@media (max-width: 400px) { .tpl-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Live preview holder in editor */
.card-preview-sticky { position: sticky; top: 0; z-index: 3; padding: 8px 0 14px; background: linear-gradient(var(--zc-bg) 85%, transparent); }
.card-preview-sticky .bank-card { max-width: min(400px, 80vw); margin: 0 auto; }

/* Cards list rows (swipe + reorder) */
.card-item .swipe-row { border-radius: var(--zx-r-lg); background: transparent; overflow: hidden; }
.card-item .swipe-row .swipe-actions { border-radius: var(--zx-r-lg); overflow: hidden; inset-block: 6px; }
.card-item .swipe-row .swipe-actions button { width: 84px; }
.card-item .swipe-content { background: transparent; }
.card-item.lifted { border-radius: var(--zx-r-lg); }
.card-item .card-row-tools .zx-switch { margin-inline-start: 4px; }
.card-meta { font-size: var(--zc-fs-label); color: var(--zc-on-surface-variant); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-meta b { color: var(--zc-on-surface); font-weight: 600; }
.bank-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--zx-r-pill); background: var(--bg-inset); border: 1px solid var(--border-subtle); font-size: 13px; font-weight: 500; }
.bank-chip .dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.bank-card.tpl-glass .bc-number { font-size: 5.9cqw; letter-spacing: .4cqw; }
.bc-number-sheba { font-size: 4.6cqw; letter-spacing: .2cqw; }

/* ---------- Copyable card (public page): copy buttons on the card face ---------- */
.bank-card.is-copyable .bc-chip { margin-top: 3cqw; }
.bc-line { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
.bc-line-main { margin-top: auto; }
.bc-line-sheba { margin-top: 1cqw; }
.bc-line > .bc-number, .bc-line > .bc-sheba { flex: 1 1 auto; min-width: 0; margin-top: 0; overflow: hidden; }
.bank-card.is-copyable .bc-number { font-size: 5.7cqw; letter-spacing: .3cqw; word-spacing: 1cqw; }
.bank-card.is-copyable.tpl-glass .bc-number { font-size: 5.2cqw; letter-spacing: .2cqw; }
.bank-card.is-copyable .bc-number-sheba { font-size: 3.9cqw; letter-spacing: .1cqw; word-spacing: .4cqw; }
.bank-card.is-copyable .bc-sheba { font-size: 3.3cqw; letter-spacing: .05cqw; }

.bc-copy {
  flex: 0 0 auto; position: relative; display: grid; place-items: center;
  width: clamp(24px, 8.6cqw, 40px); height: clamp(24px, 8.6cqw, 40px); padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.2); color: inherit; font-size: clamp(12px, 3.9cqw, 18px);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--zc-dur) var(--zc-ease), transform .12s, border-color var(--zc-dur);
}
.bc-copy::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* larger touch target */
.bc-line-sheba .bc-copy { width: clamp(22px, 7cqw, 32px); height: clamp(22px, 7cqw, 32px); font-size: clamp(11px, 3.2cqw, 15px); }
.bc-copy:hover { background: rgba(255,255,255,.32); }
.bc-copy:active { transform: scale(.9); }
.bc-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: var(--ring) !important; border-radius: 50%; }
.bc-copy.copied { background: #16a34a; border-color: #16a34a; color: #fff; }
.bank-card.text-dark-mode .bc-copy, .bank-card.tpl-minimal .bc-copy { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.16); }
.bank-card.text-dark-mode .bc-copy:hover, .bank-card.tpl-minimal .bc-copy:hover { background: rgba(0,0,0,.12); }
.bank-card.tpl-minimal .bc-copy.copied, .bank-card.text-dark-mode .bc-copy.copied { background: #16a34a; border-color: #16a34a; color: #fff; }