/* ═══════════════════════════════════════════════════════════
   منوی موبایل — تمیز، بدون overlay
   ═══════════════════════════════════════════════════════════ */

/* حذف هر آیکون اضافی */
.mobile-toggle::before,
.mobile-toggle::after,
#mobile-toggle::before,
#mobile-toggle::after {
  content: none !important;
  display: none !important;
}

/* حذف overlay قبلی */
#mobile-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {

  /* ─── سایدبار ─── */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 82vw !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, #06182e 0%, #0a2e5a 100%) !important;

    /* مخفی به سمت راست — با transform به جای right */
    transform: translateX(100%) !important;
    -webkit-transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease !important;

    /* بدون سایه وقتی بسته است */
    box-shadow: none !important;

    /* اطمینان از اینکه روی همه چیز قرار می‌گیرد */
    will-change: transform !important;
  }

  /* ─── وقتی باز است ─── */
  .sidebar.open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;

    /* ترفند جادویی: box-shadow به عنوان overlay!
       سایه از سمت چپ به اندازه 100vw پخش می‌شود */
    box-shadow:
      -8px 0 30px rgba(0,0,0,0.5),
      -100vw 0 0 100vw rgba(0,0,0,0.55) !important;
  }

  /* ─── دکمه ☰ ─── */
  .mobile-toggle,
  #mobile-toggle {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f0a500, #ffc947) !important;
    border: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    box-shadow: 0 8px 24px rgba(240, 165, 0, 0.45) !important;
    font-family: inherit !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* ساخت آیکون با سه span */
  .mobile-toggle .bars,
  #mobile-toggle .bars {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 22px !important;
    height: 16px !important;
  }

  .mobile-toggle .bars i,
  #mobile-toggle .bars i {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    background: #06182e !important;
    border-radius: 3px !important;
    font-style: normal !important;
  }

  .mobile-toggle:active,
  #mobile-toggle:active {
    transform: scale(0.93) !important;
  }

  /* ─── جلوگیری از اسکرول پشت ─── */
  body.menu-open {
    overflow: hidden !important;
  }
}

/* ─── دسکتاپ: مخفی ─── */
@media (min-width: 901px) {
  .mobile-toggle,
  #mobile-toggle {
    display: none !important;
  }
  .sidebar {
    position: sticky !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    width: 250px !important;
    max-width: none !important;
  }
}

/* ─── Safe Area ─── */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .mobile-toggle,
    #mobile-toggle {
      bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
      left: max(20px, calc(20px + env(safe-area-inset-left))) !important;
    }
  }
}