.bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    /* مورد #12 fix-bug.md — روی iPhone‌های دارای نوار خانه (home indicator)، ناحیه‌ی امنِ پایین
       باید به ارتفاع نوار اضافه شود، وگرنه آیتم‌های نویگیشن زیر آن نوار سیستمی جمع می‌شوند و
       هم‌زمان محتوای صفحات (که فقط ارتفاع ثابت نوار را کم می‌کنند) زیرِ نوار واقعی مخفی می‌ماند.
       env(...) روی مرورگرهای بدون safe-area مقدار صفر برمی‌گرداند، پس بی‌اثر است. */
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    z-index: 1200;
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--color-text-faint);
    /* بزرگ‌تر و خواناتر — درخواست کاربر (قبلاً ۰.۶۵rem بود). */
    font-size: 0.74rem;
    font-weight: 500;
  }

  /* مورد ۳ Hot-Fix.md — آیکون دکمه‌ی مرکزی «ثبت آگهی» (bottom-nav-main) بزرگ‌تر از بقیه است
     (۱.۹rem در برابر ۱.۱۵rem)؛ بدون یک باکس ارتفاع‌ثابت مشترک، همین اختلاف باعث می‌شد برچسب
     زیرِ آن پایین‌تر/بالاتر از برچسب بقیه‌ی آیتم‌ها بنشیند. */
  .bottom-nav-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: 1.15rem;
  }

  .bottom-nav-item.active {
    color: var(--color-primary);
  }

  /* دکمه‌ی مرکزی «ثبت آگهی» فقط وقتی واقعاً در آن صفحه‌ایم رنگی می‌شود، نه همیشه (مورد #9 BigTasks). */
  .bottom-nav-item.bottom-nav-main i {
    font-size: 1.9rem;
  }

  .bottom-nav-item.bottom-nav-main.active i {
    color: var(--color-primary);
  }

  /* خانه/ثبت‌آگهی در باندل Font Awesome Free نسخه‌ی خالی(regular) ندارند (فقط solid) — به‌جای
     آیکون گمشده، با ترفند stroke-only همان گلیف solid را در حالت غیرفعال «توخالی» نشان می‌دهیم؛
     در Chromium/Safari با کیفیت کامل، در مرورگرهای بدون پشتیبانی fallback به رنگ کم‌رنگِ توپر
     قبلی (که خودش هم قابل قبول است، نه اسکرین خالی). */
  .bottom-nav-item[data-nav-key='home']:not(.active) i,
  .bottom-nav-item[data-nav-key='add']:not(.active) i {
    color: var(--color-text-faint);
  }

  @supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black) {
    .bottom-nav-item[data-nav-key='home']:not(.active) i,
    .bottom-nav-item[data-nav-key='add']:not(.active) i {
      color: transparent;
      -webkit-text-stroke: 1.4px var(--color-text-faint);
      text-stroke: 1.4px var(--color-text-faint);
    }
  }
}