/* =========================================================
   Navexa Modern Navbar
   مسیر: static/css/navbar.css
   ========================================================= */

:root{
  --nx-nav-height: 52px;
  --nx-live-nav-height: 64px;
  --nx-nav-bg: rgba(255, 255, 255, .82);
  --nx-nav-border: rgba(203, 213, 225, .78);
  --nx-nav-text: #0f172a;
  --nx-nav-muted: #64748b;
  --nx-nav-primary: #2563eb;
  --nx-nav-primary-2: #3b82f6;
  --nx-nav-success: #16a34a;
  --nx-nav-soft: #f8fafc;
  --nx-nav-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  --nx-nav-ring: 0 0 0 .22rem rgba(37, 99, 235, .16);
}

.nx-navbar{
  min-height: var(--nx-nav-height);
  padding: .25rem 1rem !important;
  padding-right: 72px !important; /* فضای سایدبار */
  border-bottom: 1px solid var(--nx-nav-border);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.84)),
    var(--nx-nav-bg) !important;
  box-shadow: var(--nx-nav-shadow);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  font-size: .84rem;
  z-index: 1030;
}

.nx-navbar-shell{
  min-height: 36px;
  gap: .75rem;
}

.nx-navbar-right,
.nx-navbar-actions{
  display: flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
}

.nx-navbar-right{ flex: 1 1 auto; }
.nx-navbar-actions{ flex: 0 0 auto; }

/* برند */
.nx-brand{
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin: 0 !important;
  padding: .18rem .22rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--nx-nav-text);
  transition: transform .18s ease, background .18s ease;
}
.nx-brand:hover{ transform: translateY(-1px); background: rgba(37,99,235,.06); }

.nx-brand-mark{
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,197,94,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(37,99,235,.12);
}
.brand-logo{ border-radius: 10px; }
.brand_css,
.nx-brand-text{
  color: var(--nx-nav-primary) !important;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: .2px;
}

/* ساعت */
.nx-datetime{
  align-items: center;
  height: 32px;
  padding: 0 .72rem;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 999px;
  color: #475569;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  direction: ltr;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.nx-datetime::before{
  content: "\F293";
  font-family: "bootstrap-icons";
  margin-right: .38rem;
  color: var(--nx-nav-primary);
}

/* ================== جستجوی نماد ================== */
.nav-search-wrapper{
  position: relative;
  width: auto;
  max-width: 360px;
  min-width: 42px;
}

.nav-search-box{
  position: relative;
  display: flex;
  align-items: center;
  gap: .2rem;
  width: 42px;
  min-height: 34px;
  padding: .18rem;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, .82);
  background:
    linear-gradient(135deg, rgba(239,246,255,.95), rgba(255,255,255,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 20px rgba(15,23,42,.06);
  direction: rtl;
  transition: width .24s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.nav-search-box.open{
  width: min(330px, 42vw);
  border-color: rgba(37,99,235,.34);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 34px rgba(37,99,235,.13), inset 0 1px 0 rgba(255,255,255,.95);
}

.nav-search-icon,
.nav-clear-btn{
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
.nav-search-icon{
  color: #ffffff;
  background: linear-gradient(135deg, var(--nx-nav-primary), var(--nx-nav-primary-2));
  box-shadow: 0 8px 16px rgba(37,99,235,.24);
}
.nav-search-icon:hover{ transform: translateY(-1px) scale(1.02); }
.nav-search-icon i.fa-search{ color: inherit; }

.nav-clear-btn{
  color: #94a3b8;
  background: rgba(148,163,184,.10);
  opacity: 0;
  pointer-events: none;
}
.nav-clear-btn.visible{
  opacity: 1;
  pointer-events: auto;
}
.nav-clear-btn:hover{ color: #ef4444; background: rgba(239,68,68,.10); }
.nav-clear-btn i.fa-times{ color: inherit; }

.nav-search-input{
  border: 0;
  outline: 0;
  min-width: 0;
  flex: 1 1 auto;
  height: 28px;
  padding: 0 .4rem;
  background: transparent;
  color: #0f172a;
  direction: rtl;
  text-align: right;
  font-size: .78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease .08s;
}
.nav-search-input::placeholder{ color: #94a3b8; font-weight: 600; }
.nav-search-box.open .nav-search-input{
  opacity: 1;
  pointer-events: auto;
}
.nav-search-box:focus-within{ box-shadow: var(--nx-nav-ring), 0 14px 34px rgba(37,99,235,.13); }

.nav-suggest-box{
  display: none;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + .48rem);
  min-width: 280px;
  max-height: 310px;
  overflow-y: auto;
  z-index: 1080;
  padding: .42rem;
  border: 1px solid rgba(226,232,240,.96);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 50px rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
}
#nav-suggest-box::-webkit-scrollbar{ width: 6px; }
#nav-suggest-box::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 999px; }
#nav-suggest-box::-webkit-scrollbar-track{ background: transparent; }
#nav-suggest-box::-webkit-scrollbar-button{ display: none; height: 0; }

.nav-suggest-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .62rem .7rem;
  border-radius: 13px;
  color: #0f172a;
  cursor: pointer;
  direction: rtl;
  transition: background .14s ease, transform .14s ease;
}
.nav-suggest-item:hover,
.nav-suggest-item:focus{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(34,197,94,.07));
  transform: translateX(-2px);
}
.nav-suggest-symbol{
  min-width: 52px;
  padding: .18rem .42rem;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
  text-align: center;
  font-size: .78rem;
}
.nav-suggest-name{
  color: #64748b;
  font-size: .74rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-suggest-item .bi{ color: #94a3b8; font-size: 1rem; }

/* CTA */
.nx-subscribe-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 34px;
  padding: .32rem .78rem;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.30);
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff !important;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(22,163,74,.20);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.nx-subscribe-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(22,163,74,.24);
  filter: saturate(1.04);
}

.nx-subscription-alert{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 32px;
  padding: 0 .68rem;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.35);
  background: rgba(255,251,235,.95);
  color: #92400e;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

/* منوی کاربر */
.nx-user-nav{ position: relative; }
.nx-user-trigger{
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .18rem .24rem .18rem .55rem;
  border: 1px solid rgba(203,213,225,.80);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--nx-nav-text);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.055);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.nx-user-trigger:hover,
.nx-user-trigger[aria-expanded="true"]{
  color: var(--nx-nav-text);
  border-color: rgba(37,99,235,.30);
  background: rgba(255,255,255,.96);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
}
.nx-user-avatar,
.nx-menu-avatar,
.nx-guest-icon{
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  font-weight: 900;
  box-shadow: 0 9px 18px rgba(37,99,235,.22);
}
.nx-user-meta{
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
}
.nx-user-name{
  max-width: 128px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0f172a;
  font-size: .76rem;
  font-weight: 900;
}
.nx-plan-pill{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .1rem;
  padding: .08rem .42rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 900;
}
.nx-plan-pill.is-pro{ background: rgba(22,163,74,.12); color: #15803d; }
.nx-plan-pill.is-free{ background: rgba(100,116,139,.12); color: #475569; }
.nx-plan-pill.is-guest{ background: rgba(37,99,235,.10); color: #1d4ed8; }
.nx-user-chevron{ color: #94a3b8; font-size: .78rem; transition: transform .16s ease; }
.nx-user-trigger[aria-expanded="true"] .nx-user-chevron{ transform: rotate(180deg); }

.nx-user-menu{
  min-width: 288px;
  margin-top: .65rem !important;
  padding: .55rem 0;
  border: 1px solid rgba(226,232,240,.96);
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 26px 60px rgba(15,23,42,.16);
  overflow: hidden;
  backdrop-filter: blur(14px);
  text-align: right;
}
.nx-user-menu::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #2563eb, #4f46e5);
}
.nx-user-menu-head,
.nx-guest-head{
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .9rem 1rem .72rem;
}
.nx-menu-name{ color: #0f172a; font-weight: 900; font-size: .88rem; }
.nx-menu-subtitle{ margin-top: .12rem; color: #64748b; font-size: .72rem; }
.nx-plan-status{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .58rem .7rem;
  border-radius: 14px;
  font-size: .76rem;
  font-weight: 800;
}
.nx-plan-status.is-pro{ background: rgba(22,163,74,.10); color: #15803d; }
.nx-plan-status.is-free{ background: rgba(100,116,139,.10); color: #475569; }

.nx-user-menu .dropdown-divider{
  margin: .45rem 1rem;
  border-color: rgba(226,232,240,.92);
}
.nx-menu-item{
  display: flex !important;
  align-items: center;
  gap: .62rem;
  padding: .72rem 1rem !important;
  color: #334155 !important;
  font-size: .8rem;
  font-weight: 800;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.nx-menu-item i{
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #f1f5f9;
  color: #2563eb;
}
.nx-menu-item:hover{
  color: #1d4ed8 !important;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(34,197,94,.05)) !important;
  transform: translateX(-2px);
}

.nx-logout-btn{
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid rgba(239,68,68,.20);
  border-radius: 14px;
  background: rgba(254,242,242,.92);
  color: #dc2626;
  font-weight: 900;
  font-size: .8rem;
  transition: transform .15s ease, background .15s ease;
}
.nx-logout-btn:hover{ transform: translateY(-1px); background: #fee2e2; }

.nx-login-primary,
.nx-login-secondary{
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
}
.nx-login-primary{
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.nx-login-secondary{
  color: #1d4ed8 !important;
  background: #eff6ff;
  border: 1px solid rgba(37,99,235,.18);
}

@media (max-width: 1100px){
  .nav-search-box.open{ width: min(280px, 36vw); }
  .nx-user-name{ max-width: 95px; }
}

@media (max-width: 768px){
  .nx-navbar{
    padding-right: 64px !important;
    padding-left: .65rem !important;
  }
  .nx-navbar-shell{
    gap: .45rem;
    flex-wrap: nowrap;
  }
  .nx-navbar-right{ gap: .42rem; }
  .nx-brand-text{ font-size: 1rem; }
  .nx-brand-mark{ width: 32px; height: 32px; }
  .nav-search-wrapper{ max-width: none; }
  .nav-search-box.open{
    position: fixed;
    top: 58px;
    left: .75rem;
    right: .75rem;
    width: auto;
    z-index: 1090;
    border-radius: 18px;
    padding: .35rem;
  }
  .nav-suggest-box{
    position: fixed;
    top: 104px;
    left: .75rem;
    right: .75rem;
    min-width: 0;
    width: auto;
  }
  .nx-subscribe-btn{ min-height: 36px; padding-inline: .65rem; }
  .nx-user-trigger{ padding: .16rem; }
  .nx-user-chevron{ display: none; }
  .nx-user-menu{ min-width: min(292px, calc(100vw - 1.5rem)); }
}

@media (max-width: 480px){
  .nx-navbar{ padding-right: 58px !important; }
  .nx-brand-text{ display: none; }
  .nx-navbar-actions{ gap: .35rem; }
  .nx-subscribe-btn{ width: 38px; padding: 0; }
  .nx-subscribe-btn span{ display: none !important; }
}


/* فاصله‌گذاری خودکار محتوا از ناوبر fixed-top */
main.main-content{
  margin-top: 0 !important;
  padding-top: calc(var(--nx-live-nav-height) + 12px) !important;
}

@media (max-width: 768px){
  main.main-content{
    padding-top: calc(var(--nx-live-nav-height) + 8px) !important;
  }
}