/* ===============================
   BANK CARD 3D STYLE
   =============================== */

.bank-card-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:60px 20px;
  background:transparent;
  font-family:Arial, sans-serif;
}

/* ===== 3D SCENE ===== */
.bank-scene{
  perspective:1600px;
}

/* ===== CARD ===== */
.bank-card{
  width:360px;
  height:220px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 1.3s cubic-bezier(.22,.61,.36,1);
}

.bank-scene:hover .bank-card{
  transform:rotateY(180deg);
}

/* ===== CARD FACE ===== */
.bank-face{
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:26px;
  backface-visibility:hidden;
  background:linear-gradient(135deg,#0a4fd8,#0b2f6b);
  color:#fff;
  box-shadow:0 18px 45px rgba(10,79,216,.45);
  overflow:hidden;
}

/* ===== AUTO SHINE ===== */
.bank-face::after{
  content:"";
  position:absolute;
  top:-150%;
  left:-80%;
  width:80%;
  height:350%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    rgba(255,255,255,.7),
    rgba(255,255,255,.25),
    transparent
  );
  transform:rotate(25deg);
  pointer-events:none;
  animation:shine 4.5s ease-in-out infinite;
}

/* ===== CHIP + LOGO ROW ===== */
.bank-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* CHIP */
.bank-chip-link{
  width:54px;
  height:40px;
  border-radius:8px;
  background:linear-gradient(135deg,#111,#000);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  z-index:10;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 0 10px rgba(0,0,0,.8);
}

.bank-chip-link img{
  width:85%;
  height:85%;
  object-fit:contain;
  filter:brightness(1.1);
}

/* LOGO */
.bank-logo-link{
  width:90px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.bank-logo-link img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:brightness(1.25);
}

/* ===== FRONT TEXT ===== */
.bank-number{
  margin-top:28px;
  letter-spacing:3px;
  font-size:18px;
}

.bank-name{
  margin-top:14px;
  font-size:13px;
}

.bank-exp{
  position:absolute;
  bottom:26px;
  right:26px;
  font-size:12px;
}

.bank-visa{
  position:absolute;
  bottom:22px;
  left:26px;
  font-weight:bold;
  letter-spacing:2px;
}

/* ===== BACK SIDE ===== */
.bank-back{
  transform:rotateY(180deg);
}

.bank-strip{
  height:42px;
  background:#081c3a;
  margin:-26px -26px 18px;
}

.bank-cvv{
  text-align:right;
  font-size:13px;
}

.bank-info{
  font-size:11px;
  line-height:1.5;
  margin-top:18px;
}

/* ===== BUTTON ===== */
.bank-btn{
  margin-top:28px;
  width:100%;
  padding:14px;
  border-radius:30px;
  border:none;
  background:linear-gradient(135deg,#0a4fd8,#0b2f6b);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* ===== SHINE ANIMATION ===== */
@keyframes shine{
  0%{
    left:-80%;
    opacity:0;
  }
  20%{
    opacity:1;
  }
  60%{
    left:140%;
    opacity:0;
  }
  100%{
    left:140%;
    opacity:0;
  }
}