/* ═══════════════════════════════════════════════════════════════════
   MENU.CSS — Mobile Style for All Screens  (2026-10-05)
   همبرگر + پنل کشویی در همه اندازه‌ها
   ═══════════════════════════════════════════════════════════════════ */

/* ─── هدر ─── */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}
body.dark-mode .site-header {
  background: rgba(15,23,42,.94) !important;
  border-bottom-color: rgba(51,65,85,.6) !important;
}
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: 64px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
.site-header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  letter-spacing: -.4px !important;
}
.site-header .logo i {
  font-size: 20px !important;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── همبرگر ─── */
.hamburger {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(37,99,235,.08) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  cursor: pointer !important;
  padding: 0 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all .25s ease !important;
}
.hamburger:hover { background: rgba(37,99,235,.15) !important; }
.hamburger span {
  position: absolute !important;
  right: 11px !important;
  width: 20px !important;
  height: 2px !important;
  background: #2563eb !important;
  border-radius: 2px !important;
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
  display: block !important;
}
.hamburger span:nth-child(1) { top: 14px !important; }
.hamburger span:nth-child(2) { top: 20px !important; width: 14px !important; }
.hamburger span:nth-child(3) { top: 26px !important; }
.hamburger.active span:nth-child(1) { top: 20px !important; transform: rotate(45deg) !important; }
.hamburger.active span:nth-child(2) { opacity: 0 !important; }
.hamburger.active span:nth-child(3) { top: 20px !important; transform: rotate(-45deg) !important; }

/* ─── پنل کشویی (در هر اندازه صفحه) ─── */
.main-nav {
  position: fixed !important;
  top: 64px !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(100vh - 64px) !important;
  max-width: 480px !important;
  background: #f8fafc !important;
  z-index: 998 !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transform: translateX(100%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  display: block !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s, opacity .28s ease !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.main-nav.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s, opacity .28s ease !important;
  box-shadow: -20px 0 60px rgba(15,23,42,.15) !important;
}
body.dark-mode .main-nav { background: #0f172a !important; }

.main-nav > ul {
  display: block !important;
  padding: 16px 14px 28px !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── کارت اکانت ─── */
.nav-account-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  order: -100 !important;
  width: 100% !important;
  list-style: none !important;
}

/* ─── کیف پول — تمام عرض ─── */
.nav-account-row > a.nav-wallet-btn {
  grid-column: 1 / -1 !important;
  display: block !important;
  padding: 18px 20px 16px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg,#10b981 0%,#059669 55%,#047857 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px -10px rgba(16,185,129,.5) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: right !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  transform: none !important;
  min-height: auto !important;
  text-decoration: none !important;
}
.nav-account-row > a.nav-wallet-btn::before {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  right: -30% !important;
  width: 160% !important;
  height: 180% !important;
  background: radial-gradient(circle at 75% 25%,rgba(255,255,255,.22),transparent 45%) !important;
  pointer-events: none !important;
}
.nav-account-row > a.nav-wallet-btn > i { display: none !important; }
.nav-account-row > a.nav-wallet-btn .nwb-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.8) !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  order: 1 !important;
  text-align: right !important;
}
.nav-account-row > a.nav-wallet-btn .nwb-badge {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  letter-spacing: -.5px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  direction: ltr !important;
  position: relative !important;
  z-index: 1 !important;
  order: 0 !important;
}
.nav-account-row > a.nav-wallet-btn .nwb-badge::after {
  content: " تومان" !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: .75 !important;
  margin-right: 4px !important;
  letter-spacing: 0 !important;
}

/* ─── ۳ کارت اکشن ─── */
.nav-account-row > a.btn-nav,
.nav-account-row > a.nav-logout-btn,
.nav-account-row > a.nav-login-btn,
.nav-account-row > a.dark-toggle-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 12px 4px !important;
  min-height: 84px !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(226,232,240,.85) !important;
  box-shadow: 0 2px 6px -3px rgba(15,23,42,.06) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  width: auto !important;
  flex: none !important;
  transform: none !important;
}
.nav-account-row > a.btn-nav > i,
.nav-account-row > a.nav-logout-btn > i,
.nav-account-row > a.nav-login-btn > i,
.nav-account-row > a.dark-toggle-btn > i {
  font-size: 17px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nav-account-row > a.btn-nav > i { background: rgba(37,99,235,.12) !important; color: #2563eb !important; }
.nav-account-row > a.nav-logout-btn > i { background: rgba(239,68,68,.12) !important; color: #dc2626 !important; }
.nav-account-row > a.nav-login-btn > i { background: rgba(37,99,235,.12) !important; color: #2563eb !important; }
.nav-account-row > a.dark-toggle-btn > i { background: rgba(139,92,246,.12) !important; color: #8b5cf6 !important; }
.nav-account-row > a.dark-toggle-btn::after {
  content: "حالت شب" !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.nav-account-row > a.dark-toggle-btn > span,
.nav-account-row > a.dark-toggle-btn > .nwb-label { display: none !important; }

body.dark-mode .nav-account-row > a.btn-nav,
body.dark-mode .nav-account-row > a.nav-logout-btn,
body.dark-mode .nav-account-row > a.nav-login-btn,
body.dark-mode .nav-account-row > a.dark-toggle-btn {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
  color: #e2e8f0 !important;
}
body.dark-mode .nav-account-row > a.dark-toggle-btn::after { color: #e2e8f0 !important; }

/* ─── آیتم‌های منو ─── */
.main-nav > ul > li {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  border: none !important;
  list-style: none !important;
}
.main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn) {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid rgba(226,232,240,.85) !important;
  border-radius: 13px !important;
  box-shadow: 0 1px 4px -2px rgba(15,23,42,.05) !important;
  text-decoration: none !important;
  position: relative !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}
.main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn)::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
body.dark-mode .main-nav > ul > li > a:not(.nav-wallet-btn):not(.btn-nav):not(.nav-logout-btn):not(.nav-login-btn):not(.dark-toggle-btn) {
  background: #1e293b !important;
  border-color: rgba(51,65,85,.7) !important;
  color: #e2e8f0 !important;
}

/* ─── انیمیشن ─── */
.main-nav.open > ul > li {
  animation: mni .3s cubic-bezier(.34,1.2,.64,1) both;
}
.main-nav.open > ul > li:nth-child(1) { animation-delay: .05s; }
.main-nav.open > ul > li:nth-child(2) { animation-delay: .09s; }
.main-nav.open > ul > li:nth-child(3) { animation-delay: .13s; }
.main-nav.open > ul > li:nth-child(4) { animation-delay: .17s; }
.main-nav.open > ul > li:nth-child(5) { animation-delay: .21s; }

@keyframes mni {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── اسکرول‌بار ─── */
.main-nav::-webkit-scrollbar { width: 5px; }
.main-nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 10px; }