/* ============================================================
   ARC SORT & FILTER

   File terpisah, class sendiri (.arc-filter*), JS sendiri. Tidak
   berbagi satu baris pun dengan panel keranjang/akun - keduanya memang
   mirip bentuknya, tapi menyatukannya berarti mengubah salah satu
   selalu berisiko menggeser yang lain.
   ============================================================ */

:root,
body {
  --arc-f-w: 420px;
  --arc-f-bg: #ffffff;
  --arc-f-fg: #000000;
  --arc-f-muted: #8a8a8a;
  --arc-f-line: #e5e5e5;
  --arc-f-accent: #000000;
  --arc-f-overlay: rgba(0, 0, 0, 0.5);
  --arc-f-speed: 380ms;
}

/* ------------------------------------------------------------
   TOMBOL
   ------------------------------------------------------------ */

.arc-filter-wrap {
  --arc-f-trigger-fg: #000000;
  --arc-f-trigger-bg: #ffffff;
  --arc-f-trigger-line: #000000;

  display: flex;
}

/* Class digandakan sampai 0-3-0.

   Kit Elementor menulis aturan untuk `button` dengan bobot 0-2-0
   (.elementor-kit-8 button) dan file itu dimuat SETELAH file ini. Tanpa
   penggandaan, tombol ini mewarisi latar hitam pekat milik Kit - jadi
   yang seharusnya kotak bergaris tipis malah tampil sebagai balok hitam.

   Tidak pakai !important supaya kalau suatu saat kamu benar-benar perlu
   mengunci satu warna dari Elementor, !important dari sana masih bisa
   menang di atas ini. */
.arc-filter-trigger.arc-filter-trigger.arc-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--arc-f-trigger-line);
  border-radius: 0;
  background: var(--arc-f-trigger-bg);
  color: var(--arc-f-trigger-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.arc-filter-trigger.arc-filter-trigger.arc-filter-trigger:hover {
  background: var(--arc-f-trigger-fg);
  color: var(--arc-f-trigger-bg);
}

.arc-filter__icon {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Angka filter aktif. Ada supaya orang yang sudah menggulir jauh tetap
   tahu daftar yang dilihatnya sedang tersaring. */
.arc-filter-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: var(--arc-f-accent);
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
}

/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */

.arc-filter-panel {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.arc-filter-panel[hidden] {
  display: none;
}

.arc-filter-panel__overlay {
  position: absolute;
  inset: 0;
  background: var(--arc-f-overlay);
  opacity: 0;
  transition: opacity var(--arc-f-speed) ease;
}

.arc-filter-panel.is-open .arc-filter-panel__overlay {
  opacity: 1;
}

.arc-filter-panel__box {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(var(--arc-f-w), 100vw);
  background: var(--arc-f-bg);
  color: var(--arc-f-fg);
  transition: transform var(--arc-f-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.arc-filter-panel--right .arc-filter-panel__box {
  right: 0;
  transform: translateX(100%);
}

.arc-filter-panel--left .arc-filter-panel__box {
  left: 0;
  transform: translateX(-100%);
}

.arc-filter-panel.is-open .arc-filter-panel__box {
  transform: translateX(0);
}

html.arc-filter-open {
  overflow: hidden;
}

.arc-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--arc-f-line);
}

.arc-filter-panel__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Class digandakan sampai 0-3-0.

   Elementor Kit menulis aturan untuk `button` dengan bobot 0-2-0
   (.elementor-kit-8 button) dan file itu dimuat setelah file ini.
   Tanpa penggandaan, tombol tutup mewarisi latar hitam milik Kit dan
   ikonnya hilang. Pelajaran yang sama sudah kena di panel keranjang. */
.arc-filter-panel__close.arc-filter-panel__close.arc-filter-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--arc-f-fg);
  cursor: pointer;
}

.arc-filter-panel__close svg {
  width: 20px;
  height: 20px;
}

.arc-filter-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px 32px;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   FILTER AKTIF
   ------------------------------------------------------------ */

.arc-filter-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--arc-f-line);
}

.arc-filter-active__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.arc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--arc-f-fg);
  color: var(--arc-f-fg);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}

.arc-filter-chip svg {
  width: 11px;
  height: 11px;
}

.arc-filter-chip:hover {
  background: var(--arc-f-fg);
  color: var(--arc-f-bg);
}

.arc-filter-clear {
  color: var(--arc-f-muted);
  font-size: 11px;
  text-decoration: underline;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   GRUP
   ------------------------------------------------------------ */

.arc-filter-group {
  padding: 22px 0;
  border-bottom: 1px solid var(--arc-f-line);
}

.arc-filter-group:last-child {
  border-bottom: 0;
}

.arc-filter-group__title {
  margin: 0 0 14px;
  color: var(--arc-f-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arc-filter-group__body--list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arc-filter-group__body--color {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--arc-f-line);
  border: 1px solid var(--arc-f-line);
}

.arc-filter-group__body--size {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

/* ------------------------------------------------------------
   PILIHAN
   ------------------------------------------------------------ */

.arc-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  color: var(--arc-f-fg);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.arc-filter-opt__label {
  flex: 1;
}

.arc-filter-opt__count {
  color: var(--arc-f-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Kotak centang dan bulatan radio digambar dari border, bukan input
   asli - input bawaan tidak bisa diwarnai konsisten antar browser dan
   selalu membawa sudut membulat bawaan sistem. */
.arc-filter-opt__box {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--arc-f-muted);
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.arc-filter-opt__radio {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--arc-f-muted);
  border-radius: 50%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.arc-filter-opt.is-on .arc-filter-opt__box {
  border-color: var(--arc-f-accent);
  background: var(--arc-f-accent);
  box-shadow: inset 0 0 0 2px var(--arc-f-bg);
}

.arc-filter-opt.is-on .arc-filter-opt__radio {
  border-color: var(--arc-f-accent);
  box-shadow: inset 0 0 0 3px var(--arc-f-bg), inset 0 0 0 9px var(--arc-f-accent);
}

.arc-filter-opt:hover .arc-filter-opt__box,
.arc-filter-opt:hover .arc-filter-opt__radio {
  border-color: var(--arc-f-accent);
}

/* -------- Warna -------- */

.arc-filter-opt--color {
  gap: 0;
  padding: 0;
  background: var(--arc-f-bg);
}

.arc-filter-opt--color .arc-filter-opt__swatch {
  flex: none;
  width: 10px;
  align-self: stretch;
  min-height: 42px;
}

.arc-filter-opt--color .arc-filter-opt__box {
  margin: 0 9px;
}

.arc-filter-opt--color .arc-filter-opt__count {
  padding-right: 10px;
}

/* -------- Ukuran -------- */

.arc-filter-opt--size {
  justify-content: center;
  padding: 11px 6px;
  border: 1px solid var(--arc-f-line);
  font-size: 12px;
  text-align: center;
}

.arc-filter-opt--size .arc-filter-opt__label {
  flex: none;
}

.arc-filter-opt--size:hover {
  border-color: var(--arc-f-accent);
}

.arc-filter-opt--size.is-on {
  border-color: var(--arc-f-accent);
  background: var(--arc-f-accent);
  color: var(--arc-f-bg);
}

/* -------- Hasil nol --------

   Ditampilkan tapi dimatikan, bukan dihapus. Pengunjung tetap melihat
   ukuran atau warna itu memang ada di toko - cuma tidak tersedia untuk
   kombinasi yang sedang dipilih. Dihapus diam-diam malah bikin katalog
   terlihat lebih miskin dari aslinya. */
.arc-filter-opt.is-dead {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   SEDANG MENGAMBIL HASIL BARU

   Dua tempat, dua cara - dan bedanya disengaja.

   GRID dapat skeleton sungguhan: kartunya diganti kotak kosong. Jumlah
   dan bentuk hasil memang berubah setelah difilter, jadi menahan kartu
   lama di layar malah menampilkan sesuatu yang sudah pasti salah.

   PANEL tidak diganti DOM-nya, cuma tulisannya disamarkan lewat CSS.
   Susunan pilihan di panel hampir tidak berubah antar filter, dan
   membangun ulang isinya akan menghilangkan posisi gulir - persis
   masalah yang sudah susah payah dijaga di swapPanel().
   ============================================================ */

.arc-filter-busy {
  pointer-events: none;
}

/* -------- Kerangka kartu -------- */

/* min-height di sini cuma jaring pengaman. Nilai sebenarnya ditulis
   inline oleh JS dari tinggi kartu yang sedang tampil, supaya tinggi
   halaman tidak berubah sedikit pun saat hasil lama diganti kerangka
   lalu diganti hasil baru. Yang di CSS dipakai kalau pengukurannya
   gagal - misalnya grid sedang kosong. */
.arc-skel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
}

.arc-skel {
  background-color: #ececec;
  border-radius: 0;
}

.arc-skel--media {
  flex: 1;
  min-height: 120px;
}

.arc-skel--line {
  height: 10px;
}

.arc-skel--title {
  width: 70%;
}

.arc-skel--price {
  width: 35%;
}

/* -------- Panel: teks disamarkan, bukan dihapus -------- */

.arc-filter-panel.is-busy .arc-filter-opt__label,
.arc-filter-panel.is-busy .arc-filter-opt__count,
.arc-filter-panel.is-busy .arc-filter-chip span {
  color: transparent;
  background-color: #ececec;
  border-radius: 0;
}

.arc-filter-panel.is-busy .arc-filter-panel__body {
  pointer-events: none;
}

/* -------- Kilau -------- */

@keyframes arc-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.arc-skel,
.arc-filter-panel.is-busy .arc-filter-opt__label,
.arc-filter-panel.is-busy .arc-filter-opt__count,
.arc-filter-panel.is-busy .arc-filter-chip span {
  background-image: linear-gradient(
    90deg,
    #ececec 25%,
    #f7f7f7 37%,
    #ececec 63%
  );
  background-size: 200% 100%;
  animation: arc-skel-shimmer 1.4s linear infinite;
}

/* Kilau dimatikan untuk yang minta gerakan dikurangi. Warna dasarnya
   tetap ada, jadi kerangkanya masih terbaca sebagai "sedang dimuat" -
   cuma tidak bergerak. */
@media (prefers-reduced-motion: reduce) {
  .arc-skel,
  .arc-filter-panel.is-busy .arc-filter-opt__label,
  .arc-filter-panel.is-busy .arc-filter-opt__count,
  .arc-filter-panel.is-busy .arc-filter-chip span {
    background-image: none;
    animation: none;
  }
}

/* ------------------------------------------------------------
   LAYAR KECIL
   ------------------------------------------------------------ */

@media (max-width: 480px) {
  .arc-filter-panel__box {
    width: 100vw;
  }

  .arc-filter-group__body--color {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-filter-panel__box,
  .arc-filter-panel__overlay {
    transition: none;
  }
}