/* ============================================================
   mobile-responsive.css — اصلاحات مشترک نمایش موبایل/تبلت
   این فایل را در همه‌ی صفحات بعد از بقیه‌ی <style>ها لود کنید:
     <link rel="stylesheet" href="mobile-responsive.css">
   هدف: جلوگیری از سرریز افقی، خوانایی فرم‌ها و جدول‌ها روی موبایل.
   ============================================================ */

/* ۱) جلوگیری از اسکرول افقی ناخواسته در کل صفحه */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: rgba(14,165,183,.15); }

/* ۲) تصاویر و ویدیوها هیچ‌وقت از عرض صفحه بیرون نزنند */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* ۳) جدول‌ها روی موبایل قابل اسکرول افقی شوند (به‌جای شکستن چیدمان) */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .tbl-wrap, .table-wrap, .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ۴) کارت‌ها/کانتینرهایی با عرض ثابت بزرگ، روی موبایل سیال شوند */
@media (max-width: 600px) {
  .card, .page, .container, .form-card, .wrap, .box {
    max-width: 100% !important;
  }
}

/* ۵) المان‌های فرم روی موبایل تمام‌عرض و با اندازه‌ی لمسی مناسب */
@media (max-width: 600px) {
  input, select, textarea, button {
    max-width: 100%;
    font-size: 16px;            /* جلوگیری از زوم خودکار iOS روی فوکوس */
  }
  .form-row, .field-row, .two-col, .grid-2 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
}

/* ۶) گریدهای چندستونه روی موبایل تک‌ستون */
@media (max-width: 600px) {
  .grid, .cards-grid, .values-grid, .services-grid, .contact-grid,
  .footer-grid, .kpi-grid, .stats-grid, .detail-grid,
  .form-grid, .type-grid, .action-grid, .size-grid, .docs-grid {
    grid-template-columns: 1fr !important;
  }
  /* گریدهای دو/سه‌ستونه‌ی نوع بسته و اندازه: حداقل دو ستون بماند تا فشرده نشود */
  .type-grid, .size-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ۷) دکمه‌های لمسی: حداقل ارتفاع راحت برای انگشت */
@media (max-width: 600px) {
  button, .btn, a.btn, [onclick] { min-height: 44px; }
  .btn-sm, .tab, .chip { min-height: auto; }
}

/* ۸) مودال‌ها روی موبایل تقریباً تمام‌عرض */
@media (max-width: 600px) {
  .modal, .modal-box, .modal-card, .popup, .dialog, .modal-body {
    max-width: 96vw !important;
    width: 96vw !important;
  }
}

/* ۹) پدینگ صفحات روی موبایل کمتر تا فضای بیشتری بماند */
@media (max-width: 480px) {
  .page, .content, .container { padding-left: 12px !important; padding-right: 12px !important; }
}