/* =========================================================
   MODERN MOBILE BOTTOM NAV
   Blue + Red
   Compact / No Space Above Lines / Elevated Home
========================================================= */


/* =========================================================
   MAIN FOOTER
========================================================= */

.z-mobile-footer {

    position: fixed;

    left: 9px;
    right: 9px;
    bottom: 8px;

    width: auto;

    z-index: 99999;

    direction: rtl;

    /* هیچ فضای اضافه‌ای بالای خط وجود ندارد */
    padding: 0 5px 4px;

    background: #ffffff;

    /* خط بالایی نداریم */
    border: 1px solid rgba(20, 72, 130, 0.10);
    border-top: none;

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 10px 28px rgba(18, 46, 78, 0.15),
        0 2px 8px rgba(18, 46, 78, 0.07);

    overflow: visible;
}


/* =========================================================
   NAV CONTAINER
   ارتفاع از خود خطوط شروع می‌شود
========================================================= */

.z-mobile-nav {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 52px;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    align-items: end;

    gap: 2px;

    padding: 0;

    margin: 0;

}


/* =========================================================
   RED LINE - LEFT
========================================================= */

.z-mobile-nav::before {

    content: "";

    position: absolute;

    top: 0;
    left: 4px;

    width: calc(50% - 42px);

    height: 2px;

    background: #e53935;

    border-radius: 0 20px 20px 0;

    z-index: 1;
}


/* =========================================================
   BLUE LINE - RIGHT
========================================================= */

.z-mobile-nav::after {

    content: "";

    position: absolute;

    top: 0;
    right: 4px;

    width: calc(50% - 42px);

    height: 2px;

    background: #1976d2;

    border-radius: 20px 0 0 20px;

    z-index: 1;
}


/* =========================================================
   NAV ITEM
========================================================= */

.z-nav-item {

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    min-width: 0;

    height: 52px;
}


/* =========================================================
   NORMAL BUTTON / LINK
========================================================= */

.z-nav-button {

    width: 100%;

    height: 48px;

    padding: 3px 2px 4px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    border: 0;

    outline: none;

    background: transparent;

    border-radius: 12px;

    color: #687789;

    text-decoration: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease;
}


/* حذف استایل پیش‌فرض */
.z-nav-button:hover,
.z-nav-button:focus,
.z-nav-button:active {

    text-decoration: none;

    outline: none;

}


/* =========================================================
   ICON
========================================================= */

.z-nav-icon {

    width: 29px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    color: #5e6f82;

    line-height: 1;

    transition:
        color .2s ease,
        transform .2s ease;
}


/* =========================================================
   TITLE
========================================================= */

.z-nav-title {

    font-size: 9.5px;

    font-weight: 700;

    line-height: 1;

    color: #697786;

    white-space: nowrap;

    transition:
        color .2s ease;
}


/* =========================================================
   HOVER
========================================================= */

.z-nav-button:hover {

    color: #1769b0;

    background: rgba(25, 118, 210, .045);
}


.z-nav-button:hover .z-nav-icon {

    color: #1769b0;

    transform: translateY(-1px);
}


.z-nav-button:hover .z-nav-title {

    color: #1769b0;
}


/* =========================================================
   ACTIVE
========================================================= */

.z-nav-item.active .z-nav-button {

    background: rgba(25, 118, 210, .05);
}


.z-nav-item.active .z-nav-icon {

    color: #1769b0;
}


.z-nav-item.active .z-nav-title {

    color: #1769b0;
}


/* =========================================================
   HOME ITEM
========================================================= */

.z-home-item {

    position: relative;

    z-index: 20;

    height: 52px;
}


/* =========================================================
   HOME BUTTON
   فقط خانه از بالا بیرون می‌زند
========================================================= */

.z-home-item .z-nav-button {

    position: relative;

    z-index: 20;

    width: 100%;

    height: 67px;

    transform: translateY(-14px);

    justify-content: flex-start;

    padding: 0;

    background: transparent !important;

    overflow: visible;
}


/* =========================================================
   HOME CIRCLE
========================================================= */

.z-home-icon {

    position: relative;

    z-index: 30;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    font-size: 21px;

    line-height: 1;

    background:
        linear-gradient(
            145deg,
            #2a85dc 0%,
            #1769b0 100%
        );

    border: 4px solid #fff;

    box-shadow:
        0 7px 18px rgba(23, 105, 176, .30),
        0 2px 6px rgba(23, 105, 176, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   HOME OUTER RING
========================================================= */

.z-home-icon::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid rgba(23, 105, 176, .13);

    pointer-events: none;
}





/* =========================================================
   HOME HOVER
========================================================= */

.z-home-item .z-nav-button:hover .z-home-icon {

    transform: scale(1.06);

    box-shadow:
        0 9px 23px rgba(23, 105, 176, .36),
        0 3px 8px rgba(23, 105, 176, .13);
}


/* =========================================================
   HOME TITLE
========================================================= */

.z-home-item .z-nav-title {

    margin-top: 6px;

    color: #1769b0;

    font-size: 9.5px;

    font-weight: 800;

    line-height: 1.1;
}


/* =========================================================
   BADGE WRAPPER
========================================================= */

.z-icon-wrapper {

    position: relative;

    width: 29px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.z-icon-wrapper .z-nav-icon {

    width: 29px;

    height: 25px;
}


/* =========================================================
   BADGE
========================================================= */

.z-counter {

    position: absolute;

    top: -5px;

    right: -7px;

    min-width: 16px;

    height: 16px;

    padding: 0 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e53935;

    border: 2px solid #fff;

    border-radius: 50px;

    color: #fff;

    font-size: 8px;

    font-weight: 800;

    line-height: 1;

    box-shadow:
        0 2px 6px rgba(229, 57, 53, .24);

    z-index: 50;
}


/* =========================================================
   TOUCH
========================================================= */

.z-nav-button:active {

    transform: scale(.94);
}


.z-home-item .z-nav-button:active {

    transform:
        translateY(-14px)
        scale(.94);
}


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

@media (max-width: 380px) {

    .z-mobile-footer {

        left: 6px;
        right: 6px;
        bottom: 6px;

        padding: 0 3px 3px;

        border-radius: 0 0 16px 16px;
    }


    .z-mobile-nav {

        height: 48px;
    }


    .z-mobile-nav::before {

        top: 0;

        left: 3px;

        width: calc(50% - 37px);
    }


    .z-mobile-nav::after {

        top: 0;

        right: 3px;

        width: calc(50% - 37px);
    }


    .z-nav-item {

        height: 48px;
    }


    .z-nav-button {

        height: 44px;

        gap: 2px;
    }


    .z-nav-icon {

        width: 27px;

        height: 23px;

        font-size: 17px;
    }


    .z-nav-title {

        font-size: 8.5px;
    }


    /* خانه */

    .z-home-item {

        height: 48px;
    }


    .z-home-item .z-nav-button {

        height: 61px;

        transform: translateY(-11px);
    }


    .z-home-icon {

        width: 44px;

        height: 44px;

        font-size: 19px;

        border-width: 3px;
    }


    .z-home-item .z-nav-title {

        margin-top: 5px;

        font-size: 8.5px;
    }


    .z-home-item .z-nav-button:active {

        transform:
            translateY(-11px)
            scale(.94);
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .z-mobile-footer {

        display: none;
    }

}