/* ============================================================
GoDigiCard V4.6.5 — Mobile Device Template Gallery
============================================================ */
.d465-head{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 18%,rgba(239,189,51,.16),transparent 28%),
    linear-gradient(180deg,#fff,#fbfdff);
}
.d465-head:after{
  content:"YOUR IDENTITY • DIGITAL";
  position:absolute;
  right:20px;
  top:23px;
  color:#d7a51d;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.4px;
  transform:rotate(-5deg);
}
.d465-template-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:-3px 0 14px;
  padding:9px 11px;
  border:1px solid #e2e9f2;
  border-radius:11px;
  background:linear-gradient(90deg,#f7fbff,#fffdf6);
  color:#71839b;
  font-size:7.5px;
}
.d465-template-note b{
  display:inline-grid;
  place-items:center;
  min-width:25px;
  height:22px;
  margin-right:5px;
  border-radius:7px;
  background:#0d55b8;
  color:#fff;
  font-size:8px;
}
.d465-template-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:13px!important;
}
.d465-template{
  min-height:208px!important;
  padding:10px!important;
  overflow:visible!important;
  border:1px solid #dce5ef!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(13,85,184,.045),transparent 28%),
    #fff!important;
  box-shadow:0 8px 20px rgba(20,53,90,.045)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.d465-template:hover{
  transform:translateY(-4px)!important;
  border-color:#b9d3f4!important;
  box-shadow:0 16px 36px rgba(13,60,120,.12)!important;
}
.d465-template.selected{
  padding:9px!important;
  border:2px solid #1473e6!important;
  box-shadow:0 0 0 4px rgba(20,115,230,.09),0 16px 35px rgba(13,60,120,.11)!important;
}
.d465-template .d46-plan-badge{
  right:8px!important;
  top:8px!important;
  padding:5px 8px!important;
  letter-spacing:.45px;
}
.d465-selected-check{
  display:none;
  position:absolute;
  z-index:12;
  left:8px;
  top:8px;
  width:24px;
  height:24px;
  border-radius:50%;
  place-items:center;
  background:#1473e6;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(20,115,230,.25);
}
.d465-template.selected .d465-selected-check{display:grid}
.d465-stage{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:11px;
  align-items:center;
  min-height:185px;
}
.d465-phone{
  position:relative;
  display:block;
  width:90px;
  height:171px;
  padding:5px;
  margin:2px auto;
  border:2px solid #111827;
  border-radius:19px;
  background:#0c1119;
  box-shadow:
    0 11px 20px rgba(2,16,38,.22),
    inset 0 0 0 1px rgba(255,255,255,.11);
}
.d465-phone:before{
  content:"";
  position:absolute;
  right:-4px;
  top:38px;
  width:3px;
  height:28px;
  border-radius:0 4px 4px 0;
  background:#334155;
}
.d465-phone-notch{
  position:absolute;
  z-index:9;
  left:50%;
  top:5px;
  transform:translateX(-50%);
  width:35px;
  height:9px;
  border-radius:0 0 8px 8px;
  background:#05080d;
}
.d465-mini-screen{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:20px 6px 7px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(150deg,var(--ta),var(--tb));
}
.d465-mini-pattern{
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    radial-gradient(circle at 78% 15%,rgba(255,255,255,.32),transparent 20%),
    linear-gradient(132deg,transparent 0 45%,rgba(255,255,255,.14) 45% 52%,transparent 52% 100%);
}
.d465-mini-home{
  position:absolute;
  z-index:2;
  right:7px;
  top:15px;
  font-size:7px;
  color:#ffd86b;
}
.d465-mini-avatar{
  position:relative;
  z-index:2;
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.85);
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#dce8f7);
  color:var(--ta);
  font-size:9px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.d465-mini-name{
  position:relative;
  z-index:2;
  display:block;
  max-width:100%;
  margin-top:6px;
  color:inherit;
  font-size:6.6px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.d465-mini-role{
  position:relative;
  z-index:2;
  display:block;
  max-width:100%;
  margin-top:2px;
  color:inherit;
  font-size:4.8px;
  font-weight:700;
  opacity:.9;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.d465-mini-tag{
  position:relative;
  z-index:2;
  display:block;
  margin-top:4px;
  color:inherit;
  font-size:3.7px;
  opacity:.72;
}
.d465-mini-actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  width:100%;
  margin-top:auto;
}
.d465-mini-actions i{
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(0,0,0,.16);
  color:#fff;
  font-size:5px;
  font-style:normal;
}
.d465-mini-cta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:17px;
  margin-top:5px;
  border-radius:5px;
  background:#ffd25a;
  color:#162c4a;
  font-size:4.5px;
  font-weight:900;
}

/* Individual mobile card visual personalities */
.mini-minimal .d465-mini-screen{
  background:linear-gradient(145deg,#eef1f4,#d6dde5);
  color:#172033;
}
.mini-minimal .d465-mini-home{color:#506070}
.mini-minimal .d465-mini-actions i{background:#344252;color:#fff;border-color:#344252}
.mini-minimal .d465-mini-cta{background:#fff;color:#334155;border:1px solid #c7d0da}

.mini-medical .d465-mini-screen{
  background:
    radial-gradient(circle at 82% 25%,rgba(255,255,255,.42) 0 13%,transparent 14%),
    linear-gradient(145deg,#73e2dc,#109b9e);
}
.mini-medical .d465-mini-cta{background:#fff;color:#087b7f}

.mini-restaurant .d465-mini-screen{
  background:
    radial-gradient(circle at 65% 15%,#f59e0b 0 12%,transparent 13%),
    radial-gradient(circle at 88% 30%,#9a3412 0 13%,transparent 14%),
    linear-gradient(160deg,#150d08,#6f2d12);
}
.mini-restaurant .d465-mini-cta{background:#f1bb50;color:#31180a}

.mini-education .d465-mini-screen{
  background:
    linear-gradient(135deg,#facc15 0 24%,transparent 24%),
    linear-gradient(160deg,#1d4ed8,#60a5fa);
}
.mini-education .d465-mini-cta{background:#fde047;color:#172554}

.mini-retail .d465-mini-screen{
  background:
    linear-gradient(135deg,rgba(255,255,255,.30) 0 20%,transparent 20%),
    linear-gradient(160deg,#fb7185,#db2777);
}
.mini-retail .d465-mini-cta{background:#fff;color:#be185d}

.mini-corporate .d465-mini-screen{background:linear-gradient(145deg,#071a2d,#203c5a)}
.mini-corporate .d465-mini-cta,.mini-luxury .d465-mini-cta{background:#d7ad54;color:#172033}

.mini-gradient .d465-mini-screen{background:linear-gradient(145deg,#6d28d9,#ec4899,#f97316)}
.mini-gradient .d465-mini-cta{background:#fff;color:#7c3aed}

.mini-realestate .d465-mini-screen{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 35%),
    linear-gradient(145deg,#17324d,#9a7a4d);
}
.mini-realestate .d465-mini-pattern{
  background:
    linear-gradient(135deg,transparent 0 55%,rgba(255,255,255,.24) 55% 57%,transparent 57%),
    linear-gradient(45deg,transparent 0 62%,rgba(255,255,255,.18) 62% 64%,transparent 64%);
}
.mini-beauty .d465-mini-screen{background:linear-gradient(145deg,#fbcfe8,#db2777);color:#5b1537}
.mini-beauty .d465-mini-actions i{background:rgba(190,24,93,.72)}
.mini-beauty .d465-mini-cta{background:#fff;color:#be185d}

.mini-legal .d465-mini-screen{background:linear-gradient(145deg,#111c45,#7a5f43)}
.mini-creative .d465-mini-screen{background:linear-gradient(145deg,#7c3aed,#f97316,#ec4899)}
.mini-luxury .d465-mini-screen{background:linear-gradient(145deg,#020202,#342c1b);color:#f3d27a}
.mini-tech .d465-mini-screen{
  background:
    linear-gradient(rgba(6,182,212,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,.08) 1px,transparent 1px),
    linear-gradient(145deg,#06101f,#083344);
  background-size:12px 12px,12px 12px,auto;
}
.mini-tech .d465-mini-cta{background:#22d3ee;color:#082f49}

.mini-photographer .d465-mini-screen{background:linear-gradient(160deg,#090909,#555)}
.mini-fitness .d465-mini-screen{background:linear-gradient(145deg,#111827,#365314)}
.mini-fitness .d465-mini-cta{background:#a3e635;color:#1a2e05}
.mini-traditional .d465-mini-screen{
  background:
    radial-gradient(circle at 20% 20%,rgba(253,186,116,.28) 0 14%,transparent 15%),
    linear-gradient(145deg,#7c2d12,#ea8a32,#7f1d1d);
}
.mini-glass .d465-mini-screen{
  background:
    radial-gradient(circle at 30% 12%,rgba(255,255,255,.40),transparent 20%),
    linear-gradient(145deg,#2563eb,#9333ea);
}
.mini-glass .d465-mini-avatar,
.mini-glass .d465-mini-actions i,
.mini-glass .d465-mini-cta{
  backdrop-filter:blur(5px);
  background:rgba(255,255,255,.22);
  color:#fff;
}
.d465-meta{
  min-width:0;
  text-align:left;
}
.d465-meta strong{
  margin:0 0 3px!important;
  color:#0b2e62!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.d465-meta small{
  min-height:26px;
  margin:0!important;
  color:#7b8da3!important;
  font-size:7.8px!important;
  line-height:1.45!important;
}
.d465-category{
  display:inline-flex;
  margin-top:9px;
  padding:5px 7px;
  border-radius:999px;
  background:#f0f5fb;
  color:#506c8c;
  font-size:6px;
  font-weight:800;
}
.d465-open{
  display:block;
  margin-top:13px;
  color:#1473e6;
  font-size:7px;
  font-weight:900;
  opacity:.76;
}
.d465-template:hover .d465-open{opacity:1}

@media(max-width:1100px){
  .d465-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .d465-head:after{display:none}
  .d465-template-note{align-items:flex-start;flex-direction:column}
  .d465-template-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .d465-template{min-height:196px!important;padding:8px!important}
  .d465-stage{grid-template-columns:1fr;gap:7px;min-height:176px}
  .d465-phone{width:82px;height:151px}
  .d465-meta{text-align:center}
  .d465-meta small,.d465-category,.d465-open{display:none}
  .d465-meta strong{font-size:9px!important}
}
@media(max-width:430px){
  .d465-template-grid{grid-template-columns:1fr!important}
  .d465-template{min-height:188px!important}
  .d465-stage{grid-template-columns:92px 1fr;gap:10px}
  .d465-phone{width:84px;height:157px}
  .d465-meta{text-align:left}
  .d465-meta small,.d465-category,.d465-open{display:block}
}