/* ============================================================
 * PokeCardia V3.20.0
 * Collection Center
 * ============================================================ */

.collection-center{
  background:
    radial-gradient(circle at 10% 8%,rgba(93,203,245,.12),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(144,99,238,.11),transparent 32%),
    linear-gradient(180deg,#f8fcff,#fff);
  min-height:720px;
}
.collection-hero{
  padding:116px 0 42px;
  background:
    radial-gradient(circle at 12% 20%,rgba(104,213,243,.16),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(158,107,244,.14),transparent 34%),
    linear-gradient(135deg,#effbff,#faf6ff);
}
.collection-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
  align-items:center;
  gap:34px;
}
.collection-hero h1{
  margin:8px 0 12px;
  color:#2f4161;
  font-size:clamp(38px,5vw,64px);
  letter-spacing:-1.6px;
}
.collection-hero p{
  max-width:650px;
  margin:0;
  color:#71809a;
  line-height:1.7;
}
.collection-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.collection-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.collection-summary-grid article{
  min-height:118px;
  padding:20px;
  border:1px solid rgba(217,228,240,.95);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 34px rgba(50,67,101,.08);
}
.collection-summary-grid b,
.collection-summary-grid span{
  display:block;
}
.collection-summary-grid b{
  color:#6d49d7;
  font-size:28px;
  line-height:1.2;
}
.collection-summary-grid span{
  margin-top:7px;
  color:#72809a;
  font-size:11px;
  font-weight:850;
}
.collection-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:20px;
  padding:36px 0 82px;
}
.collection-progress-panel,
.collection-main-panel{
  border:1px solid #dfe9f2;
  border-radius:26px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 60px rgba(48,66,96,.08);
}
.collection-progress-panel{
  align-self:start;
  padding:22px;
  position:sticky;
  top:90px;
}
.collection-main-panel{
  padding:22px;
}
.collection-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:16px;
}
.collection-section-head h2{
  margin:5px 0 0;
  color:#30415f;
  font-size:20px;
}
.collection-progress-list{
  display:grid;
  gap:10px;
}
.collection-progress-card{
  display:grid;
  gap:8px;
  padding:13px;
  border:1px solid #e2eaf2;
  border-radius:16px;
  background:#fbfdff;
}
.collection-progress-card:hover{
  border-color:#bba8f1;
  transform:translateY(-1px);
}
.collection-progress-card b,
.collection-progress-card span,
.collection-progress-card strong,
.collection-progress-card small{
  display:block;
}
.collection-progress-card b{
  color:#6d49d7;
  font-size:12px;
}
.collection-progress-card span{
  margin-top:2px;
  color:#34445f;
  font-size:12px;
  font-weight:800;
}
.collection-progress-card strong{
  color:#2f4161;
  font-size:18px;
}
.collection-progress-card small{
  color:#7d8a9f;
}
.collection-progress-bar{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#edf2f7;
}
.collection-progress-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,#68d5f3,#8b5bef);
}
.collection-empty-small{
  padding:16px;
  border:1px dashed #d9e2ee;
  border-radius:16px;
  background:#f8fbff;
  color:#7a879c;
}
.collection-tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid #dfe8f1;
  border-radius:18px;
  background:#f7fbff;
}
.collection-tabs a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border-radius:13px;
  color:#5f6d84;
  font-size:12px;
  font-weight:900;
}
.collection-tabs a.active{
  background:linear-gradient(135deg,#7751e5,#9b61ff);
  color:#fff;
  box-shadow:0 10px 24px rgba(119,81,229,.18);
}
.collection-tabs b{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:#6d49d7;
  font-size:10px;
}
.collection-tabs a.active b{
  background:rgba(255,255,255,.22);
  color:#fff;
}
.collection-filter-card{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 170px 150px 170px auto auto;
  gap:10px;
  margin:18px 0 20px;
}
.collection-filter-card select,
.collection-search input{
  width:100%;
  min-height:46px;
  border:1px solid #d9e4ee;
  border-radius:15px;
  background:#fff;
  color:#32415f;
  font-size:12px;
  font-weight:800;
  outline:none;
}
.collection-filter-card select{
  padding:0 12px;
}
.collection-search{
  position:relative;
}
.collection-search span{
  position:absolute;
  top:50%;
  left:15px;
  transform:translateY(-50%);
  color:#7b879a;
  font-size:23px;
}
.collection-search input{
  padding:0 14px 0 45px;
}
.collection-empty-state{
  display:grid;
  place-items:center;
  min-height:300px;
  padding:36px;
  border:1px dashed #d7e0ea;
  border-radius:22px;
  background:#fbfdff;
  text-align:center;
}
.collection-empty-state h2{
  margin:0 0 8px;
  color:#30415f;
}
.collection-empty-state p{
  max-width:420px;
  margin:0 0 18px;
  color:#77849a;
}
.collection-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.collection-card-item{
  display:grid;
  gap:12px;
  padding:12px;
  border:1px solid #dfe8f1;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(42,59,90,.06);
}
.collection-card-item:hover{
  transform:translateY(-2px);
  border-color:#bca9f1;
  box-shadow:0 17px 36px rgba(83,62,150,.11);
}
.collection-card-image{
  display:grid;
  place-items:center;
  aspect-ratio:63/88;
  border-radius:15px;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,255,255,.7),transparent 28%),
    linear-gradient(145deg,#edf9ff,#f7f1ff);
}
.collection-card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  filter:drop-shadow(0 12px 18px rgba(37,52,79,.12));
}
.collection-card-copy{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.collection-card-copy h3{
  margin:0;
  color:#30415f;
  font-size:14px;
  line-height:1.25;
}
.collection-card-copy small{
  display:block;
  margin-top:4px;
  color:#7b879c;
  font-size:10px;
  font-weight:750;
}
.collection-rarity{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid #f0b8d8;
  border-radius:999px;
  color:#d63782;
  font-size:10px;
  font-weight:950;
}
.collection-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#6f7d94;
  font-size:11px;
  font-weight:850;
}
.collection-card-meta span{
  color:#f0a100;
}
.collection-card-meta b{
  color:#30415f;
}
.collection-qty-form{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 36px;
  gap:7px;
}
.collection-qty-form input{
  width:100%;
  min-height:36px;
  border:1px solid #dbe4ee;
  border-radius:11px;
  text-align:center;
  font-weight:900;
  color:#30415f;
}
.collection-qty-form button[type="button"]{
  border:1px solid #dbe4ee;
  border-radius:11px;
  background:#fff;
  color:#7751e5;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.collection-qty-form .btn{
  grid-column:1 / -1;
}
.collection-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.collection-card-actions form{
  margin:0;
}
.collection-card-actions .btn{
  width:100%;
}

@media(max-width:1180px){
  .collection-layout{
    grid-template-columns:1fr;
  }
  .collection-progress-panel{
    position:static;
  }
  .collection-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .collection-filter-card{
    grid-template-columns:1fr 1fr 1fr;
  }
}
@media(max-width:760px){
  .collection-hero{
    padding:96px 0 30px;
  }
  .collection-hero-inner{
    grid-template-columns:1fr;
  }
  .collection-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .collection-layout{
    padding:24px 0 58px;
  }
  .collection-filter-card{
    grid-template-columns:1fr;
  }
  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}
@media(max-width:430px){
  .collection-summary-grid{
    grid-template-columns:1fr;
  }
  .collection-card-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
 * PokeCardia V3.20.1
 * Collection Wishlist/Profile/Button Fix
 * ============================================================ */

/* Filter tidak boleh melebar keluar panel. */
.collection-filter-card{
  grid-template-columns:minmax(240px,1fr) minmax(145px,.42fr) minmax(145px,.38fr)!important;
  align-items:center;
}

.collection-filter-card .btn{
  width:100%;
  min-height:46px;
}

@media(min-width:1181px){
  .collection-filter-card button[type="submit"]{
    grid-column:auto;
  }

  .collection-filter-card a.btn{
    grid-column:auto;
  }
}

/* Desktop panel tetap rapi: tombol turun baris kalau ruang sempit. */
@media(max-width:1400px){
  .collection-filter-card{
    grid-template-columns:1fr 1fr 1fr!important;
  }

  .collection-search{
    grid-column:1 / -1;
  }
}

@media(max-width:760px){
  .collection-filter-card{
    grid-template-columns:1fr!important;
  }
}


/* Header profile fix from V3.20.1 */
.logout-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 12px;
  border:1px solid rgba(217,226,239,.9);
  border-radius:999px;
  background:#fff;
  color:#6c7890;
  font-size:11px;
  font-weight:850;
}

.logout-link:hover{
  color:#e24564;
  border-color:#f0b8c4;
  background:#fff8fa;
}

@media(max-width:900px){
  .logout-link{
    display:none;
  }
}


/* ============================================================
 * PokeCardia V3.20.3
 * Collection Card Compact Fix
 * ============================================================ */

/* Panel koleksi tidak boleh membuat card terlihat kebesaran / keluar area. */
.collection-main-panel{
  overflow:hidden!important;
}

.collection-card-grid{
  grid-template-columns:repeat(auto-fill,minmax(170px,190px))!important;
  justify-content:start!important;
  align-items:start!important;
  gap:12px!important;
}

/* Kartu koleksi dibuat compact seperti card database kecil. */
.collection-card-item{
  width:100%!important;
  max-width:190px!important;
  padding:10px!important;
  border-radius:18px!important;
  gap:9px!important;
}

.collection-card-image{
  aspect-ratio:63/88!important;
  border-radius:13px!important;
  padding:0!important;
  overflow:hidden!important;
}

.collection-card-image img{
  width:100%!important;
  height:100%!important;
  max-height:265px!important;
  object-fit:contain!important;
  border-radius:10px!important;
}

.collection-card-copy{
  gap:6px!important;
}

.collection-card-copy h3{
  font-size:13px!important;
  line-height:1.25!important;
}

.collection-card-copy small{
  font-size:9px!important;
}

.collection-rarity{
  padding:4px 7px!important;
  font-size:9px!important;
}

.collection-card-meta{
  font-size:10px!important;
}

.collection-qty-form{
  grid-template-columns:34px minmax(0,1fr) 34px!important;
  gap:6px!important;
}

.collection-qty-form input,
.collection-qty-form button[type="button"]{
  min-height:34px!important;
  border-radius:10px!important;
}

.collection-qty-form .btn{
  min-height:40px!important;
  border-radius:12px!important;
}

.collection-card-actions{
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}

.collection-card-actions .btn{
  min-height:38px!important;
  padding:0 8px!important;
  border-radius:12px!important;
  font-size:10px!important;
  white-space:nowrap!important;
}

/* Filter dibuat tidak melebar dan tombol tidak overflow. */
.collection-filter-card{
  grid-template-columns:minmax(240px,1fr) 160px 145px 160px 116px 96px!important;
  align-items:center!important;
}

.collection-filter-card .btn{
  width:100%!important;
  min-height:46px!important;
  padding:0 14px!important;
  white-space:nowrap!important;
}

/* Desktop sedang: filter turun rapi agar tidak keluar panel. */
@media(max-width:1280px){
  .collection-filter-card{
    grid-template-columns:1fr 1fr 1fr!important;
  }

  .collection-search{
    grid-column:1 / -1!important;
  }
}

@media(max-width:760px){
  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
  }

  .collection-card-item{
    max-width:none!important;
  }

  .collection-filter-card{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:430px){
  .collection-card-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.4
 * Collection Filter Layout Final Fix
 * ============================================================ */

/* Final: filter dibuat 2 baris agar tombol tidak pernah keluar panel. */
.collection-filter-card{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}

.collection-search{
  grid-column:1 / -1!important;
  min-width:0!important;
}

.collection-filter-card select,
.collection-filter-card .btn{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}

.collection-filter-card button[type="submit"]{
  grid-column:auto!important;
}

.collection-filter-card a.btn{
  grid-column:auto!important;
}

/* Card grid tetap compact, tapi panel tidak terasa sempit. */
.collection-card-grid{
  grid-template-columns:repeat(3,minmax(0,185px))!important;
  justify-content:start!important;
  gap:14px!important;
}

.collection-card-item{
  max-width:185px!important;
}

/* Lebar panel utama dibiarkan penuh, tanpa clipping horizontal. */
.collection-main-panel{
  overflow:visible!important;
}

.collection-layout{
  align-items:start!important;
}

/* Desktop sedang: select 2 kolom + tombol 2 kolom. */
@media(max-width:1280px){
  .collection-filter-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .collection-search{
    grid-column:1 / -1!important;
  }
}

/* Mobile: semua stack 1 kolom. */
@media(max-width:760px){
  .collection-filter-card{
    grid-template-columns:1fr!important;
  }

  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
  }

  .collection-card-item{
    max-width:none!important;
  }
}

@media(max-width:430px){
  .collection-card-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.5
 * Wishlist Card Button Fix
 * ============================================================ */

/* Wishlist card tidak boleh melebar gara-gara tombol panjang. */
.collection-card-item{
  min-width:0!important;
  overflow:hidden!important;
}

.collection-card-copy,
.collection-card-meta,
.collection-card-actions,
.collection-card-actions form{
  min-width:0!important;
}

/* Action button dibuat stack agar teks Tambah ke Koleksi / Hapus Wishlist aman. */
.collection-card-actions{
  grid-template-columns:1fr!important;
  gap:7px!important;
}

.collection-card-actions .btn{
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:38px!important;
  padding:0 8px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
}

/* Wishlist tab tidak perlu space action selebar 2 tombol. */
.collection-card-grid{
  grid-template-columns:repeat(3,minmax(0,175px))!important;
  gap:13px!important;
}

.collection-card-item{
  max-width:175px!important;
}

/* Gambar kartu wishlist dibuat sedikit lebih kecil supaya card tidak terasa penuh. */
.collection-card-image{
  border-radius:14px!important;
}

.collection-card-image img{
  max-height:245px!important;
}

/* Rarity badge tidak boleh keluar dari card. */
.collection-rarity{
  flex-shrink:0!important;
  max-width:48px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}

@media(max-width:1180px){
  .collection-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .collection-card-item{
    max-width:none!important;
  }
}

@media(max-width:760px){
  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:430px){
  .collection-card-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.6
 * Collection AJAX Filter
 * ============================================================ */

.collection-center.collection-loading .collection-main-panel{
  position:relative;
  opacity:.62;
  pointer-events:none;
}

.collection-center.collection-loading .collection-main-panel::after{
  content:"Memuat koleksi...";
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#7751e5;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(77,57,143,.12);
}

/* Filter final: URL tetap bersih, layout tetap aman. */
.collection-filter-card{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

.collection-search{
  grid-column:1 / -1!important;
}

@media(max-width:1280px){
  .collection-filter-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .collection-filter-card{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.7
 * Collection Auto Filter + 3 Equal Cards
 * ============================================================ */

.collection-apply-btn{
  display:none!important;
}

.collection-filter-card{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

.collection-search{
  grid-column:1 / -1!important;
}

.collection-filter-card a.btn{
  width:100%!important;
}

.collection-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:stretch!important;
  align-items:start!important;
  gap:16px!important;
}

.collection-card-item{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:hidden!important;
}

.collection-card-image{
  width:100%!important;
  aspect-ratio:63/88!important;
  max-height:none!important;
}

.collection-card-image img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}

.collection-card-actions{
  grid-template-columns:1fr!important;
  gap:7px!important;
}

.collection-card-actions .btn{
  width:100%!important;
  max-width:100%!important;
}

.collection-qty-form{
  grid-template-columns:36px minmax(0,1fr) 36px!important;
}

@media(max-width:1280px){
  .collection-filter-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .collection-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .collection-filter-card{
    grid-template-columns:1fr!important;
  }

  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

@media(max-width:430px){
  .collection-card-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.8
 * Collection Live Search Focus Fix
 * ============================================================ */

/* Tombol Terapkan benar-benar disembunyikan karena filter sudah live AJAX. */
.collection-apply-btn,
.collection-filter-card button[type="submit"]{
  display:none!important;
}

/* Layout filter setelah tombol Terapkan dihapus. */
.collection-filter-card{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

.collection-search{
  grid-column:1 / -1!important;
}

/* Reset cukup satu kolom, tidak meninggalkan area kosong besar. */
.collection-filter-card a.btn{
  width:100%!important;
}

/* Loading tidak mengunci input search supaya user bisa terus mengetik. */
.collection-center.collection-loading .collection-main-panel{
  opacity:1!important;
  pointer-events:auto!important;
}

.collection-center.collection-loading .collection-card-grid,
.collection-center.collection-loading .collection-empty-state{
  opacity:.58;
  pointer-events:none;
  transition:opacity .16s ease;
}

.collection-center.collection-loading .collection-main-panel::after{
  content:"Memuat...";
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#7751e5;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(77,57,143,.12);
}

/* 3 kartu pas memenuhi panel. */
.collection-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:stretch!important;
  gap:16px!important;
}

.collection-card-item{
  width:100%!important;
  max-width:none!important;
}

@media(max-width:1280px){
  .collection-filter-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .collection-filter-card{
    grid-template-columns:1fr!important;
  }

  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:430px){
  .collection-card-grid{
    grid-template-columns:1fr!important;
  }
}


/* ============================================================
 * PokeCardia V3.20.10
 * Collection Action AJAX
 * ============================================================ */

.collection-center.collection-action-loading .collection-card-grid{
  opacity:.72;
  pointer-events:none;
  transition:opacity .16s ease;
}

.collection-center.collection-action-loading .collection-main-panel::before{
  content:"Menyimpan...";
  position:absolute;
  top:16px;
  right:16px;
  z-index:6;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#7751e5;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(77,57,143,.12);
}

/* Tombol aksi tetap enak diklik ketika sudah AJAX. */
.collection-qty-form .btn,
.collection-card-actions .btn{
  cursor:pointer;
}

.collection-card-actions form{
  width:100%;
}