/* css/i18n-switcher.css
 * ============================================================================
 * MODUL BARU #8a: Widget Language Switcher (ID / EN / MY) — Monokrom, Premium
 * ----------------------------------------------------------------------------
 * REVISI v2 (atas feedback user): desain lama berupa pil "ID EN MY" fixed di
 * pojok KANAN-ATAS ternyata bertabrakan dengan ikon notifikasi/hamburger di
 * index.html dan menutupi judul panel + kartu statistik di admin.html.
 *
 * Sekarang: 1 tombol BULAT KECIL fixed di pojok KANAN-BAWAH layar (menjauh
 * dari SEMUA header/topbar di 9 halaman, dan dari FAB cast/support yang
 * sudah ada di kiri-bawah). Hanya menampilkan kode bahasa aktif ("ID"),
 * mekar jadi 3 pilihan ke ARAH ATAS (bukan menimpa konten manapun) hanya
 * saat disentuh, lalu mengecil lagi otomatis.
 *
 * ADDITIF MURNI: class baru `.adip-i18n-*`, TIDAK menimpa/mengubah class
 * atau selector CSS lain di project ini (Zero-Break). Mobile-first.
 * ============================================================================
 */

.adip-i18n-switcher {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 950; /* di bawah modal/overlay penting (checkout, auth modal, dst) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
}

/* Tombol utama — bulat kecil, hanya kode bahasa aktif */
.adip-i18n-toggle {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 14, 16, 0.88);
  color: #e4e4e7;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.adip-i18n-toggle:active { transform: scale(0.92); }
.adip-i18n-switcher.is-open .adip-i18n-toggle {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Menu pilihan — tersembunyi & tidak menempati ruang / tidak bisa
   di-tap (pointer-events:none) sampai widget dibuka, jadi TIDAK PERNAH
   mengganggu konten di baliknya walau sedang "mekar". */
.adip-i18n-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(.22,.61,.36,1);
}
.adip-i18n-switcher.is-open .adip-i18n-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.adip-i18n-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 14, 16, 0.92);
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 44px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.adip-i18n-btn:hover { color: #ffffff; }
.adip-i18n-btn:active { transform: scale(0.94); }
.adip-i18n-btn.is-active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Mobile kecil: geser tipis dari tepi supaya tidak terlalu mepet edge-swipe browser */
@media (max-width: 480px) {
  .adip-i18n-switcher { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .adip-i18n-toggle { width: 34px; height: 34px; font-size: 10px; }
}

/* Desktop/PC: sedikit lebih lega & terasa "premium" (bukan sekadar mengecil) */
@media (min-width: 1024px) {
  .adip-i18n-switcher { right: 22px; bottom: 22px; }
  .adip-i18n-toggle { width: 42px; height: 42px; font-size: 11.5px; }
  .adip-i18n-btn { font-size: 11.5px; padding: 8px 14px; }
}