/* ================================================================
   ONION QUALITY AI
   MOBILE BOTTOM NAVIGATION
================================================================ */


/* ------------------------------------------------
   NEVER SHOW BOTTOM NAV ON DESKTOP
------------------------------------------------ */

.mobile-bottom-nav {
    display: none !important;
}


/* ------------------------------------------------
   ABSOLUTE SVG SAFETY
   Prevent browser default 300x150 SVG rendering
------------------------------------------------ */

.mobile-bottom-nav svg {
    width: 24px !important;
    height: 24px !important;

    max-width: 24px !important;
    max-height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    display: block !important;

    overflow: visible;
}


/* ================================================================
   MOBILE
================================================================ */

@media screen and (max-width: 760px) {


    /* ------------------------------------------------------------
       Reserve room below page content
    ------------------------------------------------------------ */

    body.has-mobile-bottom-nav {
        padding-bottom:
            calc(
                82px
                +
                env(safe-area-inset-bottom)
            ) !important;
    }


    body.has-mobile-bottom-nav main.page-shell {
        padding-bottom:
            32px !important;
    }


    body.has-mobile-bottom-nav .site-footer {
        display: none !important;
    }


    /* ------------------------------------------------------------
       FIXED BOTTOM BAR
    ------------------------------------------------------------ */

    .mobile-bottom-nav {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        top: auto !important;

        width: 100% !important;
        height:
            calc(
                76px
                +
                env(safe-area-inset-bottom)
            ) !important;

        margin: 0 !important;

        padding:
            8px 6px
            calc(
                7px
                +
                env(safe-area-inset-bottom)
            ) !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            ) !important;

        align-items: end !important;

        border-top:
            1px solid #dce6df !important;

        background:
            rgba(
                255,
                255,
                255,
                0.98
            ) !important;

        box-shadow:
            0 -7px 24px
            rgba(
                5,
                46,
                22,
                0.10
            ) !important;

        backdrop-filter:
            blur(15px);

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

        z-index: 99999 !important;
    }


    /* ------------------------------------------------------------
       NORMAL NAV ITEMS
    ------------------------------------------------------------ */

    .mobile-bottom-item {
        position: relative !important;

        min-width: 0 !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 3px 2px !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 4px !important;

        color: #66746b !important;

        background: transparent !important;

        border: 0 !important;

        text-decoration: none !important;

        font-size: 10px !important;
        font-weight: 700 !important;

        line-height: 1.1 !important;

        text-align: center !important;
    }


    .mobile-bottom-item span {
        display: block !important;

        width: 100% !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        white-space: nowrap !important;
    }


    .mobile-bottom-item svg {
        width: 24px !important;
        height: 24px !important;

        max-width: 24px !important;
        max-height: 24px !important;

        min-width: 24px !important;
        min-height: 24px !important;

        flex: 0 0 24px !important;

        fill: none !important;

        stroke: currentColor !important;

        stroke-width: 2 !important;

        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


    .mobile-bottom-item.active {
        color: #15803d !important;
    }


    /* ------------------------------------------------------------
       CENTER CAMERA BUTTON
    ------------------------------------------------------------ */

    .mobile-camera-action {
        position: relative !important;

        min-width: 0 !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

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

        color: #166534 !important;

        background: transparent !important;

        text-decoration: none !important;

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

        line-height: 1.1 !important;

        text-align: center !important;
    }


    .mobile-camera-circle {
        position: absolute !important;

        left: 50% !important;
        top: -34px !important;

        transform:
            translateX(-50%) !important;

        width: 68px !important;
        height: 68px !important;

        min-width: 68px !important;
        min-height: 68px !important;

        max-width: 68px !important;
        max-height: 68px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;

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

        border:
            6px solid #f3f7f4 !important;

        border-radius: 50% !important;

        background:
            linear-gradient(
                145deg,
                #15803d,
                #22c55e
            ) !important;

        color: white !important;

        box-shadow:
            0 8px 24px
            rgba(
                22,
                101,
                52,
                0.32
            ) !important;
    }


    .mobile-camera-circle svg {
        width: 30px !important;
        height: 30px !important;

        max-width: 30px !important;
        max-height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;

        fill: none !important;

        stroke: currentColor !important;

        stroke-width: 1.9 !important;

        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


    .mobile-camera-label {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }


    .mobile-camera-action.active {
        color: #052e16 !important;
    }


    .mobile-camera-action.active
    .mobile-camera-circle {
        background: #052e16 !important;
    }

}


/* ================================================================
   SMALL PHONES
================================================================ */

@media screen and (max-width: 390px) {

    .mobile-bottom-nav {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }


    .mobile-bottom-item,
    .mobile-camera-action {
        font-size: 9px !important;
    }


    .mobile-bottom-item svg {
        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        max-width: 22px !important;
        max-height: 22px !important;
    }


    .mobile-camera-circle {
        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;
        min-height: 64px !important;

        max-width: 64px !important;
        max-height: 64px !important;

        top: -31px !important;
    }


    .mobile-camera-circle svg {
        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        min-height: 28px !important;

        max-width: 28px !important;
        max-height: 28px !important;
    }

}

/* ================================================================
   MOBILE BOTTOM NAV - COMPACT FINAL SIZE
================================================================ */

@media screen and (max-width: 760px) {

    .mobile-bottom-nav {
        height:
            calc(
                62px
                +
                env(safe-area-inset-bottom)
            ) !important;

        min-height:
            62px !important;

        padding:
            5px 5px
            calc(
                5px
                +
                env(safe-area-inset-bottom)
            ) !important;

        align-items:
            end !important;
    }


    .mobile-bottom-item {
        height:
            48px !important;

        padding:
            2px 1px !important;

        gap:
            2px !important;

        font-size:
            8px !important;
    }


    .mobile-bottom-item svg {
        width:
            20px !important;

        height:
            20px !important;

        min-width:
            20px !important;

        min-height:
            20px !important;

        max-width:
            20px !important;

        max-height:
            20px !important;
    }


    /* ------------------------------------------------------------
       CENTER CAMERA BUTTON
    ------------------------------------------------------------ */

    .mobile-camera-action {
        height:
            48px !important;

        font-size:
            8px !important;
    }


    .mobile-camera-circle {
        top:
            -25px !important;

        width:
            58px !important;

        height:
            58px !important;

        min-width:
            58px !important;

        min-height:
            58px !important;

        max-width:
            58px !important;

        max-height:
            58px !important;

        border-width:
            5px !important;
    }


    .mobile-camera-circle svg {
        width:
            25px !important;

        height:
            25px !important;

        min-width:
            25px !important;

        min-height:
            25px !important;

        max-width:
            25px !important;

        max-height:
            25px !important;
    }


    .mobile-camera-label {
        font-size:
            8px !important;
    }


    /* ------------------------------------------------------------
       RESERVE LESS EMPTY SPACE BELOW CONTENT
    ------------------------------------------------------------ */

    body.has-mobile-bottom-nav {
        padding-bottom:
            calc(
                68px
                +
                env(safe-area-inset-bottom)
            ) !important;
    }


    body.has-mobile-bottom-nav
    main.page-shell {
        padding-bottom:
            78px !important;
    }

}


/* ================================================================
   SMALL PHONE
================================================================ */

@media screen and (max-width: 390px) {

    .mobile-bottom-nav {
        height:
            calc(
                60px
                +
                env(safe-area-inset-bottom)
            ) !important;

        min-height:
            60px !important;
    }


    .mobile-camera-circle {
        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        min-height:
            56px !important;

        max-width:
            56px !important;

        max-height:
            56px !important;

        top:
            -24px !important;
    }

}