/* ================== version 2.1 =========================== */
/* MOBILE MENU BARS - OPTIMIZED CSS */
/* ============================================= */

/* Base Reset & Hide Elements - HIDE BY DEFAULT */
.gc-sticky__bar,
#mobile-header,
.gc-header,
.simple-mobile-top-bar,
.simple-mobile-bottom-bar,
#top-more-menu-overlay,
#bottom-more-menu-overlay {
    display: none !important;
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
    
    /* ========= SHOW MOBILE ELEMENTS ========= */
    .simple-mobile-top-bar,
    .simple-mobile-bottom-bar {
        display: flex !important;
    }
    
    /* ========= TOP BAR ========= */
    .simple-mobile-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #F5F8FC;
        z-index: 1000;
        padding: 0 10px;
        align-items: center;
    }
    
    .top-bar-logo {
        flex-shrink: 0;
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .top-bar-logo img {
        max-height: 80%;
        width: auto;
    }
    
    .top-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0 5px;
        color: #4a4a4a;
    }
    
    .top-menu-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        font-family: 'Arial', sans-serif;
        font-size: 10px;
    }
    
    .top-menu-item i {
        font-size: 20px;
        margin-bottom: 3px;
    }
    
    .top-menu-item a i::before {
        font-size: 30px;
        position: relative;
        bottom: 4px;
    }
    
    /* Top More Menu */
    #top-more-toggle {
        cursor: pointer;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #top-more-toggle * {
        pointer-events: none;
    }
    
    #top-more-menu-overlay {
        display: none; /* Keep hidden by default, JS will control */
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.9);
        z-index: 1002;
        max-height: 50vh;
        overflow-y: auto;
        padding: 15px 0;
        box-shadow: 0 2px 15px rgba(0,0,0,0.3);
    }
    
    .top-more-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .top-more-menu .top-menu-item {
        color: #fff;
        padding: 10px 15px;
    }
    
    
    /* ========= BOTTOM BAR ========= */
    .simple-mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 70px;
        background: #2c3e50;
        z-index: 999;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
    }
    
    .bottom-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0 5px;
        color: #ebebeb;
    }
    
    .bottom-menu-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        font-family: 'Arial', sans-serif;
        font-size: 10px;
    }
    
    .bottom-menu-item a i::before {
        font-size: 30px;
        position: relative;
        bottom: 4px;
    }
    
    /* Bottom More Menu */
    #bottom-more-toggle {
        cursor: pointer;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    
    #bottom-more-toggle * {
        pointer-events: none;
    }
    
    #bottom-more-toggle .more-icon {
        font-size: 24px;
        line-height: 1;
        margin-bottom: 2px;
    }
    
    #bottom-more-toggle .bottom-menu-label {
        font-size: 9px;
    }
    
    #bottom-more-menu-overlay {
        display: none; /* Keep hidden by default, JS will control */
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        background: #34495e;
        z-index: 1001;
        max-height: 50vh;
        overflow-y: auto;
        padding: 15px 0;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.3);
    }
    
    .bottom-more-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .bottom-more-menu .bottom-menu-item {
        color: #fff;
        padding: 10px 15px;
    }
    
    
    /* ========= SHARED STYLES ========= */
    #bottom-more-toggle.active,
    #top-more-toggle.active {
        background-color: rgba(255,255,255,0.1);
    }
    
    #bottom-more-toggle.touched,
    #top-more-toggle.touched {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    #bottom-more-menu-overlay,
    #top-more-menu-overlay {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}