/*
 * Lembar menu "Lainnya" -- ponsel, pengguna yang sudah masuk.
 * Markup di resources/views/frontend/layouts/buttom_nav.blade.php (.ss-menu).
 *
 * Dikendalikan checkbox #ss-menu-buka: lembar naik dari bawah, tirai buram
 * di belakangnya. Tidak ada di layar lebar -- sidebar desktop sudah memuat
 * semua menu ini.
 */

.ss-menu-buka {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ss-menu-tirai,
.ss-menu { display: none; }

@media (max-width: 767px) {

    .ss-menu-tirai {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(15, 23, 42, .42);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s;
    }

    .ss-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        margin: 0 auto;
        max-width: 520px;
        max-height: 86vh;
        background: #ffffff;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -18px 50px rgba(15, 23, 42, .18);
        font-family: 'Plus Jakarta Sans', sans-serif;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s;
    }

    .ss-menu-buka:checked ~ .ss-menu-tirai { opacity: 1; visibility: visible; }
    .ss-menu-buka:checked ~ .ss-menu { transform: translateY(0); visibility: visible; }

    /* Halaman di belakangnya tidak ikut tergulir saat lembar dibuka. */
    body:has(.ss-menu-buka:checked) { overflow: hidden; }

    /* Laci samping "Menu Utama" terbuka: bilah bawah dan lembarnya
       disembunyikan. Dulu bilah (z-index 9999) berada di atas tirai laci,
       sehingga "Lainnya" tetap bisa diketuk dan dua menu terbuka bertumpuk. */
    body.sidebar-open .ss,
    body.sidebar-open .ss-menu,
    body.sidebar-open .ss-menu-tirai { display: none !important; }

    @media (prefers-reduced-motion: reduce) {
        .ss-menu, .ss-menu-tirai { transition: none; }
    }

    /* ---------- Kepala ---------- */

    .ss-menu__gagang {
        width: 44px;
        height: 5px;
        margin: 10px auto 4px;
        border-radius: 999px;
        background: #cbd5e1;
        flex: 0 0 auto;
    }

    .ss-menu__kepala {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px 14px;
        border-bottom: 1px solid #f1f5f9;
        flex: 0 0 auto;
    }

    .ss-menu__profil {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }

    .ss-menu__avatar {
        flex: 0 0 auto;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #0a7c3f;
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .ss-menu__identitas { min-width: 0; display: flex; flex-direction: column; }

    .ss-menu__nama {
        font-size: 15.5px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }

    .ss-menu__lihat {
        margin-top: 1px;
        font-size: 12px;
        font-weight: 700;
        color: #0a7c3f;
    }

    .ss-menu__tutup {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #f1f5f9;
        color: #334155;
        cursor: pointer;
    }

    /* ---------- Isi ---------- */

    .ss-menu__isi {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .ss-menu__judul {
        margin: 16px 2px 10px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #94a3b8;
    }

    /* Layanan: petak ikon, empat sejajar. */
    .ss-menu__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 6px;
    }

    .ss-menu__petak {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .ss-menu__petak-ikon {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        transition: transform .12s;
    }

    .ss-menu__petak:active .ss-menu__petak-ikon { transform: scale(.94); }

    .ss-menu__petak-ikon .material-symbols-outlined { font-size: 27px; }

    .ss-menu__petak-ikon--hijau  { background: #e8f5ee; color: #0a7c3f; }
    .ss-menu__petak-ikon--biru   { background: #dbeafe; color: #1d4ed8; }
    .ss-menu__petak-ikon--merah  { background: #fee2e2; color: #dc2626; }
    .ss-menu__petak-ikon--kuning { background: #fef3c7; color: #b45309; }

    .ss-menu__petak-nama {
        font-size: 11.5px;
        font-weight: 700;
        color: #334155;
        text-align: center;
        line-height: 1.25;
    }

    /* Mode akun: dua kartu berdampingan. */
    .ss-menu__mode {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .ss-menu__kartu {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 13px;
        border-radius: 18px;
        border: 1.5px solid #eef2f6;
        background: #f8fafc;
        text-decoration: none;
        min-width: 0;
    }

    .ss-menu__kartu:active { background: #f1f5f9; }

    .ss-menu__kartu-ikon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #ffffff;
        color: #0a7c3f;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
        margin-bottom: 8px;
    }

    .ss-menu__kartu-ikon .material-symbols-outlined { font-size: 22px; }

    .ss-menu__kartu-nama {
        font-size: 13.5px;
        font-weight: 800;
        color: #0f172a;
    }

    .ss-menu__kartu-ket {
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        line-height: 1.35;
    }

    .ss-menu__lencana {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
    }

    .ss-menu__lencana--tunggu { background: #fef3c7; color: #b45309; }
    .ss-menu__lencana--tolak  { background: #fee2e2; color: #b91c1c; }

    /* Akun: daftar baris. */
    .ss-menu__daftar {
        border-radius: 18px;
        border: 1.5px solid #eef2f6;
        overflow: hidden;
    }

    .ss-menu__baris {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        text-decoration: none;
        color: #0f172a;
        border-bottom: 1px solid #f1f5f9;
    }

    .ss-menu__baris:last-child { border-bottom: 0; }
    .ss-menu__baris:active { background: #f8fafc; }

    .ss-menu__baris > .material-symbols-outlined {
        font-size: 22px;
        color: #64748b;
    }

    .ss-menu__baris-nama {
        flex: 1;
        font-size: 14px;
        font-weight: 700;
    }

    .ss-menu__panah { color: #cbd5e1; flex: 0 0 auto; }

    .ss-menu__keluar-form { margin: 14px 0 0; }

    .ss-menu__keluar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border: 0;
        border-radius: 16px;
        background: #fef2f2;
        color: #dc2626;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
    }

    .ss-menu__keluar .material-symbols-outlined { font-size: 20px; }
}