/* Mobile Fix v7-final - Pure CSS approach */

/* === 1. Logo fix: hide img, show logo-01.webp via background === */
#topBg2 #logo a {
    display: block !important;
    width: 93px !important;
    height: 30px !important;
    background: url(/images/logo-01.webp) no-repeat center center !important;
    background-size: contain !important;
}
#topBg2 #logo a img {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* === 2. Navigation Menu === */
#MainNav { display: none; position: fixed; top: 44px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9999; overflow-y: auto; padding: 0; margin: 0; }
#MainNav.open { display: block; }
#MainNav ul { list-style: none; padding: 0; margin: 0; }
#MainNav ul li { border-bottom: 1px solid #eee; }
#MainNav ul li a { display: block; padding: 15px 20px; color: #333; font-size: 16px; text-decoration: none; }
#MainNav ul li a:hover { background: #f5f5f5; color: #1badf9; }

/* === 3. Red floating button === */
#link_div { display: block !important; }

/* === 4. Hide PC header on mobile === */
#topBg { display: none !important; }

/* === 5. Prevent body scroll when nav open === */
body.nav-open { overflow: hidden; }

/* === 6. Right floating panel: hide blue expand panels on mobile, show only red icons === */
@media (max-width: 768px) {
    /* Force hide all blue expand panels inside link_div */
    #link_div li div {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Ensure red icon buttons remain visible and properly sized */
    #link_div li > a {
        display: block !important;
        width: 52px !important;
        height: 52px !important;
        background-color: #da0003 !important;
        position: relative !important;
        overflow: hidden !important;
    }
    /* Prevent hover from showing blue panels on touch devices */
    #link_div li > a:hover div,
    #link_div li > a:active div,
    #link_div li > a:focus div {
        display: none !important;
        visibility: hidden !important;
    }
    /* Override inline styles on tel panel specifically */
    #link_tel a div {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* Ensure the ul container stays compact - only icon column */
    #link_div {
        width: 52px !important;
        overflow: hidden !important;
    }
}