/* Mobile navigation: home page quick-link chips and the "Earn & Play" tiles in the menu drawer */

.mobile-nav-wrapper {
    --m-amber: #d97706;
    --m-blue: #2563eb;
    --m-purple: #7c3aed;
    --m-green: #16a34a;
    --m-teal: var(--vr-theme-color, #19bc9c);
    --m-pink: #db2777;
}

.mobile-nav-wrapper .m-tone-amber { --m-tone: var(--m-amber); }
.mobile-nav-wrapper .m-tone-blue { --m-tone: var(--m-blue); }
.mobile-nav-wrapper .m-tone-purple { --m-tone: var(--m-purple); }
.mobile-nav-wrapper .m-tone-green { --m-tone: var(--m-green); }
.mobile-nav-wrapper .m-tone-teal { --m-tone: var(--m-teal); }
.mobile-nav-wrapper .m-tone-pink { --m-tone: var(--m-pink); }

/* Drawer: section titles */
.mobile-nav-wrapper .m-section-title {
    padding: 0 1.5rem;
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mobile-nav-wrapper .m-section-title-list {
    list-style: none;
    margin: 14px 0 2px;
}
.mobile-nav-wrapper .m-section-title-list:first-child { margin-top: 4px; }

/* Drawer: Earn & Play tiles */
.mobile-nav-wrapper .m-explore {
    padding: 16px 0 4px;
    border-bottom: 1px solid var(--border-color);
}
.mobile-nav-wrapper .m-explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 1rem 12px;
}
.mobile-nav-wrapper .m-explore-grid.m-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mobile-nav-wrapper .m-explore-grid.m-cols-2 .m-explore-item { flex-direction: row; justify-content: flex-start; padding: 10px; text-align: left; }
.mobile-nav-wrapper .m-explore-grid.m-cols-2 .m-explore-ic { width: 36px; height: 36px; flex: 0 0 auto; }
.mobile-nav-wrapper .m-explore-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-subtle, transparent);
    color: var(--text-main) !important;
    text-decoration: none !important;
    text-align: center;
    transition: border-color .15s, transform .15s;
}
.mobile-nav-wrapper .m-explore-item:active { transform: scale(.96); }
.mobile-nav-wrapper .m-explore-item.is-active { border-color: var(--m-tone); }
.mobile-nav-wrapper .m-explore-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--m-tone), transparent 86%);
    color: var(--m-tone);
}
.mobile-nav-wrapper .m-explore-label {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

/* Drawer: menu links get a light divider and a chevron */
.mobile-nav-wrapper .menu-nav { padding-top: 0.25rem; }
.mobile-nav-wrapper .menu-item + .menu-item .menu-link { border-top: 1px solid color-mix(in srgb, var(--border-color), transparent 40%); }
.mobile-nav-wrapper .menu-link { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.mobile-nav-wrapper .menu-link .m-chevron { opacity: .35; flex: 0 0 auto; }
.mobile-nav-wrapper .menu-link.active .m-chevron { opacity: 1; }

html[data-bs-theme="dark"] .mobile-nav-wrapper .m-explore-ic { background: color-mix(in srgb, var(--m-tone), transparent 78%); }

/* ------------------------------------------------------------------------
 * Bottom earning bar (mobile): 3 buttons, raised Start in the middle, 3 buttons.
 * .eb-site on the home page and earning pages, .acc-bar on My Account pages.
 * ---------------------------------------------------------------------- */
.eb-bar { display: none; }

@media (max-width: 991.98px) {
    .eb-bar {
        --eb-bg: rgba(255, 255, 255, .96);
        --eb-border: rgba(15, 23, 42, .08);
        --eb-text: #64748b;
        --eb-active: #0d9a78;
        --eb-start1: #2ee59d;
        --eb-start2: #0b8f70;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        align-items: end;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        background: var(--eb-bg);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--eb-border);
        box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .45);
    }
    [data-bs-theme="dark"] .eb-bar {
        --eb-bg: rgba(17, 20, 26, .94);
        --eb-border: rgba(255, 255, 255, .08);
        --eb-text: #94a3b8;
        --eb-active: #34d399;
    }

    .eb-bar .eb-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 64px;
        min-width: 0;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--eb-text) !important;
        text-decoration: none !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease;
    }
    .eb-bar .eb-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 28px; border-radius: 14px; transition: background .2s ease, transform .15s ease; }
    .eb-bar .eb-ic svg { width: 22px; height: 22px; }
    .eb-bar .eb-label { max-width: 100%; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .eb-bar .eb-item:active .eb-ic { transform: scale(.9); }
    .eb-bar .eb-item.is-active,
    .eb-bar .eb-item[aria-expanded="true"] { color: var(--eb-active) !important; }
    .eb-bar .eb-item.is-active .eb-ic,
    .eb-bar .eb-item[aria-expanded="true"] .eb-ic { background: color-mix(in srgb, var(--eb-active), transparent 86%); }

    /* Raised Start button */
    .eb-bar .eb-start {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        height: 64px;
        padding-bottom: 9px;
        color: var(--eb-active) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    .eb-bar .eb-start .eb-label { font-weight: 800; }
    .eb-bar .eb-start-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-top: -30px;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(145deg, var(--eb-start1), var(--eb-start2));
        border: 4px solid var(--vr-body-bg, #fff);
        box-shadow: 0 10px 22px -8px rgba(11, 143, 112, .8), 0 0 0 0 rgba(46, 229, 157, .45);
        animation: eb-pulse 2.6s ease-out infinite;
        transition: transform .15s ease;
    }
    [data-bs-theme="dark"] .eb-bar .eb-start-btn { border-color: #11141a; }
    .eb-bar .eb-start-btn svg { width: 26px; height: 26px; margin-left: 3px; }
    .eb-bar .eb-start:active .eb-start-btn { transform: scale(.92); }
    .eb-bar .eb-start.is-loading .eb-start-btn { animation: eb-spin 1s linear infinite; }
    @keyframes eb-pulse {
        0% { box-shadow: 0 10px 22px -8px rgba(11, 143, 112, .8), 0 0 0 0 rgba(46, 229, 157, .45); }
        70% { box-shadow: 0 10px 22px -8px rgba(11, 143, 112, .8), 0 0 0 12px rgba(46, 229, 157, 0); }
        100% { box-shadow: 0 10px 22px -8px rgba(11, 143, 112, .8), 0 0 0 0 rgba(46, 229, 157, 0); }
    }
    @keyframes eb-spin { to { transform: rotate(360deg); } }

    /* The bar steps aside while the ☰ drawer is open, so it never covers the drawer's last items (Log out) */
    body:has(.offcanvas.show) .eb-bar,
    body:has(.offcanvas.showing) .eb-bar { display: none; }

    /* Pages with the My Account bottom menu don't show the site bar as well */
    body:has(.acc-bar) .eb-site,
    body.has-acc-bar .eb-site { display: none; }

    /* Room for the bar; floating buttons sit above it */
    body.has-earn-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    body.has-earn-bar .vr-chat { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }
    body.has-earn-bar .btn-scroll-up { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; right: 20px !important; z-index: 1049 !important; }
    body.has-earn-bar .pwa-banner { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
    .eb-bar .eb-label { font-size: 9.5px; }
    .eb-bar .eb-ic { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .eb-bar .eb-start-btn { animation: none; }
}

/* Drawer: Log out tile in the user actions grid, and the bottom Log out as a form button */
.mobile-nav-wrapper .action-logout { margin: 0; padding: 0; }
.mobile-nav-wrapper .action-logout button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: inherit;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e11d48;
    font: inherit;
    cursor: pointer;
}
.mobile-nav-wrapper .action-logout .action-icon-box { color: #e11d48; border-color: rgba(225, 29, 72, .35); background: rgba(225, 29, 72, .06); }
html[data-bs-theme="dark"] .mobile-nav-wrapper .action-logout button,
html[data-bs-theme="dark"] .mobile-nav-wrapper .action-logout .action-icon-box { color: #fb7185; }
.mobile-nav-wrapper .m-logout-form { margin: 0; }
.mobile-nav-wrapper .m-logout-form .logout-btn { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; }

/* Account Menu sheet: leave room under the last item (Log out) */
@media (max-width: 991.98px) {
    .account-settings .ps-sidebar { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
}