/* DNav Bottom Bar Styles */

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

@media (min-width: 1025px) {
    .dnav-wrapper-container,
    
    .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: 1000002 !important; 
        filter: none !important;
        -webkit-filter: none !important;
        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; 
        cursor: pointer; /* برای بهبود لمسی */
        -webkit-user-select: none;
        user-select: none;
    }
    
    .dnav-icon-wrap {
        width: var(--dnav-icon-size);
        height: var(--dnav-icon-size);
        margin-bottom: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        position: relative;
        line-height: 0;
    }

    .dnav-item img {
        width: 100%;
        height: var(--dnav-icon-size);
        margin-bottom: 0;
        opacity: 0.85;
        transition: opacity 0.2s ease;
        object-fit: contain;
        position: relative;
        z-index: 1;
        pointer-events: none;
        display: block;
    }

    .dnav-icon-wrap.has-active-icon .dnav-icon-active {
        display: none;
    }

    .dnav-item.active .dnav-icon-wrap.has-active-icon .dnav-icon-default {
        display: none;
    }

    .dnav-item.active .dnav-icon-wrap.has-active-icon .dnav-icon-active {
        display: block;
        opacity: 1;
    }

    .dnav-item.dnav-contact-popup-btn.active .dnav-icon-wrap.has-active-icon .dnav-icon-active {
        display: block;
        opacity: 1;
    }

    .dnav-item:not(.active) .dnav-icon-default {
        display: block;
    }

    .dnav-item.active .dnav-cart-badge {
        color: var(--dnav-cart-text) !important;
        background: var(--dnav-cart-bg) !important;
    }

    .dnav-cart-wrapper { 
        position: relative; 
    }
    
    .dnav-item-title {
        font-size: var(--dnav-text-size);
        line-height: 1.25;
        font-family: inherit;
    }

    .dnav-cart-badge { 
        position: absolute; 
        top: -5px; 
        right: 50%; 
        margin-right: 5px; 
        z-index: 2; 
        background-color: var(--dnav-cart-bg) !important; 
        color: var(--dnav-cart-text) !important; 
        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; 
        pointer-events: none;
    }
    
    .dnav-cart-badge.visible { 
        opacity: 1; 
        visibility: visible; 
        transform: scale(1); 
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dnav-item,
    .dnav-item img,
    .dnav-item span,
    .dnav-cart-badge {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}

/* Accessibility: suppress browser/theme focus rings caused by touch while
   preserving a clear, high-contrast indicator for keyboard/switch users. */
.dnav-bottom-bar .dnav-item:focus:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}
.dnav-bottom-bar .dnav-item:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
    border-radius: max(6px, calc(var(--dnav-border-radius) / 2));
}
@media (hover: none) and (pointer: coarse) {
    .dnav-bottom-bar .dnav-item:focus:not(:focus-visible) {
        outline: 0 !important;
        box-shadow: none !important;
    }
}