/* ==========================================================================
   Mobile bottom tab navigation — shown only below the "lg" breakpoint
   (matches Bootstrap's d-lg-none used in the markup). Loaded sitewide via
   layouts/default.blade.php so it appears on every page, kept in its own
   file so it can never affect any other page's styling.

   Colors and font are hardcoded (not var(--mentor-...)) on purpose: those
   variables only exist on pages that load mentor-custom-sections.css
   (home/books/job-circular), but this bar needs to render correctly on
   every page. var(--font-family) is safe to use though — it's defined in
   style.css, which every page loads.
   ========================================================================== */

.mentor-mobile-tabbar {
    display: none;
}

@media (max-width: 991.98px) {
    .mentor-mobile-tabbar {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: #fff;
        /* floating rounded-top card look, like the reference design */
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -6px 20px rgba(60, 20, 45, .12);
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* keep page content (and the footer) from ever hiding behind the
       fixed bar — additive only, no effect above the "lg" breakpoint */
    body {
        padding-bottom: 64px;
    }

    .mentor-tab-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        color: #8a7a86;
        text-align: center;
        border-radius: 14px;
        transition: color .2s;
    }

    .mentor-tab-item svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    .mentor-tab-item span {
        font-family: var(--font-family);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .mentor-tab-item:hover {
        color: #9E2963;
    }

    .mentor-tab-item.active {
        color: #9E2963;
        background: #fdeef6;
    }
}

@media (max-width: 400px) {
    .mentor-tab-item svg { width: 18px; height: 18px; }
    .mentor-tab-item span { font-size: 9.5px; }
}