/* ==================================================================
   BILAH BAWAH -- LAPISAN PENYELARAS
   ==================================================================

   Bilah bawah pembeli (frontend/layouts/buttom_nav.blade.php) dan bilah
   bawah penjual (spl_owner/layouts/owner_sidebar.blade.php) memakai kosakata
   kelas YANG SAMA -- .ss-nav, .ss-link, .ss-badge -- tetapi masing-masing
   membawa salinan CSS-nya sendiri di dalam <style> sebaris, sekitar 340 baris
   per berkas. Daftar selektornya sudah mulai berbeda: versi penjual punya
   .ss-badge-warning, .ss-status-pending, .ss-teks-panjang, .ss-teks-pendek
   yang tidak ada di versi pembeli.

   Dua salinan berarti setiap perbaikan harus diingat dua kali, dan yang
   terlupa menjadi bilah yang perlahan berbeda dari saudaranya.

   Berkas ini DIMUAT SESUDAH keduanya dan menyeragamkan tampilannya di satu
   tempat. Ia sengaja BUKAN pengganti: memindahkan 340 baris itu ke sini
   berarti ikut memindahkan gaya laci samping dan drawer yang bercampur di
   dalamnya, dan tidak satu pun bisa diuji tanpa membuka sepuluh halaman.
   Pembersihan itu pekerjaan tersendiri.

   !important dipakai karena aturan sebaris yang ditimpanya juga memakai
   !important -- bukan sebagai kebiasaan.
   ================================================================== */

@media (max-width: 991px) {

    :root {
        --ss-hijau: #0a7c3f;
        --ss-hijau-lembut: #e8f5ee;
        --ss-abu: #64748b;
        --ss-abu-muda: #94a3b8;
    }

    /* ------------------------------------------------------------------
       WADAH
       ------------------------------------------------------------------ */

    .ss .ss-nav,
    .ss-nav {
        /*
         * Ruang aman iPhone. Tanpa ini bilahnya duduk tepat di atas garis
         * home indicator, dan slot paling bawah ikut tertutup gestur sistem
         * -- ketukan pertama sering hanya menutup keyboard atau memicu
         * gestur, bukan berpindah halaman.
         */
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------------
       SATU SLOT
       ------------------------------------------------------------------ */

    .ss-nav .ss-link {
        position: relative !important;
        gap: 3px !important;

        /*
         * Sasaran sentuh penuh, bukan sebesar ikonnya saja. Ambangnya 44px
         * (Apple HIG); slot ini 56px supaya labelnya ikut bisa ditekan --
         * orang menekan kata, bukan gambar.
         */
        min-height: 56px !important;
        padding: 6px 2px !important;

        color: var(--ss-abu) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color .16s ease !important;
    }

    /* ------------------------------------------------------------------
       IKON + PIL AKTIF
       ------------------------------------------------------------------

       Sebelumnya keadaan aktif hanya ditandai PERUBAHAN WARNA. Di layar
       ponsel di bawah matahari, beda hijau dan abu pada ikon setipis itu
       nyaris tidak terbaca -- dan bagi pengguna yang sulit membedakan warna,
       tidak terbaca sama sekali.

       Pil lembut di belakang ikon menambahkan penanda BENTUK, bukan cuma
       warna. Ia tidak menggeser tata letak: lebarnya tetap, dan slot yang
       tidak aktif menyisakan ruang yang sama.
       ------------------------------------------------------------------ */

    .ss-nav .ss-link > .material-symbols-outlined,
    .ss-nav .ss-link > .ss-badge-wrapper {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 46px !important;
        height: 28px !important;
        border-radius: 999px !important;
        font-size: 22px !important;
        transition: background .16s ease, color .16s ease !important;
    }

    .ss-nav .ss-link.active {
        color: var(--ss-hijau) !important;
    }

    .ss-nav .ss-link.active > .material-symbols-outlined,
    .ss-nav .ss-link.active > .ss-badge-wrapper {
        background: var(--ss-hijau-lembut) !important;
        color: var(--ss-hijau) !important;
    }

    /* ------------------------------------------------------------------
       SAKELAR "LAINNYA" -- DUA IKON, SATU YANG TERLIHAT
       ------------------------------------------------------------------

       Bilah pembeli memakai satu <label> yang memuat DUA ikon: hamburger
       saat laci tertutup, silang saat terbuka. Bilahnya sendiri
       menyembunyikan yang tidak dipakai lewat

           .ss-laci-tutup { display: none !important; }

       -- kekhususan (0,1,0).

       Aturan ukuran ikon di berkas ini berbunyi

           .ss-nav .ss-link > .material-symbols-outlined { display: inline-flex !important; }

       -- kekhususan (0,2,0), jadi IA YANG MENANG. Akibatnya kedua ikon
       tampil bertumpuk, slot "Lainnya" menjadi lebih tinggi daripada empat
       tetangganya, dan seluruh baris ikut miring: label "Transaksi" dan
       "Lainnya" turun sendiri dari "Beranda" dan "Pesan".

       Kekhususannya dikembalikan di sini, bukan dengan melemahkan aturan
       ukuran di atas -- aturan itu memang perlu !important karena yang
       ditimpanya juga memakainya.
       ------------------------------------------------------------------ */

    .ss-nav .ss-link > .ss-laci-tutup {
        display: none !important;
    }

    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link > .ss-laci-tutup {
        display: inline-flex !important;
    }

    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link > .ss-laci-lihat {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       LABEL
       ------------------------------------------------------------------ */

    .ss-nav .ss-link > span:not(.material-symbols-outlined):not(.ss-badge-wrapper):not(.ss-badge) {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -.01em !important;

        /* Nama menu dipotong dengan elipsis, bukan dibiarkan pecah dua baris.
           Slot yang tingginya berbeda-beda membuat seluruh bilah bergoyang. */
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ss-nav .ss-link.active > span:not(.material-symbols-outlined):not(.ss-badge-wrapper):not(.ss-badge) {
        color: var(--ss-hijau) !important;
    }

    /* ------------------------------------------------------------------
       LENCANA
       ------------------------------------------------------------------

       Ukuran dan letaknya disamakan di kedua bilah. Sebelumnya masing-masing
       menghitung sendiri, sehingga lencana pembeli dan penjual duduk pada
       ketinggian yang berbeda di atas ikon yang sama besar.
       ------------------------------------------------------------------ */

    .ss-nav .ss-badge {
        position: absolute !important;
        top: -2px !important;
        right: 4px !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        border: 2px solid #fff !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        line-height: 12px !important;
        text-align: center !important;
    }

    /* ------------------------------------------------------------------
       SLOT TENGAH -- TOMBOL UTAMA
       ------------------------------------------------------------------

       Satu slot diangkat menjadi lingkaran penuh warna, sisanya tetap ikon
       datar. Pada bilah berisi lima ikon yang seragam, tidak ada satu pun
       yang terbaca lebih penting, sehingga aksi yang paling sering dituju
       harus dicari dengan mata setiap kali.

       Bentuk DAN warna dipakai bersamaan -- bukan warna saja. Lingkaran
       tetap terbaca sebagai "yang utama" pada layar di bawah matahari dan
       bagi pengguna yang sulit membedakan warna.

       SEJAJAR, TIDAK MENJOROK KELUAR
       ------------------------------
       Versi pertama menaikkannya 20px melewati tepi bilah dengan cincin
       putih 4px -- pola tombol mengambang yang lazim, tetapi BUKAN yang
       diminta. Lingkarannya kini duduk di dalam bilah, dan pusatnya
       disejajarkan dengan pusat ikon tetangganya, bukan dengan tengah
       slot: slot tetangga berisi ikon DAN label, jadi memusatkan terhadap
       slot akan menjatuhkannya beberapa piksel di bawah barisan ikon.

       LABELNYA SENGAJA DIHILANGKAN. Ikon di dalam lingkaran penuh warna
       sudah dikenali, dan label di bawah lingkaran yang lebih besar membuat
       slot ini lebih tinggi daripada tetangganya -- seluruh bilah lalu
       bergoyang.
       ------------------------------------------------------------------ */

    /*
     * RUANG ATAS UNTUK LINGKARAN.
     *
     * Lingkaran 46px lebih tinggi daripada pil ikon 28px milik slot biasa.
     * Dengan pusat yang disejajarkan, ia menjulur 9px ke atas dari barisan
     * ikon -- dan tanpa ruang tambahan, 3px di antaranya keluar dari tepi
     * bilah. Diukur: puncak lingkaran 728 sementara puncak bilah 731.
     *
     * 10px membuatnya masuk seluruhnya dengan sisa yang terlihat, sekaligus
     * memberi bilahnya napas yang memang kurang sebelum ini.
     */
    .ss .ss-nav,
    .ss-nav {
        padding-top: 10px !important;
    }

    .ss-nav .ss-link.ss-link--pusat > .material-symbols-outlined,
    .ss-nav .ss-link.ss-link--pusat > .ss-badge-wrapper {
        width: 46px !important;
        height: 46px !important;
        border-radius: 999px !important;

        background: var(--ss-hijau) !important;
        box-shadow: 0 6px 14px rgba(10, 124, 63, .28) !important;

        /*
         * MARGIN NEGATIF SIMETRIS, bukan hanya di atas.
         *
         * Pil ikon slot biasa setinggi 28px; lingkaran ini 46px. Selisihnya
         * 18px, sembilan di atas dan sembilan di bawah. Dengan -9px pada
         * KEDUA sisi, kotak tata letaknya kembali menjadi 28px -- persis
         * setinggi tetangganya -- sementara yang tergambar tetap 46px dan
         * terpusat pada titik yang sama.
         *
         * Ini bukan sekadar rapi: margin negatif hanya di atas membuat slot
         * tengah 9px lebih tinggi daripada empat tetangganya, dan pada baris
         * flex itu berarti seluruh label ikut bergeser. Angkanya pun tidak
         * lagi hasil coba-coba -- ia (46 - 28) / 2, dan ikut berubah sendiri
         * bila salah satu ukuran itu disesuaikan.
         */
        margin-top: -9px !important;
        margin-bottom: -9px !important;
    }

    /* Keadaan aktif TIDAK mengubah lingkarannya -- ia sudah penuh warna, dan
       pil lembut milik slot biasa justru akan menghapus warnanya. */
    .ss-nav .ss-link.ss-link--pusat.active > .material-symbols-outlined,
    .ss-nav .ss-link.ss-link--pusat.active > .ss-badge-wrapper {
        background: var(--ss-hijau) !important;
    }

    /*
     * IKON PUTIH -- SELEKTOR KETURUNAN, BUKAN ANAK LANGSUNG.
     *
     * Slot yang berlencana membungkus ikonnya di dalam .ss-badge-wrapper,
     * jadi glyph-nya CUCU dari .ss-link, bukan anak. Aturan `> ` di atas
     * hanya mewarnai pembungkusnya; glyph di dalamnya punya aturan warna
     * sendiri dari <style> sebaris bilah dan tetap abu.
     *
     * Diukur: pembungkus mengembalikan rgb(255,255,255) sementara ikonnya
     * rgb(117,117,117) -- putih yang tidak pernah sampai ke huruf yang
     * benar-benar terlihat.
     */
    .ss-nav .ss-link.ss-link--pusat .material-symbols-outlined {
        color: #fff !important;
        font-size: 24px !important;
    }

    .ss-nav .ss-link.ss-link--pusat > span:not(.material-symbols-outlined):not(.ss-badge-wrapper):not(.ss-badge) {
        display: none !important;
    }

    /* Rata atas, supaya lingkarannya berpatokan pada barisan ikon --
       bukan pada tengah slot yang juga memuat label. */
    .ss-nav .ss-link.ss-link--pusat {
        justify-content: flex-start !important;
    }

    /* Lencana pindah ke tepi lingkaran; cincinnya putih agar tetap terbaca
       di atas hijau. */
    .ss-nav .ss-link--pusat .ss-badge {
        top: -3px !important;
        right: -3px !important;
        border-color: #fff !important;
    }

    /* ------------------------------------------------------------------
       SLOT TENGAH DI DALAM LACI: KEMBALI MENJADI BARIS BIASA
       ------------------------------------------------------------------

       Tombol tengah dirancang untuk BILAH MENDATAR: lingkaran penuh warna
       tanpa label, karena di sana ikon dalam lingkaran sudah cukup dikenali
       dan label di bawahnya akan membuat slotnya lebih tinggi daripada
       tetangganya.

       Begitu laci "Lainnya" dibuka, bilah itu berubah menjadi DAFTAR
       MENURUN, dan kedua alasan tadi gugur sekaligus. Yang tersisa hanya
       akibatnya: satu lingkaran hijau besar tanpa tulisan, mengambang di
       antara "Pesan" dan "Transaksi" -- tidak ada yang memberi tahu bahwa
       itu Keranjang. Di dalam daftar, labelnya justru satu-satunya yang
       menjelaskan.

       Aturan di bawah mengembalikannya menjadi baris biasa. Kekhususannya
       lebih tinggi daripada aturan tombol tengah (empat kelas berbanding
       tiga) sehingga tidak bergantung pada urutan penulisan.
       ------------------------------------------------------------------ */

    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link.ss-link--pusat > .material-symbols-outlined,
    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link.ss-link--pusat > .ss-badge-wrapper {
        width: 46px !important;
        height: 28px !important;
        border-radius: 999px !important;

        /* Kembali ke pil lembut milik slot biasa; lingkaran penuh warna
           hanya berlaku di bilah mendatar. */
        background: transparent !important;
        color: var(--ss-abu) !important;
        font-size: 22px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    /* Keadaan aktif di dalam laci mengikuti slot biasa: pil hijau lembut. */
    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link.ss-link--pusat.active > .material-symbols-outlined,
    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link.ss-link--pusat.active > .ss-badge-wrapper {
        background: var(--ss-hijau-lembut) !important;
        color: var(--ss-hijau) !important;
    }

    /* Labelnya kembali, dan inilah inti perbaikannya. */
    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link.ss-link--pusat > span:not(.material-symbols-outlined):not(.ss-badge-wrapper):not(.ss-badge) {
        display: inline !important;
    }

    /* Lencana kembali ke posisi slot biasa. */
    .ss-laci-buka:checked ~ .ss .ss-nav .ss-link--pusat .ss-badge {
        top: -2px !important;
        right: 4px !important;
    }

    /* ------------------------------------------------------------------
       SENTUHAN
       ------------------------------------------------------------------ */

    .ss-nav .ss-link:active > .material-symbols-outlined,
    .ss-nav .ss-link:active > .ss-badge-wrapper {
        transform: scale(.92);
    }

    @media (prefers-reduced-motion: reduce) {
        .ss-nav .ss-link,
        .ss-nav .ss-link > .material-symbols-outlined,
        .ss-nav .ss-link > .ss-badge-wrapper {
            transition: none !important;
        }

        .ss-nav .ss-link:active > .material-symbols-outlined,
        .ss-nav .ss-link:active > .ss-badge-wrapper {
            transform: none;
        }
    }
}