/* FILE: appstore-mobile.css — AiQio
   لایه‌ی اصلاحی: تم شبیه App Store (تخت، کارت سفید/خاکستری سیستمی) + رفع مشکلات موبایل
   این فایل از طریق fonts/stylesheet.css (@import) بارگذاری می‌شود و روی style.css غلبه می‌کند. */

/* ---------- ۱. توکن‌های تم App Store (جایگزین لایه‌ی «شیشه‌ای») ---------- */
html[data-theme="light"] {
  --bg-base: #f2f2f7;
  --bg-card: #ffffff;
  --bg-raised: #ffffff;
  --bg-input: rgba(118, 118, 128, 0.12);
  --bg-elevated: #ffffff;
  --bg-glass: rgba(249, 249, 249, 0.86);
  --glass-btn: rgba(118, 118, 128, 0.12);
  --glass-blur: 24px;
  --glass-sheen: linear-gradient(transparent, transparent);
  --rim: rgba(60, 60, 67, 0.12);
  --border: rgba(60, 60, 67, 0.18);
  --border-subtle: rgba(60, 60, 67, 0.08);
  --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-glass-hover: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] {
  --bg-base: #000000;
  --bg-card: #1c1c1e;
  --bg-raised: #2c2c2e;
  --bg-input: rgba(118, 118, 128, 0.24);
  --bg-elevated: #2c2c2e;
  --bg-glass: rgba(29, 29, 31, 0.82);
  --glass-btn: rgba(118, 118, 128, 0.24);
  --glass-blur: 24px;
  --glass-sheen: linear-gradient(transparent, transparent);
  --rim: rgba(84, 84, 88, 0.45);
  --border: rgba(84, 84, 88, 0.6);
  --border-subtle: rgba(84, 84, 88, 0.3);
  --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-glass-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* پس‌زمینه‌ی تخت به‌جای گرادیان‌های رنگی */
html[data-theme="light"] body[data-page],
html[data-theme="dark"] body[data-page] {
  background: var(--bg-base);
  background-attachment: scroll;
}

/* کارت‌ها: تخت، بدون blur */
html body .product-card,
html body .feature-card,
html body .panel,
html body .stat-card,
html body .dash-nav,
html body .dash-welcome,
html body .slide,
html body .skeleton-card,
html body .cart-list > li,
html body .filters {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--r-xl);
}

/* ---------- ۲. رفع سرریز و نشان‌های مخفی ---------- */
html, body[data-page] { max-width: 100%; overflow-x: clip; }
html body .badge-count[hidden] { display: none !important; }

/* هدر: خط جداکننده‌ی باریک مثل iOS */
html body .site-header {
  box-shadow: none;
  border-bottom: 0.5px solid var(--rim);
}

/* ---------- ۳. موبایل و تبلت (کمتر از ۹۰۰px) ---------- */
@media (max-width: 899px) {
  /* لینک‌های متنی هدر در موبایل مخفی‌اند؛ پیمایش با تب‌بار پایین است */
  html body .site-header .nav-links { display: none; }

  html body .site-header .container.nav {
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    padding-inline: 16px;
  }
  html body .site-header .logo {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }
  html body .site-header .nav-spacer { flex: 1 1 auto; }
  html body .site-header .nav-actions {
    flex: 0 0 auto;
    gap: 2px;
    margin-inline-start: 0;
  }
  html body .site-header .nav-actions .icon-btn { width: 40px; height: 40px; }
  /* ورود/ثبت‌نام از تب «پروفایل» در تب‌بار در دسترس است */
  html body .site-header .nav-actions .nav-login,
  html body .site-header .nav-actions .nav-logout { display: none; }

  /* تب‌بار پایین به سبک App Store */
  html body .bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    height: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px env(safe-area-inset-bottom, 0px);
    background: var(--bg-glass);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 0.5px solid var(--rim);
    box-shadow: none;
  }
  html body .bottom-nav a {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 0 0;
    gap: 2px;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
  }
  html body .bottom-nav a svg { width: 26px; height: 26px; }
  html body .bottom-nav a[aria-current="page"] { color: var(--accent); }
  html body .bottom-nav a .badge-count {
    position: absolute;
    top: 0;
    inset-inline-start: calc(50% + 6px);
  }

  /* محتوا نباید زیر تب‌بار برود */
  html body[data-page] {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* دکمه‌های هیرو: تمام‌عرض روی صفحه‌های باریک */
  html body .hero-cta { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

@media (max-width: 380px) {
  html body .site-header .container.nav { padding-inline: 12px; }
  html body .site-header .nav-actions .icon-btn { width: 36px; height: 36px; }
}