/*
==========================================================================
    Bottom Tab Menu Bar Styles (Updated & Robust)
==========================================================================
*/
:root {
    --tab-bar-height: 60px;
    --tab-bar-bg: #ffffff;
    --tab-icon-color: #555555;
    --tab-icon-active-color: #27ae60;
    --tab-bar-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* ডেস্কটপে ট্যাব বার ডিফল্টভাবে লুকানো থাকবে */
.anewbd-bottom-tab-bar-container {
    display: none;
}


/* শুধুমাত্র 768px এর নিচের ডিভাইসের জন্য এই স্টাইল কাজ করবে */
@media (max-width: 768px) {



    /* ট্যাব বার যেন কোনো কন্টেন্ট ঢেকে না দেয় */
    body {
        padding-bottom: var(--tab-bar-height) !important;
        /* প্যাডিং পরিবর্তনের জন্য স্মুথ ট্রানজিশন যুক্ত করা হলো */
        transition: padding-bottom 0.3s ease-in-out; 
    }

    /* নতুন যুক্ত করা কোড: যখন ট্যাব বার হাইড থাকবে, তখন প্যাডিং তুলে নেওয়া হবে */
    body.tab-bar-is-hidden {
        padding-bottom: 0 !important;
    }

    
    /* ট্যাব বারের মূল কন্টেইনার */
    body .anewbd-bottom-tab-bar-container {
        display: flex !important; /* জোর করে দেখানো হচ্ছে */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--tab-bar-height);
        background-color: var(--tab-bar-bg);
        box-shadow: var(--tab-bar-shadow);
        z-index: 10000;
        border-top: 1px solid #e0e0e0;
        transform: translateY(0);
        transition: transform 0.3s ease-in-out;
    }

    /* স্ক্রল করলে ট্যাব বার হাইড করার জন্য ক্লাস */
    body .anewbd-bottom-tab-bar-container.is-hidden {
        transform: translateY(100%);
    }

    .anewbd-bottom-tab-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
    }

    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--tab-icon-color);
        flex-grow: 1;
        position: relative;
        -webkit-tap-highlight-color: transparent; /* ট্যাপ করলে ফ্ল্যাশ বন্ধ করতে */
    }

    .tab-item i {
        font-size: 16px;
        margin-bottom: 3px;
        font-weight: 700;
    }

    .tab-item .tab-label {
        font-size: 11px;
        font-weight: 500;
    }

    .tab-item.active,
    .tab-item:active {
        color: var(--tab-icon-active-color);
    }
    
    .tab-item.cart-item .cart-count {
        position: absolute;
        top: -2px;
        right: calc(50% - 28px);
        background-color: #e74c3c;
        color: #fff;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 11px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--tab-bar-bg);
    }
    
    /* ট্যাব বার যেন কোনো কন্টেন্ট ঢেকে না দেয় */
    body {
        padding-bottom: var(--tab-bar-height) !important;
    }
}