/**
 * Travel X Mobile Menu - Enhanced UI/UX
 * Modern, accessible, and touch-friendly mobile navigation
 */

/* ===================================
   Hide Mobile Menu on Desktop
   =================================== */
.mobile-menu-bar,
nav#mobile-navigation,
.mobile-menu-overlay {
    display: none;
}

/* ===================================
   Mobile Menu Container
   =================================== */
@media only screen and (max-width: 991px) {

    /* Hide desktop menu */
    .menu-deskbar {
        display: none;
    }

    /* Show Mobile Menu Bar */
    .mobile-menu-bar {
        display: block !important;
        background: var(--white, #fff);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        position: sticky;
        top: 0;
        z-index: 9999;
        transition: all 0.3s ease;
    }

    .admin-bar .mobile-menu-bar {
        top: 32px;
    }

    @media (max-width: 782px) {
        .admin-bar .mobile-menu-bar {
            top: 46px;
        }
    }

    @media (max-width: 600px) {
        .admin-bar .mobile-menu-bar {
            top: 0;
        }
    }

    /* Mobile Menu Inner Container */
    .mbar-inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        gap: 15px;
    }

    /* Logo Area */
    .mbar-inner .mlogo {
        flex: 1;
        min-width: 0;
    }

    .mbar-inner .mlogo .site-branding {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mbar-inner .mlogo .site-title {
        font-size: 1.25rem;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mbar-inner .mlogo .site-description {
        display: none;
    }

    .mbar-inner .mlogo .custom-logo {
        max-height: 45px;
        width: auto;
    }

    /* ===================================
       Hamburger Menu Button
       =================================== */
    #mmenu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        padding: 10px;
        background: transparent;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        z-index: 10001;
    }

    #mmenu-btn:hover,
    #mmenu-btn:focus {
        background: rgba(240, 71, 60, 0.1);
        outline: none;
    }

    #mmenu-btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(240, 71, 60, 0.3);
    }

    /* Hamburger Lines Container */
    #mmenu-btn .mopen {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 24px;
        height: 18px;
    }

    /* Hide mopen when menu is active */
    #mmenu-btn[aria-expanded="true"] .mopen {
        display: none !important;
    }

    #mmenu-btn .mclose {
        display: none !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        position: relative;
    }

    /* Show mclose when menu is active */
    #mmenu-btn[aria-expanded="true"] .mclose {
        display: flex !important;
    }

    /* Three hamburger lines */
    #mmenu-btn .mopen::before,
    #mmenu-btn .mopen::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: var(--color-primary, #f0473c);
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    #mmenu-btn .mopen span {
        display: block;
        width: 100%;
        height: 3px;
        background: var(--color-primary, #f0473c);
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* Close X icon */
    #mmenu-btn .mclose::before,
    #mmenu-btn .mclose::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 3px;
        background: var(--color-primary, #f0473c);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    #mmenu-btn .mclose::before {
        transform: rotate(45deg);
    }

    #mmenu-btn .mclose::after {
        transform: rotate(-45deg);
    }

    /* ===================================
       Slide-out Menu Panel
       =================================== */
    nav#mobile-navigation {
        display: flex !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh;
        background: var(--white, #fff);
        z-index: 100000;
        overflow: hidden;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        flex-direction: column;
    }

    /* Admin bar support for slide-out panel */
    .admin-bar nav#mobile-navigation {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }

    @media (max-width: 782px) {
        .admin-bar nav#mobile-navigation {
            top: 46px;
            height: calc(100vh - 46px);
            height: calc(100dvh - 46px);
        }
    }

    @media (max-width: 600px) {
        .admin-bar nav#mobile-navigation {
            top: 0;
            height: 100vh;
            height: 100dvh;
        }
    }

    nav#mobile-navigation.menu-active {
        right: 0;
    }

    /* Menu Overlay */
    .mobile-menu-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(3px);
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Menu Header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, var(--color-primary, #f0473c) 0%, #ff6b5b 100%);
        flex-shrink: 0;
    }

    .mobile-menu-header .menu-title {
        color: var(--white, #fff);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

    .mobile-menu-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 50%;
        color: var(--white, #fff);
        font-size: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

    /* ===================================
       Menu Items Styling
       =================================== */
    nav#mobile-navigation ul.wsm-menu,
    nav#mobile-navigation .wsm-menu > ul,
    nav#mobile-navigation > ul.wsm-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-width: 0;
    }

    nav.menu-active ul.wsm-menu,
    nav.menu-active .wsm-menu ul {
        top: auto !important;
    }

    /* Menu List */
    .wsm-menu,
    .wsm-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Menu Items */
    nav#mobile-navigation .wsm-menu > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        opacity: 1;
        transform: translateX(0);
        transition: all 0.3s ease;
        display: block !important;
    }

    nav#mobile-navigation.menu-active .wsm-menu > li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Menu Links */
    nav#mobile-navigation .wsm-menu li a {
        display: flex !important;
        align-items: center;
        padding: 16px 20px;
        color: var(--color-heding, #0d1013);
        font-size: 1rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: none !important;
        position: relative;
        background: transparent;
    }

    nav#mobile-navigation .wsm-menu li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--color-primary, #f0473c);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    nav#mobile-navigation .wsm-menu li a:hover,
    nav#mobile-navigation .wsm-menu li a:focus {
        background: rgba(240, 71, 60, 0.05);
        color: var(--color-primary, #f0473c);
        padding-left: 28px;
    }

    nav#mobile-navigation .wsm-menu li a:hover::before,
    nav#mobile-navigation .wsm-menu li a:focus::before {
        transform: scaleY(1);
    }

    nav#mobile-navigation .wsm-menu li.current-menu-item > a,
    nav#mobile-navigation .wsm-menu li.current_page_item > a {
        color: var(--color-primary, #f0473c);
        background: rgba(240, 71, 60, 0.08);
    }

    nav#mobile-navigation .wsm-menu li.current-menu-item > a::before,
    nav#mobile-navigation .wsm-menu li.current_page_item > a::before {
        transform: scaleY(1);
    }

    /* ===================================
       Dropdown / Submenu Styling
       =================================== */
    nav#mobile-navigation .menu-item-has-children,
    nav#mobile-navigation .page_item_has_children {
        display: block;
        position: relative;
    }

    nav#mobile-navigation .menu-item-has-children > a,
    nav#mobile-navigation .page_item_has_children > a {
        padding-right: 55px;
    }

    /* Dropdown Toggle Icon */
    nav#mobile-navigation .menu-item-has-children > i,
    nav#mobile-navigation .page_item_has_children > i {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(240, 71, 60, 0.1);
        border-radius: 8px;
        color: var(--color-primary, #f0473c);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 5;
    }

    nav#mobile-navigation .menu-item-has-children > i:hover,
    nav#mobile-navigation .page_item_has_children > i:hover {
        background: var(--color-primary, #f0473c);
        color: var(--white, #fff);
    }

    nav#mobile-navigation .menu-item-has-children.clicked > i,
    nav#mobile-navigation .menu-item-has-children.focus > i {
        background: var(--color-primary, #f0473c);
        color: var(--white, #fff);
        transform: translateY(-50%) rotate(180deg);
    }

    /* Submenu */
    nav#mobile-navigation .wsm-menu .sub-menu,
    nav#mobile-navigation .wsm-menu .children {
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.02);
        transition: max-height 0.4s ease, padding 0.3s ease;
        padding: 0;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        box-shadow: none !important;
    }

    nav#mobile-navigation .menu-item-has-children.clicked > .sub-menu,
    nav#mobile-navigation .menu-item-has-children.focus > .sub-menu,
    nav#mobile-navigation .page_item_has_children.clicked > .children,
    nav#mobile-navigation .page_item_has_children.focus > .children {
        max-height: 500px;
        padding: 8px 0;
    }

    nav#mobile-navigation .wsm-menu .sub-menu li a,
    nav#mobile-navigation .wsm-menu .children li a {
        padding-left: 40px;
        font-size: 0.95rem;
        color: var(--color-gray, #3c3e41);
    }

    nav#mobile-navigation .wsm-menu .sub-menu li a::before {
        left: 20px;
        width: 8px;
        height: 2px;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        border-radius: 1px;
    }

    nav#mobile-navigation .wsm-menu .sub-menu li a:hover::before {
        transform: translateY(-50%) scaleX(1);
    }

    /* Nested Submenu */
    nav#mobile-navigation .wsm-menu .sub-menu .sub-menu li a {
        padding-left: 60px;
    }

    /* ===================================
       Menu Footer
       =================================== */
    .mobile-menu-footer {
        margin-top: auto;
        padding: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: var(--section-color, #f9f9fc);
        flex-shrink: 0;
    }

    .mobile-menu-footer .social-links {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .mobile-menu-footer .social-links a {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white, #fff);
        border-radius: 50%;
        color: var(--color-gray, #3c3e41);
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .mobile-menu-footer .social-links a:hover {
        background: var(--color-primary, #f0473c);
        color: var(--white, #fff);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(240, 71, 60, 0.3);
    }

    /* ===================================
       Touch Feedback
       =================================== */
    .wsm-menu li a:active {
        background: rgba(240, 71, 60, 0.15);
    }

    .menu-item-has-children > i:active {
        transform: translateY(-50%) scale(0.95);
    }

    /* ===================================
       Safe Area Support (Notch devices)
       =================================== */
    @supports (padding: max(0px)) {
        nav#mobile-navigation {
            padding-bottom: max(20px, env(safe-area-inset-bottom));
        }

        .mobile-menu-bar {
            padding-left: max(15px, env(safe-area-inset-left));
            padding-right: max(15px, env(safe-area-inset-right));
        }
    }

    /* ===================================
       Scrollbar Styling
       =================================== */
    nav#mobile-navigation ul.wsm-menu::-webkit-scrollbar {
        width: 4px;
    }

    nav#mobile-navigation ul.wsm-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    nav#mobile-navigation ul.wsm-menu::-webkit-scrollbar-thumb {
        background: rgba(240, 71, 60, 0.3);
        border-radius: 4px;
    }

    nav#mobile-navigation ul.wsm-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(240, 71, 60, 0.5);
    }

}

/* ===================================
   Very Small Screens (< 380px)
   =================================== */
@media only screen and (max-width: 379px) {
    nav#mobile-navigation {
        width: 100%;
        max-width: none;
    }

    .mbar-inner .mlogo .site-title {
        font-size: 1.1rem;
    }

    .wsm-menu li a {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
}

/* ===================================
   Landscape Mode
   =================================== */
@media only screen and (max-width: 991px) and (orientation: landscape) {
    nav#mobile-navigation {
        width: 50%;
        max-width: 350px;
    }

    nav#mobile-navigation ul.wsm-menu {
        max-height: calc(100vh - 100px);
    }

    .wsm-menu li a {
        padding: 12px 20px;
    }
}