/* Mobile Fix for Menu Overlapping Issues */

@media screen and (max-width: 768px) {
    
    /* Force all elements to be block-level and prevent overlapping */
    #header, #mainmenubg, #content, #leftblock, #rightblock, #footer {
        display: block !important;
        float: none !important;
        clear: both !important;
        position: relative !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Specific fixes for header elements */
    #header {
        margin-bottom: 10px !important;
    }
    
    #headerright {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    #logo {
        display: block !important;
        text-align: center !important;
        margin: 10px auto !important;
    }
    
    #slogan {
        display: block !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    /* Main menu fixes */
    #mainmenubg {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 10px 0 !important;
        clear: both !important;
    }
    
    #mainmenu {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }
    
    #mainmenu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    #mainmenu li:last-child {
        border-bottom: none !important;
    }
    
    #mainmenu li a {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        box-sizing: border-box !important;
    }
    
    /* Dropdown menu fixes */
    #mainmenu li .topsubs {
        display: none !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,0.3) !important;
        clear: both !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        z-index: 10 !important;
    }
    
    /* Show dropdown when mobile-dropdown-open class is present */
    #mainmenu li.mobile-dropdown-open .topsubs {
        display: block !important;
    }
    
    /* Ensure dropdown is visually separated from main menu */
    #mainmenu li.mobile-dropdown-open {
        background: rgba(0,0,0,0.1) !important;
        margin-bottom: 5px !important;
        border-radius: 4px !important;
    }
    
    #mainmenu li .topsubs div {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }
    
    #mainmenu li .topsubs div a {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        margin: 3px 0 !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-left: 3px solid #A6CE3A !important;
        min-height: 44px !important;
        line-height: 20px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #mainmenu li .topsubs div a:hover {
        background: rgba(255,255,255,0.2) !important;
        color: #A6CE3A !important;
    }
    
    #mainmenu li .topsubs div a:active {
        background: rgba(166,206,58,0.3) !important;
        color: #ffffff !important;
    }
    
    /* Content area fixes */
    #content {
        display: block !important;
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    #leftblock {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    #rightblock {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        clear: both !important;
        box-sizing: border-box !important;
    }
    
    /* Left submenu fixes */
    #leftsubmenus {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    #leftsubmenus li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }
    
    #leftsubmenus li a {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px !important;
        margin: 2px 0 !important;
        background: #f8f8f8 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        color: #006eb4 !important;
        box-sizing: border-box !important;
    }
    
    /* Search form fixes */
    #topsearch {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        clear: both !important;
        background: rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    #topsearch .desc {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    #topsearch .cats,
    #topsearch .ss {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    #topsearch .sbtn {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }
    
    /* Top inner links fixes */
    #topinner {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        clear: both !important;
    }
    
    #topinner li {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        clear: both !important;
    }
    
    /* Footer fixes */
    #footer {
        display: block !important;
        width: 100% !important;
        margin: 20px 0 0 0 !important;
        padding: 15px !important;
        clear: both !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Summary price fixes */
    #summaryPrice {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }
    
    /* Language and currency selectors */
    #langs, #currencies {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        clear: both !important;
    }
    
    #currencies ul li {
        display: inline-block !important;
        margin: 5px !important;
    }
    
    /* Clear any remaining floats */
    .clearfix::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
    
    /* Force box-sizing for all elements */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
}