/* =====================================================
   Digi Credit Cards — premium card designs (pure HTML/CSS, no images)
   Used by the website, the customer portal and the admin panel.
   Markup comes from cards.js (pcCardHTML) or includes/bootstrap.php (pc_card_html).
   Everything is sized in cqw (% of the card's width), so a card looks the same at any size.
   Reference size 856 × 540 (ratio 1.586).
   ===================================================== */
.pc-card{
  --pc-bg:#111; --pc-ink:#fff; --pc-acc:linear-gradient(90deg,#fff,#ddd); --pc-mono-ink:#111;
  --pc-pattern:none; --pc-pattern-op:1;
  position:relative; container-type:inline-size; aspect-ratio:856 / 540 !important; width:100%;
  border-radius:3.97% / 6.3% !important; overflow:hidden; isolation:isolate;
  padding:0 !important; display:block !important; color:var(--pc-ink);
  background:var(--pc-bg); font-family:"Inter","Plus Jakarta Sans",system-ui,sans-serif;
  box-shadow:0 18px 40px rgba(10,10,20,.28),inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-font-smoothing:antialiased;
}
.pc-card *{box-sizing:border-box}
.pc-card .pc-pattern,.pc-card .pc-sheen{position:absolute;inset:0;pointer-events:none}
.pc-card .pc-pattern{background:var(--pc-pattern);background-size:100% 100%;opacity:var(--pc-pattern-op);z-index:0}
.pc-card .pc-sheen{z-index:1;background:
  linear-gradient(115deg,transparent 30%,rgba(255,255,255,.17) 47%,rgba(255,255,255,.05) 55%,transparent 68%),
  radial-gradient(circle at 6% 0%,rgba(255,255,255,.3),transparent 46%)}
.pc-card .pc-top,.pc-card .pc-mid,.pc-card .pc-num,.pc-card .pc-bottom,.pc-card .pc-rupay{position:absolute;z-index:2}

/* logo + tier */
.pc-card .pc-top{top:8.1%;left:5.6%;right:5.6%;display:flex;justify-content:space-between;align-items:flex-start}
.pc-card .pc-logo{display:flex;align-items:center;gap:1.8cqw}
.pc-card .pc-mono{width:7cqw;height:7cqw;border-radius:1.7cqw;display:grid;place-items:center;background:var(--pc-acc);color:var(--pc-mono-ink);
  font:700 4.3cqw/1 "Poppins","Plus Jakarta Sans",sans-serif;box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.35),0 .4cqw 1.2cqw rgba(0,0,0,.18)}
.pc-card .pc-word{display:grid;gap:.5cqw}
.pc-card .pc-word b{font:700 3.45cqw/1 "Poppins","Plus Jakarta Sans",sans-serif;letter-spacing:-.01em;color:var(--pc-ink);white-space:nowrap}
.pc-card .pc-word em,.pc-card .pc-tier,.pc-card .pc-rupay b{font-style:normal;background:var(--pc-acc);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-card .pc-word small{font:600 1.22cqw/1 "Inter",sans-serif;letter-spacing:.32em;opacity:.78}
.pc-card .pc-tier{font:700 2.05cqw/1 "Inter",sans-serif;letter-spacing:.38em;margin-top:1.1cqw;margin-right:-.38em}
.pc-card .pc-tier::after{content:var(--pc-tier-text,"")}

/* chip + contactless */
.pc-card .pc-mid{top:35.5%;left:5.6%;display:flex;align-items:center;gap:2.6cqw}
.pc-card .pc-chip{position:relative;width:10.05cqw;height:7.5cqw;border-radius:1.4cqw;background:linear-gradient(135deg,#FBE9A6 0%,#D4A94A 50%,#F6DC8A 100%);
  border:.16cqw solid #9C7A2C;box-shadow:inset 0 0 .8cqw rgba(255,255,255,.35)}
.pc-card .pc-chip::before{content:"";position:absolute;inset:22% 30%;border:.14cqw solid rgba(156,122,44,.75);border-radius:.6cqw}
.pc-card .pc-chip::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:.14cqw solid rgba(156,122,44,.75)}
.pc-card .pc-nfc{width:4.6cqw;height:4.6cqw;color:var(--pc-ink);opacity:.85}
.pc-card .pc-nfc svg{width:100%;height:100%;display:block}

/* number */
.pc-card .pc-num{top:57%;left:5.6%;font:500 4.35cqw/1 "Inter",sans-serif;letter-spacing:.16em;white-space:nowrap;text-shadow:0 .15cqw .3cqw rgba(0,0,0,.18)}

/* holder / valid thru */
.pc-card .pc-bottom{left:5.6%;bottom:8.2%;display:flex;gap:6cqw;align-items:flex-end}
.pc-card .pc-bottom small{display:block;font:600 1.2cqw/1 "Inter",sans-serif;letter-spacing:.24em;opacity:.72;margin-bottom:1cqw}
.pc-card .pc-bottom span{display:block;font:600 2.45cqw/1.1 "Inter",sans-serif;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-card .pc-holder span{max-width:38cqw}

/* RuPay */
.pc-card .pc-rupay{right:5.6%;bottom:6.8%;text-align:right;display:grid;justify-items:end;gap:.4cqw}
.pc-card .pc-rupay b{font:italic 800 4.9cqw/1 "Poppins","Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;padding-right:.4cqw}
.pc-card .pc-rupay small{font:700 1.2cqw/1 "Inter",sans-serif;letter-spacing:.42em;opacity:.8;margin-right:-.42em}

/* ===================== 12 designs ===================== */
/* 01 Obsidian Gold — Signature */
.pc-obsidian{--pc-bg:linear-gradient(135deg,#0B0B0D 0%,#1C1C22 45%,#0A0A0C 100%);--pc-ink:#F3E3B5;
  --pc-acc:linear-gradient(100deg,#F7E7B4 0%,#C9A24A 38%,#FFF1C1 68%,#A87F2E 100%);--pc-mono-ink:#14110A;--pc-tier-text:"SIGNATURE";
  --pc-pattern:repeating-linear-gradient(135deg,rgba(243,227,181,.06) 0 .14cqw,transparent .14cqw 1.6cqw)}
/* 02 Royal Sapphire — Platinum */
.pc-sapphire{--pc-bg:linear-gradient(135deg,#0A1A5C 0%,#1E3FAE 50%,#5B2BBF 100%);--pc-ink:#FFFFFF;
  --pc-acc:linear-gradient(100deg,#E6ECFF 0%,#9FB4FF 50%,#FFFFFF 100%);--pc-mono-ink:#132A82;--pc-tier-text:"PLATINUM";
  --pc-pattern:var(--pc-waves)}
/* 03 Rose Gold — Select */
.pc-rosegold{--pc-bg:linear-gradient(135deg,#F6D3C4 0%,#E3A48D 45%,#B9705C 100%);--pc-ink:#3A1F18;
  --pc-acc:linear-gradient(100deg,#5A2F24 0%,#8C4C3C 50%,#5A2F24 100%);--pc-mono-ink:#F6D3C4;--pc-tier-text:"SELECT";
  --pc-pattern:repeating-radial-gradient(circle at 100% 0%,rgba(58,31,24,.08) 0 .2cqw,transparent .2cqw 3.2cqw)}
/* 04 Emerald Luxe — Prestige */
.pc-emerald{--pc-bg:linear-gradient(135deg,#022B22 0%,#06624C 55%,#0B8F6E 100%);--pc-ink:#E9F7EF;
  --pc-acc:linear-gradient(100deg,#F7E7B4 0%,#C9A24A 50%,#FFF1C1 100%);--pc-mono-ink:#033A2D;--pc-tier-text:"PRESTIGE";
  --pc-pattern:var(--pc-mandala)}
/* 05 Aurora Holo — Infinite */
.pc-aurora{--pc-bg:linear-gradient(120deg,#7F5CFF 0%,#3DD6F5 30%,#A7F3D0 55%,#FF8FD8 80%,#FFD27A 100%);--pc-ink:#14112B;
  --pc-acc:linear-gradient(100deg,#14112B 0%,#3B2F7A 100%);--pc-mono-ink:#FFFFFF;--pc-tier-text:"INFINITE";
  --pc-pattern:var(--pc-circles)}
.pc-aurora .pc-sheen{background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.32) 47%,rgba(255,255,255,.08) 56%,transparent 70%),radial-gradient(circle at 6% 0%,rgba(255,255,255,.4),transparent 46%)}
/* 06 Saffron Sunset — Classic */
.pc-sunset{--pc-bg:linear-gradient(135deg,#FF9933 0%,#FF5E62 50%,#C2185B 100%);--pc-ink:#FFFFFF;
  --pc-acc:linear-gradient(100deg,#FFFFFF 0%,#FFE1C4 100%);--pc-mono-ink:#C8344F;--pc-tier-text:"CLASSIC";
  --pc-pattern:var(--pc-waves)}
/* 07 Titanium Platinum — Platinum */
.pc-titanium{--pc-bg:linear-gradient(135deg,#E9ECEF 0%,#B8BEC6 35%,#F5F7FA 55%,#9AA1AA 100%);--pc-ink:#1D2329;
  --pc-acc:linear-gradient(100deg,#1D2329 0%,#4A535D 100%);--pc-mono-ink:#F5F7FA;--pc-tier-text:"PLATINUM";
  --pc-pattern:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 .12cqw,transparent .12cqw .3cqw,rgba(255,255,255,.05) .3cqw .42cqw,transparent .42cqw .6cqw)}
/* 08 Midnight Neon — Select */
.pc-neon{--pc-bg:linear-gradient(135deg,#0D0221 0%,#2A0A5E 55%,#5C0F8B 100%);--pc-ink:#FFFFFF;
  --pc-acc:linear-gradient(90deg,#00F0FF 0%,#FF2BD6 100%);--pc-mono-ink:#0D0221;--pc-tier-text:"SELECT";
  --pc-pattern:var(--pc-grid)}
.pc-neon .pc-word em,.pc-neon .pc-tier,.pc-neon .pc-rupay b{filter:drop-shadow(0 0 .6cqw rgba(0,240,255,.45))}
/* 09 Ocean Teal — Classic */
.pc-ocean{--pc-bg:linear-gradient(135deg,#003B5C 0%,#00799E 50%,#00C2C7 100%);--pc-ink:#FFFFFF;
  --pc-acc:linear-gradient(100deg,#E0FBFF 0%,#FFFFFF 100%);--pc-mono-ink:#00577A;--pc-tier-text:"CLASSIC";
  --pc-pattern:var(--pc-waves)}
/* 10 Crimson Noir — Signature */
.pc-crimson{--pc-bg:linear-gradient(135deg,#120204 0%,#4A0710 50%,#8F0F1F 100%);--pc-ink:#FFE9E9;
  --pc-acc:linear-gradient(100deg,#F7E7B4 0%,#C9A24A 50%,#FFF1C1 100%);--pc-mono-ink:#2A0308;--pc-tier-text:"SIGNATURE";
  --pc-pattern:repeating-linear-gradient(135deg,rgba(255,233,233,.06) 0 .14cqw,transparent .14cqw 1.6cqw)}
/* 11 Bharat Edition — Bharat */
.pc-bharat{--pc-bg:linear-gradient(160deg,#FF9933 0%,#FFD8A8 30%,#FDFDFD 50%,#C8F0CF 70%,#138808 100%);--pc-ink:#0B2A5B;
  --pc-acc:linear-gradient(100deg,#0B2A5B 0%,#1F4FA3 100%);--pc-mono-ink:#FFFFFF;--pc-tier-text:"BHARAT";
  --pc-pattern:var(--pc-chakra)}
/* 12 Pearl White — Prestige */
.pc-pearl{--pc-bg:linear-gradient(135deg,#FFFFFF 0%,#F1EFE9 50%,#E4DFD3 100%);--pc-ink:#2A2620;
  --pc-acc:linear-gradient(100deg,#8A6420 0%,#C9A24A 50%,#6E4E14 100%);--pc-mono-ink:#FFFDF8;--pc-tier-text:"PRESTIGE";
  --pc-pattern:repeating-radial-gradient(circle at 100% 0%,rgba(42,38,32,.08) 0 .2cqw,transparent .2cqw 3.2cqw)}
.pc-rosegold,.pc-titanium,.pc-bharat,.pc-pearl,.pc-aurora{box-shadow:0 18px 40px rgba(10,10,20,.22),inset 0 0 0 1px rgba(255,255,255,.5)}

/* SVG patterns (drawn on an 856×540 canvas) */
.pc-card{
  --pc-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 856 540' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M0 300 C140 262 290 346 430 302 S700 258 856 300' stroke-opacity='.08'/%3E%3Cpath d='M0 336 C150 296 300 382 445 336 S720 292 856 338' stroke-opacity='.12'/%3E%3Cpath d='M0 372 C160 330 310 420 460 372 S735 326 856 376' stroke-opacity='.2'/%3E%3Cpath d='M0 408 C170 366 320 456 475 408 S750 362 856 412' stroke-opacity='.15'/%3E%3Cpath d='M0 444 C180 402 330 492 490 444 S765 398 856 448' stroke-opacity='.1'/%3E%3Cpath d='M0 480 C190 438 340 528 505 480 S780 434 856 484' stroke-opacity='.06'/%3E%3Cpath d='M0 516 C200 474 350 564 520 516 S795 470 856 520' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
  --pc-mandala:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 856 540' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23E9F7EF' stroke-opacity='.07' stroke-width='1.6' transform='translate(640 270)'%3E%3Cellipse rx='190' ry='62'/%3E%3Cellipse rx='190' ry='62' transform='rotate(15)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(30)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(45)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(60)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(75)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(90)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(105)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(120)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(135)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(150)'/%3E%3Cellipse rx='190' ry='62' transform='rotate(165)'/%3E%3Ccircle r='70'/%3E%3Ccircle r='196'/%3E%3C/g%3E%3C/svg%3E");
  --pc-circles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 856 540' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='2'%3E%3Ccircle cx='60' cy='560' r='190'/%3E%3Ccircle cx='160' cy='600' r='300'/%3E%3Ccircle cx='-40' cy='470' r='360'/%3E%3Ccircle cx='300' cy='640' r='420'/%3E%3Ccircle cx='90' cy='520' r='520'/%3E%3C/g%3E%3C/svg%3E");
  --pc-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 856 540' preserveAspectRatio='none'%3E%3Cg stroke-width='1.5' fill='none'%3E%3Cg stroke='%2300F0FF' stroke-opacity='.12'%3E%3Cpath d='M428 290 L-500 540M428 290 L-260 540M428 290 L-40 540M428 290 L160 540M428 290 L330 540M428 290 L526 540M428 290 L696 540M428 290 L896 540M428 290 L1116 540M428 290 L1356 540'/%3E%3C/g%3E%3Cg stroke='%23FF2BD6' stroke-opacity='.12'%3E%3Cpath d='M0 300H856M0 314H856M0 332H856M0 356H856M0 388H856M0 430H856M0 482H856M0 540H856'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pc-chakra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 856 540' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230B2A5B' stroke-opacity='.1' stroke-width='3' transform='translate(670 280)'%3E%3Ccircle r='178'/%3E%3Ccircle r='160' stroke-width='1.5'/%3E%3Ccircle r='26'/%3E%3Cpath d='M0-160V160M-160 0H160M-113-113L113 113M-113 113L113-113M-41-155L41 155M41-155L-41 155M-155-41L155 41M-155 41L155-41M-80-139L80 139M80-139L-80 139M-139-80L139 80M-139 80L139-80'/%3E%3C/g%3E%3C/svg%3E");
}

/* Fits inside the existing layouts that size .credit-card */
.credit-card.pc-card{justify-content:initial;flex-direction:initial}
.variant .credit-card.pc-card{margin-bottom:22px}