/* =========================================================================
   RANKFIX — Rank & Rewards: rapatkan ke atas, ikon proporsional, popup presisi
   Patokan: konten.com /clipper-tier (isi mulai tepat di bawah topbar 77px)
   ========================================================================= */

/* ---------- 1. Rapatkan konten ke topbar (buang jarak kosong) ---------- */
/* konten.com: main.top = 77 (tepat di bawah topbar), padding-top = 0 */
body[data-path="/clipper/rank"] .app-main{
  padding-top:14px !important;
}
body[data-path="/clipper/rank"] .rank-head{
  margin-top:0 !important;
  padding-top:0 !important;
}
/* judul + toggle sebaris rapat seperti konten.com */
body[data-path="/clipper/rank"] .rank-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
/* lencana besar: rapatkan jaraknya */
body[data-path="/clipper/rank"] .rank-hero,
body[data-path="/clipper/rank"] .rank-badge-hero{
  margin-top:10px !important;
  padding-top:0 !important;
}

/* ---------- 2. Ikon info (i) di samping Rewards: kecil & sejajar ---------- */
/* konten.com: ikon kecil ~14px, menempel rapi di kanan teks "Rewards" */
.rank-reward-head,
.rank-rewards-title{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
}
.rank-reward-head svg,
.rank-reward-head button,
.rank-reward-head .rank-info,
.rank-rewards-title svg,
.rank-rewards-title button,
.rank-info-btn{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  max-width:15px !important;
  max-height:15px !important;
  flex:0 0 15px !important;
  padding:0 !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:15px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.45) !important;
  color:rgba(255,255,255,.75) !important;
}
.rank-reward-head svg *,
.rank-rewards-title svg *{stroke-width:2 !important;}

/* ---------- 3. POPUP rank: benar-benar di tengah layar ---------- */
/* Masalah: dialog fixed inset:0 margin:0 -> nempel pojok kiri-atas (t=0,l=0) */
dialog.rank-modal-dialog{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;              /* kunci: bikin center vertikal+horizontal */
  width:min(400px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100vh - 48px) !important;
  height:auto !important;
  padding:0 !important;
  border:1px solid var(--uc-line, #22222c) !important;
  border-radius:16px !important;
  background:var(--uc-card, #0c0c11) !important;
  overflow:hidden !important;
  box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
dialog.rank-modal-dialog::backdrop{
  background:rgba(4,6,18,.78) !important;
  backdrop-filter:blur(3px) !important;
}
/* isi popup bisa digulir kalau kepanjangan, tapi header tetap kelihatan */
.rank-modal-box{
  display:flex !important;
  flex-direction:column !important;
  max-height:calc(100vh - 48px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  padding:22px 20px 24px !important;
  box-sizing:border-box !important;
  scrollbar-width:none !important;
}
.rank-modal-box::-webkit-scrollbar{display:none !important;}

/* tombol tutup: bulat, presisi di pojok kanan atas */
.rank-modal-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:19px !important;
  line-height:1 !important;
  border-radius:999px !important;
  border:1px solid var(--uc-line, #22222c) !important;
  background:rgba(255,255,255,.05) !important;
  color:#e7ecff !important;
  cursor:pointer !important;
  z-index:3 !important;
}
.rank-modal-close:hover{background:rgba(255,255,255,.12) !important;}

/* kepala popup: lencana di tengah, judul rapi */
.rank-modal-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:6px !important;
  padding-top:6px !important;
}
.rank-modal-badge{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 0 4px !important;
}
.rank-modal-badge img{
  width:auto !important;
  height:96px !important;
  max-width:120px !important;
  object-fit:contain !important;
  display:block !important;
}
.rank-modal-titles{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  width:100% !important;
}
#modal-rank-level{
  font-size:13px !important;
  color:var(--uc-muted, #a09aa8) !important;
  letter-spacing:.01em !important;
}
#modal-rank-name{
  font-size:21px !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1.25 !important;
}

/* daftar keuntungan: ikon centang sejajar teks */
.rank-modal-box ul{
  list-style:none !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:11px !important;
  width:100% !important;
}
.rank-modal-box li{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:#dfe4f5 !important;
  text-align:left !important;
}
.rank-modal-box li>svg,
.rank-modal-box li>span:first-child,
.rank-modal-box li>i{
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  margin-top:1px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
/* garis pemisah di atas daftar */
.rank-modal-box hr,
.rank-modal-sep{
  width:100% !important;
  height:1px !important;
  border:0 !important;
  margin:16px 0 2px !important;
  background:var(--uc-line, #22222c) !important;
}
/* sub-judul "Keuntungan level" */
.rank-modal-box h3,
.rank-modal-box h4,
.rank-modal-subtitle{
  font-size:15px !important;
  font-weight:600 !important;
  color:#fff !important;
  margin:14px 0 0 !important;
  text-align:left !important;
  width:100% !important;
}

/* ---------- 4. Kartu rank kecil (Rank 1-5): presisi & bisa digeser ---------- */
.rank-strip,
.rank-list{
  display:flex !important;
  gap:8px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
  padding:4px 0 !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.rank-strip::-webkit-scrollbar,
.rank-list::-webkit-scrollbar{display:none !important;}
.rank-card{
  flex:1 1 0 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  padding:10px 4px !important;
  background:transparent !important;
  border:0 !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
}
.rank-card img{
  width:auto !important;
  height:42px !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
}
.rank-card span,
.rank-card small{
  font-size:12px !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* =========================================================================
   RANKFIX-2 — ikon (i) proporsional + kartu rank berkotak (jiplak konten.com)
   Referensi: tiap kartu punya kotak sendiri, garis tepi tipis, sudut membulat,
   garis pemisah di bawah angka %, kartu aktif lebih terang.
   ========================================================================= */

/* ---------- A. Ikon (i) di samping "Rewards": kecil & sejajar teks ---------- */
.reward-card h2{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  font-size:15px !important;
  line-height:1.2 !important;
}
.reward-card h2 .reward-info,
button.reward-info{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  max-width:16px !important;
  max-height:16px !important;
  flex:0 0 16px !important;
  padding:0 !important;
  margin:0 !important;
  font-size:10px !important;
  font-weight:600 !important;
  font-style:normal !important;
  line-height:1 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.4) !important;
  background:transparent !important;
  color:rgba(255,255,255,.7) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  cursor:help !important;
  transform:translateY(0) !important;
  box-shadow:none !important;
}
button.reward-info:hover{
  border-color:rgba(255,255,255,.75) !important;
  color:#fff !important;
}

/* ---------- B. Kartu rank: beri KOTAK penanda (tidak polos lagi) ---------- */
.all-ranks>div{
  display:flex !important;
  gap:10px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
  padding:4px 2px 6px !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  scroll-snap-type:x proximity !important;
}
.all-ranks>div::-webkit-scrollbar{display:none !important;}

.rank-card{
  /* kotak penanda seperti konten.com */
  flex:0 0 132px !important;
  width:132px !important;
  min-width:132px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:0 !important;
  padding:14px 12px 12px !important;
  background:#0a0a0e !important;
  border:1px solid #22222c !important;
  border-radius:12px !important;
  scroll-snap-align:start !important;
  transition:border-color .18s, background .18s, transform .18s !important;
  cursor:pointer !important;
  text-align:center !important;
}
.rank-card:hover{
  border-color:#3d4468 !important;
  background:#11152e !important;
}
/* kartu rank kamu: lebih terang + aksen Clypora */
.rank-card.current{
  background:#141a38 !important;
  border-color:#ff2e6a !important;
  box-shadow:0 0 0 1px rgba(255,46,106,.25) !important;
}

/* nama rank di atas */
.rank-card .rank-name{
  display:block !important;
  font-size:12.5px !important;
  line-height:1.3 !important;
  color:#d6d2da !important;
  min-height:34px !important;
  margin-bottom:2px !important;
}
.rank-card.current .rank-name{color:#fff !important;}

/* medali */
.rank-card .mini-medal{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:52px !important;
  margin:2px 0 6px !important;
}
.rank-card .mini-medal img{
  width:auto !important;
  height:46px !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block !important;
}

/* angka persen */
.rank-card strong{
  display:block !important;
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  color:#fff !important;
  margin:0 0 8px !important;
}
.rank-card.current strong{color:#fff !important;}

/* garis pemisah di bawah persen (seperti referensi) */
.rank-card small{
  display:block !important;
  width:100% !important;
  padding-top:9px !important;
  border-top:1px solid #22222c !important;
  font-size:11.5px !important;
  line-height:1.35 !important;
  color:#a09aa8 !important;
  min-height:32px !important;
  margin:0 !important;
}
.rank-card.current small{border-top-color:rgba(255,46,106,.32) !important;}

/* label bawah (Rank Kamu / Rank 2 / dst) */
.rank-card em{
  display:block !important;
  margin-top:auto !important;
  padding-top:10px !important;
  font-style:normal !important;
  font-size:11px !important;
  line-height:1.3 !important;
  color:#8b8390 !important;
}
.rank-card.current em{
  color:#ff2e6a !important;
  font-weight:600 !important;
}

/* judul "Jelajahi semua rank" */
.all-ranks>h2{
  font-size:15px !important;
  font-weight:600 !important;
  margin:0 0 12px !important;
  color:#fff !important;
}

@media (max-width:420px){
  .rank-card{flex-basis:124px !important;width:124px !important;min-width:124px !important;}
}

/* =========================================================================
   RANKFIX-3 — sisa warna oranye konten.com di popup rank → palet Clypora
   Nama kelas hasil bedah langsung: .rank-modal-dialog, .rank-modal-syarat-wrap,
   .rank-syarat-fill, .rank-syarat-bullet, .rank-syarat-btn
   ========================================================================= */

/* kotak "Syarat": dari hitam pekat #0d0d0d → panel Clypora */
.rank-modal-dialog .rank-modal-syarat-wrap{
  background:#0a0a0e !important;
  border:1px solid #22222c !important;
  border-radius:12px !important;
}

/* angka persen (+10%) — gradien oranye → biru Clypora */
.rank-modal-dialog span[class=""],
.rank-modal-dialog .rank-modal-pct,
.rank-modal-dialog h3 span,
.rank-modal-dialog p>span:first-child{
  background-image:linear-gradient(90deg,#ff2e6a,#ff8fbd) !important;
}

/* bar kemajuan syarat */
.rank-modal-dialog .rank-syarat-fill{
  background-image:linear-gradient(90deg,#ff2e6a,#b40589) !important;
}
.rank-modal-dialog .rank-syarat-track,
.rank-modal-dialog .rank-syarat-fill:only-child{
  background-color:#1b1b24 !important;
}

/* bulatan penanda syarat (gembok) */
.rank-modal-dialog .rank-syarat-bullet{
  background:#ff2e6a !important;
  color:#ffffff !important;
}

/* tombol "Daftar" */
.rank-modal-dialog .rank-syarat-btn{
  background:#ff2e6a !important;
  border:none !important;
  color:#ffffff !important;
  font-weight:600 !important;
  border-radius:10px !important;
}
.rank-modal-dialog .rank-syarat-btn:hover{
  background:#4fd4f8 !important;
}

/* rapatkan ruang kosong di bawah isi popup (91px → wajar) */
.rank-modal-dialog{
  height:auto !important;
  max-height:88vh !important;
  overflow-y:auto !important;
  padding-bottom:20px !important;
}
.rank-modal-dialog .rank-modal-syarat-wrap{
  margin-bottom:0 !important;
}

/* angka persen di popup (#modal-bonus-pct): gradien oranye-merah → biru Clypora */
.rank-modal-dialog #modal-bonus-pct,
#modal-bonus-pct{
  background-image:linear-gradient(90deg,#ff2e6a,#ff8fbd) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* rapatkan ruang kosong bawah popup: isi mengikuti tinggi konten */
dialog.rank-modal-dialog[open]{
  display:flex !important;
  flex-direction:column !important;
  height:auto !important;
  max-height:88vh !important;
  margin:auto !important;
  padding-bottom:22px !important;
  overflow-y:auto !important;
}
dialog.rank-modal-dialog[open]>*{flex:0 0 auto !important;}
dialog.rank-modal-dialog[open]>*:last-child{margin-bottom:0 !important;}

/* alur bar syarat: latar cokelat kemerahan konten.com rgb(39,13,2) → palet Clypora */
.rank-modal-dialog .rank-syarat-bar{
  background:#1b1b24 !important;
  border-radius:999px !important;
  overflow:hidden !important;
}
.rank-modal-dialog .rank-syarat-fill{
  background-color:transparent !important;
  background-image:linear-gradient(90deg,#ff2e6a,#b40589) !important;
  border-radius:999px !important;
}

/* bulatan syarat terkunci: emoji 🔒 bawaan berwarna oranye → ikon gembok garis biru */
.rank-modal-dialog .rank-syarat-bullet{
  position:relative !important;
  font-size:0 !important;            /* sembunyikan emoji */
  background:#1b1b24 !important;
  border:1px solid #ff2e6a !important;
  box-sizing:border-box !important;
}
/* item yang SUDAH tercapai tetap bulatan penuh biru */
.rank-modal-dialog .rank-syarat-item:not(:has(.rank-syarat-btn)) .rank-syarat-bullet{
  background:#ff2e6a !important;
  border-color:#ff2e6a !important;
}
/* gambar gembok kecil untuk item terkunci (yang punya tombol Daftar) */
.rank-modal-dialog .rank-syarat-item:has(.rank-syarat-btn) .rank-syarat-bullet::after{
  content:"";
  position:absolute;
  inset:0;
  background:#ff2e6a;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/9px 9px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/9px 9px no-repeat;
}

/* ikon (i) di samping Rewards: satu lingkaran saja, tanpa lingkaran kedua */
.reward-card h2 .reward-info::after,
.reward-card h2 .reward-info::before,
button.reward-info::after,
button.reward-info::before{
  content:none !important;
  display:none !important;
}