/* =======================================================================
   mobile-app.css — تجربه وب‌اپلیکیشن برای موبایل و تبلت
   این فایل بعد از style.css لود می‌شود و فقط روی صفحات کوچک اثر دارد.
   دسکتاپ کاملاً دست‌نخورده باقی می‌ماند.
   ======================================================================= */

/* ---------- متغیرهای مشترک ---------- */
:root{
  --app-cyan:#22d3ee;
  --app-blue:#3b82f6;
  --app-blue2:#6366f1;
  --app-violet:#a855f7;
  --app-nav-h: 64px;
}

/* =======================================================================
   تبلت (ایپد) — 761px تا 1024px
   مشکل اصلی: تک‌ستون شدن hero ولی موندن nav دسکتاپ
   ======================================================================= */
@media (min-width: 761px) and (max-width: 1024px){

  /* فضای پایین برای bottom nav */
  body{ padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)); }
  .footer{ padding-bottom: calc(var(--app-nav-h) + 20px) !important; }

  .container{ max-width: 720px; padding-inline: 22px; }

  /* hero دو ستونه بمونه ولی متعادل‌تر */
  .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .hero__content{ order: -1; }
  .hero__visual{ order: 1 !important; }

  /* glass card رو جمع‌وجور کن */
  .glass{ max-width: 560px; margin: 0 auto; width: 100%; }

  /* لوگوی غول‌پیکر رو کنترل کن */
  .hero__logo{
    width: 100% !important;
    height: 150px !important;
    object-fit: cover;
    object-position: center 32%;
  }

  /* تیتر بزرگ متعادل */
  .hero__title{ font-size: clamp(2rem, 5vw, 2.8rem) !important; }

  /* گریدها */
  .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid--6.grid--games{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

  /* nav دسکتاپ رو نگه دار ولی فشرده‌تر */
  .nav{ gap: 18px; }
}

/* =======================================================================
   موبایل — تا 760px — تجربه وب‌اپ کامل
   ======================================================================= */
@media (max-width: 760px){

  /* فضای پایین برای bottom nav */
  body{ padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)); }

  /* ---------- هدر چسبان شیشه‌ای ---------- */
  .header{
    position: sticky; top: 0; z-index: 900;
    background: rgba(7,11,18,.82) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .header__inner{ padding-block: 12px; }

  /* منوی همبرگری قدیمی رو حذف کن — حالا bottom nav داریم */
  .nav-toggle{ display: none !important; }
  .mobile-nav{ display: none !important; }

  /* ---------- topbar فشرده ---------- */
  .topbar__inner{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px;
  }
  .topbar__text{ font-size: .72rem; line-height: 1.5; }
  .topbar__cta{ flex-shrink: 0; padding: 7px 14px !important; font-size: .8rem !important; }

  /* ---------- Hero ---------- */
  .hero{ padding-top: 18px !important; }
  .hero__grid{ gap: 22px; }
  .hero__content{ order: -1; }
  .hero__visual{ order: 1; }

  .hero__title{
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
    line-height: 1.35 !important;
  }
  .hero__desc{ font-size: .95rem !important; }

  /* دکمه‌های hero تمام‌عرض و چسبیده */
  .hero__actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .hero__actions .btn{ width: 100%; padding: 13px !important; }

  /* glass card موبایل */
  .glass{
    border-radius: 20px !important;
    padding: 16px !important;
  }
  .hero__logo{
    width: 100% !important;
    height: 130px !important;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 14px !important;
  }

  /* prompt box تمام‌عرض */
  .prompt{ flex-wrap: wrap; gap: 12px; }
  .prompt__btn{ margin-right: 0 !important; width: 100%; text-align: center; }

  /* stats سه‌تایی فشرده */
  .stats{ gap: 10px; }
  .stat{ padding: 12px 8px !important; }
  .stat__num{ font-size: 1.3rem !important; }

  /* ---------- سکشن‌ها فشرده‌تر ---------- */
  .section{ padding-block: 38px !important; }
  .section__title{ font-size: 1.5rem !important; }

  /* کارت‌ها — تمام‌عرض و تاچ‌فرندلی */
  .grid--4{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .card{ padding: 18px 14px !important; }
  .card__icon{ font-size: 1.8rem !important; }
  .card h3{ font-size: 1rem !important; }
  .card p{ font-size: .85rem !important; }

  /* بازی‌ها */
  .grid--6.grid--games{ grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

  /* پلتفرم‌ها — اسکرول افقی مثل اپ */
  .platforms{
    display: flex !important;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .platforms::-webkit-scrollbar{ display: none; }
  .platform{
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 92px;
  }

  /* قیمت‌ها — کارت‌های تمام‌عرض پشت‌سرهم */
  #pricing .grid--4{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .price-card{ padding: 22px 20px !important; }
  .price-card--featured{ order: -1; }

  /* اسلایدر نظرات */
  .t-card{ min-width: 85vw !important; }

  /* اطلاعات */
  .grid--2{ grid-template-columns: 1fr !important; }

  /* فوتر */
  .footer{ padding-bottom: calc(var(--app-nav-h) + 20px) !important; }
  .footer__inner{ grid-template-columns: 1fr !important; text-align: center; gap: 18px; }
  .footer__links{ justify-content: center !important; flex-wrap: wrap; }
  .footer__trust{ justify-content: center !important; }

  /* ---------- Bottom Navigation Bar (حس اپ) ---------- */
  .app-bottom-nav{
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(10,14,22,.9);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 1000;
    box-shadow: 0 -8px 30px rgba(0,0,0,.4);
  }
  .app-bottom-nav a{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text, #e8eef7);
    opacity: .55;
    font-size: .65rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, transform .15s, color .2s;
    position: relative;
  }
  .app-bottom-nav a i{ font-size: 1.25rem; }
  .app-bottom-nav a.active,
  .app-bottom-nav a:active{
    opacity: 1;
    color: var(--app-cyan);
  }
  .app-bottom-nav a.active::before{
    content:'';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--app-cyan), var(--app-blue), var(--app-violet));
  }
  /* دکمه وسط برجسته (CTA) */
  .app-bottom-nav a.app-nav-cta{
    opacity: 1;
  }
  .app-bottom-nav a.app-nav-cta .cta-circle{
    width: 48px; height: 48px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-blue), var(--app-violet));
    display: grid; place-items: center;
    box-shadow: 0 8px 22px -6px var(--app-blue), 0 0 0 4px rgba(10,14,22,.9);
    color: #fff;
  }
  .app-bottom-nav a.app-nav-cta .cta-circle i{ font-size: 1.3rem; }
}

/* =======================================================================
   نمایش bottom nav — منطق واحد و قطعی
   هر دستگاه لمسی (pointer: coarse) صرف‌نظر از عرض، nav پایین می‌گیرد.
   این مشکل تغییر عرض viewport هنگام باز/بسته شدن نوار آدرس سافاری را حل می‌کند.
   به‌علاوه هر صفحه‌ی باریک‌تر از 1024px (موبایل/تبلت معمولی) هم nav می‌گیرد.
   ======================================================================= */
.app-bottom-nav{ display: none; }

@media (max-width: 1024px){
  .app-bottom-nav{ display: flex; }
}
/* دستگاه‌های لمسی با هر عرضی (ایپد در همه جهت‌ها، حتی لنداسکیپ بزرگ) */
@media (pointer: coarse){
  .app-bottom-nav{ display: flex; }
}

/* =======================================================================
   وقتی bottom nav هست → منوی بالا مخفی + فضای پایین
   برای همه‌ی حالت‌های موبایل/تبلت (هر دو شرط را پوشش می‌دهیم)
   ======================================================================= */
@media (max-width: 1024px), (pointer: coarse){
  /* فضای پایین برای bottom nav */
  body{ padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)); }
  .footer{ padding-bottom: calc(var(--app-nav-h) + 20px) !important; }

  /* اسکرول روان iOS */
  html{ -webkit-overflow-scrolling: touch; }

  /* تاچ‌تارگت بزرگ‌تر */
  .btn{ min-height: 44px; }

  /* جلوگیری از زوم ناخواسته روی input در iOS */
  input, select, textarea{ font-size: 16px !important; }
}

/* منوی بالای دسکتاپ را روی تبلت/ایپد مخفی کن (همه‌ی حالت‌ها به‌جز موبایل کوچک که خودش nav بالا ندارد) */
@media (min-width: 761px) and (max-width: 1024px),
       (min-width: 761px) and (pointer: coarse){
  .nav{ display: none !important; }
  .header__actions{ display: none !important; }
  .nav-toggle{ display: none !important; }
  .mobile-nav{ display: none !important; }

  /* هدر چسبان شیشه‌ای */
  .header{
    position: sticky; top: 0; z-index: 900;
    background: rgba(7,11,18,.82) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
}