/* ==========================================================================
   responsive.css — تنظیمات تکمیلی ریسپانسیو
   ========================================================================== */

@media (max-width: 640px) {
  .site-header { left: 8px; right: 8px; }
  .header-center img { height: 34px; }
  .btn-glass.btn-large { padding: 16px 36px; font-size: var(--fs-md); }

  /* روی موبایل، اسکرول عمودیِ داخلیِ جدول با اسکرول کل صفحه تداخل پیدا می‌کرد
     (کاربر برای اسکرول صفحه انگشتش را روی جدول می‌گذاشت و به‌جای صفحه، فقط جدول
     تکان می‌خورد). این‌جا اسکرول عمودیِ داخلی را حذف می‌کنیم و فقط اسکرول افقی
     (برای دیدن ستون‌های پلن‌ها) باقی می‌ماند؛ جدول با خود صفحه به‌صورت طبیعی پایین می‌رود. */
  .compare-table-wrapper {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
  }
  .compare-table { min-width: 480px; }
  .compare-table tbody td, .compare-table tbody th { padding: 10px 12px; }

  .compare-scroll-hint {
    display: flex;
  }
}