/*
 * mobile.css — إصلاحات جوال مُستهدفة
 * قاعدة أساسية: قواعد مُحددة فقط، لا overrides عشوائية
 */

/* ══════════════════════════════════════════════════
   §1 — LAYOUT الأساسي: sidebar + tabbar + margins
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* إخفاء الـ sidebar الجانبي */
  .sidebar { display: none !important; }

  /* إزالة الهامش الذي تركه الـ sidebar لكل حاوية المحتوى */
  .main-area      { margin-inline-start: 0 !important; }
  .content-wrapper{ margin-inline-start: 0 !important; }

  /* إظهار الـ tabbar السفلي */
  .mobile-tabbar  { display: block !important; }

  /* مسافة سفلية للمحتوى الرئيسي فقط لمنع تغطية الـ tabbar */
  .main-area { padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important; }
  .main-footer   { margin-bottom: 85px !important; }
}


/* ══════════════════════════════════════════════════
   §2 — NAVBAR: شريط التنقل العلوي
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* إخفاء روابط الديسكتوب */
  .nav-links { display: none !important; }

  /* أزرار 44px (معيار Apple/Google) */
  .nav-icon-btn { width: 44px !important; height: 44px !important; }

  /* تصغير زر النشر */
  .nav-post-btn { padding: 8px 14px !important; font-size: 13px !important; }
}

@media (max-width: 480px) {
  /* شاشات صغيرة جداً: ضغط الـ navbar */
  .navbar { padding: 0 10px !important; }
  .nav-logo-text { font-size: 16px !important; }
}


/* ══════════════════════════════════════════════════
   §3 — TABBAR: شريط التنقل السفلي
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* توزيع متساوٍ للأزرار */
  .mobile-tabbar-items {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  /* حجم أيقونة 44px */
  .tab-btn-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  /* زر الوسط (نشر) */
  .tab-btn.center .tab-btn-icon {
    width: 52px !important;
    height: 52px !important;
    margin-top: -12px !important;
    font-size: 22px !important;
  }
}


/* ══════════════════════════════════════════════════
   §4 — GRIDS: شبكات متجاوبة
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grid-3    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-4    { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important; }
  .dynamic-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 400px) {
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
}


/* ══════════════════════════════════════════════════
   §5 — HERO SECTIONS
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* بانر الرئيسية */
  .hero-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px !important;
    gap: 10px !important;
  }
  .hero-emoji { font-size: 52px !important; }

  /* صفحة الضيف */
  .guest-hero {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
  }

  /* PHP hero panels */
  .php-hero { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .hero-emoji { display: none !important; }
  .hero-title { font-size: 20px !important; }
}


/* ══════════════════════════════════════════════════
   §6 — WEATHER STRIP
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .weather-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .w-details {
    width: 100% !important;
    justify-content: space-around !important;
  }
}


/* ══════════════════════════════════════════════════
   §7 — FORMS: حقول الجوال
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* font-size 16px يمنع iOS auto-zoom عند التركيز */
  .form-input   { font-size: 16px !important; height: 48px !important; }
  .form-select  { font-size: 16px !important; height: 48px !important; }
  .form-textarea{ font-size: 16px !important; }
}


/* ══════════════════════════════════════════════════
   §8 — MODAL / BOTTOM SHEET
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-overlay { align-items: flex-end !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
}


/* ══════════════════════════════════════════════════
   §9 — TOUCH TARGETS
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .btn-icon    { width: 44px !important; height: 44px !important; }
  .btn-icon-sq { width: 44px !important; height: 44px !important; }
}


/* ══════════════════════════════════════════════════
   §10 — TYPOGRAPHY: أحجام النصوص الدنيا
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* meta-data الإعلانات */
  .listing-card-meta span { font-size: 12px !important; }
  .hc-meta span           { font-size: 12px !important; }
  .faz3a-card-meta        { font-size: 12px !important; }

  /* stat-label كان 9px */
  .stat-label { font-size: 11px !important; }
}


/* ══════════════════════════════════════════════════
   §11 — GUEST BANNER
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .guest-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .guest-banner .btn { width: 100% !important; }
}


/* ══════════════════════════════════════════════════
   §12 — AUTH PAGE
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .auth-page {
    padding: 16px !important;
    padding-top: 28px !important;
    align-items: flex-start !important;
  }
  .auth-card { padding: 24px 18px !important; }
}


/* ══════════════════════════════════════════════════
   §13 — SLIDER
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .slider-container { height: 175px !important; }
  .slide-title { font-size: 17px !important; }
  .slide-desc  { font-size: 12px !important; max-width: 100% !important; }
  .slide-deco  { font-size: 55px !important; opacity: 0.1 !important; }
}


/* ══════════════════════════════════════════════════
   §14 — NOTIFICATION BUBBLE (global — لا media query)
   ══════════════════════════════════════════════════ */
.notif-bubble {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}