/* --------------------------------------------------------------------------
   8. MOBILE HEADER & NAVIGATION — Premium Design
   -------------------------------------------------------------------------- */

@media (max-width: 1008px) {
    /* Hide desktop header */
    .global-header.nw-xl-v1 {
        display: none !important;
    }

    /* Body offset for fixed header */
    body {
        padding-top: 64px !important;
    }

    /* ---- Fixed header bar (frosted glass) ---- */
    .mobile-heder-con {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }

    /* ---- Logo ---- */
    .mobile-logo-link {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease !important;
    }

    .mobile-logo-link:hover {
        opacity: 0.7 !important;
    }

    .mobile-logo-link img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    /* ---- Hamburger button ---- */
    .yoreoyster-mobile-mbtn {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        transition: background-color 0.2s ease !important;
        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .yoreoyster-mobile-mbtn:hover {
        background-color: rgba(0, 0, 0, 0.04) !important;
    }

    .yoreoyster-mobile-mbtn::before {
        content: '' !important;
        position: absolute !important;
        width: 18px !important;
        height: 1.5px !important;
        background: #1a1a1a !important;
        border-radius: 1px !important;
        box-shadow: 0 5px 0 #1a1a1a, 0 10px 0 #1a1a1a !important;
    }

    /* ---- Sidebar panel (GPU-accelerated slide from right) ---- */
    .yoreoyster-mobile-hdr-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(85vw, 360px) !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12) !important;
        z-index: 10001 !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .yoreoyster-mobile-hdr-sidebar.animate-menu-open {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) !important;
    }

    /* ---- Close button ---- */
    a.mobile-navclose-btn {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        transition: background-color 0.2s ease !important;
        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
    }

    a.mobile-navclose-btn:hover {
        background-color: rgba(0, 0, 0, 0.04) !important;
    }

    a.mobile-navclose-btn::before {
        content: '' !important;
        position: absolute !important;
        width: 16px !important;
        height: 1.5px !important;
        background: #1a1a1a !important;
        border-radius: 1px !important;
        transform: rotate(45deg) !important;
    }

    a.mobile-navclose-btn::after {
        content: '' !important;
        position: absolute !important;
        width: 16px !important;
        height: 1.5px !important;
        background: #1a1a1a !important;
        border-radius: 1px !important;
        transform: rotate(-45deg) !important;
    }

    /* ---- Navigation container ---- */
    .yoreoyster-sidebar-navigation {
        padding: 80px 24px 24px !important;
        display: block !important;
        border: none !important;
    }

    .yoreoyster-mobile-navbar {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---- Nav items ---- */
    .yoreoyster-mobile-navbar > li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        position: relative !important;
    }

    .yoreoyster-mobile-navbar > li:last-child {
        border-bottom: none !important;
    }

    .yoreoyster-mobile-navbar > li > a {
        display: block !important;
        padding: 18px 0 !important;
        color: #1a1a1a !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        text-transform: none !important;
        line-height: 1.4 !important;
        border: none !important;
        transition: color 0.2s ease !important;
        background: none !important;
    }

    .yoreoyster-mobile-navbar > li > a:hover {
        color: #008255 !important;
    }

    /* Active state — green left accent */
    .yoreoyster-mobile-navbar > li.active > a {
        color: #008255 !important;
        background: none !important;
    }

    /* Current page indicator */
    .yoreoyster-mobile-navbar .current-menu-item > a,
    .yoreoyster-mobile-navbar .current-menu-ancestor > a {
        color: #008255 !important;
    }

    /* ---- Chevron for expandable items ---- */
    .child-navitms-opner {
        position: absolute !important;
        top: 14px !important;
        right: 0 !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: transparent !important;
        font-size: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .child-navitms-opner strong {
        display: none !important;
    }

    .child-navitms-opner::before {
        content: '' !important;
        position: absolute !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 1.5px solid #666 !important;
        border-bottom: 1.5px solid #666 !important;
        border-left: none !important;
        border-top: none !important;
        background: none !important;
        transform: rotate(45deg) !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .yoreoyster-mobile-navbar > li.active > .child-navitms-opner {
        color: transparent !important;
    }

    .yoreoyster-mobile-navbar > li.active > .child-navitms-opner::before {
        transform: rotate(225deg) !important;
    }

    /* ---- Submenus (CSS-driven expand/collapse) ---- */
    .sidebar-submenu {
        display: block !important;
        background: #f8f9fa !important;
        margin: 0 -24px !important;
        padding: 0 24px !important;
        list-style: none !important;
        border-top: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .yoreoyster-mobile-navbar > li.active > .sidebar-submenu {
        display: block !important;
        max-height: 500px !important;
        padding: 4px 24px 8px !important;
    }

    .sidebar-submenu li {
        margin: 0 !important;
        border: none !important;
    }

    .sidebar-submenu li a {
        display: block !important;
        padding: 12px 0 12px 16px !important;
        color: #374151 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        text-transform: none !important;
        line-height: 1.4 !important;
        border-bottom: none !important;
        border-left: 2px solid transparent !important;
        transition: color 0.2s ease, border-left-color 0.2s ease !important;
    }

    .sidebar-submenu li a:hover {
        color: #008255 !important;
        border-left-color: #008255 !important;
    }

    .sidebar-submenu .current-menu-item a {
        color: #008255 !important;
        border-left-color: #008255 !important;
        font-weight: 500 !important;
    }

    /* ---- Sidebar navigation (override inline display:none) ---- */
    .yoreoyster-sidebar-navigation {
        display: block !important;
    }

    /* ---- Body scroll lock when menu open ---- */
    body.menu-open {
        overflow: hidden !important;
    }

    /* ---- Backdrop (GPU-composited) ---- */
    .yo-menu-backdrop {
        background: rgba(0, 0, 0, 0.4) !important;
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s !important;
        z-index: 10000 !important;
        will-change: opacity !important;
    }

    /* ---- Focus states (a11y) ---- */
    .yoreoyster-mobile-mbtn:focus-visible,
    a.mobile-navclose-btn:focus-visible {
        outline: 2px solid #008255 !important;
        outline-offset: 2px !important;
    }
}