/* ============================================================
 * MaalyPlus — Universal Mobile Stylesheet
 * تحسينات شاملة للأجهزة المحمولة لكل صفحات الموقع
 * ============================================================ */

/* ── 1. قائمة الموبايل (Hamburger Menu) ────────────────────── */
@media (max-width: 900px) {
  /* إخفاء النافبار العادي وإظهار زر الـ hamburger */
  .nav, nav.nav {
    display: none !important;
  }
  .nav.open, nav.nav.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 60px !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    background: #fff !important;
    padding: 1rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 999 !important;
    border-top: 1px solid #E5E7EB !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    gap: .25rem !important;
  }
  .nav.open .nav-link,
  .nav.open a {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    text-align: start !important;
    border-bottom: 1px solid #F3F4F6 !important;
    width: 100% !important;
    display: block !important;
  }
  .nav.open .nav-link:last-child,
  .nav.open a:last-child {
    border-bottom: none !important;
  }
  .nav.open .nav-link:hover,
  .nav.open a:hover {
    background: #F8FAFF !important;
  }
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    min-width: 44px;
    min-height: 44px;
  }
  /* تحسين زر CTA في الـ header على الموبايل */
  .btn-cta-header,
  .header .btn-primary,
  .header-inner .btn {
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    margin-inline-end: 6px;
  }
}

/* ── 2. تحسينات الـ touch targets على الموبايل ─────────────── */
@media (max-width: 768px) {
  /* أزرار وروابط أكبر للنقر */
  button, .btn, a.btn, input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  
  /* حقول النماذج بحجم لا يسبب zoom على iOS */
  input, select, textarea {
    font-size: 16px !important;  /* iOS لن يعمل zoom في input ≥ 16px */
  }
  
  /* مسافات أوسع بين العناصر */
  .container {
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
  }
}

/* ── 3. صفحة البطاقات: تخطيط الفلاتر على الموبايل ────────── */
@media (max-width: 768px) {
  /* 8 أعمدة فلاتر = كارثة على الموبايل، نحولها لعمودين */
  .cards-section .grid.xl\:grid-cols-8,
  .cards-section .grid[class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
  }
  /* "إسلامية" و "صالات" checkboxes تأخذ كامل العرض */
  .cards-section .grid > div:has(input[type="checkbox"]) {
    grid-column: span 2;
    justify-content: flex-start !important;
  }
  
  /* تقليل padding القسم */
  .cards-section.py-12 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* بطاقة البطاقة: تقليل padding وحجم النص */
  #cardsGrid > div {
    padding: 1rem !important;
  }
  
  /* الجدول داخل modal المقارنة قابل للسحب أفقياً */
  #compareModal table {
    font-size: 0.78rem !important;
  }
  #compareModal th, #compareModal td {
    padding: 6px 4px !important;
  }
  /* الـ modal نفسه يأخذ كامل الشاشة على الموبايل */
  #compareModal .compare-modal-content,
  #compareModal > div {
    margin: 8px !important;
    max-height: 95vh !important;
    border-radius: 12px !important;
  }
}

/* ── 4. صفحة البطاقات: شريط المقارنة على الموبايل ────────── */
@media (max-width: 640px) {
  #compareFloatContainer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #compareFloatContainer .container {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }
  /* chips أصغر على الموبايل لتقليل الزحام */
  #compareChips > div {
    padding: 4px 10px 4px 4px !important;
  }
  #compareChips .text-xs {
    max-width: 90px !important;
  }
}

/* ── 5. الـ header — sticky وbackground ───────────────────── */
@media (max-width: 900px) {
  .header,
  header.header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .header-inner {
    padding: 8px 0 !important;
  }
  /* اللوغو أصغر على الموبايل */
  .logo {
    font-size: 1.1rem !important;
  }
  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
}

/* ── 6. الـ hero / first-section على الموبايل ─────────────── */
@media (max-width: 768px) {
  .hero, .hero-section, section.hero {
    padding: 2rem 1rem !important;
    text-align: center !important;
  }
  .hero h1, .hero-title, h1.hero {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }
  .hero p, .hero-subtitle {
    font-size: 1rem !important;
  }
}

/* ── 7. صفحة القروض على الموبايل ─────────────────────────── */
@media (max-width: 768px) {
  .ln-filter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ln-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .ln-card {
    padding: 1rem !important;
  }
  .ln-card-stats {
    gap: 6px !important;
  }
  .ln-stat-val {
    font-size: 1rem !important;
  }
  /* Banner التوصية على الموبايل: stack عمودياً */
  #recBanner {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: start !important;
  }
  #recBanner button {
    width: 100% !important;
  }
}

/* ── 8. صفحة "من يموّلني" على الموبايل ───────────────────── */
@media (max-width: 768px) {
  .step-card {
    padding: 1.25rem !important;
  }
  .options-grid {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  .option-btn {
    padding: 1rem !important;
    font-size: .95rem !important;
  }
}

/* ── 9. footer responsive ───────────────────────────────── */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }
  .social-icons {
    justify-content: center !important;
  }
}

/* ── 10. منع overflow أفقي على الموبايل ──────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  /* الجداول قابلة للسحب أفقياً */
  table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 11. تحسين accessibility للنقر على الموبايل ────────── */
@media (max-width: 768px) and (hover: none) {
  /* إزالة hover effects على الأجهزة اللمسية */
  *:hover {
    transition: none !important;
  }
}

/* ── 12. صفحة الرئيسية: hero + باقي الأقسام ─────────────── */
@media (max-width: 900px) {
  /* الـ hero في index.html: inline grid 1fr 420px → عمود واحد */
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  /* الـ hero-visual بعرض ثابت 420px → كامل العرض */
  .hero-visual {
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto !important;
  }
  .hero-visual img,
  .hero-card-mockup {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 640px) {
  /* personas chips تحت العنوان: لف وتمحور */
  .hero-personas > div[style*="display:flex"] {
    justify-content: flex-start;
  }
  /* البحث الذكي: input + button عموديين */
  .smart-search {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .smart-search input,
  .smart-search button {
    width: 100% !important;
  }
  /* hero buttons تأخذ كامل العرض على الموبايل */
  .hero-buttons {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .hero-buttons .btn {
    width: 100% !important;
    justify-content: center;
  }
  /* الشبكات الكبيرة في الرئيسية تنهار */
  .fn-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── 13. صفحة تفاصيل البطاقة (cards/details.html) ─────── */
@media (max-width: 640px) {
  .cd-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }
  .cd-stat-val { font-size: 1.05rem !important; }
  .cd-stat-label { font-size: 0.7rem !important; }
  .score-num { font-size: 2.2rem !important; }
  .score-card { padding: 1rem !important; }
  .score-card > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .score-bar-label {
    min-width: 95px !important;
    font-size: 0.78rem !important;
  }
  .cd-product-name { font-size: 1.3rem !important; }
  .cd-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .cd-actions .cd-btn {
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  /* شاشات صغيرة جداً (Galaxy Fold, iPhone SE Mini): الإحصائيات في detail عمود واحد */
  .cd-grid { grid-template-columns: 1fr !important; }
}

/* ── 14. الـ hero buttons والروابط في الـ cards حدائق إذا كانوا flex ── */
@media (max-width: 640px) {
  /* أي flex container فيه gap وزرّين أو أكثر يلف عمودياً */
  div[style*="display:flex"][style*="gap"] > a.btn,
  div[style*="display:flex"][style*="gap"] > button.btn {
    flex: 1 1 auto;
  }
}