/* 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) {
    /* CLS fix: reserve exactly the bar's own height instead of a hardcoded 85px.
       The bar = icon + label + vertical padding, so the spacer tracks the same
       custom properties. When the admin changes icon/text size the reserve follows. */
    .dnav-spacer {
        height: calc(var(--dnav-icon-size, 24px) + var(--dnav-text-size, 11px) + 26px + var(--dnav-margin-bottom, 15px));
        min-height: calc(60px + var(--dnav-margin-bottom, 15px));
        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;
    }
}