/* DNav Bottom Bar Styles */

/* توجه: کدهای تکراری #dnav-progress-bar از اینجا حذف شدند 
   زیرا نسخه کامل‌تر و انیمیشن‌دار آن در فایل frontend-html.php قرار دارد */

@media (min-width: 1025px) {
    .dnav-wrapper-container, 
    .tg-dnav-overlay { 
        display: none !important; 
    }
    
    .dnav-spacer { 
        display: none !important; 
    }
}

@media (max-width: 1024px) {
    .dnav-spacer { 
        height: calc(85px + var(--dnav-margin-bottom)); 
        width: 100%; 
        display: block; 
    }

    .dnav-wrapper-container { 
        position: fixed; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        pointer-events: none; 
        z-index: 999998; 
        font-family: var(--dnav-font); 
        direction: rtl; 
    }

    .tg-dnav-gradient-blur { 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        right: 0; 
        width: 100%; 
        height: var(--dnav-grad-height); 
        z-index: -1; 
        backdrop-filter: blur(var(--dnav-grad-blur)); 
        -webkit-backdrop-filter: blur(var(--dnav-grad-blur)); 
        mask-image: linear-gradient(to top, black 35%, transparent 100%); 
        -webkit-mask-image: linear-gradient(to top, black 35%, transparent 100%); 
    }

    .dnav-bottom-bar { 
        position: absolute; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-around; 
        align-items: center; 
        background-color: rgba(var(--dnav-bg-rgb), var(--dnav-bg-opacity)); 
        bottom: var(--dnav-margin-bottom); 
        left: var(--dnav-margin-side); 
        right: var(--dnav-margin-side); 
        border-radius: var(--dnav-border-radius); 
        pointer-events: auto; 
        box-shadow: 0 -2px 15px rgba(0,0,0,0.06); 
        padding: 10px 0 8px 0; 
        backdrop-filter: blur(var(--dnav-blur)); 
        -webkit-backdrop-filter: blur(var(--dnav-blur)); 
        border: 1px solid rgba(0, 0, 0, 0.05); 
    }
    
    .dnav-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        text-decoration: none !important; 
        color: var(--dnav-default-color); 
        flex: 1; 
        -webkit-tap-highlight-color: transparent; 
        transition: color 0.3s ease; 
        position: relative; 
    }
    
    .dnav-item img { 
        width: var(--dnav-icon-size); 
        height: var(--dnav-icon-size); 
        margin-bottom: 4px; 
        opacity: 0.85; 
        transition: all 0.3s ease; 
        object-fit: contain; 
        position: relative; 
        z-index: 1; 
    }
    
    .dnav-item span { 
        font-size: var(--dnav-text-size); 
        font-weight: 500; 
        white-space: nowrap; 
        transition: color 0.3s ease; 
        color: inherit; 
    }
    
    .dnav-item.active { 
        color: var(--dnav-active-color); 
    }
    
    .dnav-item.active img { 
        opacity: 1; 
        filter: none; 
    }

    .dnav-cart-wrapper { 
        position: relative; 
    }
    
    .dnav-cart-badge { 
        position: absolute; 
        top: -5px; 
        right: 50%; 
        margin-right: 5px; 
        z-index: 2; 
        background-color: var(--dnav-cart-bg); 
        color: var(--dnav-cart-text); 
        border-radius: 50px; 
        min-width: 18px; 
        height: 18px; 
        padding: 0 4px; 
        font-size: 10px; 
        font-weight: bold; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
        opacity: 0; 
        visibility: hidden; 
        transform: scale(0.5); 
        transition: all 0.2s ease; 
        box-sizing: border-box; 
    }
    
    .dnav-cart-badge.visible { 
        opacity: 1; 
        visibility: visible; 
        transform: scale(1); 
    }
}