/* ============================================================
   AGP Mobile Floating Bottom Bar — shown on mobile only.
   All rules scoped to .agp-mobilebar so nothing leaks.
   ============================================================ */

.agp-mobilebar {
    display: none;   /* hidden on desktop; enabled in the mobile media query */
}

@media (max-width: 768px) {

    /* Keep page content clear of the fixed bar */
    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    .agp-mobilebar {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        height: 64px;
        padding: 0 6px;
        background: #ffffff;
        border-radius: 22px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
        z-index: 9990;
        overflow: visible;                 /* let the raised button poke out */
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }

    .agp-mobilebar__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 100%;
        text-decoration: none !important;
        color: #9a9a9a;
        line-height: 1;
        border: none;
        background: none;
        transition: color 0.18s;
    }

    .agp-mobilebar__item:hover,
    .agp-mobilebar__item.is-active {
        color: #f66e18;
    }

    .agp-mobilebar__icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .agp-mobilebar__icon svg {
        width: 23px;
        height: 23px;
        display: block;
    }

    .agp-mobilebar__label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: inherit;
    }

    /* ---- Center raised button ---- */
    .agp-mobilebar__item--center {
        justify-content: center;
    }

    .agp-mobilebar__fab {
        width: 58px;
        height: 58px;
        margin-top: -36px;                 /* lift it out of the bar */
        border-radius: 50%;
        background: #f66e18;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 5px solid #ffffff;         /* white ring = looks cut out of the bar */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
        transition: transform 0.18s, box-shadow 0.18s;
    }

    .agp-mobilebar__item--center:hover .agp-mobilebar__fab,
    .agp-mobilebar__item--center:active .agp-mobilebar__fab {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    }

    .agp-mobilebar__fab svg {
        width: 26px;
        height: 26px;
        display: block;
    }
}