/*
 * Neel Beauty — لایه‌ی ایمنیِ نمایش موبایل، سراسری برای کل سایت.
 * از includes/head_assets.php لود می‌شود که در تقریباً همه‌ی صفحات (اصلی، مشتری،
 * کارمند، ادمین، وبلاگ، آکادمی، رزرو) include می‌شود — یعنی این فایل با یک لینک،
 * روی کل سایت اثر می‌گذارد، بدون این‌که به کلاس‌های اختصاصی هر صفحه دست بزند.
 *
 * فقط قوانین «امن» و عمومی اینجا هستند — چیزی که مطمئنیم هیچ layout عمدی
 * (مثل گرید ۳ ستونی svc-grid در صفحه اصلی که خودش mobile-tuned است) را خراب نمی‌کند.
 * اصلاحات اختصاصی هر صفحه (گرید دو ستونی فرم‌ها، ستون‌های عریض جدول زمان‌بندی و...)
 * داخل همان فایل صفحه انجام شده، نه اینجا.
 */

/* تصاویر/ویدیو هرگز از عرض ظرفشان بیرون نزنند */
img, video, svg, embed, object {
  max-width: 100%;
  height: auto;
}

/* جدول‌ها روی گوشی به‌جای بیرون‌زدگی از صفحه، خودشان اسکرول افقی بگیرند —
   بدون نیاز به wrapper div اضافه در هر صفحه */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table thead,
  table tbody,
  table tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
}

/* اینپوت/سلکت/تکست‌اریا/دکمه هیچ‌وقت عریض‌تر از ظرف خودشان نشوند
   (جلوی بیرون‌زدگی فرم‌های ساخته‌شده با width ثابت px را می‌گیرد) */
input, select, textarea, button {
  max-width: 100%;
}

/* برای کاربرانی که در تنظیمات سیستم/مرورگر «کاهش حرکت» را فعال کرده‌اند
   (سرگیجه، تهوع حرکتی و...) — همه‌ی صفحات، نه فقط پنل کارمند */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}