/* ==================================================
   ZENITA MOBILE BOTTOM NAVIGATION
================================================== */
/* ==================================================
   ZENITA MOBILE NAV
   DESKTOP = HIDDEN
================================================== */

/* نوار پایین */
.zenita-bottom-nav {
    display: none !important;
}

/* لایه تاریک */
.zenita-bottom-overlay {
    display: none !important;
}

/* پنل منو */
.zenita-bottom-sheet {
    display: none !important;
}


@media (max-width: 768px) {

    /* Bottom Navigation */

    .zenita-bottom-nav {
        display: flex !important;
    }


    /* Overlay */

    .zenita-bottom-overlay {
        display: block !important;

        position: fixed;
        inset: 0;

        background: rgba(35, 40, 30, .38);

        opacity: 0;
        visibility: hidden;

        z-index: 9998;

        transition:
                opacity .3s ease,
                visibility .3s ease;

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }


    .zenita-bottom-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* Bottom Sheets */

    .zenita-bottom-sheet {
        display: block !important;

        position: fixed;

        right: 0;
        bottom: 0;
        left: 0;

        z-index: 9999;

        background: #fff;

        border-radius:
                25px 25px 0 0;

        padding:
                9px
                20px
                90px;

        max-height: 75vh;

        overflow-y: auto;

        transform: translateY(110%);

        opacity: 0;

        visibility: hidden;

        transition:

                transform .38s
                cubic-bezier(.22,1,.36,1),

                opacity .25s ease,

                visibility .38s ease;

        box-shadow:
                0 -15px 45px
                rgba(35, 40, 30, .15);
    }


    .zenita-bottom-sheet.active {
        transform: translateY(0);

        opacity: 1;

        visibility: visible;
    }

}

@media (max-width: 768px) {

    body {
        padding-bottom: 80px;
    }


    /* ==================================================
       OVERLAY
    ================================================== */

    .zenita-bottom-overlay {

        position: fixed;
        inset: 0;

        background: rgba(35, 40, 30, .38);

        opacity: 0;
        visibility: hidden;

        z-index: 9998;

        transition:
                opacity .3s ease,
                visibility .3s ease;

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }


    .zenita-bottom-overlay.active {

        opacity: 1;
        visibility: visible;
    }


    /* ==================================================
       BOTTOM NAVIGATION
    ================================================== */

    .zenita-bottom-nav {

        position: fixed;

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

        height: 58px;

        padding:
                0 5px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        direction: rtl;

        background: rgba(255, 255, 255, .97);

        border: 1px solid rgba(70, 80, 60, .10);

        border-radius: 22px;

        box-shadow:
                0 5px 25px rgba(40, 45, 35, .13);

        z-index: 10000;

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


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

    .zenita-nav-item {

        position: relative;

        flex: 1;

        height: 52px;

        border: 0;
        outline: 0;

        padding: 0;
        margin: 0;

        background: transparent;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #70746d;

        text-decoration: none;

        cursor: pointer;

        font-family: inherit;

        -webkit-tap-highlight-color: transparent;

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


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

    .zenita-nav-icon {

        position: relative;

        width: 25px;
        height: 25px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .zenita-nav-icon i {

        font-size: 22px;

        line-height: 1;

        font-weight: 400;

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


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

    .zenita-nav-title {

        font-size: 10px;

        line-height: 1.1;

        font-weight: 500;

        white-space: nowrap;

        color: inherit;
    }


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

    .zenita-nav-item.active {

        color: #64745a;
    }


    .zenita-nav-item.active
    .zenita-nav-icon i {

        transform: translateY(-1px);
    }


    /* ==================================================
       ACTIVE DOT / LINE
    ================================================== */

    .zenita-nav-item.active::after {

        content: "";

        position: absolute;

        bottom: 1px;

        left: 50%;

        width: 18px;

        height: 3px;

        border-radius: 10px;

        background: #68785d;

        transform:
                translateX(-50%);
    }


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

    .zenita-cart-badge {

        position: absolute;

        top: -7px;
        right: -9px;

        min-width: 17px;
        height: 17px;

        padding: 0 4px;

        display: flex;

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

        border-radius: 50%;

        background: #263126;

        color: #fff;

        font-size: 9px;

        font-weight: 600;

        line-height: 17px;

        border: 1.5px solid #fff;
    }


    /* ==================================================
       BOTTOM SHEET
    ================================================== */

    .zenita-bottom-sheet {

        position: fixed;

        right: 0;
        bottom: 0;
        left: 0;

        z-index: 9999;

        background: #fff;

        border-radius:
                25px 25px 0 0;

        padding:
                9px
                20px
                90px;

        max-height: 75vh;

        overflow-y: auto;

        transform:
                translateY(110%);

        opacity: 0;

        visibility: hidden;

        transition:

                transform .38s
                cubic-bezier(.22,1,.36,1),

                opacity .25s ease,

                visibility .38s ease;

        box-shadow:
                0 -15px 45px
                rgba(35, 40, 30, .15);
    }


    .zenita-bottom-sheet.active {

        transform:
                translateY(0);

        opacity: 1;

        visibility: visible;
    }


    /* ==================================================
       HANDLE
    ================================================== */

    .zenita-sheet-handle {

        width: 34px;
        height: 4px;

        margin:
                0 auto 15px;

        border-radius: 10px;

        background: #d7d9d4;
    }


    /* ==================================================
       SHEET HEADER
    ================================================== */

    .zenita-sheet-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 18px;
    }


    .zenita-sheet-header > div {

        display: flex;

        flex-direction: column;

        gap: 4px;
    }


    .zenita-sheet-header strong {

        font-size: 18px;

        font-weight: 700;

        color: #30352f;
    }


    .zenita-sheet-header span {

        font-size: 11px;

        color: #92978f;
    }


    /* ==================================================
       CLOSE BUTTON
    ================================================== */

    .zenita-sheet-close {

        width: 34px;
        height: 34px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        display: flex;

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

        background: #f2f3f0;

        color: #454a43;

        cursor: pointer;
    }


    .zenita-sheet-close i {

        font-size: 15px;
    }


    /* ==================================================
       MENU LIST
    ================================================== */

    .zenita-menu-list {

        display: flex;

        flex-direction: column;

        gap: 6px;
    }


    .zenita-menu-list a {

        min-height: 51px;

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 0 11px;

        border-radius: 13px;

        background: #f8f9f7;

        color: #30352f;

        text-decoration: none;

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


    .zenita-menu-list a:active {

        transform: scale(.98);

        background: #eef1eb;
    }


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

    .zenita-menu-icon {

        width: 35px;
        height: 35px;

        flex-shrink: 0;

        display: flex;

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

        border-radius: 10px;

        background: #fff;

        color: #68785d;

        box-shadow:
                0 2px 7px rgba(50, 60, 45, .05);
    }


    .zenita-menu-icon i {

        font-size: 17px;
    }


    .zenita-menu-text {

        flex: 1;

        font-size: 12px;

        font-weight: 500;
    }


    .zenita-menu-list a > i:last-child {

        font-size: 14px;

        color: #a7aba3;
    }


    /* ==================================================
       SHOP GRID
    ================================================== */

    .zenita-shop-grid {

        display: grid;

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

        gap: 9px;
    }


    .zenita-shop-grid a {

        min-height: 100px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;

        border-radius: 15px;

        background: #f8f9f7;

        color: #30352f;

        text-decoration: none;

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


    .zenita-shop-grid a:active {

        transform: scale(.96);

        background: #eef1eb;
    }


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

    .zenita-shop-icon {

        width: 45px;
        height: 45px;

        display: flex;

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

        border-radius: 50%;

        background: #fff;

        color: #68785d;

        box-shadow:
                0 3px 12px rgba(50, 60, 45, .06);
    }


    .zenita-shop-icon i {

        font-size: 21px;
    }


    .zenita-shop-grid a > span:last-child {

        font-size: 11px;

        font-weight: 500;
    }

}


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

@media (max-width: 360px) {

    .zenita-bottom-nav {

        right: 7px;
        left: 7px;
        bottom: 7px;

        height: 56px;

        border-radius: 20px;
    }


    .zenita-nav-item {

        height: 50px;
    }


    .zenita-nav-icon i {

        font-size: 21px;
    }


    .zenita-nav-title {

        font-size: 9.5px;
    }


    .zenita-shop-grid {

        gap: 7px;
    }


    .zenita-shop-grid a {

        min-height: 92px;
    }

}

/* ==================================================
   DESKTOP SAFETY
   Bottom Navigation is mobile-only
================================================== */

@media (min-width: 769px) {

    .zenita-bottom-nav,
    .zenita-bottom-overlay,
    .zenita-bottom-sheet {
        display: none !important;
    }

}