/*
|--------------------------------------------------------------------------
| BATAM24 MOBILE QUICK NAVIGATION
|--------------------------------------------------------------------------
| Hanya ditampilkan pada tablet kecil dan mobile.
|--------------------------------------------------------------------------
*/

.b24-mobile-quicknav {
    display: none;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

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

    /*
    |--------------------------------------------------------------------------
    | HEADER STICKY
    |--------------------------------------------------------------------------
    | Menu kategori ikut melayang karena berada di dalam #header.
    |--------------------------------------------------------------------------
    */

    #header {
        position: sticky !important;
        top: 0 !important;
        right: 0;
        left: 0;
        z-index: 9999 !important;

        width: 100%;

        overflow: visible;

        background: #ffffff;

        box-shadow:
            0 8px 24px rgba(15, 42, 68, 0.12),
            0 2px 6px rgba(15, 42, 68, 0.06);

        transform: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | QUICK NAV WRAPPER
    |--------------------------------------------------------------------------
    */

    .b24-mobile-quicknav {
        position: relative;
        z-index: 20;

        display: block;

        width: 100%;

        overflow: hidden;

        background: rgba(255, 255, 255, 0.98);

        border-top: 1px solid #e8edf2;
        border-bottom: 1px solid #dce4eb;

        box-shadow:
            0 5px 14px rgba(20, 55, 85, 0.07);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /*
    |--------------------------------------------------------------------------
    | HORIZONTAL SCROLLER
    |--------------------------------------------------------------------------
    */

    .b24-mobile-quicknav__scroller {
        display: flex;
        align-items: center;
        gap: 5px;

        width: 100%;
        margin: 0;
        padding: 2px 11px 3px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        scrollbar-width: none;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .b24-mobile-quicknav__scroller::-webkit-scrollbar {
        display: none;

        width: 0;
        height: 0;
    }

    /*
    |--------------------------------------------------------------------------
    | MENU ITEM
    |--------------------------------------------------------------------------
    */

    .b24-mobile-quicknav__item {
        position: relative;

        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;

        min-height: 38px;
        padding: 7px 12px;

        color: #1b2733;

        background: transparent;

        border: 1px solid transparent;
        border-radius: 10px;

        scroll-snap-align: center;

        font-size: 13px;
        font-weight: 650;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;

        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
    }

    .b24-mobile-quicknav__item:hover,
    .b24-mobile-quicknav__item:focus {
        color: #0879b8;

        background: #eef8fd;

        border-color: #d6edf8;

        text-decoration: none;
    }

    .b24-mobile-quicknav__item:active {
        transform: scale(0.96);
    }

    /*
    |--------------------------------------------------------------------------
    | MENU AKTIF
    |--------------------------------------------------------------------------
    */

    .b24-mobile-quicknav__item.is-active {
        color: #0579b9;

        background:
            linear-gradient(
                180deg,
                #f3fbff 0%,
                #e6f6fe 100%
            );

        border-color: #ccebf9;

        font-weight: 750;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 3px 10px rgba(5, 121, 185, 0.09);
    }

    .b24-mobile-quicknav__item.is-active::after {
        position: absolute;
        right: 12px;
        bottom: 2px;
        left: 12px;

        height: 3px;

        background: #ffd000;

        border-radius: 999px;

        content: "";
    }

    /*
    |--------------------------------------------------------------------------
    | BAYANGAN SISI KANAN
    |--------------------------------------------------------------------------
    | Memberi petunjuk bahwa menu masih dapat digeser.
    |--------------------------------------------------------------------------
    */

    .b24-mobile-quicknav::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;

        width: 24px;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.95) 100%
            );

        content: "";
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE KECIL
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 390px) {
    .b24-mobile-quicknav__scroller {
        gap: 3px;

        padding-right: 8px;
        padding-left: 8px;
    }

    .b24-mobile-quicknav__item {
        min-height: 36px;
        padding: 8px 11px;

        font-size: 12px;
    }
}

/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 768px) {
    .b24-mobile-quicknav {
        display: none !important;
    }
}