/* ============================================================
   price-list.css — Halaman Daftar Harga publik FrostyUp
   (Kode, Item, Member/Starter/Elite/Champion, Status)
============================================================ */

.pl-main{ padding: calc(var(--nav-h) + 28px) 0 80px; overflow-x:hidden; }

.pl-head{ margin-bottom: 22px; }
.pl-head h1{ font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom:8px; }
.pl-head p{ color: var(--muted); font-size:0.92rem; max-width:560px; line-height:1.6; }

/* ---------- Toolbar ---------- */
.pl-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin: 22px 0 16px;
}
.pl-search-wrap{ position:relative; flex:1 1 260px; min-width:220px; }
.pl-search-wrap svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--muted); pointer-events:none;
}
.pl-search-input{
  width:100%; padding:12px 16px 12px 40px; border-radius:12px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color: var(--frost); font-size:0.86rem; outline:none;
}
.pl-search-input:focus{ border-color: rgba(0,229,255,0.4); }
.pl-search-input::placeholder{ color: var(--muted); }

.pl-select-wrap{ position:relative; flex-shrink:0; }
.pl-select{
  appearance:none; -webkit-appearance:none;
  padding:12px 36px 12px 16px; border-radius:12px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color: var(--frost); font-size:0.84rem; outline:none; cursor:pointer;
  max-width: 220px;
}
.pl-select:focus{ border-color: rgba(0,229,255,0.4); }
.pl-select option{
  background: #0d1421; color: var(--frost);
}
.pl-select-wrap svg{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color: var(--muted); pointer-events:none;
}

.pl-refresh-btn{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:12px 18px; border-radius:12px; font-size:0.84rem; font-weight:600;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color: var(--frost-dim); cursor:pointer; transition: all .15s ease;
}
.pl-refresh-btn:hover{ color: var(--cyan); border-color: rgba(0,229,255,0.3); }

.pl-download-group{ display:flex; gap:8px; flex-shrink:0; }
.pl-download-btn{
  display:flex; align-items:center; gap:6px;
  padding:12px 16px; border-radius:12px; font-size:0.82rem; font-weight:600;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  color: var(--frost-dim); cursor:pointer; transition: all .15s ease;
}
.pl-download-btn:hover{ color: var(--frost); border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.06); }

/* ---------- Legend tier ---------- */
.pl-legend{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;
}
.pl-legend-item{
  display:flex; align-items:center; gap:6px; font-size:0.76rem; color: var(--muted);
  padding:6px 12px; border-radius:999px; background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.pl-legend-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pl-legend-dot.member{ background: var(--frost-dim); }
.pl-legend-dot.starter{ background:#38BDF8; }
.pl-legend-dot.elite{ background:#FBBF24; }
.pl-legend-dot.champion{ background: var(--cyan); box-shadow:0 0 8px rgba(0,229,255,0.6); }

/* ---------- Table ---------- */
.pl-table-wrap{
  border-radius: var(--radius-md); overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
}
table.pl-table{ width:100%; border-collapse:collapse; font-size:0.84rem; min-width:760px; }
.pl-table thead th{
  text-align:left; padding:14px 16px; white-space:nowrap;
  font-family: var(--ff-display); font-size:0.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; color: var(--muted);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.pl-table thead th.pl-col-num{ text-align:right; }
.pl-table tbody td{
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,0.05); white-space:nowrap;
}
.pl-table tbody td.pl-col-num{ text-align:right; font-family: var(--ff-mono); }
.pl-table tbody tr:hover{ background: rgba(0,229,255,0.035); }
.pl-table tbody tr:last-child td{ border-bottom:none; }

.pl-code{ font-family: var(--ff-mono); font-size:0.76rem; color: var(--ice); }
.pl-item-name{ color: var(--frost); font-weight:600; max-width:280px; white-space:normal; }
.pl-item-game{ font-size:0.72rem; color: var(--muted); margin-top:2px; }

.pl-price-member{ color: var(--frost-dim); }
.pl-price-starter{ color:#38BDF8; }
.pl-price-elite{ color:#FBBF24; }
.pl-price-champion{ color: var(--cyan); font-weight:700; }

.pl-status{
  display:inline-block; font-size:0.68rem; font-weight:700; padding:4px 10px;
  border-radius:999px; letter-spacing:0.03em; text-transform:uppercase;
}
.pl-status-active{ color:#22c55e; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); }
.pl-status-inactive{ color: var(--muted); background:rgba(148,163,184,0.1); border:1px solid rgba(148,163,184,0.25); }

.pl-empty{
  text-align:center; padding:70px 20px; color: var(--muted);
}
.pl-empty-icon{ font-size:2.2rem; margin-bottom:12px; }

/* ---------- Footer bar: summary + pagination ---------- */
.pl-footer-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:14px; margin-top:18px;
}
.pl-summary{ font-size:0.8rem; color: var(--muted); }

.pl-pagination{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-page-nav-btn, .pl-page-btn{
  min-width:36px; height:36px; padding:0 10px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color: var(--frost-dim); font-size:0.8rem; font-weight:600; cursor:pointer;
  transition: all .15s ease;
}
.pl-page-nav-btn:hover:not(:disabled), .pl-page-btn:hover:not(.active){
  border-color: rgba(0,229,255,0.35); color: var(--cyan);
}
.pl-page-btn.active{
  background: var(--grad-cyan); color:#04141C; border-color:transparent;
}
.pl-page-nav-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.pl-page-ellipsis{ color: var(--muted); padding:0 4px; font-size:0.8rem; }

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  .pl-toolbar{ flex-direction:column; align-items:stretch; }
  .pl-search-wrap{ flex:1 1 auto; }
  .pl-select{ max-width:none; width:100%; }
  .pl-download-group{ width:100%; }
  .pl-download-btn{ flex:1; justify-content:center; }
  .pl-footer-bar{ flex-direction:column; align-items:flex-start; }
  .pl-item-name{ max-width:180px; }
}