/* تعریف فونت‌ها */
@font-face {
    font-family: 'ANegaarBold';
    src: url('/main/assets/fonts/ANegaarBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ANegaarRegular';
    src: url('/main/assets/fonts/ANegaarRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* متغیرهای CSS برای یکپارچگی */
:root {
    --bg-primary: #1C2526;
    --bg-secondary: #2E3A3B;
    --text-primary: #F5F5F5;
    --text-secondary: #ADB5BD;
    --accent: #B8860B;
    --accent-hover: #DAA520;
    --border-radius: 10px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --transition: all 0.2s ease-in-out;
}

/* انیمیشن روشن و خاموش شدن */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* منوی پایین صفحه (فقط برای موبایل) */
.bottom-nav {
    position: fixed;
    bottom: 12px;
    left: 16px;
    right: 16px;
    background: var(--bg-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-radius: 14px;
    box-shadow: var(--shadow);
    height: 48px;
    z-index: 1000;
    transition: var(--transition);
    font-family: 'ANegaarBold', sans-serif; /* فونت برای آیکن‌ها */
}

.bottom-nav:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
    position: relative; /* برای خط زیر آیتم */
}

.nav-item.home {
    width: 25%; /* 3/12 از عرض */
    background: rgba(184, 134, 11, 0.8); /* افکت شیشه‌ای طلایی */
    color: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    overflow: hidden; /* جلوگیری از بیرون زدن محتوا */
    height: 38px; /* کاهش ارتفاع برای فاصله عمودی */
    margin: 5px 0; /* فاصله از بالا و پایین */
    position: relative; /* برای موقعیت‌دهی کامنت */
}

.nav-item.cart {
    width: 16.67%; /* 2/12 از عرض */
    color: var(--accent);
}

.nav-item.orders {
    width: 16.67%; /* 2/12 از عرض */
    color: var(--accent);
}

.nav-item.profile {
    width: 16.67%; /* 2/12 از عرض */
    color: var(--accent);
}

.nav-item.phone {
    width: 16.67%; /* 2/12 از عرض */
    color: var(--accent);
}

.nav-item.piggy-bank {
    width: 25%; /* 3/12 از عرض */
    color: var(--accent);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px; /* کاهش ارتفاع برای فاصله عمودی */
    margin: 5px 0; /* فاصله از بالا و پایین */
    position: relative; /* برای موقعیت‌دهی کامنت */
}

/* خط زرد زیر آیتم‌های فعال (به جز خانه) */
.nav-item.active:not(.home)::after {
    content: '';
    position: absolute;
    bottom: -4px; /* زیر آیتم */
    left: 50%;
    transform: translateX(-50%);
    width: 20px; /* عرض خط */
    height: 2px; /* ضخامت خط */
    background: var(--accent); /* رنگ زرد */
}

/* هاور روی آیتم‌ها */
.nav-item:hover {
    transform: scale(1.1);
    color: var(--accent-hover);
}

.nav-item i {
    font-size: 1.44rem; /* 20 درصد کوچکتر از آیکن خانه (1.8rem) */
    font-weight: bold;
}

/* آیکن خانه بزرگ‌تر و دارک */
.nav-item.home i {
    font-size: 1.8rem;
    color: var(--bg-primary);
}

.nav-item.piggy-bank i {
    font-size: 1.44rem; /* هم‌اندازه بقیه آیکن‌ها */
}

.nav-item.home .nav-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bg-primary);
    font-family: 'ANegaarRegular', sans-serif; /* فونت برای متن خانه */
}

/* کامنت قیمت طلا */
.gold-price-comment {
    position: absolute;
    top: -18px; /* بالای آیکن خانه */
    left: 50%; /* وسط باکس خانه */
    transform: translateX(-50%); /* دقیقاً وسط */
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 0.72rem; /* 10 درصد بزرگ‌تر از 0.65rem */
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 999;
    font-family: 'ANegaarRegular', sans-serif; /* فونت برای قیمت طلا */
}

.gold-price-comment:hover {
    color: var(--accent-hover);
}

.gold-price-comment .online-indicator {
    font-size: 0.5rem;
    color: var(--accent);
    animation: pulse 1.5s infinite ease-in-out;
}

/* کامنت قلک طلا */
.piggy-bank-comment {
    position: absolute;
    top: -18px; /* بالای آیکن قلک طلا */
    left: 16px; /* هم‌تراز با لبه چپ ناو بار */
    background: var(--bg-primary);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 999;
    font-family: 'ANegaarRegular', sans-serif; /* فونت برای قلک طلا */
}

.piggy-bank-comment:hover {
    color: var(--accent-hover);
}

.piggy-bank-comment .online-indicator {
    font-size: 0.5rem;
    color: var(--accent);
    animation: pulse 1.5s infinite ease-in-out;
}

/* مخفی کردن منو در دسکتاپ */
@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
    .gold-price-comment,
    .piggy-bank-comment {
        display: none;
    }
}