/* Theme 2026: each card issuer gets its own card design (the prototype draws them all with one template).
   lib/t26-site.ts adds data-iss (issuer) and data-net (visa | mastercard) to every .tc-vis. Original designs
   in each bank's colours (--c1, --c2 from the page), not copies of the banks' real card artwork. */
.tc-vis{--sh:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,0) 55%);--base:linear-gradient(135deg,var(--c1),var(--c2))}

/* Network name, bottom right (plain text) */
.tc-vis[data-net]::before{position:absolute;right:7%;bottom:7%;z-index:2;font-weight:800;line-height:1;color:#fff;opacity:.92}
.tc-vis[data-net=visa]::before{content:"VISA";font-style:italic;font-size:calc(var(--w) * .1);letter-spacing:.02em}
.tc-vis[data-net=mastercard]::before{content:"";width:calc(var(--w) * .2);height:calc(var(--w) * .12);
  background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.95) 0 28%,transparent 29%),radial-gradient(circle at 70% 50%,rgba(255,255,255,.55) 0 28%,transparent 29%)}
.tc-vis[data-net] small{right:32%}

/* Pattern families */
.tc-vis[data-p=stripes]{background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 7%,transparent 7% 14%),var(--sh),var(--base)}
.tc-vis[data-p=rings]{background:repeating-radial-gradient(circle at 105% -5%,rgba(255,255,255,.09) 0 2.5%,transparent 2.5% 6.5%),var(--sh),var(--base)}
.tc-vis[data-p=metal]{background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.2) 44%,transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(160deg,var(--c2),var(--c1))}
.tc-vis[data-p=dots]{background:radial-gradient(rgba(255,255,255,.16) 22%,transparent 24%) 0 0/calc(var(--w) * .07) calc(var(--w) * .07),var(--sh),var(--base)}
.tc-vis[data-p=split]{background:linear-gradient(118deg,transparent 56%,rgba(255,255,255,.13) 56% 70%,rgba(0,0,0,.14) 70%),var(--base)}
.tc-vis[data-p=grid]{background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--w) * .09) calc(var(--w) * .09),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--w) * .09) calc(var(--w) * .09),var(--sh),var(--base)}
.tc-vis[data-p=band]{background:linear-gradient(90deg,transparent 72%,rgba(0,0,0,.2) 72% 74%,rgba(255,255,255,.1) 74%),var(--base)}
.tc-vis[data-p=topo]{background:repeating-radial-gradient(ellipse at 0 110%,transparent 0 5%,rgba(255,255,255,.1) 5% 5.8%),var(--sh),var(--base)}
.tc-vis[data-p=flat]{background:var(--c2)}
.tc-vis[data-p=glow]{background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.35),transparent 45%),radial-gradient(circle at 10% 100%,rgba(0,0,0,.35),transparent 55%),var(--base)}
.tc-vis[data-p=duo]{background:linear-gradient(180deg,var(--c1) 0 58%,var(--c2) 58%)}
.tc-vis[data-p=waves]{background:radial-gradient(120% 60% at 50% 120%,rgba(255,255,255,.14) 0 40%,transparent 41%),radial-gradient(120% 60% at 30% 135%,rgba(255,255,255,.1) 0 45%,transparent 46%),var(--base)}

/* Shapes (::after): the prototype's ring by default; other shapes or none */
.tc-vis[data-s=none]::after{display:none}
.tc-vis[data-s=disc]::after{right:-18%;top:auto;bottom:-45%;width:70%;height:110%;border:0;background:rgba(255,255,255,.1)}
.tc-vis[data-s=bar]::after{right:auto;left:0;top:0;width:4%;height:100%;border:0;border-radius:0;background:rgba(255,255,255,.35)}
.tc-vis[data-s=big]::after{content:attr(data-ini);right:-4%;top:auto;bottom:-22%;width:auto;height:auto;border:0;border-radius:0;font-size:calc(var(--w) * .62);font-weight:800;line-height:1;color:rgba(255,255,255,.1)}

/* Layouts */
.tc-vis[data-l=bottom] b{top:auto;bottom:24%}
.tc-vis[data-l=bottom] i{bottom:auto;top:12%}
.tc-vis[data-l=right] b{text-align:right}
.tc-vis[data-l=right] i{left:auto;right:8%;bottom:auto;top:40%}
.tc-vis[data-l=center] b{top:38%;text-align:center;font-size:calc(var(--w) * .13)}
.tc-vis[data-l=center] i{bottom:auto;top:10%;width:13%;height:15%}
.tc-vis[data-l=low] b{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:calc(var(--w) * .085)}
.tc-vis[data-ink=dark]{color:#14181f}
.tc-vis[data-ink=dark][data-net]::before{color:#14181f}
.tc-vis[data-ink=dark][data-net=mastercard]::before{background:radial-gradient(circle at 30% 50%,rgba(20,24,31,.9) 0 28%,transparent 29%),radial-gradient(circle at 70% 50%,rgba(20,24,31,.5) 0 28%,transparent 29%)}