/* PM_SHOP_V88_FRONT_MENU_PURPLE_GOLD */
:root {
    --pm88-purple-950: #17051f;
    --pm88-purple-900: #24072f;
    --pm88-purple-800: #3b0d55;
    --pm88-purple-700: #5f1787;
    --pm88-purple-600: #7e22ce;
    --pm88-purple-500: #a855f7;
    --pm88-gold-700: #a86f08;
    --pm88-gold-600: #d59611;
    --pm88-gold-500: #f3bd35;
    --pm88-gold-300: #ffe39a;
}

/* Panel menu utama */
#frontSideMenu.front-side-menu {
    background:
        radial-gradient(circle at 12% 0%, rgba(168, 85, 247, .20), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(243, 189, 53, .12), transparent 28%),
        linear-gradient(180deg, #16051f 0%, #0b0718 100%) !important;
    border-left: 1px solid rgba(243, 189, 53, .34) !important;
    box-shadow: -24px 0 70px rgba(0, 0, 0, .52), -2px 0 18px rgba(126, 34, 206, .18) !important;
}

#frontSideMenu .front-side-head {
    background:
        linear-gradient(135deg, rgba(57, 13, 82, .98), rgba(19, 7, 34, .98)) !important;
    border-bottom: 1px solid rgba(243, 189, 53, .28) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
}

#frontSideMenu .front-menu-close {
    color: #fff4cc !important;
    background: rgba(33, 13, 51, .92) !important;
    border-color: rgba(243, 189, 53, .52) !important;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .12) !important;
}

#frontSideMenu .front-menu-close:hover {
    color: #21102c !important;
    background: linear-gradient(135deg, var(--pm88-gold-300), var(--pm88-gold-500)) !important;
    border-color: var(--pm88-gold-300) !important;
}

#frontSideMenu .front-menu-label {
    color: var(--pm88-gold-300) !important;
    text-shadow: 0 0 16px rgba(243, 189, 53, .18) !important;
}

/* Menu biasa: gelap, tetapi tetap punya identitas ungu-emas */
#frontSideMenu .front-menu-link {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(17, 24, 48, .98), rgba(20, 10, 38, .98)) !important;
    border-color: rgba(168, 85, 247, .28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(243, 189, 53, .035),
        0 8px 22px rgba(0, 0, 0, .14) !important;
}

#frontSideMenu .front-menu-link:hover {
    transform: translateX(-2px) !important;
    background:
        linear-gradient(135deg, rgba(46, 13, 68, .98), rgba(35, 14, 49, .98)) !important;
    border-color: rgba(243, 189, 53, .55) !important;
    box-shadow:
        inset 0 0 0 1px rgba(168, 85, 247, .16),
        0 12px 26px rgba(74, 20, 105, .20) !important;
}

#frontSideMenu .front-menu-link small {
    color: #b8afc7 !important;
}

#frontSideMenu .front-menu-link > .bi-chevron-right {
    color: #f7e8bd !important;
}

#frontSideMenu .front-menu-link .left > i:first-child {
    color: #f9d86c !important;
    background:
        linear-gradient(145deg, rgba(126, 34, 206, .34), rgba(243, 189, 53, .12)) !important;
    border: 1px solid rgba(243, 189, 53, .16) !important;
    box-shadow: inset 0 0 14px rgba(168, 85, 247, .14) !important;
}

/* Top Produk, Cek Pesanan, Dashboard, Daftar: semua gradasi ungu + emas */
#frontSideMenu .front-menu-link.front-menu-highlight,
#frontSideMenu .front-menu-link.front-menu-cta {
    color: #fff !important;
    background:
        linear-gradient(105deg,
            #5a1480 0%,
            #7e22ce 28%,
            #b63b93 55%,
            #d89424 78%,
            #f3bd35 100%) !important;
    border-color: rgba(255, 226, 145, .78) !important;
    box-shadow:
        0 14px 32px rgba(126, 34, 206, .26),
        0 8px 26px rgba(213, 150, 17, .17),
        inset 0 1px 0 rgba(255, 255, 255, .23) !important;
}

#frontSideMenu .front-menu-link.front-menu-highlight:hover,
#frontSideMenu .front-menu-link.front-menu-cta:hover {
    background:
        linear-gradient(105deg,
            #6b1799 0%,
            #9333ea 30%,
            #c44498 55%,
            #e0a127 78%,
            #ffd768 100%) !important;
    border-color: #ffe39a !important;
    box-shadow:
        0 17px 36px rgba(126, 34, 206, .32),
        0 10px 30px rgba(213, 150, 17, .24),
        inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

#frontSideMenu .front-menu-link.front-menu-highlight small,
#frontSideMenu .front-menu-link.front-menu-cta small {
    color: rgba(255, 248, 225, .88) !important;
}

#frontSideMenu .front-menu-link.front-menu-highlight .left > i:first-child,
#frontSideMenu .front-menu-link.front-menu-cta .left > i:first-child {
    color: #fff5c7 !important;
    background: rgba(64, 16, 89, .24) !important;
    border-color: rgba(255, 237, 173, .34) !important;
    box-shadow: inset 0 0 18px rgba(255, 221, 112, .11) !important;
}

#frontSideMenu .front-menu-link.front-menu-highlight > .bi-chevron-right,
#frontSideMenu .front-menu-link.front-menu-cta > .bi-chevron-right {
    color: #fff9e6 !important;
}

/* Mode terang tetap ungu-emas, bukan kembali biru/oranye */
html.pm-light #frontSideMenu.front-side-menu {
    background:
        radial-gradient(circle at 12% 0%, rgba(168, 85, 247, .14), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(243, 189, 53, .12), transparent 28%),
        linear-gradient(180deg, #fffaf0 0%, #f8f1ff 100%) !important;
    border-left-color: rgba(126, 34, 206, .22) !important;
}

html.pm-light #frontSideMenu .front-side-head {
    background: linear-gradient(135deg, #fff8e7, #f3e7ff) !important;
    border-bottom-color: rgba(126, 34, 206, .18) !important;
}

html.pm-light #frontSideMenu .front-menu-link:not(.front-menu-highlight):not(.front-menu-cta) {
    color: #25112f !important;
    background: rgba(255, 255, 255, .90) !important;
    border-color: rgba(126, 34, 206, .18) !important;
}

html.pm-light #frontSideMenu .front-menu-link:not(.front-menu-highlight):not(.front-menu-cta) small {
    color: #6b5d72 !important;
}

html.pm-light #frontSideMenu .front-menu-label {
    color: #8d5f06 !important;
}