/* ===== Mobile App Bottom Bar (fixed, centered, RTL-safe) ===== */

/* فضای کافی برای نوار پایین */
.has-mobile-nav .wrap { padding-block-end: 110px; }

/* خود نوار: کارت ثابت و همیشه وسط، مستقل از RTL/LTR */
.app-nav{
  position: fixed;
  inset-block-end: 12px;        /* bottom: 12px */
  left: 0;                      /* مرکز با Auto margins */
  right: 0;
  margin-inline: auto;          /* ← مرکز افقی بدون transform */
  width: min(1000px, calc(100% - 24px));
  z-index: 1000;

  display: flex; align-items: center; justify-content: center;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 12px 14px;
}

/* لیست آیکون‌ها و FAB وسط */
.app-nav__list{
  list-style: none; margin: 0; padding: 0 16px;
  display: grid; align-items: end;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;  /* ستون وسط = FAB */
  gap: 8px;
  width: 100%;
  max-width: 1000px;
}

/* جهت را برای Grid خنثی کن تا RTL چینش را برعکس نکند */
[dir="rtl"] .app-nav__list{ direction: initial; }

/* آیتم‌ها */
.app-nav__item{ display:flex; justify-content:center; align-items:center; }

/* دکمه‌های کناری */
.app-nav__btn{
  --btn-bg: var(--card);
  --btn-bd: var(--border);
  --btn-tx: var(--text);

  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;

  min-width: 64px;
  padding: 10px 12px;

  border-radius: 12px;
  color: var(--btn-tx);

  text-decoration: none;
  font-size: 11px;
  line-height: 1;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.app-nav__btn .icon{ width: 20px; height: 20px; display:flex; align-items:center; justify-content:center; }
.app-nav__btn .icon svg{ width: 20px; height: 20px; }

.app-nav__btn:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--card) 96%, transparent);
}
.app-nav__btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
.app-nav__btn.is-active {
    border-color: 
 color-mix(in oklab, #0c88a6 55%, var(--border));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--accent);
}

/* دکمه وسط (FAB) */
.app-nav__item--center{ position: relative; }
.app-nav__fab{
  --fab-size: 64px;

  position: relative;
  display:flex; align-items:center; justify-content:center;

  width: var(--fab-size); height: var(--fab-size);
  border-radius: 999px;
  text-decoration: none;

  background: radial-gradient(120% 120% at 30% 20%,
              color-mix(in oklab, var(--accent) 65%, transparent), var(--accent));
  color: #fff;

  border: 3px solid color-mix(in oklab, var(--card) 90%, transparent);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent),
              0 2px 10px rgba(0,0,0,.25);

  transform: translateY(-22%);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.app-nav__fab svg{ width: 28px; height: 28px; }
.app-nav__fab:hover{ transform: translateY(-28%); }
.app-nav__fab:focus-visible{ outline: 4px solid #ffffff90; outline-offset: 2px; }
.app-nav__fab.is-active{
  box-shadow: 0 18px 36px color-mix(in oklab, var(--accent) 36%, transparent),
              0 4px 16px rgba(0,0,0,.3);
}

/* لیبل زیر آیکون‌ها */
.app-nav__btn .txt{
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--text) 86%, transparent);
}

/* موبایل‌های باریک */
@media (max-width: 420px){
  .app-nav{ padding: 10px 12px; border-radius: 14px; }
  .app-nav__btn{ min-width: 56px; padding: 8px 8px; }
  .app-nav__btn .icon svg{ width: 18px; height: 18px; }
  .app-nav__fab{ --fab-size: 58px; }
}

/* احترام به کاهش موشن */
@media (prefers-reduced-motion: reduce){
  .app-nav, .app-nav__btn, .app-nav__fab{ transition: none !important; }
}

/* Light */
body.light-theme .app-nav{
  background: var(--card);
  border: 1px solid var(--border);
}
body.light-theme .app-nav__btn .txt{
  color: color-mix(in oklab, var(--text) 70%, transparent);
}