/* =========================================================
   101 EAST DIVE BAR
   MOBILE VERSION ONLY
========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }


    /* =====================================================
       MOBILE HERO
    ===================================================== */

    section#home.hero {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        background-image:
            url("../images/101-background-mobile.png") !important;

        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }


    section#home.hero img,
    section#home.hero .hero-image,
    section#home.hero .hero-scroll,
    section#home.hero .hero-content {
        display: none !important;
    }


    /* =====================================================
       MOBILE HEADER
    ===================================================== */

    header.navbar {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 16px !important;

        background: transparent !important;

        backdrop-filter: none !important;

        box-shadow: none !important;

        z-index: 5000 !important;
    }


    .brand-panel {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
    }


    .logo {
        width: calc(100% - 82px) !important;

        padding: 13px 15px !important;

        border-radius: 18px !important;

        background:
            rgba(0, 0, 0, 0.62) !important;
    }


    .logo h2 {
        margin: 0 !important;

        color: #ffd54a !important;

        font-size: 21px !important;
    }


    /* =====================================================
       HAMBURGER BUTTON
    ===================================================== */

    #mobileMenuBtn {
        position: fixed !important;

        top: 20px !important;
        right: 16px !important;

        display: grid !important;
        place-items: center !important;

        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;
        min-height: 56px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 2px solid white !important;

        border-radius: 50% !important;

        background: #ffd54a !important;

        color: #111 !important;

        font-size: 29px !important;
        font-weight: bold !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 10001 !important;
    }


    /* =====================================================
       MOBILE SIDE MENU
    ===================================================== */

    #mobileMenu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;

        display: block !important;

        width: min(320px, 86vw) !important;
        height: 100vh !important;

        padding: 100px 22px 30px !important;

        background:
            rgba(18, 18, 18, 0.98) !important;

        box-shadow:
            -12px 0 30px
            rgba(0, 0, 0, 0.5) !important;

        transform:
            translateX(110%) !important;

        visibility: hidden !important;

        opacity: 0 !important;

        pointer-events: none !important;

        transition:
            transform 0.35s ease,
            opacity 0.35s ease !important;

        overflow-y: auto !important;

        z-index: 10000 !important;
    }


    #mobileMenu.menu-open {
        transform:
            translateX(0) !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    #mobileMenu nav {
        width: 100% !important;
    }


    #mobileMenu nav ul {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 8px !important;

        list-style: none !important;
    }


    #mobileMenu nav li {
        width: 100% !important;
    }


    #mobileMenu nav a {
        display: block !important;

        width: 100% !important;

        padding: 14px 16px !important;

        border-radius: 12px !important;

        background:
            rgba(255, 255, 255, 0.08) !important;

        color: white !important;

        text-align: left !important;

        text-decoration: none !important;

        font-size: 17px !important;

        font-weight: 600 !important;
    }


    #mobileMenu .nav-buttons {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        margin-top: 20px !important;

        gap: 12px !important;
    }


    #mobileMenu .nav-buttons button,
    #mobileMenu .admin-btn {
        width: 100% !important;

        margin: 0 !important;
    }


    /* =====================================================
       🎯 DARTBOARD - ENTER THE BAR
    ===================================================== */

    #barEntryFloat {
        display: block !important;

        position: fixed !important;

        width: 105px !important;

        right: 10px !important;
        bottom: 90px !important;

        left: auto;
        top: auto;

        z-index: 20000 !important;

        opacity: 1 !important;
        visibility: visible !important;

        user-select: none !important;
        -webkit-user-select: none !important;
    }


    /* CLICKABLE DARTBOARD LINK */

    #barEntryFloat .bar-entry-link {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        z-index: 2 !important;

        touch-action: manipulation !important;
    }


    /* DARTBOARD IMAGE */

    #barEntryFloat img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        user-select: none !important;
        -webkit-user-select: none !important;

        -webkit-user-drag: none !important;
    }


    /* DRAG HANDLE */

    #barEntryDrag {
        position: relative !important;

        z-index: 3 !important;

        pointer-events: auto !important;

        touch-action: none !important;

        cursor: grab !important;
    }


    #barEntryDrag:active {
        cursor: grabbing !important;
    }

}