/* =========================================================
   DONATION POPUP
========================================================= */

.popup-card{
  scroll-behavior:smooth;
}

.popup-card{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

.donation-popup{
  position:fixed;
  inset:0;

  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  opacity:0;
  visibility:hidden;

  transition:.35s ease;
}

.donation-popup.active{
  opacity:1;
  visibility:visible;
}

/* =========================================================
   OVERLAY
========================================================= */

.popup-overlay{
  position:absolute;
  inset:0;

  background:rgba(8,15,25,.68);

  backdrop-filter:blur(10px);
}

/* =========================================================
   MODAL
========================================================= */

.popup-card{
  position:relative;

  width:min(920px,92vw);
  max-height:92vh;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    300px;
    
      gap:40px;

  overflow-y:auto;
  overflow-x:hidden;

  border-radius:32px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94),
      rgba(248,251,255,.96)
    );

  border:1px solid rgba(255,255,255,.55);

  backdrop-filter:blur(20px);

  box-shadow:
    0 35px 80px rgba(0,0,0,.25),
    0 10px 30px rgba(0,0,0,.10);

  transform:
    translateY(20px)
    scale(.96);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    opacity .45s ease;

  scrollbar-width:none;
}

.popup-card::-webkit-scrollbar{
  display:none;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.close-popup{
  position:absolute;

  top:20px;
  right:20px;

  width:54px;
  height:54px;

  border:none;
  outline:none;

  cursor:pointer;

  border-radius:50%;

  background:
    rgba(255,255,255,.92);

  color:#111;

  font-size:22px;

  z-index:10;

  transition:.3s ease;

  box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}

.close-popup:hover{
  transform:
    rotate(90deg)
    scale(1.05);
}

/* =========================================================
   LEFT PANEL
========================================================= */

.popup-left{
  position:relative;

  min-width:0;

  padding:60px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  overflow-y:auto;

  background:
    linear-gradient(
      rgba(3,10,20,.60),
      rgba(3,10,20,.74)
    ),
    url("../images/donate4.jpg");

  background-size:cover;
  background-position:center;

  border-radius:32px 0 0 32px;
}

/* =========================================================
   BADGE
========================================================= */

.popup-badge{
  width:fit-content;

  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 22px;

  margin-bottom:32px;

  border-radius:999px;

  background:
    rgba(255,255,255,.10);

  border:
    1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(16px);

  color:#fff;

  font-size:15px;
  font-weight:600;

  box-shadow:
    0 10px 24px rgba(0,0,0,.16);
}

.popup-badge i{
  color:#7fc4ff;
  font-size:16px;
}

/* =========================================================
   TITLE
========================================================= */

.popup-left h3{
  font-size:clamp(32px,4vw,52px);

  line-height:.92;

  font-weight:700;

  letter-spacing:-2px;

  margin-bottom:14px;

  color:#fff;

  max-width:280px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.popup-text{
  font-size:17px;

  line-height:1.7;

  color:rgba(255,255,255,.82);

  max-width:480px;

  margin-bottom:24px;
}

/* =========================================================
   BANK CARD
========================================================= */
.bank-card{
  position:relative;

  width:100%;
  max-width:520px;

  padding:8px 18px;

  border-radius:20px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.05)
    );

  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(1px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.24);
}

/* LIGHT REFLECTION */

.bank-card::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      transparent 40%
    );

  pointer-events:none;
}

/* =========================================================
   ROWS
========================================================= */

.bank-row{
  position:relative;

  display:flex;
  align-items:center;

  gap:4px;

  padding:14px 6px;
}

/* ONLY FIRST ROW HAS LINE */

.bank-row:first-child{
  border-bottom:
    1px solid rgba(255,255,255,.10);
}

/* =========================================================
   ICON BOX
========================================================= */

.bank-icon{
  width:32px;
  height:32px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.05)
    );

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.05),
    0 6px 14px rgba(0,0,0,.16);
}

.bank-icon i{
  font-size:18px;
  color:#d7eeff;
}

/* =========================================================
   TEXT
========================================================= */

.bank-info{
  display:flex;
  flex-direction:column;
}

.bank-label{
  font-size:15px;
  font-weight:500;

  color:
    rgba(255,255,255,.78);
}

.bank-name{
  font-size:20px;
  font-weight:700;

  color:#fff;
}

.account-number{
  font-size:30px;
  font-weight:800;

  letter-spacing:1px;

  color:#58a9ff;

  text-shadow:
    0 0 18px rgba(88,169,255,.45);
}

.account-name{
  font-size:17px;
  font-weight:500;

  color:
    rgba(255,255,255,.86);
}

/* =========================================================
   RIGHT PANEL
========================================================= */

.popup-right{
  padding:24px 20px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #edf5ff 100%
    );
}

/* =========================================================
   QR WRAPPER
========================================================= */

.qris-wrapper{
  width:100%;
  max-width:260px;

  background:#fff;

  border-radius:28px;

  padding:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 14px 30px rgba(0,0,0,.08);
}

.qris-image{
  width:100%;
  max-width:280px;

  display:block;

  border-radius:16px;
}

.scan-text{
  margin-top:22px;

  text-align:center;

  font-size:15px;
  line-height:1.8;

  color:#5c6e82;

  max-width:240px;
}

/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes floatCard{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:768px){

  .popup-card{
    grid-template-columns:1fr;

    width:100%;
    max-width:460px;
  }

  .popup-left{
    padding:38px 28px;

    border-radius:
      36px 36px 0 0;
  }

  .popup-right{
    padding:28px;
  }

  .popup-left h3{
    font-size:48px;
  }

  .popup-text{
    font-size:16px;
    line-height:1.8;
  }

  .account-number{
    font-size:28px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:480px){

  .popup-left{
    padding:30px 22px;
  }

  .popup-left h3{
    font-size:40px;
  }

  .popup-badge{
    padding:12px 18px;

    font-size:13px;
  }

  .popup-text{
    font-size:15px;
  }

  .bank-card{
    padding:16px;

    border-radius:24px;
  }

  .bank-row{
    gap:14px;

    padding:16px 4px;
  }

  .bank-icon{
    width:42px;
    height:42px;
  }

  .bank-name{
    font-size:17px;
  }

  .account-number{
    font-size:24px;
  }

  .account-name{
    font-size:15px;
  }

  .popup-right{
    padding:22px;
  }

  .close-popup{
    width:46px;
    height:46px;

    font-size:18px;

    top:16px;
    right:16px;
  }

  .scan-text{
    font-size:14px;
  }
}