/* =========================================
   COMPONENT: Navbar
   ========================================= */

/* بالا آوردن لایه کل هدر تا همیشه روی چارت‌ها و اسلایدرها بماند */
#section-navbar,
#comp-navbar {
  position: relative;
  z-index: 99999 !important;
  content-visibility: visible !important;
  contain: none !important;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--layout-px);
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-border-dim);
  transition: all 0.3s ease;
}

.nav-logo { display: flex; align-items: center; gap: 12px; }

.logo-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold));
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 900; font-size: 1.1rem;
}

.logo-text { font-size: 1.2rem; font-weight: 800; color: var(--color-text-primary); }

.nav-links { display: none; list-style: none; gap: 24px; }
.nav-links a { font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); transition: color 0.3s; }
.nav-links a:hover { color: var(--color-gold); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* =========================================
   استایل‌های منوی کشویی چندزبانه (Dropdown)
   ========================================= */
.lang-selector { position: relative; }

.lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid var(--color-border-dim);
  padding: 8px 12px; 
  border-radius: 50px; 
  color: var(--color-text-primary);
  font-weight: 800; 
  font-family: monospace; /* فونت جذاب‌تر برای نمایش حروف انگلیسی مثل EN */
  font-size: 0.9rem; 
  transition: all 0.3s;
  cursor: pointer;
}

.lang-btn:hover { 
  background: rgba(255, 255, 255, 0.1); 
  border-color: var(--color-gold-dim); 
  color: var(--color-gold); 
}

/* باکس مخفی منو (حاوی نام‌های کامل) */
.lang-dropdown {
  position: absolute; 
  top: 130%; 
  right: 0;
  background: rgba(22, 22, 29, 0.95); 
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-dim);
  border-radius: var(--radius-md); 
  padding: 8px; 
  min-width: 140px; /* فضای کافی برای کلماتی مثل English و فارسی */
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  display: flex; 
  flex-direction: column; 
  gap: 4px;
  opacity: 0; 
  visibility: hidden; 
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
}

.lang-dropdown.show { 
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
}

.lang-option {
  padding: 10px 16px; 
  text-align: right; 
  border-radius: var(--radius-sm);
  color: var(--color-text-muted); 
  font-size: 0.9rem; 
  font-weight: 700;
  background: transparent; 
  border: none; 
  cursor: pointer; 
  transition: all 0.2s;
  font-family: 'Vazirmatn', sans-serif; /* اطمینان از نمایش صحیح فونت فارسی در دراپ‌داون */
}

/* مدیریت جهت متن در منو کشویی بر اساس زبان کل سایت */
body[dir="ltr"] .lang-option { text-align: left; }

.lang-option:hover { 
  background: rgba(255, 255, 255, 0.05); 
  color: var(--color-text-primary); 
}

.lang-option.active { 
  color: var(--color-gold); 
  background: var(--color-gold-glow-sm); 
}

/* مخفی کردن دکمه‌های ورود و ثبت‌نام در موبایل برای جلوگیری از تکرار */
.btn-nav-login,
.btn-nav-reg { 
  display: none; 
}

/* =========================================
   ریسپانسیو دسکتاپ
   ========================================= */
@media (min-width: 960px) {
  .nav-links { display: flex; }
  
  /* نمایش مجدد دکمه‌های ورود و ثبت‌نام فقط در دسکتاپ */
  .btn-nav-login {
    display: flex; align-items: center; gap: 8px;
    color: var(--color-text-primary); font-weight: 700; font-size: 0.9rem;
  }
  .btn-nav-login:hover { color: var(--color-gold); }

  .btn-nav-reg {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold));
    color: #000; padding: 8px 16px; border-radius: 50px;
    font-weight: 700; font-size: 0.9rem; transition: all 0.3s;
  }
  .btn-nav-reg:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(201,168,76,0.3); 
  }
}
/* Exchange Portal Button */
.btn-nav-exchange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.06);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-nav-exchange:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--color-gold);
}
@media (max-width: 768px) {
  .btn-nav-exchange { display: none; }
}