/* ==========================================================================
   Responsive.css — من 320px حتى الشاشات الكبيرة
   الأولوية القصوى لتجربة الهاتف (منيو الـ QR يُفتح غالبًا من الجوال)
   ========================================================================== */

/* ---------- Large screens ---------- */
@media (min-width: 1440px) {
  :root { --container-w: 1320px; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1180px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta .btn.btn-outline { display: none; }

  .about-grid, .vip-grid { grid-template-columns: 1fr; }
  .about-media img { height: 320px; }
  .vip-media { min-height: 300px; order: -1; }

  .qr-card { grid-template-columns: 1fr; text-align: center; padding: 34px 26px; }
  .qr-info { order: 2; }
  .qr-box { margin-inline: auto; order: 1; }
  .qr-actions { order: 3; align-items: center; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .container { padding-inline: 18px; }
  .section-pad { padding-block: 56px; }

  .navbar { height: 68px; }
  .navbar.scrolled { height: 64px; }
  .nav-brand span { font-size: 0.92rem; }

  .hero { min-height: 100svh; align-items: flex-end; }
  .hero-content { padding-block: 130px 100px; max-width: 100%; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-scroll { display: none; }

  .section-head { margin-bottom: 32px; }

  .about-badge { position: static; margin-top: 14px; }
  .about-media { display: flex; flex-direction: column; }
  .about-media img { height: 240px; }

  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-num { font-size: 1.4rem; }
  .stat-card { padding: 16px 10px; }

  .services-grid { grid-template-columns: 1fr; }

  .cafe-tabs { display: flex; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .cafe-tabs::-webkit-scrollbar { display: none; }
  .cafe-tab { flex: 0 0 auto; }
  .cafe-grid, .cafe-panel.active { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }

  .qr-box { width: 120px; height: 120px; }

  .vip-feature-list { margin-block: 22px 26px; }

  .cta-section { margin-inline: 12px; border-radius: var(--radius-lg); }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; padding-bottom: 100px; }

  .mobile-menu-cta { display: block; }
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; font-size: 1.3rem; }
  .back-to-top { bottom: 84px; width: 44px; height: 44px; }

  /* صفحة المنيو */
  .menu-hero { padding-block: 130px 40px; }
  .menu-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .menu-filters::-webkit-scrollbar { display: none; }
  .menu-items-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
}

/* ---------- Small mobile (320px) ---------- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.8rem; }
  .btn { padding: 13px 22px; font-size: 0.92rem; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-num { font-size: 1.2rem; }
  .qr-card { padding: 24px 16px; }
}

/* منع أي Overflow أفقي بشكل قاطع */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }