/* Phone-only React shell and bottom navigation. */

@media (max-width: 767.98px) {
    /* Hide Django's navbar before the lazy SPA route and React navigation mount. */
    body.spa-shell-body > .app-navbar,
    body.home-page-body > .app-navbar,
    body.search-page-body > .app-navbar,
    body.title-detail-page-body > .app-navbar,
    body.title-update-page-body > .app-navbar,
    body.discussions-page-body > .app-navbar,
    body.discussion-space-page-body > .app-navbar,
    body.discussion-management-page-body > .app-navbar,
    body.notifications-page-body > .app-navbar,
    body.login-page-body > .app-navbar,
    body.auth-page-body > .app-navbar,
    body.verify-email-body > .app-navbar {
        display: none;
    }

    .react-mobile-layout {
        display: block;
    }

    /* Reserve the React top-bar height so its mount does not shift page content. */
    #title-detail-mobile-nav-root,
    #title-reviews-mobile-nav-root {
        min-height: 44px;
    }

    .site-main {
        padding-bottom: 76px;
    }

    .app-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        min-height: 60px;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        direction: rtl;
        background: rgba(24, 12, 7, 0.98);
        border-top: 1px solid rgba(242, 90, 0, 0.34);
        box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.38);
    }

    .app-bottom-nav-item {
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        transition: color 160ms ease, transform 160ms ease;
    }

    .app-bottom-nav-item:hover,
    .app-bottom-nav-item:focus {
        color: #ffffff;
    }

    .app-bottom-nav-item.is-active {
        color: #f25a00;
        transform: translateY(-1px);
    }

    .app-bottom-nav-item.is-placeholder:not(.app-bottom-nav-create),
    .app-bottom-nav-item.is-placeholder:not(.app-bottom-nav-create):hover,
    .app-bottom-nav-item.is-placeholder:not(.app-bottom-nav-create):focus {
        color: rgba(255, 255, 255, 0.58);
        transform: none;
    }

    .app-bottom-nav-icon {
        width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
    }

    .app-bottom-nav-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke-width 160ms ease;
    }

    .app-bottom-nav-item.is-active .app-bottom-nav-icon {
        background: rgba(242, 90, 0, 0.12);
        box-shadow: inset 0 0 0 1px rgba(242, 90, 0, 0.2);
    }

    .app-bottom-nav-item.is-active .app-bottom-nav-icon svg {
        stroke-width: 2.2;
    }

    .app-bottom-nav-create {
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .app-bottom-nav-plus {
        width: 34px;
        height: 34px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff7a1a, #f25a00);
        color: #fff7ed;
        font-size: 27px;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
        box-shadow: 0 8px 20px rgba(242, 90, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
    }

    .app-bottom-nav-create:active .app-bottom-nav-plus {
        transform: scale(0.96);
        filter: brightness(1.04);
        box-shadow: 0 6px 16px rgba(242, 90, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}