.npcb3-wrap{display:flex;gap:32px;align-items:flex-start;font-family:Poppins,Arial,Helvetica,sans-serif;padding:18px;background:transparent}
.npcb3-left{flex:1;display:flex;justify-content:center}
.npcb3-right{width:420px}
.npcb3-card-area{perspective:1200px}
.npcb3-card-front-wrap,.npcb3-card-back-wrap{transform-style:preserve-3d;transition:transform .6s ease}
.npcb3-card-front-wrap .npcb-card,.npcb3-card-back-wrap .npcb-card{width:460px;max-width:100%;height:280px;border-radius:18px;padding:24px;box-sizing:border-box}
.npcb3-preview{background:transparent}
.npcb3-tabs{display:flex;gap:8px;margin-bottom:12px}
.npcb3-tab{padding:10px 14px;border-radius:8px;border:1px solid #eef1f5;background:#fff;cursor:pointer;font-weight:600}
.npcb3-tab.active{background:#0b4da2;color:#fff;border-color:#0b4da2}
.npcb3-panel{background:#fff;padding:14px;border-radius:12px;border:1px solid #eef1f5;margin-bottom:12px;box-shadow:0 6px 20px rgba(18,38,63,0.04)}
.npcb3-form-row{margin-bottom:12px}
.npcb3-label{display:block;margin-bottom:8px;color:#6b7280;font-size:13px;font-weight:600}
.npcb3-input-wrap{position:relative}
.npcb3-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e6e9ef;background:#f9fafb;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);transition:box-shadow .18s ease,border-color .18s ease;outline:none;font-family:Poppins,Arial,Helvetica,sans-serif}
.npcb3-input:focus{border-color:#b6d4ff;box-shadow:0 6px 18px rgba(11,77,162,0.06)}
.npcb3-textarea{width:100%;min-height:84px;padding:12px;border-radius:10px;border:1px solid #e6e9ef;background:#fff;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);outline:none;resize:vertical}
.npcb3-textarea:focus{border-color:#b6d4ff;box-shadow:0 6px 18px rgba(11,77,162,0.06)}
.npcb3-small-input{padding:6px 8px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;margin-left:8px;vertical-align:middle}
.npcb3-controls{display:flex;gap:12px;margin-top:8px;align-items:center}
.two-col{display:flex;gap:12px}
.npcb3-metals{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.npcb3-metal{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid #eef1f5;background:#fff;cursor:pointer;min-width:120px;justify-content:space-between}
.npcb3-metal.selected{box-shadow:0 8px 24px rgba(11,77,162,0.06);border-color:#cfe0ff}
.npcb3-metal .swatch{width:28px;height:28px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.06)}
.npcb3-price{margin-top:12px;color:#666}
.npcb3-summary{margin-top:12px;display:flex;justify-content:space-between;align-items:center}
.npcb3-pay{background:#0b4da2;color:#fff;padding:12px 18px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 8px 20px rgba(11,77,162,0.12);font-weight:600}

/* ==== v7 injected styles ==== */

/* ==== v7: Realistic front+back card styling and responsive behavior ==== */

/* Card common settings */
.npcb-card.front, .npcb-card.back {
  --card-max-width: 420px;
  width: min(86vw, var(--card-max-width)) !important;
  max-width: 100% !important;
  margin: 0 auto 14px auto !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  color: #fff !important;
  padding: 18px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative !important;
  background: linear-gradient(135deg,#2b2b2b,#111) !important;
}

/* Real-life card ratio ~1.586 (approx 16:10) */
.npcb-card.front { aspect-ratio: 1.586 / 1 !important; }
.npcb-card.back  { aspect-ratio: 1.586 / 1 !important; }

/* Gloss overlay for metallic shine */
.npcb-card .npcb-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.00) 60%);
  transform: translateX(-120%) rotate(10deg);
  opacity: 0.9;
}

/* shine animation class — play once */
.npcb-card.shine .npcb-gloss {
  animation: npcb-shine 900ms ease-in-out forwards;
}
@keyframes npcb-shine {
  0% { transform: translateX(-120%) rotate(10deg); opacity:0; }
  10% { opacity:0.6; }
  100% { transform: translateX(220%) rotate(10deg); opacity:0; }
}

/* Chip */
.npcb-card .npcb-chip {
  width: 48px; height: 34px; border-radius:6px; background: linear-gradient(180deg,#f3d26b,#d9a32a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25);
  display:block;
}

/* Number, name, valid */
.npcb-card .npcb-number { font-family: "Poppins", sans-serif; font-weight:600; letter-spacing:2px; font-size:16px; margin-top:36%; }
.npcb-card .npcb-valid { font-size:11px; opacity:0.9; margin-top:8px; }
.npcb-card .npcb-name  { font-size:13px; margin-top:8px; opacity:0.95; text-transform:uppercase; font-weight:600; }

/* Back card specifics: mag stripe and signature */
.npcb-card.back .npcb-magstripe { background:#000; height:56px; border-radius:4px; margin-bottom:16px; }
.npcb-card.back .npcb-sig { display:flex; gap:12px; align-items:center; }
.npcb-card.back .npcb-sigbox { background:#fff; height:42px; width:220px; border-radius:3px; border:1px solid rgba(0,0,0,0.06); }

/* Logo on bottom-right */
.npcb-card .npcb-logo { position:absolute; right:18px; bottom:12px; max-width:72px; height:auto; opacity:0.95; }

/* Desktop: keep original layout — front on left area */
@media(min-width: 900px) {
  .npcb3-wrap { display:flex; gap:28px; align-items:flex-start; }
  .npcb3-left { flex:1; }
  .npcb3-right { width:420px; }
  .npcb-card.front, .npcb-card.back { max-width:420px; }
}

/* Mobile responsive: stacked, centered, scaled */
@media(max-width: 899px) {
  .npcb3-wrap { display:flex !important; flex-direction:column; align-items:center; padding:12px; }
  .npcb3-left, .npcb3-right { width:100% !important; }
  .npcb-card.front, .npcb-card.back { width: min(92vw, 320px) !important; max-width:92vw; }
  .npcb-card .npcb-number { font-size: calc(14px + 0.3vw) !important; }
  .npcb-card .npcb-name { font-size: calc(11px + 0.3vw) !important; }
  .npcb-card .npcb-chip { width: calc(36px + 1.4vw); height: calc(26px + 1vw); }
}

/* Metal color helpers (applied by JS to .metal-* classes) */
.metal-default { background: linear-gradient(135deg,#222,#111) !important; }
.metal-gold    { background: linear-gradient(135deg,#d4af37,#b78625) !important; }
.metal-silver  { background: linear-gradient(135deg,#c0c0c0,#9aa0a6) !important; color:#111 !important; }
.metal-rose    { background: linear-gradient(135deg,#b76e79,#9b5560) !important; }

/* ensure gloss element is above card content */
.npcb-card .npcb-gloss { z-index:2; mix-blend-mode:overlay; }
.npcb-card > * { position:relative; z-index:3; }