/**

Mobile Menu Styles - VIP PRO PREMIUM DESIGN
ThemeForest Bestseller Quality

@package GP_Result
*/


/* Mobile Menu - Tablet and Below */
@media (max-width: 768px) {

/* Show Mobile Toggle */  
.mobile-menu-toggle {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    order: 3;  
    z-index: 1001;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(26, 35, 126, 0.08);
}

.mobile-menu-toggle i {
    font-size: 20px;
    color: #1a237e;
}
  
/* Header Container Mobile Layout */  
.header-container {  
    flex-wrap: nowrap;  
    gap: 15px;  
}  
  
.site-logo {  
    order: 1;  
    flex: 1;  
}  
  
.header-search {  
    order: 2;  
}  
  
/* Mobile Navigation - Premium Left Sidebar */  
.main-navigation {  
    position: fixed;  
    top: 0;  
    left: -100%;  
    width: 300px;  
    max-width: 85%;  
    height: 100vh;
    height: 100dvh; /* Modern browsers */
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    overflow-y: auto;  
    overflow-x: hidden;  
    transition: left 0.35s cubic-bezier(0.23, 1, 0.32, 1);  
    z-index: 9999;  
    display: block;  
    padding: 0;  
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    border-right: 1px solid rgba(26, 35, 126, 0.08);
}  
  
/* Right Side Positioning */  
.main-navigation.sidebar-right {  
    left: auto;  
    right: -100%;  
    transition: right 0.35s cubic-bezier(0.23, 1, 0.32, 1);  
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    border-right: none;
    border-left: 1px solid rgba(26, 35, 126, 0.08);
}  
  
/* Active State - Sidebar Open (Left) */  
.main-navigation.active {  
    left: 0;  
}  
  
/* Active State - Sidebar Open (Right) */  
.main-navigation.sidebar-right.active {  
    left: auto;  
    right: 0;  
}  
  
/* Mobile Menu Header - Premium Logo Area */  
.mobile-menu-header {  
    padding: 24px 20px;  
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    position: sticky;  
    top: 0;  
    z-index: 10;  
    min-height: 80px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}  
  
/* Logo in Mobile Sidebar */  
.mobile-menu-logo {  
    display: flex;  
    align-items: center;  
    justify-content: flex-start;  
    flex: 1;  
}  
  
.mobile-menu-logo a {  
    display: flex;  
    align-items: center;  
    text-decoration: none;  
}  
  
.mobile-menu-logo img {  
    max-height: 42px;  
    width: auto;  
    display: block;
    filter: brightness(0) invert(1);
}  
  
.mobile-menu-logo .site-title {  
    color: #ffffff;  
    font-size: 22px;  
    font-weight: 700;  
    margin: 0;
    letter-spacing: -0.5px;
}  
  
/* Close Button - Premium Design */  
.mobile-menu-close {  
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);  
    color: #ffffff;  
    font-size: 20px;  
    width: 42px;  
    height: 42px;  
    border-radius: 10px;  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);  
    padding: 0;  
    line-height: 1;  
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}  
  
.mobile-menu-close:hover {  
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.mobile-menu-close:active {
    transform: rotate(90deg) scale(0.95);
}
  
/* Mobile Menu List */  
.main-navigation ul {  
    flex-direction: column;  
    gap: 4px;  
    width: 100%;  
    padding: 16px 12px;  
    margin: 0;  
    background: transparent;  
    list-style: none;  
}  
  
.main-navigation ul li {  
    width: 100%;  
    margin: 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Parent Menu Item Wrapper */
.main-navigation ul li.menu-item-has-children {
    position: relative;
}

/* Menu Items - Premium Design */  
.main-navigation ul li a {  
    color: #2c3e50;  
    padding: 16px 18px;  
    border-radius: 12px;  
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;  
    font-weight: 600;  
    background: transparent;  
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);  
    text-align: left;  
    border: none;  
    line-height: 1.5;  
    text-decoration: none;
    position: relative;
}

/* Icon before menu items (optional enhancement) */
.main-navigation ul li a::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #1a237e;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Padding for parent items with toggle */
.main-navigation ul li.menu-item-has-children > a {
    padding-right: 60px;
}
  
.main-navigation ul li a:hover {  
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.08) 0%, rgba(26, 35, 126, 0.12) 100%);
    color: #1a237e;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.08);
}

.main-navigation ul li a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.main-navigation ul li.menu-item-has-children > a:hover {
    padding-right: 60px;
}
  
/* Remove default arrow indicators */  
.main-navigation ul li.menu-item-has-children > a::after {  
    display: none;  
}  

/* Submenu Toggle Button - Premium Design */
.submenu-toggle {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    background: rgba(26, 35, 126, 0.06);
    border: none;
    border-radius: 10px;
    color: #1a237e;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.submenu-toggle:hover {
    background: rgba(26, 35, 126, 0.12);
    transform: scale(1.08);
}

.submenu-toggle:active {
    transform: scale(0.95);
}

.submenu-toggle i {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    font-weight: 900;
}

/* Rotate chevron with bounce effect */
.menu-item-has-children.active > .submenu-toggle {
    background: rgba(26, 35, 126, 0.15);
}

.menu-item-has-children.active > .submenu-toggle i {
    transform: rotate(180deg);
}
  
/* Sub Menu - Premium Design */
.main-navigation ul li ul.sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.03) 0%, rgba(26, 35, 126, 0.06) 100%);
    border-radius: 10px;
    margin: 4px 0 8px 0;
    padding: 8px 0;
    display: none;
    list-style: none;
    overflow: hidden;
    border: 1px solid rgba(26, 35, 126, 0.1);
}
  
.main-navigation ul li ul.sub-menu.active {  
    display: block;
    animation: slideDownFade 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
  
.main-navigation ul li ul.sub-menu li {  
    border-radius: 8px;
    margin: 2px 8px;
}  
  
.main-navigation ul li ul.sub-menu li a {  
    padding: 12px 16px;  
    font-size: 14px;  
    color: #475569;  
    font-weight: 500;
    gap: 10px;
}

.main-navigation ul li ul.sub-menu li a::before {
    width: 4px;
    height: 4px;
    background: #64748b;
}
  
.main-navigation ul li ul.sub-menu li a:hover {  
    background: rgba(255, 255, 255, 0.9);
    color: #1a237e;
    transform: translateX(6px);
    box-shadow: 0 2px 8px rgba(26, 35, 126, 0.1);
}  
  
/* Current Menu Item - Premium Highlight */  
.main-navigation ul li.current-menu-item > a {  
    color: #ffffff;  
    font-weight: 700;  
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
}

.main-navigation ul li.current-menu-item > a::before {
    background: #ffffff;
    opacity: 1;
    transform: scale(1);
}

/* Current submenu item */
.main-navigation ul li ul.sub-menu li.current-menu-item > a {
    background: rgba(26, 35, 126, 0.12);
    color: #1a237e;
    font-weight: 600;
}
  
/* Prevent Body Scroll When Menu Open */  
body.mobile-menu-open {  
    overflow: hidden;
    position: fixed;
    width: 100%;
}  
  
/* Custom Scrollbar - Premium Design */  
.main-navigation::-webkit-scrollbar {  
    width: 6px;  
}  
  
.main-navigation::-webkit-scrollbar-track {  
    background: rgba(26, 35, 126, 0.05);
    border-radius: 10px;
}  
  
.main-navigation::-webkit-scrollbar-thumb {  
    background: rgba(26, 35, 126, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}  
  
.main-navigation::-webkit-scrollbar-thumb:hover {  
    background: rgba(26, 35, 126, 0.5);
}

/* Menu Footer (Optional - can add social icons, etc) */
.mobile-menu-footer {
    padding: 20px;
    margin-top: auto;
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.05) 0%, rgba(26, 35, 126, 0.08) 100%);
    border-top: 1px solid rgba(26, 35, 126, 0.1);
}

}

/* Small Mobile Devices */
@media (max-width: 480px) {
.main-navigation {
    width: 280px;
    max-width: 88%;
}

.mobile-menu-header {  
    padding: 20px 16px;  
    min-height: 72px;  
}  
  
.mobile-menu-logo img {  
    max-height: 38px;  
}  
  
.mobile-menu-logo .site-title {  
    font-size: 20px;  
}  
  
.mobile-menu-close {  
    width: 40px;  
    height: 40px;  
    font-size: 18px;  
}  
  
.main-navigation ul {
    padding: 12px 10px;
}

.main-navigation ul li a {  
    font-size: 14px;  
    padding: 14px 16px;  
}

.main-navigation ul li.menu-item-has-children > a {
    padding-right: 56px;
}
  
.main-navigation ul li ul.sub-menu li a {  
    padding: 11px 14px;  
    font-size: 13px;  
}

.submenu-toggle {
    width: 44px;
}
}