/* FlexMovie Neon Blue UI - global lightweight skin */
:root {
    --fm-neon-blue: #00a8ff;
    --fm-neon-blue-2: #38bdf8;
    --fm-neon-blue-3: #2563eb;
    --fm-neon-bg: #0c1018;
    --fm-neon-card: rgba(20, 24, 34, .78);
    --fm-neon-border: rgba(56, 189, 248, .18);
    --fm-neon-text: #eef6ff;
    --fm-neon-muted: #9aa7ba;
    --fm-neon-shadow: 0 18px 48px rgba(0, 168, 255, .16);
}

@supports (backdrop-filter: blur(16px)) {
    .mobile-menu-footer {
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}

.mobile-menu-footer {
    border: 1px solid rgba(56, 189, 248, .16) !important;
    background: rgba(12, 16, 24, .82) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 45px rgba(0,168,255,.12) !important;
}

.mobile-menu-footer ul {
    gap: 6px;
}

.mobile-menu-footer ul li a,
.mobile-menu-footer ul li > div {
    color: #b9c5d6 !important;
    border-radius: 16px;
    transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mobile-menu-footer ul li a:hover,
.mobile-menu-footer ul li > div:hover,
.mobile-menu-footer ul li.current-item a {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(0,168,255,.22), rgba(37,99,235,.16)) !important;
    box-shadow: inset 0 0 0 1px rgba(56,189,248,.24), 0 8px 28px rgba(0,168,255,.14);
}

.mobile-menu-footer svg {
    transition: transform .18s ease, filter .18s ease;
}

.mobile-menu-footer ul li a:hover svg,
.mobile-menu-footer ul li > div:hover svg,
.mobile-menu-footer ul li.current-item svg {
    filter: drop-shadow(0 0 8px rgba(56,189,248,.55));
    transform: translateY(-1px);
}

.mobile-menu-footer img {
    border: 2px solid rgba(56,189,248,.72) !important;
    box-shadow: 0 0 0 5px rgba(0,168,255,.1), 0 0 22px rgba(0,168,255,.24) !important;
}

@media (max-width: 768px) {
    .mobile-menu-footer {
        width: calc(100% - 18px) !important;
        right: 9px !important;
        left: 9px !important;
        bottom: 8px !important;
        border-radius: 24px !important;
        overflow: hidden;
    }

    body {
        padding-bottom: 86px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-footer *,
    .fm-neon-panel * {
        transition: none !important;
        animation: none !important;
    }
}


/* -------------------------------------------------------------------------
   FlexMovie Glass Bottom Navigation - Neon Blue
   Safe CSS-only upgrade. Works on mobile and desktop.
   ------------------------------------------------------------------------- */

:root {
    --fm-glass-blue: #00a8ff;
    --fm-glass-blue-2: #38bdf8;
    --fm-glass-blue-3: #2563eb;
    --fm-glass-bg: rgba(10, 14, 22, .58);
    --fm-glass-bg-strong: rgba(14, 19, 30, .72);
    --fm-glass-border: rgba(125, 211, 252, .22);
    --fm-glass-text: rgba(239, 246, 255, .82);
    --fm-glass-muted: rgba(186, 200, 218, .72);
}

/* Keep content clear from the fixed navigation */
body {
    padding-bottom: max(86px, env(safe-area-inset-bottom)) !important;
}

/* Enable bottom nav globally, including desktop */
.mobile-menu-footer {
    display: block !important;
    position: fixed !important;
    right: 50% !important;
    left: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: min(620px, calc(100% - 28px)) !important;
    transform: translateX(50%) !important;
    border: 1px solid var(--fm-glass-border) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
        radial-gradient(circle at 18% 12%, rgba(56,189,248,.18), transparent 42%),
        radial-gradient(circle at 78% 100%, rgba(37,99,235,.18), transparent 48%),
        var(--fm-glass-bg) !important;
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 38px rgba(0,168,255,.16) !important;
    background-color: rgba(7, 16, 30, .08) !important;
    isolation: isolate !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    .mobile-menu-footer {
        backdrop-filter: blur(20px) saturate(155%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
    }
}

/* Top shine line */
.mobile-menu-footer:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(186,230,253,.52), transparent);
    pointer-events: none;
}

.mobile-menu-footer ul,
.mobile-menu-footer ul.container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px !important;
}

.mobile-menu-footer ul li {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-menu-footer ul li a,
.mobile-menu-footer ul li > div {
    width: 100% !important;
    min-height: 58px !important;
    padding: 7px 4px 6px !important;
    border-radius: 19px !important;
    color: var(--fm-glass-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -.2px !important;
    text-decoration: none !important;
    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

/* Icon frame */
.mobile-menu-footer .svg-icon {
    width: 27px !important;
    height: 27px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}

.mobile-menu-footer .svg-icon svg,
.mobile-menu-footer ul li .svg-icon svg {
    width: 17px !important;
    height: 17px !important;
    color: var(--fm-glass-blue-2) !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    filter: drop-shadow(0 0 7px rgba(56,189,248,.22)) !important;
    transition: transform .22s ease, filter .22s ease, color .22s ease !important;
}

/* Some theme icons may use fill instead of stroke */
.mobile-menu-footer .svg-icon svg path,
.mobile-menu-footer .svg-icon svg use {
    color: inherit !important;
}

/* Active / hover */
.mobile-menu-footer ul li a:hover,
.mobile-menu-footer ul li > div:hover,
.mobile-menu-footer ul li.current-item a,
.mobile-menu-footer ul li.current-menu-item a {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(14,165,233,.20), rgba(37,99,235,.13)) !important;
    border-color: rgba(56,189,248,.23) !important;
    box-shadow:
        0 10px 30px rgba(0,168,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.04) !important;
    transform: translateY(-2px) !important;
}

.mobile-menu-footer ul li a:hover .svg-icon,
.mobile-menu-footer ul li > div:hover .svg-icon,
.mobile-menu-footer ul li.current-item a .svg-icon,
.mobile-menu-footer ul li.current-menu-item a .svg-icon {
    background: linear-gradient(135deg, rgba(0,168,255,.34), rgba(37,99,235,.20)) !important;
    border-color: rgba(125,211,252,.45) !important;
    box-shadow:
        0 0 0 4px rgba(0,168,255,.08),
        0 0 24px rgba(0,168,255,.28),
        inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.mobile-menu-footer ul li a:hover svg,
.mobile-menu-footer ul li > div:hover svg,
.mobile-menu-footer ul li.current-item svg,
.mobile-menu-footer ul li.current-menu-item svg {
    color: #ffffff !important;
    filter: drop-shadow(0 0 10px rgba(125,211,252,.75)) !important;
    transform: translateY(-1px) scale(1.03) !important;
}

/* User avatar item */
.mobile-menu-footer img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 14px !important;
    padding: 2px !important;
    object-fit: cover !important;
    border: 1px solid rgba(125,211,252,.55) !important;
    box-shadow:
        0 0 0 4px rgba(0,168,255,.08),
        0 0 20px rgba(0,168,255,.24) !important;
}

/* Old special home hexagon must not break glass style */
.mobile-menu-footer ul li#homeLinkBtn,
.mobile-menu-footer ul li.item-home {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.mobile-menu-footer ul li#homeLinkBtn a {
    color: var(--fm-glass-muted) !important;
}

/* Desktop: a little wider and calmer */
@media (min-width: 992px) {
    .mobile-menu-footer {
        width: min(590px, calc(100% - 48px)) !important;
        bottom: 22px !important;
        border-radius: 28px !important;
    }

    .mobile-menu-footer ul,
    .mobile-menu-footer ul.container {
        padding: 8px !important;
    }

    .mobile-menu-footer ul li a,
    .mobile-menu-footer ul li > div {
        min-height: 60px !important;
        font-size: 10.8px !important;
    }
}

/* Mobile: compact and close to the user's reference */
@media (max-width: 768px) {
    body {
        padding-bottom: max(82px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-menu-footer {
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        bottom: calc(9px + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        border-radius: 24px !important;
    }

    .mobile-menu-footer ul,
    .mobile-menu-footer ul.container {
        gap: 4px !important;
        padding: 6px !important;
    }

    .mobile-menu-footer ul li a,
    .mobile-menu-footer ul li > div {
        min-height: 55px !important;
        font-size: 10px !important;
        border-radius: 17px !important;
    }

    .mobile-menu-footer .svg-icon {
        width: 25px !important;
        height: 25px !important;
        border-radius: 11px !important;
    }

    .mobile-menu-footer .svg-icon svg,
    .mobile-menu-footer ul li .svg-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .mobile-menu-footer ul li a,
    .mobile-menu-footer ul li > div {
        font-size: 9.3px !important;
        gap: 2px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .mobile-menu-footer .svg-icon {
        width: 23px !important;
        height: 23px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-footer,
    .mobile-menu-footer * {
        transition: none !important;
        animation: none !important;
    }
}

/* -------------------------------------------------------------------------
   FlexMovie Liquid Glass Bottom Menu - Neon Blue Frosted Glass Update
   CSS-only patch: thinner neon-blue icons, 70% transparent frosted glass background, softer active pill.
   ------------------------------------------------------------------------- */
:root {
    --fm-liquid-accent: #18bfff;
    --fm-liquid-accent-2: #66e7ff;
    --fm-liquid-bg: rgba(7, 16, 30, .08);
    --fm-liquid-bg-strong: rgba(10, 24, 44, .14);
    --fm-liquid-border: rgba(255, 255, 255, .22);
    --fm-liquid-border-blue: rgba(102, 231, 255, .38);
    --fm-liquid-text: rgba(255, 255, 255, .86);
    --fm-liquid-muted: rgba(225, 246, 255, .82);
}

body {
    padding-bottom: max(86px, env(safe-area-inset-bottom)) !important;
}

.mobile-menu-footer,
[dark="true"] .mobile-menu-footer,
[dark=true] .mobile-menu-footer,
.fm-neon-panel .mobile-menu-footer {
    display: block !important;
    position: fixed !important;
    right: 50% !important;
    left: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: min(535px, calc(100% - 28px)) !important;
    transform: translateX(50%) !important;
    border-radius: 30px !important;
    border: 1px solid var(--fm-liquid-border) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.014)),
        radial-gradient(circle at 14% 50%, rgba(24,191,255,.075), transparent 44%),
        radial-gradient(circle at 88% 50%, rgba(255,255,255,.045), transparent 38%),
        var(--fm-liquid-bg) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 0 30px rgba(24,191,255,.10) !important;
    background-color: rgba(7, 16, 30, .08) !important;
    isolation: isolate !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .mobile-menu-footer,
    [dark="true"] .mobile-menu-footer,
    [dark=true] .mobile-menu-footer,
    .fm-neon-panel .mobile-menu-footer {
        backdrop-filter: blur(14px) saturate(185%) contrast(106%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(185%) contrast(106%) !important;
    }
}

.mobile-menu-footer::before {
    content: "";
    position: absolute;
    inset: 0 12px auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent) !important;
    pointer-events: none;
}

.mobile-menu-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24,191,255,.050), transparent 30%, rgba(255,255,255,.035) 70%, rgba(24,191,255,.050));
    pointer-events: none;
    opacity: .48;
}

.mobile-menu-footer ul,
.mobile-menu-footer ul.container,
.fm-neon-panel .mobile-menu-footer ul,
.fm-neon-panel .mobile-menu-footer ul.container {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 7px !important;
}

.mobile-menu-footer ul li,
.fm-neon-panel .mobile-menu-footer ul li {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.mobile-menu-footer ul li > a,
.mobile-menu-footer ul li > div,
.fm-neon-panel .mobile-menu-footer ul li > a,
.fm-neon-panel .mobile-menu-footer ul li > div {
    width: 100% !important;
    min-height: 54px !important;
    padding: 7px 4px 6px !important;
    border-radius: 24px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--fm-liquid-muted) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -.25px !important;
    text-decoration: none !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.34) !important;
    transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.mobile-menu-footer .svg-icon,
.fm-neon-panel .mobile-menu-footer .svg-icon {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--fm-liquid-accent) !important;
}

.mobile-menu-footer .svg-icon svg,
.mobile-menu-footer ul li .svg-icon svg,
.fm-neon-panel .mobile-menu-footer .svg-icon svg,
.fm-neon-panel .mobile-menu-footer ul li .svg-icon svg {
    width: 21px !important;
    height: 21px !important;
    color: var(--fm-liquid-accent) !important;
    filter: drop-shadow(0 0 8px rgba(24,191,255,.28)) !important;
    transform: translateZ(0) !important;
}

.mobile-menu-footer .svg-icon svg *,
.fm-neon-panel .mobile-menu-footer .svg-icon svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.45 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

.mobile-menu-footer ul li > a:hover,
.mobile-menu-footer ul li > div:hover,
.mobile-menu-footer ul li.current-item > a,
.mobile-menu-footer ul li.current-menu-item > a,
.mobile-menu-footer ul li.current-item > div,
.mobile-menu-footer ul li.current-menu-item > div,
.fm-neon-panel .mobile-menu-footer ul li > a:hover,
.fm-neon-panel .mobile-menu-footer ul li > div:hover,
.fm-neon-panel .mobile-menu-footer ul li.current-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-item > div,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > div {
    color: var(--fm-liquid-text) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        rgba(24,191,255,.095) !important;
    border-color: var(--fm-liquid-border-blue) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 9px 28px rgba(0,0,0,.20),
        0 0 30px rgba(24,191,255,.20) !important;
    transform: translateY(-1px) !important;
}

.mobile-menu-footer ul li > a:hover .svg-icon,
.mobile-menu-footer ul li > div:hover .svg-icon,
.mobile-menu-footer ul li.current-item .svg-icon,
.mobile-menu-footer ul li.current-menu-item .svg-icon,
.fm-neon-panel .mobile-menu-footer ul li > a:hover .svg-icon,
.fm-neon-panel .mobile-menu-footer ul li > div:hover .svg-icon,
.fm-neon-panel .mobile-menu-footer ul li.current-item .svg-icon,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item .svg-icon {
    color: var(--fm-liquid-accent-2) !important;
}

.mobile-menu-footer ul li > a:hover svg,
.mobile-menu-footer ul li > div:hover svg,
.mobile-menu-footer ul li.current-item svg,
.mobile-menu-footer ul li.current-menu-item svg,
.fm-neon-panel .mobile-menu-footer ul li > a:hover svg,
.fm-neon-panel .mobile-menu-footer ul li > div:hover svg,
.fm-neon-panel .mobile-menu-footer ul li.current-item svg,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item svg {
    color: var(--fm-liquid-accent-2) !important;
    filter: drop-shadow(0 0 11px rgba(102,231,255,.52)) !important;
}

.mobile-menu-footer ul li img,
.fm-neon-panel .mobile-menu-footer ul li img {
    width: 34px !important;
    height: 34px !important;
    padding: 2px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: 0 0 0 4px rgba(24,191,255,.08), 0 0 22px rgba(24,191,255,.24) !important;
}

.mobile-menu-footer ul li#homeLinkBtn,
.mobile-menu-footer ul li.item-home,
.fm-neon-panel .mobile-menu-footer ul li#homeLinkBtn,
.fm-neon-panel .mobile-menu-footer ul li.item-home {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

@media (max-width: 768px) {
    body {
        padding-bottom: max(82px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-menu-footer,
    [dark="true"] .mobile-menu-footer,
    [dark=true] .mobile-menu-footer,
    .fm-neon-panel .mobile-menu-footer {
        right: 9px !important;
        left: 9px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        transform: none !important;
        border-radius: 28px !important;
    }

    .mobile-menu-footer ul,
    .mobile-menu-footer ul.container,
    .fm-neon-panel .mobile-menu-footer ul,
    .fm-neon-panel .mobile-menu-footer ul.container {
        gap: 3px !important;
        padding: 6px !important;
    }

    .mobile-menu-footer ul li > a,
    .mobile-menu-footer ul li > div,
    .fm-neon-panel .mobile-menu-footer ul li > a,
    .fm-neon-panel .mobile-menu-footer ul li > div {
        min-height: 52px !important;
        border-radius: 22px !important;
        font-size: 10px !important;
    }

    .mobile-menu-footer .svg-icon svg,
    .mobile-menu-footer ul li .svg-icon svg,
    .fm-neon-panel .mobile-menu-footer .svg-icon svg,
    .fm-neon-panel .mobile-menu-footer ul li .svg-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 380px) {
    .mobile-menu-footer ul li > a,
    .mobile-menu-footer ul li > div,
    .fm-neon-panel .mobile-menu-footer ul li > a,
    .fm-neon-panel .mobile-menu-footer ul li > div {
        font-size: 9.2px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/* -------------------------------------------------------------------------
   Final Fix: Real Frosted / Liquid Glass Bottom Menu
   Goal: about 70% background visibility with a clear frosted-glass feel.
   This block is intentionally placed at the end to override older dark layers.
   ------------------------------------------------------------------------- */
:root {
    --fm-liquid-accent: #18bfff;
    --fm-liquid-accent-2: #66e7ff;
    --fm-liquid-border: rgba(255, 255, 255, .30);
    --fm-liquid-border-blue: rgba(102, 231, 255, .42);
    --fm-liquid-text: rgba(255, 255, 255, .92);
    --fm-liquid-muted: rgba(230, 247, 255, .86);
}

.mobile-menu-footer,
[dark="true"] .mobile-menu-footer,
[dark=true] .mobile-menu-footer,
.fm-neon-panel .mobile-menu-footer {
    background:
        linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.030)),
        linear-gradient(90deg, rgba(24,191,255,.045), rgba(255,255,255,.018) 46%, rgba(24,191,255,.045)),
        rgba(255,255,255,.055) !important;
    background-color: rgba(255,255,255,.055) !important;
    background-clip: padding-box !important;
    border-color: var(--fm-liquid-border) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(255,255,255,.08),
        0 0 24px rgba(24,191,255,.08) !important;
}

@supports ((backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px))) {
    .mobile-menu-footer,
    [dark="true"] .mobile-menu-footer,
    [dark=true] .mobile-menu-footer,
    .fm-neon-panel .mobile-menu-footer {
        backdrop-filter: blur(7px) saturate(205%) brightness(118%) contrast(105%) !important;
        -webkit-backdrop-filter: blur(7px) saturate(205%) brightness(118%) contrast(105%) !important;
    }
}

.mobile-menu-footer::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent) !important;
    opacity: .62 !important;
}

.mobile-menu-footer::after {
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.11), transparent 42%),
        radial-gradient(circle at 84% 86%, rgba(24,191,255,.075), transparent 46%),
        linear-gradient(90deg, rgba(255,255,255,.030), transparent 34%, rgba(255,255,255,.030)) !important;
    opacity: .32 !important;
}

.mobile-menu-footer ul li > a,
.mobile-menu-footer ul li > div,
.fm-neon-panel .mobile-menu-footer ul li > a,
.fm-neon-panel .mobile-menu-footer ul li > div {
    text-shadow: 0 1px 8px rgba(0,0,0,.52) !important;
}

.mobile-menu-footer ul li > a:hover,
.mobile-menu-footer ul li > div:hover,
.mobile-menu-footer ul li.current-item > a,
.mobile-menu-footer ul li.current-menu-item > a,
.mobile-menu-footer ul li.current-item > div,
.mobile-menu-footer ul li.current-menu-item > div,
.fm-neon-panel .mobile-menu-footer ul li > a:hover,
.fm-neon-panel .mobile-menu-footer ul li > div:hover,
.fm-neon-panel .mobile-menu-footer ul li.current-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-item > div,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > div {
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
        rgba(24,191,255,.070) !important;
    border-color: rgba(102,231,255,.48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 8px 24px rgba(0,0,0,.16),
        0 0 28px rgba(24,191,255,.18) !important;
}

/* -------------------------------------------------------------------------
   Final Override: Smoked Semi-Blue Frosted Glass Bottom Menu
   Goal: smoky blue glass, natural blur, around 70% background visibility.
   ------------------------------------------------------------------------- */
:root {
    --fm-smoked-blue-accent: #18bfff;
    --fm-smoked-blue-accent-2: #66e7ff;
    --fm-smoked-blue-border: rgba(132, 219, 255, .34);
    --fm-smoked-blue-text: rgba(255, 255, 255, .94);
    --fm-smoked-blue-muted: rgba(225, 243, 255, .84);
}

.mobile-menu-footer,
[dark="true"] .mobile-menu-footer,
[dark=true] .mobile-menu-footer,
.fm-neon-panel .mobile-menu-footer {
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
        linear-gradient(90deg, rgba(6, 23, 36, .24), rgba(9, 18, 28, .15) 46%, rgba(20, 57, 82, .22)),
        rgba(6, 17, 28, .18) !important;
    background-color: rgba(6, 17, 28, .18) !important;
    border-color: var(--fm-smoked-blue-border) !important;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 0 28px rgba(24,191,255,.10) !important;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .mobile-menu-footer,
    [dark="true"] .mobile-menu-footer,
    [dark=true] .mobile-menu-footer,
    .fm-neon-panel .mobile-menu-footer {
        backdrop-filter: blur(8px) saturate(175%) brightness(96%) contrast(108%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(175%) brightness(96%) contrast(108%) !important;
    }
}

.mobile-menu-footer::before {
    background: linear-gradient(90deg, transparent, rgba(186, 230, 253, .52), transparent) !important;
    opacity: .50 !important;
}

.mobile-menu-footer::after {
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.070), transparent 42%),
        radial-gradient(circle at 82% 92%, rgba(24,191,255,.085), transparent 48%),
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 38%, rgba(24,191,255,.026)) !important;
    opacity: .42 !important;
}

.mobile-menu-footer ul li > a,
.mobile-menu-footer ul li > div,
.fm-neon-panel .mobile-menu-footer ul li > a,
.fm-neon-panel .mobile-menu-footer ul li > div {
    color: var(--fm-smoked-blue-muted) !important;
    text-shadow: 0 1px 7px rgba(0,0,0,.62) !important;
}

.mobile-menu-footer .svg-icon,
.mobile-menu-footer ul li .svg-icon,
.fm-neon-panel .mobile-menu-footer .svg-icon,
.fm-neon-panel .mobile-menu-footer ul li .svg-icon {
    background: rgba(255,255,255,.035) !important;
    border-color: rgba(132,219,255,.16) !important;
}

.mobile-menu-footer .svg-icon svg,
.mobile-menu-footer ul li .svg-icon svg,
.fm-neon-panel .mobile-menu-footer .svg-icon svg,
.fm-neon-panel .mobile-menu-footer ul li .svg-icon svg {
    color: var(--fm-smoked-blue-accent) !important;
}

.mobile-menu-footer ul li > a:hover,
.mobile-menu-footer ul li > div:hover,
.mobile-menu-footer ul li.current-item > a,
.mobile-menu-footer ul li.current-menu-item > a,
.mobile-menu-footer ul li.current-item > div,
.mobile-menu-footer ul li.current-menu-item > div,
.fm-neon-panel .mobile-menu-footer ul li > a:hover,
.fm-neon-panel .mobile-menu-footer ul li > div:hover,
.fm-neon-panel .mobile-menu-footer ul li.current-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > a,
.fm-neon-panel .mobile-menu-footer ul li.current-item > div,
.fm-neon-panel .mobile-menu-footer ul li.current-menu-item > div {
    color: var(--fm-smoked-blue-text) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.030)),
        rgba(24,191,255,.085) !important;
    border-color: rgba(102,231,255,.44) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 22px rgba(0,0,0,.20),
        0 0 24px rgba(24,191,255,.18) !important;
}

/* -------------------------------------------------------------------------
   Floating Menu Panel - Responsive Rebuild v7
   Stable layout for common mobile/tablet/desktop resolutions.
   Targets: 320-430 mobile, 768/820 tablets, 1024/1366/1440/1920 desktop.
   ------------------------------------------------------------------------- */
:root {
    --fm-panel-blue: #18bfff;
    --fm-panel-blue-2: #6fe7ff;
    --fm-panel-border: rgba(30, 179, 255, .50);
    --fm-panel-text: rgba(247, 252, 255, .96);
    --fm-panel-muted: rgba(222, 239, 249, .72);
    --fm-bottom-nav-height: 78px;
    --fm-panel-header-h: 50px;
    --fm-panel-gap: 14px;
    --fm-panel-radius: 28px;
}

body.nav-is-toggled {
    overflow: hidden !important;
    touch-action: none;
}

.fixed-nav-mask {
    background: rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(3px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(116%) !important;
    z-index: 999990 !important;
}

.mobile-menu-footer {
    z-index: 1000001 !important;
}

body.nav-is-toggled .mobile-menu-footer .item-menu > div,
.mobile-menu-footer .item-menu > div.is-active {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(24, 191, 255, .13) !important;
    border-color: rgba(102, 231, 255, .50) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 8px 22px rgba(0,0,0,.20),
        0 0 24px rgba(24,191,255,.18) !important;
}

/* Panel shell */
#responsive-menu {
    --fm-panel-bottom: calc(var(--fm-bottom-nav-height, 78px) + var(--fm-panel-gap) + env(safe-area-inset-bottom));
    --fm-panel-max-h: min(720px, calc(100dvh - var(--fm-panel-bottom) - max(12px, env(safe-area-inset-top))));
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: auto !important;
    right: 50% !important;
    left: auto !important;
    bottom: var(--fm-panel-bottom) !important;
    width: min(500px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: var(--fm-panel-max-h) !important;
    min-height: 0 !important;
    transform: translateX(50%) translateY(18px) scale(.985) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 1px solid var(--fm-panel-border) !important;
    border-radius: var(--fm-panel-radius) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
        linear-gradient(180deg, rgba(18, 42, 61, .88), rgba(7, 27, 39, .82) 48%, rgba(7, 24, 36, .88)),
        rgba(7, 24, 36, .84) !important;
    box-shadow:
        0 24px 62px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 0 0 1px rgba(30,179,255,.08),
        0 0 30px rgba(24,191,255,.10) !important;
    overflow: hidden !important;
    isolation: isolate;
    z-index: 1000002 !important;
    transition:
        opacity .20s ease,
        visibility .20s ease,
        transform .22s cubic-bezier(.2,.9,.22,1) !important;
    will-change: transform, opacity;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    #responsive-menu {
        backdrop-filter: blur(12px) saturate(150%) brightness(94%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(150%) brightness(94%) !important;
    }
}

.nav-is-toggled #responsive-menu {
    transform: translateX(50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#responsive-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(186,230,253,.58), transparent);
    opacity: .75;
    pointer-events: none;
    z-index: 2;
}

#responsive-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 8%, rgba(24,191,255,.12), transparent 30%),
        radial-gradient(circle at 86% 92%, rgba(74,144,255,.10), transparent 38%);
    opacity: .22;
    pointer-events: none;
    z-index: 0;
}

#responsive-menu > * {
    position: relative;
    z-index: 1;
}

/* Top handle / close area */
#responsive-menu .site-logo {
    flex: 0 0 var(--fm-panel-header-h) !important;
    height: var(--fm-panel-header-h) !important;
    min-height: var(--fm-panel-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: right !important;
}

#responsive-menu .fm-menu-panel-handle {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 62px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
    opacity: .82;
    box-shadow: 0 1px 8px rgba(255,255,255,.10);
    pointer-events: none;
}

#responsive-menu .fm-menu-close,
#responsive-menu .icon-times {
    position: absolute !important;
    top: 9px !important;
    left: 12px !important;
    z-index: 30 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.16) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#responsive-menu .fm-menu-close span {
    display: block;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
}

#responsive-menu .fm-menu-close:hover,
#responsive-menu .fm-menu-close:active,
#responsive-menu .icon-times:hover,
#responsive-menu .icon-times:active {
    color: #fff !important;
    background: rgba(255,255,255,.105) !important;
    border-color: rgba(102,231,255,.28) !important;
}

/* Main scroll area */
#responsive-menu .nav-drill {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-height: calc(var(--fm-panel-max-h) - var(--fm-panel-header-h)) !important;
    padding: 8px 14px 16px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(102,231,255,.30) transparent;
}

#responsive-menu.fm-submenu-open .nav-drill {
    overflow: hidden !important;
}

#responsive-menu .nav-drill::-webkit-scrollbar,
#responsive-menu .sub-menu::-webkit-scrollbar {
    width: 5px;
}

#responsive-menu .nav-drill::-webkit-scrollbar-thumb,
#responsive-menu .sub-menu::-webkit-scrollbar-thumb {
    background: rgba(102,231,255,.26);
    border-radius: 999px;
}

#responsive-menu .nav-items,
#responsive-menu .nav-items ul,
#responsive-menu ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#responsive-menu .menu-item,
#responsive-menu .nav-item {
    margin: 0 0 8px !important;
    padding: 0 !important;
    list-style: none !important;
}

#responsive-menu .menu-item a,
#responsive-menu .menu-item .nav-back-link {
    min-height: 54px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    color: var(--fm-panel-text) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
        rgba(7, 28, 38, .62) !important;
    border: 1px solid rgba(116,214,255,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
    overflow: hidden !important;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease, opacity .14s ease !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#responsive-menu .menu-item a:hover,
#responsive-menu .menu-item.active > a,
#responsive-menu .menu-item.current-menu-item > a,
#responsive-menu .menu-item.current-item > a {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.028)),
        rgba(7, 38, 55, .70) !important;
    border-color: rgba(110,214,255,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 18px rgba(0,0,0,.11) !important;
}

#responsive-menu .menu-item a:active,
#responsive-menu .menu-item .nav-back-link:active {
    opacity: .86;
}

/* Enhanced menu item layout */
#responsive-menu .fm-menu-link--enhanced {
    direction: rtl !important;
}

#responsive-menu .fm-menu-item-body {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    direction: rtl !important;
    padding: 9px 12px !important;
}

#responsive-menu .fm-menu-item-icon {
    order: 1;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 13px rgba(0,0,0,.14) !important;
}

#responsive-menu .fm-menu-item-icon svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}

#responsive-menu .fm-menu-item-copy {
    order: 2;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: right !important;
    padding-right: 6px !important;
}

#responsive-menu .fm-menu-item-title {
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.34 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#responsive-menu .fm-menu-item-subtitle {
    display: block !important;
    margin-top: 3px !important;
    color: var(--fm-panel-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#responsive-menu .fm-menu-item-arrow {
    order: 2;
    flex: 0 0 38px !important;
    width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(227,242,252,.72) !important;
    border-right: 1px solid rgba(255,255,255,.045) !important;
    opacity: .42 !important;
}

#responsive-menu .fm-menu-item-arrow.has-child {
    opacity: .92 !important;
    color: rgba(212,242,255,.94) !important;
}

#responsive-menu .fm-menu-item-arrow svg,
#responsive-menu .fm-menu-item-arrow i,
#responsive-menu .fm-menu-item-arrow .svg-icon {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: rotate(180deg);
}

#responsive-menu .accent-user { background: linear-gradient(135deg, #1b6dff, #38bdf8) !important; }
#responsive-menu .accent-alert { background: linear-gradient(135deg, #ff5a6f, #ff7c64) !important; }
#responsive-menu .accent-film { background: linear-gradient(135deg, #f6b21d, #ff8a17) !important; }
#responsive-menu .accent-series { background: linear-gradient(135deg, #2a8cff, #4cc8ff) !important; }
#responsive-menu .accent-animation { background: linear-gradient(135deg, #ff3aa9, #ff6bd5) !important; }
#responsive-menu .accent-anime { background: linear-gradient(135deg, #7ccf1f, #4fb418) !important; }
#responsive-menu .accent-collection { background: linear-gradient(135deg, #ff9f43, #ff6b2e) !important; }
#responsive-menu .accent-top { background: linear-gradient(135deg, #6d5cff, #9080ff) !important; }
#responsive-menu .accent-category,
#responsive-menu .accent-back { background: linear-gradient(135deg, #3dc4ff, #16a6ff) !important; }

/* Submenu engine: overlay only the scroll area, never the close/handle area */
#responsive-menu .menu-item-has-children,
#responsive-menu .menu-item-has-children .menu-item-has-children {
    position: static !important;
}

#responsive-menu .menu-item-has-children > .sub-menu {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 12px 14px 16px !important;
    margin: 0 !important;
    border-radius: 0 0 calc(var(--fm-panel-radius) - 2px) calc(var(--fm-panel-radius) - 2px) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
        linear-gradient(180deg, rgba(18, 42, 61, .94), rgba(7, 27, 39, .90) 48%, rgba(7, 24, 36, .94)),
        rgba(7, 24, 36, .92) !important;
    border-top: 1px solid rgba(111,219,255,.10) !important;
    box-sizing: border-box !important;
    transform: translateX(-104%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 12px;
    transition: transform .22s cubic-bezier(.2,.9,.22,1), opacity .16s ease, visibility .16s ease !important;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    #responsive-menu .menu-item-has-children > .sub-menu {
        backdrop-filter: blur(10px) saturate(145%) brightness(94%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(145%) brightness(94%) !important;
    }
}

#responsive-menu .menu-item-has-children.active > .sub-menu {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Back button: stable sticky card with enough top clearance */
#responsive-menu .fm-nav-back-item {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    list-style: none !important;
    transform: translateZ(0);
}

#responsive-menu .fm-submenu-back {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    direction: rtl !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(24,191,255,.18), rgba(255,255,255,.045)),
        rgba(6, 31, 45, .88) !important;
    border: 1px solid rgba(102,231,255,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 7px 16px rgba(0,0,0,.12) !important;
}

#responsive-menu .fm-submenu-back .fm-back-icon {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.085) !important;
    color: rgba(255,255,255,.95) !important;
}

#responsive-menu .fm-submenu-back .fm-back-icon svg {
    width: 15px !important;
    height: 15px !important;
    transform: rotate(180deg);
}

#responsive-menu .fm-submenu-back .fm-back-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: right !important;
}

#responsive-menu .fm-submenu-back .fm-back-copy strong {
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

#responsive-menu .fm-submenu-back .fm-back-copy small {
    max-width: 100% !important;
    margin-top: 3px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: rgba(227,242,252,.72) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Dark-mode inline override shield */
[dark="true"] #responsive-menu,
[dark=true] #responsive-menu,
[dark="true"] #responsive-menu .menu-item-has-children > .sub-menu,
[dark=true] #responsive-menu .menu-item-has-children > .sub-menu {
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
        linear-gradient(180deg, rgba(18, 42, 61, .88), rgba(7, 27, 39, .82) 48%, rgba(7, 24, 36, .88)),
        rgba(7, 24, 36, .84) !important;
}

/* 1366x768 / laptop and other low-height desktop monitors */
@media (min-width: 577px) and (max-height: 800px) {
    :root {
        --fm-panel-header-h: 46px;
        --fm-panel-gap: 10px;
    }

    #responsive-menu {
        width: min(470px, calc(100vw - 28px)) !important;
        max-height: min(640px, calc(100dvh - var(--fm-panel-bottom) - 10px)) !important;
        border-radius: 24px !important;
    }

    #responsive-menu .nav-drill {
        max-height: calc(min(640px, calc(100dvh - var(--fm-panel-bottom) - 10px)) - var(--fm-panel-header-h)) !important;
        padding: 7px 12px 12px !important;
    }

    #responsive-menu .menu-item {
        margin-bottom: 7px !important;
    }

    #responsive-menu .menu-item a,
    #responsive-menu .menu-item .nav-back-link {
        min-height: 50px !important;
        border-radius: 15px !important;
    }

    #responsive-menu .fm-menu-item-icon {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    #responsive-menu .menu-item-has-children > .sub-menu {
        padding: 10px 12px 12px !important;
    }

    #responsive-menu .fm-submenu-back {
        min-height: 46px !important;
    }
}

/* Standard mobile */
@media (max-width: 576px) {
    :root {
        --fm-panel-header-h: 44px;
        --fm-panel-gap: 8px;
        --fm-panel-radius: 24px;
    }

    .fixed-nav-mask {
        background: rgba(0,0,0,.30) !important;
        backdrop-filter: blur(2px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(2px) saturate(112%) !important;
    }

    #responsive-menu {
        --fm-panel-bottom: calc(var(--fm-bottom-nav-height, 74px) + 8px + env(safe-area-inset-bottom));
        --fm-panel-max-h: calc(100dvh - var(--fm-panel-bottom) - max(8px, env(safe-area-inset-top)));
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: var(--fm-panel-max-h) !important;
        border-radius: var(--fm-panel-radius) !important;
        box-shadow:
            0 16px 42px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 0 1px rgba(30,179,255,.08) !important;
        transition:
            opacity .17s ease,
            visibility .17s ease,
            transform .19s cubic-bezier(.2,.9,.22,1) !important;
    }

    @supports ((backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px))) {
        #responsive-menu {
            backdrop-filter: blur(7px) saturate(140%) brightness(94%) !important;
            -webkit-backdrop-filter: blur(7px) saturate(140%) brightness(94%) !important;
        }
    }

    #responsive-menu .site-logo {
        padding: 0 12px !important;
    }

    #responsive-menu .fm-menu-panel-handle {
        top: 9px !important;
        width: 54px !important;
        height: 4px !important;
    }

    #responsive-menu .fm-menu-close,
    #responsive-menu .icon-times {
        top: 7px !important;
        left: 10px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 12px !important;
    }

    #responsive-menu .fm-menu-close span {
        font-size: 23px !important;
    }

    #responsive-menu .nav-drill {
        max-height: calc(var(--fm-panel-max-h) - var(--fm-panel-header-h)) !important;
        padding: 7px 10px 12px !important;
    }

    #responsive-menu .menu-item,
    #responsive-menu .nav-item {
        margin-bottom: 7px !important;
    }

    #responsive-menu .menu-item a,
    #responsive-menu .menu-item .nav-back-link {
        min-height: 49px !important;
        border-radius: 14px !important;
    }

    #responsive-menu .fm-menu-item-body {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    #responsive-menu .fm-menu-item-icon {
        flex-basis: 31px !important;
        width: 31px !important;
        height: 31px !important;
        border-radius: 10px !important;
    }

    #responsive-menu .fm-menu-item-icon svg {
        width: 15.5px !important;
        height: 15.5px !important;
    }

    #responsive-menu .fm-menu-item-arrow {
        flex-basis: 34px !important;
        width: 34px !important;
    }

    #responsive-menu .fm-menu-item-title {
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    #responsive-menu .fm-menu-item-subtitle {
        font-size: 10.4px !important;
    }

    #responsive-menu .menu-item-has-children > .sub-menu {
        padding: 10px !important;
        border-radius: 0 0 var(--fm-panel-radius) var(--fm-panel-radius) !important;
    }

    #responsive-menu .fm-nav-back-item {
        top: 0 !important;
        margin-bottom: 8px !important;
    }

    #responsive-menu .fm-submenu-back {
        min-height: 45px !important;
        padding: 7px 9px !important;
        border-radius: 13px !important;
    }

    #responsive-menu .fm-submenu-back .fm-back-icon {
        flex-basis: 31px !important;
        width: 31px !important;
        height: 31px !important;
        border-radius: 10px !important;
    }

    #responsive-menu .fm-submenu-back .fm-back-copy strong {
        font-size: 12px !important;
    }

    #responsive-menu .fm-submenu-back .fm-back-copy small {
        font-size: 10px !important;
    }
}

/* Very narrow phones: 320/360px */
@media (max-width: 380px) {
    :root {
        --fm-panel-header-h: 42px;
    }

    #responsive-menu {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
    }

    #responsive-menu .nav-drill {
        padding: 6px 8px 10px !important;
    }

    #responsive-menu .menu-item,
    #responsive-menu .nav-item {
        margin-bottom: 6px !important;
    }

    #responsive-menu .menu-item a,
    #responsive-menu .menu-item .nav-back-link {
        min-height: 46px !important;
    }

    #responsive-menu .fm-menu-item-icon {
        flex-basis: 29px !important;
        width: 29px !important;
        height: 29px !important;
    }

    #responsive-menu .fm-menu-item-arrow {
        flex-basis: 30px !important;
        width: 30px !important;
    }

    #responsive-menu .fm-menu-item-title {
        font-size: 11.5px !important;
    }
}

/* Very short screens: old phones / landscape / small laptop heights */
@media (max-height: 640px) {
    :root {
        --fm-panel-header-h: 40px;
        --fm-panel-gap: 6px;
    }

    #responsive-menu {
        --fm-panel-max-h: calc(100dvh - var(--fm-panel-bottom) - max(6px, env(safe-area-inset-top)));
    }

    #responsive-menu .fm-menu-panel-handle {
        top: 8px !important;
    }

    #responsive-menu .fm-menu-close,
    #responsive-menu .icon-times {
        top: 5px !important;
    }

    #responsive-menu .nav-drill {
        padding-top: 6px !important;
        padding-bottom: 8px !important;
        max-height: calc(var(--fm-panel-max-h) - var(--fm-panel-header-h)) !important;
    }

    #responsive-menu .menu-item,
    #responsive-menu .nav-item {
        margin-bottom: 6px !important;
    }

    #responsive-menu .menu-item a,
    #responsive-menu .menu-item .nav-back-link {
        min-height: 44px !important;
    }

    #responsive-menu .fm-menu-item-body {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    #responsive-menu .fm-menu-item-icon {
        flex-basis: 29px !important;
        width: 29px !important;
        height: 29px !important;
    }

    #responsive-menu .fm-submenu-back {
        min-height: 42px !important;
    }
}

/* Tablet portrait/landscape */
@media (min-width: 577px) and (max-width: 1024px) {
    #responsive-menu {
        width: min(500px, calc(100vw - 28px)) !important;
        max-height: min(680px, calc(100dvh - var(--fm-panel-bottom) - 12px)) !important;
    }

    #responsive-menu .nav-drill {
        max-height: calc(min(680px, calc(100dvh - var(--fm-panel-bottom) - 12px)) - var(--fm-panel-header-h)) !important;
    }
}

/* Safe fallback when dvh is not supported */
@supports not (height: 100dvh) {
    #responsive-menu {
        --fm-panel-max-h: min(720px, calc(100vh - var(--fm-panel-bottom) - max(12px, env(safe-area-inset-top)))) !important;
    }

    #responsive-menu .nav-drill {
        max-height: calc(var(--fm-panel-max-h) - var(--fm-panel-header-h)) !important;
    }

    @media (max-width: 576px) {
        #responsive-menu {
            --fm-panel-max-h: calc(100vh - var(--fm-panel-bottom) - max(8px, env(safe-area-inset-top))) !important;
        }
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #responsive-menu,
    #responsive-menu *,
    .fixed-nav-mask {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -------------------------------------------------------------------------
   Desktop bottom-nav item swap: More -> Collections
   On desktop, replace "بیشتر" with "کالکشن‌ها"; on mobile, keep "بیشتر".
   ------------------------------------------------------------------------- */
.mobile-menu-footer .fm-collection-desktop-only {
    display: none !important;
}

.mobile-menu-footer .fm-more-mobile-only {
    display: list-item !important;
}

@media (min-width: 992px) {
    .mobile-menu-footer .fm-more-mobile-only {
        display: none !important;
    }

    .mobile-menu-footer .fm-collection-desktop-only {
        display: list-item !important;
    }

    .mobile-menu-footer .item-collection a {
        color: inherit;
        text-decoration: none;
    }

    .mobile-menu-footer .item-collection a .svg-icon,
    .mobile-menu-footer .item-collection a svg {
        stroke-width: 1.8;
    }
}