/* Define Vazir font */
@font-face {
    font-family: 'Vazir';
    src: url('/static/fonts/Vazir-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base styles */
.nav-bar {
    background: linear-gradient(135deg, #faf9ff 0%, #e6e1ff 100%); /* گرادیانت نرم برای ظاهر شیک */
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(106, 13, 173, 0.15); /* سایه نرم‌تر */
    direction: rtl;
    /*position: sticky;*/
    /*top: 0;*/
    /*z-index: 1000;*/
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    overflow-x: auto; /* اسکرول افقی */
    white-space: nowrap; /* جلوگیری از شکستن خط */
    -webkit-overflow-scrolling: touch; /* اسکرول روان در موبایل */
}

.nav-item {
    margin: 0 10px; /* فاصله یکنواخت‌تر */
    flex: 0 0 auto; /* جلوگیری از کوچک شدن آیتم‌ها */
}

.nav-link {
    display: block;
    padding: 12px 18px;
    font-size: 15px;
    color: #6a0dad;
    text-decoration: none;
    border-radius: 10px; /* گوشه‌های گردتر */
    transition: all 0.3s ease;
    font-weight: 500; /* وزن فونت برای خوانایی بهتر */
    position: relative; /* برای افکت‌های اضافی */
}

.nav-link:hover {
    background-color: #e6e1ff; /* رنگ پس‌زمینه روشن‌تر */
    color: #8b5cf6;
    transform: translateY(-2px); /* افکت بالا آمدن */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* سایه هنگام هاور */
}

/* افکت فعال برای لینک فعلی */
.nav-link.active {
    background-color: #8b5cf6;
    color: #fff;
}

/* مخفی کردن اسکرول‌بار اما حفظ عملکرد */
.nav-list::-webkit-scrollbar {
    display: none;
}

.nav-list {
    -ms-overflow-style: none; /* IE و Edge */
    scrollbar-width: none; /* Firefox */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nav-bar {
        padding: 12px 15px;
    }

    .nav-list {
        padding-bottom: 12px; /* فضای بیشتر برای اسکرول لمسی */
    }

    .nav-link {
        font-size: 14px;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .nav-bar {
        padding: 10px 12px;
    }

    .nav-link {
        font-size: 13px;
        padding: 8px 12px;
    }
}