/* =========================================================
   FOLLOWMYTRAVELS — MOBILE APP NAVIGATION
   ========================================================= */

.mobile-app-nav,
.mobile-app-more {
    display: none;
}


@media (max-width: 900px) {

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


    /* =====================================================
       FIXED APP BAR
       ===================================================== */

    .mobile-app-nav {
        position: fixed;

        left: 10px;
        right: 10px;
        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        z-index: 1100;

        min-height: 70px;

        padding: 7px 5px;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--color-dark) 8%,
                transparent
            );

        border-radius: 23px;

        background:
            color-mix(
                in srgb,
                var(--color-white) 96%,
                transparent
            );

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);

        box-shadow:
            0 14px 38px
            rgba(43, 45, 66, .16);

        display: grid;

        grid-template-columns:
            1fr
            1fr
            1.12fr
            1fr
            1fr;

        align-items: end;

        isolation: isolate;
    }


    .mobile-app-nav--guest {
        grid-template-columns:
            1fr
            1fr
            1.12fr
            1fr;
    }


    /* =====================================================
       STANDARD ITEM
       ===================================================== */

    .mobile-app-nav__item {
        position: relative;

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

        padding: 5px 2px 3px;

        border: 0;

        background: transparent;

        color: var(--text-secondary);

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 4px;

        cursor: pointer;
    }


    .mobile-app-nav__icon {
        position: relative;

        width: 31px;
        height: 31px;

        border-radius: 10px;

        display: flex;

        align-items: center;
        justify-content: center;

        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
    }


    .mobile-app-nav__icon svg {
        width: 22px;
        height: 22px;

        display: block;
    }


    .mobile-app-nav__label {
        max-width: 100%;

        overflow: hidden;

        font-size: 10px;
        font-weight: 750;

        line-height: 1;

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


    .mobile-app-nav__item.is-active {
        color: var(--text-primary);
    }


    .mobile-app-nav__item.is-active
    .mobile-app-nav__icon {
        background:
            color-mix(
                in srgb,
                var(--color-mint) 48%,
                var(--color-white)
            );

        transform: translateY(-1px);
    }


    .mobile-app-nav__item.is-active
    .mobile-app-nav__label {
        font-weight: 800;
    }


    /* =====================================================
       CREATE TRIP
       ===================================================== */

    .mobile-app-nav__create {
        position: relative;

        min-width: 0;

        color: var(--text-primary);

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: flex-end;

        gap: 3px;
    }


    .mobile-app-nav__create-icon {
        width: 52px;
        height: 52px;

        margin-top: -21px;

        border:
            5px solid
            var(--color-white);

        border-radius: 18px;

        background: var(--color-yellow);

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 29px;
        font-weight: 500;

        line-height: 1;

        box-shadow:
            0 9px 23px
            rgba(43, 45, 66, .18);
    }


    .mobile-app-nav__create-label {
        padding-bottom: 3px;

        font-size: 10px;
        font-weight: 800;

        line-height: 1;
    }


    /* =====================================================
       BADGE
       ===================================================== */

    .mobile-app-nav__badge {
        position: absolute;

        top: -5px;
        right: -7px;

        min-width: 18px;
        height: 18px;

        padding: 0 5px;

        border:
            2px solid
            var(--color-white);

        border-radius: 999px;

        background: var(--color-yellow);

        color: var(--text-primary);

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 8px;
        font-weight: 800;

        line-height: 1;
    }


    /* =====================================================
       MORE SHEET
       ===================================================== */

    .mobile-app-more {
        position: fixed;

        inset: 0;

        z-index: 1200;

        display: block;

        visibility: hidden;
        pointer-events: none;
    }


    .mobile-app-more.is-open {
        visibility: visible;
        pointer-events: auto;
    }


    .mobile-app-more__backdrop {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        padding: 0;
        border: 0;

        background:
            rgba(43, 45, 66, .36);

        opacity: 0;

        transition:
            opacity .25s ease;
    }


    .mobile-app-more.is-open
    .mobile-app-more__backdrop {
        opacity: 1;
    }


    .mobile-app-more__panel {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        max-height:
            calc(
                100dvh -
                38px
            );

        padding:
            11px
            18px
            calc(
                26px +
                env(safe-area-inset-bottom)
            );

        border-radius:
            28px
            28px
            0
            0;

        background: var(--color-white);

        overflow-y: auto;

        transform:
            translateY(105%);

        transition:
            transform .28s
            cubic-bezier(.2, .75, .25, 1);
    }


    .mobile-app-more.is-open
    .mobile-app-more__panel {
        transform:
            translateY(0);
    }


    .mobile-app-more__handle {
        width: 42px;
        height: 4px;

        margin: 0 auto 15px;

        border-radius: 999px;

        background:
            color-mix(
                in srgb,
                var(--color-dark) 16%,
                transparent
            );
    }


    .mobile-app-more__header {
        margin-bottom: 19px;

        display: flex;

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

        gap: 20px;
    }


    .mobile-app-more__header > div {
        display: flex;
        flex-direction: column;

        gap: 4px;
    }


    .mobile-app-more__eyebrow {
        color: var(--text-secondary);

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 1.3px;
    }


    .mobile-app-more__header strong {
        color: var(--text-primary);

        font-family: var(--font-editorial);

        font-size: 30px;
        font-weight: 600;
    }


    .mobile-app-more__close {
        width: 42px;
        height: 42px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: var(--color-surface);

        color: var(--text-primary);

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 27px;
        font-weight: 400;

        line-height: 1;

        cursor: pointer;
    }


    /* =====================================================
       MORE LINKS
       ===================================================== */

    .mobile-app-more__grid {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 10px;
    }


    .mobile-app-more__link {
        position: relative;

        min-height: 82px;

        padding: 13px;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--color-dark) 8%,
                transparent
            );

        border-radius: 16px;

        background: var(--color-white);

        display: flex;

        align-items: center;

        gap: 11px;
    }


    .mobile-app-more__icon {
        position: relative;

        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        border-radius: 12px;

        background: var(--color-surface);

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .mobile-app-more__icon svg {
        width: 20px;
        height: 20px;
    }


    .mobile-app-more__link > span:last-child {
        min-width: 0;

        display: flex;
        flex-direction: column;

        gap: 3px;
    }


    .mobile-app-more__link strong {
        color: var(--text-primary);

        font-size: 13px;
        font-weight: 800;
    }


    .mobile-app-more__link small {
        color: var(--text-secondary);

        font-size: 10px;

        line-height: 1.25;
    }


    .mobile-app-more__badge {
        position: absolute;

        top: -5px;
        right: -5px;

        min-width: 18px;
        height: 18px;

        padding: 0 4px;

        border:
            2px solid
            var(--color-white);

        border-radius: 999px;

        background: var(--color-yellow);

        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 8px;
        font-weight: 800;
    }


    .mobile-app-more__logout-form {
        margin-top: 12px;
    }


    .mobile-app-more__logout {
        width: 100%;
        min-height: 49px;

        padding: 0 16px;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--color-dark) 10%,
                transparent
            );

        border-radius: 14px;

        background: var(--color-surface);

        color: var(--text-primary);

        font-size: 13px;
        font-weight: 800;

        cursor: pointer;
    }


    html.app-more-open,
    body.app-more-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

}


@media (max-width: 380px) {

    .mobile-app-nav {
        left: 6px;
        right: 6px;
    }


    .mobile-app-nav__label,
    .mobile-app-nav__create-label {
        font-size: 9px;
    }


    .mobile-app-more__grid {
        gap: 8px;
    }


    .mobile-app-more__link {
        padding: 11px;
    }

}