/* ══════════════════════════════════════════
   RESPONSIVE — شامل لكل الأحجام
   320px → موبايل صغير
   390px → موبايل عادي (iPhone 14)
   430px → موبايل كبير (iPhone Pro Max)
   768px → آيباد
   1024px+ → ديسكتوب
══════════════════════════════════════════ */

/* ── متغيرات الـ navbar height ── */
:root {
  --nav-h-desktop: 62px;
}

/* ════ موبايل صغير جداً (320px - 360px) ════ */
@media (max-width: 360px) {
  /* Hero */
  .hero { padding: 80px 14px 36px; }
  .hero-title { font-size: 28px !important; }
  .hero-sub { font-size: 13px; }
  .btn-cta-main, .btn-cta-sec { padding: 12px 18px; font-size: 13px; }

  /* Bottom nav */
  .mnav-btn { font-size: 8px; min-width: 44px; }

  /* Auth modal */
  .modal { padding: 24px 16px 20px; border-radius: 20px; }
  .modal-title { font-size: 18px; }

  /* Paywall */
  .paywall-sheet { height: calc(var(--real-vh, 95vh) - 20px); }
  .plan-price { font-size: 16px; }

  /* Quiz */
  .quiz-wrap { padding: 10px 12px 6px; }
  .choice-body { font-size: 13px; padding: 10px 12px; }

  /* Settings */
  .sett-row { padding: 12px 12px; }
  .sett-title { font-size: 13px; }
}

/* ════ موبايل عادي (361px - 430px) ════ */
@media (min-width: 361px) and (max-width: 430px) {
  .hero { padding: 88px 18px 44px; }
  .btn-cta-main, .btn-cta-sec { padding: 13px 22px; }
}

/* ════ موبايل كبير (431px - 600px) ════ */
@media (min-width: 431px) and (max-width: 600px) {
  .hero { padding: 96px 24px 48px; }
  .hero-cta { gap: 14px; }
}

/* ════ آيباد / تابلت (601px - 1023px) ════ */
@media (min-width: 601px) and (max-width: 1023px) {
  /* Navbar — آيباد */
  .navbar {
    padding-left: 28px;
    padding-right: 28px;
  }
  .nav-links { display: flex !important; gap: 2px; }
  .nav-link { font-size: 12px; padding: 6px 10px; }

  /* إخفاء bottom nav على الآيباد */
  .mobile-nav { display: none !important; }
  .screen { padding-bottom: 0 !important; }

  /* Hero */
  .hero { padding: 100px 40px 60px; }
  .hero-title { font-size: clamp(36px, 5vw, 56px) !important; }
  .hero-chars-row { gap: 16px; }
  .hero-char-stage { width: 72px; height: 72px; }

  /* Features grid */
  .feat-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stats bar */
  .stats-bar { max-width: 560px; }

  /* Pricing */
  .pricing-section { padding: 40px 40px; }

  /* Quiz */
  #screen-quiz { padding-top: var(--nav-h-desktop); }
  #quiz-body {
    height: calc(var(--real-vh, 100vh) - var(--nav-h-desktop));
    max-width: 700px;
    margin: 0 auto;
  }
  .quiz-wrap { padding: 20px 24px 12px; }
  #qimg { max-height: 320px; }

  /* Learn */
  #screen-learn { padding-top: var(--nav-h-desktop); }

  /* Roadmap */
  #screen-roadmap { padding-top: var(--nav-h-desktop); }
  .rm-map-inner { max-width: 600px; margin: 0 auto; }

  /* Dashboard */
  #screen-dashboard .sett-wrap { max-width: 600px; margin: 0 auto; }

  /* Leaderboard */
  .lb-wrap { max-width: 600px; margin: 0 auto; padding: 80px 24px 40px; }

  /* Weakness */
  .wk-screen { max-width: 640px; margin: 0 auto; }

  /* Paywall */
  .paywall-sheet {
    max-width: 520px;
    border-radius: 28px;
    height: auto;
    max-height: calc(var(--real-vh, 90vh) - 40px);
  }
  .paywall-overlay { align-items: center; }

  /* Modals */
  .modal { max-width: 460px; }

  /* Chat */
  #screen-chat .chat-wrap { max-width: 600px; margin: 0 auto; }
}

/* ════ ديسكتوب كبير (1024px+) ════ */
@media (min-width: 1024px) {
  .hero { padding: 114px 40px 64px; }

  /* Screens max-width */
  #screen-learn .learn-inner,
  #screen-roadmap .map-inner,
  #screen-leaderboard .lb-wrap,
  #screen-weakness .wk-screen,
  #screen-chat .chat-wrap {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Quiz */
  #quiz-body { max-width: 720px; margin: 0 auto; }

  /* Features */
  .feat-grid { grid-template-columns: repeat(3, 1fr); }

  /* Paywall */
  .paywall-sheet {
    max-width: 520px;
    border-radius: 28px;
    height: auto;
    max-height: 90vh;
  }
  .paywall-overlay { align-items: center; }
}

/* ════ ديسكتوب ضخم (1400px+) ════ */
@media (min-width: 1400px) {
  .hero { max-width: 1200px; margin: 0 auto; padding: 120px 60px 80px; }
  .features { max-width: 1200px; }
  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ════ landscape موبايل ════ */
@media (orientation: landscape) and (max-height: 500px) {
  /* Paywall */
  .paywall-sheet {
    height: calc(var(--real-vh, 95vh) - 10px);
  }
  .paywall-crown { display: none; }
  .paywall-title { font-size: 16px; margin-bottom: 4px; }
  .paywall-sub { font-size: 11px; margin-bottom: 8px; }
  .paywall-features { gap: 4px; margin-bottom: 8px; }

  /* Hero */
  .hero { padding: 72px 20px 24px; }
  .hero-chars-row { display: none; }

  /* Auth modal */
  .modal-char { display: none; }
  .modal { padding: 16px 20px; }
}

/* ════ آيباد landscape ════ */
@media (min-width: 768px) and (orientation: landscape) {
  .paywall-overlay { align-items: center; }
  .paywall-sheet {
    height: auto;
    max-height: 88vh;
    border-radius: 24px;
  }
}