/* =========================================================
   JAMEENGUIDE MOBILE CSS
   0 - 768px
========================================================= */

@media (max-width:768px){


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

    .jg-header{

        height:62px;

        min-height:62px;

        padding:
            0 15px;

        position:sticky;

        top:0;

        z-index:1000;

    }


    /* =====================================================
       LOGO
    ====================================================== */

    .jg-logo{

        height:62px;

    }


    .jg-logo img{

        height:48px;

        max-width:190px;

    }


    /* =====================================================
       DESKTOP MENU HIDE
    ====================================================== */

    .jg-desktop-nav{

        display:none !important;

    }


    /* =====================================================
       LOGIN
    ====================================================== */

    .jg-login-btn{

        border:0;

        padding:5px 0;

        font-size:19px;

        background:transparent;

    }


    .jg-login-btn:hover{

        background:transparent;

        color:#1976ff;

    }


    /* =====================================================
       BOTTOM NAVIGATION
    ====================================================== */

    .jg-bottom-nav{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        width:100%;

        height:78px;

        padding:
            5px
            6px
            env(safe-area-inset-bottom);

        background:#ffffff;

        display:flex;

        align-items:center;

        justify-content:space-around;

        z-index:9999;

        box-shadow:
            0 -4px 18px
            rgba(0,0,0,.10);

        border-top:
            1px solid #eeeeee;

    }


    /* =====================================================
       NAV ITEM
    ====================================================== */

    .jg-bottom-item{

        flex:1;

        min-width:0;

        height:68px;

        gap:3px;

        font-size:12px;

    }


    /* =====================================================
       NAV CIRCLE
    ====================================================== */

    .jg-bottom-circle{

        width:42px;

        height:42px;

    }


    .jg-bottom-circle svg{

        width:22px;

        height:22px;

    }


    /* =====================================================
       LABEL
    ====================================================== */

    .jg-bottom-label{

        line-height:16px;

        white-space:nowrap;

    }


    /* =====================================================
       ACTIVE NAV
    ====================================================== */

    .jg-bottom-item.active
    .jg-bottom-circle{

        background:#dcebff;

    }


    .jg-bottom-item.active
    .jg-bottom-label{

        color:#1677ff;

    }


    /* =====================================================
       BODY BOTTOM SPACE
    ====================================================== */

    body{

        padding-bottom:
            calc(
                88px
                + env(safe-area-inset-bottom)
            );

    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .jg-footer{

        display:none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:380px){


    .jg-header{

        padding:
            0 12px;

    }


    .jg-logo img{

        height:44px;

        max-width:175px;

    }


    .jg-login-btn{

        font-size:18px;

    }


    .jg-bottom-nav{

        height:74px;

    }


    .jg-bottom-item{

        height:65px;

        font-size:11px;

    }


    .jg-bottom-circle{

        width:39px;

        height:39px;

    }


    .jg-bottom-circle svg{

        width:20px;

        height:20px;

    }


}