/* ================================================================
   mobile.css — Comprehensive Mobile Responsive Fix
   dive.marketing
   Targets: ALL pages — profile, browse, jobs, pricing, dashboard,
            browse-businesses, business-profile, portfolio, auth
   Breakpoints: 1024px · 768px · 520px · 400px
   ================================================================ */

/* ──────────────────────────────────────────────
   1. NAVBAR — shared across all pages
   ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #navbar {
    padding: 0 1.25rem;
    height: 60px;
  }
  .nav-logo { font-size: 1.1rem; }
  .hamburger { display: flex !important; }
  .nav-links-wrap { display: none !important; }
}
@media (max-width: 1024px) {
  .nav-links-wrap.mobile-open {
    top: 60px;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
  }
  .nav-links-wrap.mobile-open .nav-links { gap: 0.5rem; }
  .nav-links-wrap.mobile-open .search-bar { width: 100%; border-radius: 10px; }
  .nav-links-wrap.mobile-open .search-bar input { width: 100%; min-width: unset; }
}

/* ──────────────────────────────────────────────
   2. HERO — index.php
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero { padding: 5rem 1.25rem 3.5rem; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .hero-sub { font-size: 0.95rem; max-width: 100%; }
  .hero-actions { flex-direction: column; width: 100%; gap: 0.75rem; }
  .hero-cta, .hero-ghost { width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.9rem 1.5rem; }
}
@media (max-width: 400px) {
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
}

/* ──────────────────────────────────────────────
   3. CATEGORY ROWS — index.php Netflix rows
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .category-row-header { padding: 0 1rem; }
  .scroll-track { padding: 0.5rem 1rem 1.5rem; gap: 0.85rem; }
  .profile-card { flex: 0 0 175px; }
  .explore-card { flex: 0 0 160px; }
}
@media (max-width: 400px) {
  .profile-card { flex: 0 0 155px; }
}

/* Jobs section on homepage */
@media (max-width: 768px) {
  .jobs-home-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1rem !important;
  }
}

/* Businesses home section */
@media (max-width: 768px) {
  .biz-home-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 1rem !important;
  }
}
@media (max-width: 480px) {
  .biz-home-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────
   4. BROWSE.PHP — تصفح المسوقين
   ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .browse-layout { flex-direction: column !important; }
  .browse-sidebar {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    border-inline-end: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 1rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .browse-sidebar h3 { display: none; }
}
@media (max-width: 768px) {
  .browse-wrap { flex-direction: column !important; }
  .browse-sidebar {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    border-inline-end: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0.75rem 1rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    top: 60px !important;
    z-index: 50;
    background: rgba(13,13,13,0.97) !important;
    backdrop-filter: blur(12px);
  }
  .browse-sidebar::-webkit-scrollbar { display: none !important; }
  /* Hide section titles — only show filter pills */
  .browse-sidebar .filter-label,
  .browse-sidebar h3,
  .browse-sidebar .filter-section > span { display: none !important; }
  .browse-sidebar .filter-section {
    display: contents !important;
    margin: 0 !important;
  }
  .browse-sidebar .avail-toggle { flex-shrink: 0; white-space: nowrap; }
  .browse-main { padding: 1rem 0.75rem 3rem !important; }
  .browse-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .browse-search-bar { margin-bottom: 0.75rem !important; }
  .browse-top { margin-bottom: 0.75rem !important; }
}
@media (max-width: 480px) {
  .browse-grid,
  #marketers-grid { grid-template-columns: 1fr !important; }
  .filter-chip { font-size: 0.72rem !important; padding: 0.35rem 0.75rem !important; }
}


/* ──────────────────────────────────────────────
   5. PROFILE.PHP — بروفايل المسوق
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero section — مساحة كافية لما فوق الناف بار */
  .profile-hero {
    padding: 80px 1rem 2rem !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }
  .profile-hero-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  /* Avatar — مركزي وحجم مناسب */
  .profile-avatar-wrap { display: flex; justify-content: center; }
  .profile-avatar { width: 100px !important; height: 100px !important; }
  /* اسم ومعلومات */
  .profile-info { width: 100% !important; min-width: 0 !important; }
  .profile-info > div:first-child { justify-content: center !important; flex-wrap: wrap !important; }
  .profile-name { font-size: 1.55rem !important; text-align: center !important; }
  .profile-title { text-align: center !important; }
  /* Meta row — مركزي */
  .profile-meta {
    justify-content: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.5rem !important;
  }
  .profile-meta-item { font-size: 0.78rem !important; }
  /* Stats */
  .profile-stats {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    margin-top: 1rem !important;
  }
  .profile-stat { text-align: center !important; }
  /* Actions — زرار واسعة تملأ العرض */
  .profile-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.6rem !important;
  }
  .profile-actions .btn-primary,
  .profile-actions .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    padding: 0.75rem 1rem !important;
  }
  /* Tabs */
  .tabs-section { padding: 1.5rem 1rem 0 !important; }
  .tab-pane { padding: 1.5rem 1rem !important; }
  .portfolio-grid { grid-template-columns: 1fr 1fr !important; gap: 0.85rem !important; }
  /* Ticker */
  .clients-ticker-section { padding: 1.5rem 0 !important; }
  /* Specialty tabs on mobile — scrollable */
  .tabs-bar { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; padding-bottom: 2px !important; }
  .tabs-bar::-webkit-scrollbar { display: none !important; }
  .tab-btn { flex-shrink: 0 !important; font-size: 0.8rem !important; padding: 0.5rem 1rem !important; }
}
@media (max-width: 480px) {
  .profile-hero { padding: 72px 0.75rem 1.75rem !important; }
  .portfolio-grid { grid-template-columns: 1fr !important; }
  .profile-stat-val { font-size: 1.5rem !important; }
  .profile-name { font-size: 1.35rem !important; }
}


/* ──────────────────────────────────────────────
   6. JOBS.PHP — صفحة الفرص
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .jobs-hero { padding: 4rem 1.25rem 2rem !important; }
  .jobs-hero h1 { font-size: 1.8rem !important; }
  .jobs-hero-stats { gap: 1.5rem !important; }
  .jobs-controls { padding: 0 1rem 1rem !important; gap: 0.5rem !important; }
  .jobs-search { min-width: 100% !important; }
  .jobs-grid {
    grid-template-columns: 1fr !important;
    padding: 0 1rem 3rem !important;
    gap: 0.85rem !important;
  }
  .job-card { padding: 1.1rem !important; }
  #jobs-pagination { padding: 0 1rem 2rem !important; gap: 0.35rem !important; }
  .page-btn { padding: 0.35rem 0.75rem !important; font-size: 0.75rem !important; }
}

/* ──────────────────────────────────────────────
   7. JOB.PHP — صفحة تفاصيل الوظيفة
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .job-detail-layout {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1.25rem !important;
  }
  .job-detail-sidebar {
    width: 100% !important;
    position: static !important;
  }
  .job-detail-main { padding: 0 !important; }
}

/* ──────────────────────────────────────────────
   8. BROWSE-BUSINESSES.PHP
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .businesses-grid,
  #biz-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 1rem 2rem !important;
    gap: 0.85rem !important;
  }
  .biz-filters { padding: 0 1rem 1rem !important; }
}
@media (max-width: 480px) {
  .businesses-grid,
  #biz-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────
   9. BUSINESS-PROFILE.PHP
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .biz-hero-inner {
    flex-direction: column !important;
    padding: 0 1rem !important;
    gap: 0.85rem !important;
  }
  .biz-hero-info { min-width: 0 !important; }
  .biz-hero-name { font-size: 1.4rem !important; flex-wrap: wrap !important; }
  .biz-hero-cta { flex-direction: row !important; flex-wrap: wrap !important; }
  .biz-section { padding: 2rem 1rem !important; }
  .info-grid { grid-template-columns: 1fr 1fr !important; }
  .portfolio-grid.biz-portfolio { grid-template-columns: 1fr !important; }
  .needs-grid { grid-template-columns: 1fr !important; }
  .collab-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .biz-socials { gap: 0.35rem !important; }
  .biz-social { font-size: 0.7rem !important; padding: 0.25rem 0.55rem !important; }
  .owner-bar { padding: 0.65rem 1rem !important; gap: 0.5rem !important; }
  .owner-bar-btn { font-size: 0.72rem !important; padding: 0.35rem 0.65rem !important; }
}
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr !important; }
  .collab-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ──────────────────────────────────────────────
   10. PORTFOLIO.PHP — معرض الأعمال
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 1rem !important;
    gap: 0.85rem !important;
  }
  .portfolio-hero { padding: 4.5rem 1.25rem 2rem !important; }
  .portfolio-filters { padding: 0 1rem 1rem !important; flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────
   11. PRICING.PHP
   ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; }
}
@media (max-width: 768px) {
  .pricing-hero { padding: 4.5rem 1.25rem 2.5rem !important; }
  .pricing-hero h1 { font-size: 2rem !important; }
  .pricing-tabs { padding: 0 1rem !important; }
  .pricing-grid { padding: 1.5rem 1rem !important; gap: 1rem !important; }
  .tier-card { padding: 1.5rem 1.25rem !important; }
  .tier-price { font-size: 2.2rem !important; }
  .compare-table { overflow-x: auto !important; display: block !important; }
}

/* ──────────────────────────────────────────────
   12. VERIFY.PHP / VERIFY-BUSINESS.PHP
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tier-grid { grid-template-columns: 1fr !important; }
  .vb-hero { padding: 4.5rem 1.25rem 2rem !important; }
  .tier-table-wrap { padding: 0 1rem 3rem !important; }
  .vb-steps-section { padding: 0 1rem 3rem !important; }
}

/* ──────────────────────────────────────────────
   13. DASHBOARD — index, profile-edit, etc.
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-wrap { flex-direction: column !important; padding-top: 60px !important; }
  .dash-sidebar {
    width: 100% !important;
    height: auto !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 100;
    border-inline-end: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0.6rem 0.85rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dash-sidebar::-webkit-scrollbar { display: none; }
  .dash-nav-item {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
    border-radius: 999px !important;
    flex-shrink: 0;
  }
  .dash-nav-section { display: none !important; }
  .dash-main { padding: 1.25rem 1rem !important; }
  .dash-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .dash-stat-val { font-size: 1.6rem !important; }
}
@media (max-width: 400px) {
  .dash-stat-grid { grid-template-columns: 1fr !important; }
}

/* dashboard — profile-edit form */
@media (max-width: 768px) {
  .profile-edit-grid {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .form-row { flex-direction: column !important; gap: 1rem !important; }
  .form-group { padding: 0 !important; }
}

/* ──────────────────────────────────────────────
   14. AUTH PAGES — login, register
   ────────────────────────────────────────────── */
@media (max-width: 520px) {
  .auth-wrap { padding: 5rem 1rem 2rem !important; }
  .auth-box { padding: 2rem 1.25rem !important; border-radius: 16px !important; }
  .auth-title { font-size: 1.4rem !important; }
}

/* ──────────────────────────────────────────────
   15. BIZ-VERIFY-APPLY.PHP dashboard form
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .biz-apply-form { padding: 1rem !important; }
  .biz-apply-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ──────────────────────────────────────────────
   16. WHAT-IS-THIS.PHP
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wit-hero { padding: 4.5rem 1.25rem 2.5rem !important; }
  .wit-grid { grid-template-columns: 1fr !important; padding: 0 1rem !important; }
  .wit-faq { padding: 0 1rem 3rem !important; }
}

/* ──────────────────────────────────────────────
   17. FOOTER — shared
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 2.5rem 1.25rem 1.5rem !important; }
  .footer-brand-row { flex-direction: column !important; gap: 1rem !important; align-items: flex-start !important; }
  .footer-links { gap: 1rem !important; }
  .footer-bottom { flex-direction: column !important; gap: 0.5rem !important; text-align: center !important; }
}

/* ──────────────────────────────────────────────
   18. CASE STUDY MODAL — inside profile.php
   ────────────────────────────────────────────── */
@media (max-width: 640px) {
  #case-study-modal { padding: 0.75rem !important; align-items: flex-end !important; }
  .case-study-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cs-body { padding: 1rem !important; }
  .cs-full-img { height: 180px !important; }
  .cs-stats-row { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
}

/* ──────────────────────────────────────────────
   19. SUSPENDED.PHP — صفحة الإيقاف
   ────────────────────────────────────────────── */
@media (max-width: 520px) {
  .suspended-box { padding: 2rem 1.25rem !important; margin: 1rem !important; }
}

/* ──────────────────────────────────────────────
   20. ADMIN — not mobile-focused but basic fix
   ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-layout { flex-direction: column !important; }
  .sidebar { width: 100% !important; height: auto !important; position: static !important; flex-direction: row !important; flex-wrap: wrap !important; padding: 0.75rem !important; overflow-x: auto !important; }
  .main-content { margin: 0 !important; }
  .table-wrap { overflow-x: auto !important; }
}

/* ──────────────────────────────────────────────
   21. GLOBAL TOUCH FIXES
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Prevent text from overflowing */
  * { word-break: break-word; }
  img { max-width: 100%; height: auto; }

  /* Larger tap targets */
  button, a, input[type="submit"] { min-height: 40px; }

  /* Ensure inputs are readable on iOS (prevents zoom) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select { font-size: 16px !important; }

  /* Consistent section spacing */
  .category-section { padding: 2.5rem 0 1rem !important; }
  section { padding-block: 2.5rem !important; }

  /* contact section */
  .contact-section { padding: 3.5rem 1.25rem !important; }
  .contact-title { font-size: clamp(1.8rem, 7vw, 3rem) !important; }
}

/* ──────────────────────────────────────────────
   22. WHAT-IS-THIS stats grid
   ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .platform-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
}