/* =========================================================
   Karbit Prime - donation.css
   Donation page + leaderboard only
   ========================================================= */

.donation-page{
  display:grid;
  gap:18px;
}

.donation-hero,
.donation-card,
.donation-action-panel,
.donation-form-card,
.leaderboard-card,
.donation-code-box{
  border-radius:28px;
  background:linear-gradient(180deg, rgba(20,29,45,.95), rgba(14,22,34,.92));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.donation-hero{
  padding:24px;
  display:grid;
  gap:10px;
}

.donation-hero h1{
  margin:0;
  font-size:clamp(32px, 5vw, 50px);
  line-height:1.05;
}

.donation-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.donation-code-box{
  padding:22px;
}

.donation-code-copy{
  display:grid;
  gap:16px;
}

.donation-code-copy h2{
  margin:0 0 8px;
  font-size:28px;
}

.donation-code-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.donation-code-value{
  margin-top:14px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:#fff;
  font-size:22px;
  font-weight:900;
  letter-spacing:.04em;
  word-break:break-all;
}

.donation-code-actions{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.donation-code-note{
  margin-top:4px;
  color:#cdd6ef;
  font-size:14px;
  line-height:1.6;
}

.donation-action-panel{
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.donation-action-btn{
  min-height:56px;
  border:none;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
}

button.donation-action-btn{
  appearance:none;
  -webkit-appearance:none;
}

.donation-action-btn.primary{
  background:linear-gradient(90deg,#7d5cff,#a56cff);
}

.donation-action-btn.secondary{
  background:linear-gradient(90deg,#25344f,#1d2940);
}

.leaderboard-card{
  padding:22px;
  display:grid;
  gap:18px;
}

.leaderboard-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}

.leaderboard-head h2{
  margin:0;
  font-size:30px;
}

.leaderboard-head p{
  margin:6px 0 0;
  color:var(--muted);
}

.top3-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.top3-item{
  border-radius:24px;
  padding:20px 16px;
  text-align:center;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(30,41,63,.96), rgba(19,27,42,.96));
}

.top3-item.rank-1{
  background:linear-gradient(180deg, rgba(91,66,16,.95), rgba(53,39,11,.96));
}

.top3-item.rank-2{
  background:linear-gradient(180deg, rgba(38,57,73,.96), rgba(25,37,48,.96));
}

.top3-item.rank-3{
  background:linear-gradient(180deg, rgba(58,34,80,.96), rgba(34,21,49,.96));
}

.top3-icon{
  font-size:34px;
  margin-bottom:10px;
}

.top3-rank{
  font-size:14px;
  color:#cbd5ea;
  margin-bottom:6px;
}

.top3-name{
  font-size:20px;
  font-weight:900;
  margin-bottom:8px;
}

.top3-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(255,255,255,.10);
  color:#fff;
  margin-bottom:10px;
}

.top3-points{
  font-size:24px;
  font-weight:900;
}

.leaderboard-list{
  display:grid;
  gap:10px;
}

.leaderboard-row{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}

.leaderboard-rank{
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.leaderboard-user{
  min-width:0;
}

.leaderboard-user strong{
  display:block;
  font-size:16px;
}

.leaderboard-user span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.leaderboard-points{
  font-size:16px;
  font-weight:900;
  color:#fff;
}

.donation-form-card{
  padding:22px;
  display:grid;
  gap:18px;
}

.donation-form-card h2{
  margin:0;
  font-size:30px;
}

.donation-form-card p{
  margin:0;
  color:var(--muted);
}

.donation-total-box{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(125,92,255,.18), rgba(255,105,180,.10));
  border:1px solid rgba(255,255,255,.08);
}

.donation-total-label{
  color:#cfd6ef;
  font-size:14px;
  margin-bottom:8px;
}

.donation-total-value{
  font-size:40px;
  font-weight:900;
  line-height:1;
}

.donation-stack-history{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.donation-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.donation-amount-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.donation-amount-btn{
  min-height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(36,50,77,.98), rgba(26,37,57,.98));
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
}

.donation-util-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.donation-util-btn{
  min-height:50px;
  border:none;
  border-radius:16px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
}

.donation-util-btn.reset{
  background:#4a2431;
}

.donation-util-btn.undo{
  background:#23314c;
}

.donation-util-btn.pay{
  background:linear-gradient(90deg,#7d5cff,#ff69b4);
}

.donation-payment-box{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.donation-method-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.donation-method-card{
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.donation-proof-form{
  display:grid;
  gap:14px;
}

.donation-proof-form label{
  display:grid;
  gap:8px;
  color:#eef2ff;
  font-weight:700;
}

.donation-proof-form input,
.donation-proof-form select,
.donation-proof-form textarea{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:#182235;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.donation-proof-form textarea{
  min-height:110px;
  resize:vertical;
}

.donation-submit-btn{
  min-height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(90deg,#7d5cff,#ff69b4);
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.donation-hidden{
  display:none !important;
}

.login-required-box{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#dbe4ff;
}

.login-required-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.donation-qris-box{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:center;
}

.donation-qris-image{
  width:min(100%, 280px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#fff;
  padding:8px;
}

.donation-qris-note{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

@media (max-width: 900px){
  .top3-grid,
  .donation-method-grid{
    grid-template-columns:1fr;
  }

  .donation-amount-grid{
    grid-template-columns:1fr 1fr;
  }

  .donation-action-panel{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .donation-amount-grid,
  .donation-util-row,
  .login-required-actions,
  .donation-code-actions{
    grid-template-columns:1fr;
  }

  .leaderboard-row{
    grid-template-columns:56px 1fr;
  }

  .leaderboard-points{
    grid-column:2;
  }

  .donation-total-value{
    font-size:32px;
  }

  .donation-code-value{
    font-size:18px;
  }
}