/* mobile.css — لایه‌ی بهبود موبایل (ساختار و ظاهر سایت تغییری نمی‌کند)
   این فایل باید آخرین stylesheet هر صفحه باشد. فقط روی صفحه‌های کوچک (زیر 768px) اثر دارد؛ دسکتاپ هیچ تغییری نمی‌کند.
   قاعده‌های مشترک بیرون از media هیچ اثر ظاهری ندارند. */

a, button, [role="button"], label, summary, select { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* هدر هوشمند: هدر چسبان زیر ناچ می‌نشیند (top = safe-area)، پس موقع مخفی‌شدن باید به‌اندازه‌ی ناچ هم بالاتر برود وگرنه نیمه‌اش زیر ساعت/جزیره‌ی پویا می‌ماند */
.site-header.mx-hide { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 12px)); }

@media (max-width: 767px) {
  /* ورودی‌ها حداقل ۱۶px تا iOS هنگام فوکوس صفحه را زوم نکند */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }

  /* هدف‌های لمسی حداقل ۴۴px */
  .auth-back { min-height: 44px; display: inline-flex; align-items: center; }
  .auth-tabs button { min-height: 44px; }
  .toggle-pass { min-width: 44px; min-height: 44px; }
  .link-btn { min-height: 44px; min-width: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
  .tag-row a, .footer-links a, .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .docs-nav a { min-height: 44px; display: flex; align-items: center; }
  input.input, .docs-key .input { min-height: 44px; }
  .docs-tabs button { min-height: 44px; }

  /* متن‌های بلند بدون فاصله (آدرس، کد) از کادر بیرون نزنند (break-word: عرض کمینه‌ی ستون‌ها و جدول‌ها را خراب نمی‌کند) */
  p, li, h1, h2, h3, td, th { overflow-wrap: break-word; }
  img, video { max-width: 100%; }
  .docs-card summary, .docs-try summary { min-height: 44px; display: flex; align-items: center; }
  .input, input.input, textarea.input { font-size: 16px; }
}

/* =========================================================
   ریتم و تناسب (موبایل): یک مقیاس فاصله و اندازه‌ی یکدست برای همه‌ی صفحه‌ها
   فاصله‌ی بخش‌ها 2.2rem، سرتیتر فشرده و هم‌اندازه، برچسب‌ها و فرم‌ها هم‌تراز
   ========================================================= */
@media (max-width: 767px) {
  :root { --section-gap: 2.2rem; }
  .section-head { gap: .5rem; margin-bottom: 1.3rem; }
  .section-head::after { width: 44px; margin-top: .7rem; }
  .section-head .label, .hero .label { min-height: 32px; padding-inline: 14px; font-size: 13.5px; }
  .section-title { font-size: clamp(1.45rem, 6.3vw, 1.75rem); line-height: 1.55; }
  .section-sub { max-width: 30rem; font-size: 14.5px; line-height: 1.9; }

  /* کارت‌ها: گردی و نسبت تصویر یکسان */
  .pcard, .post-card, .vn-card, .fg-card { border-radius: 18px; }
  .pcard-media { aspect-ratio: 5 / 4; }
  /* وبلاگ: کارت افقی و فشرده (تصویر مربعی کنار متن) به‌جای کارت بلند تمام‌عرض */
  .post-grid { gap: .7rem; }
  .post-card { flex-direction: row; align-items: stretch; min-height: 104px; border-radius: 16px; }
  .post-cover { position: relative; flex: 0 0 92px; width: 92px; aspect-ratio: auto; }
  .post-cover img { position: absolute; inset: 0; }
  .post-ph { font-size: 1.8rem; }
  .post-body { min-width: 0; justify-content: center; gap: .2rem; padding: .7rem .85rem; }
  .post-body b { font-size: 14.5px; line-height: 1.6; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .post-body small { font-size: 12.5px; line-height: 1.7; -webkit-line-clamp: 2; }
  .post-meta { padding-top: .1rem; font-size: 12px; }

  /* فرم‌ها: برچسب نزدیک فیلد خودش، فاصله‌ی بین گروه‌ها بیشتر (برچسب ← فیلد = .45rem، گروه ← گروه = 1.1rem) */
  .field-label { margin-bottom: .45rem; }
  .sp-card form { gap: .45rem; }
  .sp-card form > .field-label:not(:first-child), .sp-row .field-label { margin-top: .65rem; }
  .sp-row { gap: 0; }
  .sp-card .btn-lg, .summary .btn { margin-top: 1rem; }
  .btn-lg { min-height: 50px; font-size: 15px; }

  /* عملکرد: محو کردن پشت (backdrop-filter) روی ده‌ها کارت هم‌زمان در گوشی‌ها اسکرول را کند و گرم می‌کند.
     برای کارت‌های داخل صفحه خاموشش می‌کنیم و زمینه را کمی مات‌تر می‌گذاریم تا ظاهر شیشه‌ای حفظ شود؛
     هدر، منو، پنجره‌ها و فرم ورود همچنان محو می‌مانند. */
  .glass, .chip, .store-tabs, .feature, .price-card:not(.is-featured), .step-inner, .faq details, .pcard, .cat-tile, .about-points li, .post-card, .review-card, .vn-card, .fg-card {
    -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(22, 18, 38, .62);
  }

  /* فوتر فشرده‌تر: فاصله‌ی بالای فوتر کمتر */
  .site-footer { margin-top: .2rem; }

  /* اطلاعات محصول: ردیف‌های هم‌تراز (به‌جای قرص‌های پلکانی) */
  .detail-meta { flex-direction: column; align-items: stretch; gap: .4rem; }
  .detail-meta li { justify-content: space-between; padding: 8px 14px; border-radius: 12px; }
}