/*
|--------------------------------------------------------------------------
| RentalAjay Customer Mobile Bottom Navigation
|--------------------------------------------------------------------------
|
| Desktop:
| - Navigasi customer tetap berada di header.
|
| Mobile:
| - Navigasi utama customer pindah ke bagian bawah.
| - Menu hamburger customer disembunyikan.
| - Tombol chat dan rating dinaikkan agar tidak bertabrakan.
|
*/

.customer-bottom-nav,
.customer-mobile-profile-shortcut {
    display: none;
}

@media (max-width: 760px) {
    /*
    |--------------------------------------------------------------------------
    | Header customer mobile
    |--------------------------------------------------------------------------
    */

    body.customer-body {
        padding-bottom:
            calc(
                78px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    body.customer-body .customer-header {
        min-height: 66px;
    }

    body.customer-body .customer-header .nav-wrap {
        min-height: 66px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    body.customer-body .customer-header .brand {
        min-width: 0;
    }

    /*
     * Menu dropdown lama disembunyikan pada akun customer.
     * Pengunjung yang belum login tetap memakai hamburger.
     */
    body.customer-body .customer-header .nav-toggle,
    body.customer-body .customer-header .main-nav {
        display: none !important;
    }

    body.customer-body .customer-mobile-profile-shortcut {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 14px;
        background:
            linear-gradient(
                135deg,
                #315ffd,
                #7049ec
            );
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 900;
        text-decoration: none;
        box-shadow:
            0 8px 20px
            rgba(
                49,
                95,
                253,
                0.2
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Navigasi bawah
    |--------------------------------------------------------------------------
    */

    body.customer-body .customer-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1150;

        min-height:
            calc(
                68px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        display: grid;
        grid-template-columns:
            repeat(
                7,
                minmax(
                    0,
                    1fr
                )
            );

        align-items: start;

        padding:
            7px
            4px
            calc(
                5px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        border-top:
            1px
            solid
            #e1e7f0;

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

        box-shadow:
            0
            -10px
            35px
            rgba(
                20,
                34,
                66,
                0.12
            );

        backdrop-filter:
            blur(18px);

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

    body.customer-body .customer-bottom-nav > a {
        position: relative;

        min-width: 0;
        min-height: 55px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        gap: 3px;

        padding: 3px 1px;

        border-radius: 12px;

        color: #7d8798;

        text-align: center;
        text-decoration: none;

        -webkit-tap-highlight-color:
            transparent;

        transition:
            color 0.16s ease,
            background 0.16s ease,
            transform 0.16s ease;
    }

    body.customer-body .customer-bottom-nav > a:active {
        transform: scale(0.94);
    }

    body.customer-body .customer-bottom-nav > a.active {
        color: #315ffd;
        background: #f0f4ff;
    }

    body.customer-body .customer-bottom-icon {
        position: relative;

        width: 24px;
        height: 24px;

        display: grid;
        place-items: center;
    }

    body.customer-body .customer-bottom-icon svg {
        width: 22px;
        height: 22px;

        display: block;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.85;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /*
     * Ikon katalog memakai rumah dengan area tertutup.
     */
    body.customer-body
    .customer-bottom-nav
    > a:first-child
    .customer-bottom-icon
    svg {
        fill: none;
    }

    body.customer-body .customer-bottom-label {
        width: 100%;

        overflow: hidden;

        font-size: 0.54rem;
        font-weight: 700;
        line-height: 1.1;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.customer-body
    .customer-bottom-nav
    > a.active
    .customer-bottom-label {
        font-weight: 900;
    }

    body.customer-body .customer-bottom-badge {
        position: absolute;
        top: -7px;
        right: -10px;

        min-width: 19px;
        height: 19px;

        display: grid;
        place-items: center;

        padding: 0 5px;

        border:
            2px
            solid
            #ffffff;

        border-radius: 999px;

        background: #f04444;
        color: #ffffff;

        font-size: 0.58rem;
        font-weight: 900;
        line-height: 1;
    }

    /*
    |--------------------------------------------------------------------------
    | Ruang aman agar konten tidak tertutup menu bawah
    |--------------------------------------------------------------------------
    */

    body.customer-body .page-shell {
        padding-bottom:
            calc(
                112px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;
    }

    body.customer-body .site-footer {
        margin-bottom:
            calc(
                68px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Tombol chat dan rating dinaikkan
    |--------------------------------------------------------------------------
    */

    body.customer-body .rp-chat-floating-stack {
        right: 14px !important;

        bottom:
            calc(
                82px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;
    }

    body.customer-body .rp-review-floating-button {
        right: 82px !important;

        bottom:
            calc(
                82px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;
    }
}

/*
|--------------------------------------------------------------------------
| HP sangat kecil
|--------------------------------------------------------------------------
*/

@media (max-width: 370px) {
    body.customer-body .customer-bottom-label {
        font-size: 0.49rem;
    }

    body.customer-body .customer-bottom-nav {
        padding-left: 1px;
        padding-right: 1px;
    }

    body.customer-body .customer-bottom-nav > a {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Desktop dan tablet besar
|--------------------------------------------------------------------------
*/

@media (min-width: 761px) {
    body.customer-body .customer-bottom-nav {
        display: none !important;
    }

    body.customer-body
    .customer-mobile-profile-shortcut {
        display: none !important;
    }
}