/* ==========================================
   File: assets/css/modules/navbar.css
   ========================================== */

#bottom-nav {
    background: rgba(252, 252, 252, 0.75) !important;
    backdrop-filter: blur(24px) saturate(150%); 
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.02);
}

.nav-item {
    flex: 1; 
    height: 65px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    position: relative;
    color: #94a3b8; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* 
   هاله طلایی (کادر شیشه‌ای): ابعاد بزرگتر و بازتر شد
*/
.nav-item::before {
    content: '';
    position: absolute;
    width: 68px;  /* عرض بیشتر شد تا از کناره‌ها فاصله بگیرد */
    height: 62px; /* ارتفاع بیشتر شد تا متن کاملاً داخل کادر قرار بگیرد */
    top: 50%;     /* در مرکز قرار گرفت تا هم آیکون و هم متن را پوشش دهد */
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.02) 100%);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 20px; /* انحنای گوشه‌ها متناسب با ابعاد جدید نرم‌تر شد */
    opacity: 0;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item svg { 
    width: 24px; 
    height: 24px; 
    stroke: currentColor; 
    fill: none; 
    stroke-width: 1.8; 
    margin-bottom: 2px; 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.nav-item span { 
    font-size: 10px; 
    font-weight: 500; 
    letter-spacing: -0.2px; 
    transition: all 0.4s ease;
}

/* ==========================================
   حالت فعال (Active State)
   ========================================== */

.nav-item.active { 
    color: #b45309; 
}

.nav-item.active::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(234, 179, 8, 0.05); 
}

.nav-item.active svg { 
    stroke: #eab308 !important; 
    stroke-width: 2.2; 
    transform: translateY(-2px); /* حرکت رو به بالای آیکون کمی کمتر شد تا از کادر بیرون نزند */
    filter: drop-shadow(0 4px 6px rgba(234, 179, 8, 0.25)); 
}

.nav-item.active span {
    transform: translateY(2px); /* حرکت رو به پایین متن کمی کمتر شد */
    font-weight: 700;
}

/* ==========================================
   بج سبد خرید (Cart Badge)
   ========================================== */
.nav-badge {
    position: absolute; 
    top: 4px; 
    right: 20%;
    background: #ef4444; 
    color: #ffffff; 
    border: 2px solid #fcfcfc;
    width: 18px; 
    height: 18px; 
    border-radius: 50%;
    font-size: 10px; 
    font-weight: 900;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transform: scale(0); 
    transition: 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25); 
    z-index: 2;
}

.nav-item.active .nav-badge {
    transform: scale(1) translateY(-2px);
}

.nav-badge.show { 
    transform: scale(1); 
}
.nav-item.active .nav-badge.show {
    transform: scale(1) translateY(-2px);
}