/* =====================================================================
   Bottom Navigation Mobile v2 (Home / Layanan / Notifikasi / Akun)
   -- File terpisah, TIDAK menyentuh ezwallet.css sama sekali.
   -- Semua warna/radius/shadow memakai variabel CSS yang sama dengan
      ezwallet.css (:root sudah didefinisikan di sana, jadi variabel ini
      otomatis tersedia karena file ini di-load sesudahnya).
   ===================================================================== */

/* 1) Desktop TETAP pakai navbar atas yang sudah ada -- sembunyikan bottom
      nav & padding bawahnya sepenuhnya di atas breakpoint mobile. */
@media (min-width:761px){
  .bottom-nav-v2{display:none!important}
  .page-shell.has-bottom-nav{padding-bottom:0!important}
}

/* 2) Icon akun di navbar ATAS hanya disembunyikan di mobile (digantikan
      tab "Akun" pada bottom nav). Class ditambahkan di partials/header.php. */
@media (max-width:760px){
  .header-account-icon{display:none!important}
}

/* 3) Tombol "Notifikasi" -- meniru persis gaya <a> bawaan .bottom-nav
      (lihat ezwallet.css) supaya konsisten, karena ini elemen <button>
      (bukan tautan), jadi perlu disamakan manual. */
.bottom-nav-v2{position:relative}
.bottom-nav-v2 button.bottom-nav-notif-trigger{
  appearance:none;background:none;border:0;padding:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:#707d90;font-size:11px;font-weight:700;font-family:inherit;
  cursor:pointer;
}
.bottom-nav-v2 button.bottom-nav-notif-trigger svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav-v2 button.bottom-nav-notif-trigger.active{color:var(--primary)}
.bottom-nav-v2 button.bottom-nav-notif-trigger.active svg{stroke:var(--primary)}

.bottom-nav-notif-icon{position:relative;display:inline-flex}
.notif-badge{
  position:absolute;top:-6px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;
  line-height:16px;text-align:center;box-shadow:0 0 0 2px #fff;
}

/* 4) Bottom Sheet -- overlay + panel */
.notif-sheet-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(15,26,45,.42);
  opacity:0;transition:opacity .22s ease;
}
.notif-sheet-overlay.is-open{opacity:1}

.notif-sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:min(100%,560px);max-height:78vh;z-index:81;
  background:var(--surface);border-radius:24px 24px 0 0;box-shadow:0 -18px 44px rgba(20,62,113,.22);
  display:flex;flex-direction:column;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.notif-sheet.is-open{transform:translate(-50%,0)}

.notif-sheet-handle{width:42px;height:5px;border-radius:99px;background:var(--line);margin:10px auto 2px;flex:none}
.notif-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:8px 20px 10px;flex:none}
.notif-sheet-header h2{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.notif-sheet-close{width:34px;height:34px;border-radius:12px;border:0;background:var(--background);display:grid;place-items:center;color:var(--muted);cursor:pointer}

.notif-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 14px 18px}
.notif-sheet-loading,.notif-sheet-empty{text-align:center;color:var(--muted);font-size:13px;padding:32px 8px}

.notif-sheet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.notif-item{
  display:block;padding:13px 14px;border-radius:var(--small-radius);background:var(--background);
  text-decoration:none;color:inherit;position:relative;
}
.notif-item.is-unread{background:var(--primary-soft)}
.notif-item.is-unread:before{
  content:"";position:absolute;left:5px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--primary);
}
.notif-item-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-left:12px}
.notif-item-title{font-size:13.5px;font-weight:750;color:var(--ink)}
.notif-item-time{font-size:10.5px;color:var(--muted);white-space:nowrap;flex:none}
.notif-item-body{font-size:12.5px;color:var(--muted);margin-top:3px;padding-left:12px;line-height:1.45}
.notif-item-tag{
  display:inline-block;margin-left:12px;margin-top:6px;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:999px;
}
.notif-item-tag.tag-transaksi{background:var(--primary-soft);color:var(--primary-dark)}
.notif-item-tag.tag-promo{background:#fff4de;color:#a8690a}
.notif-item-tag.tag-maintenance{background:#fff0f0;color:#b33238}
.notif-item-tag.tag-announcement{background:#e6f8f1;color:#16764f}

@media (prefers-reduced-motion:reduce){
  .notif-sheet,.notif-sheet-overlay{transition:none!important}
}