/* =====================================================
   mobile.css — تصميم الهاتف لكل صفحات قطعيارد
   ===================================================== */

/* ── ضبط أساسي ─────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

button, input, select, textarea {
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
}

/* ── Navigation ────────────────────────────────── */
@media (max-width: 768px) {
  .nav {
    padding: 0 12px !important;
    height: 54px !important;
    flex-wrap: nowrap !important;
  }
  /* روابط الوسط مختفية على الموبايل */
  .nav > div:nth-child(2) { display: none !important; }
  /* أيقونات اليمين — حجم أصغر */
  .nav > div:nth-child(3) { gap: 10px !important; }
}

/* ── Grid المنتجات ──────────────────────────────── */
@media (max-width: 768px) {
  .products-grid,
  .results-grid,
  #featured-products-grid,
  #prod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 380px) {
  .products-grid,
  .results-grid,
  #featured-products-grid,
  #prod-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ── بطاقة المنتج ───────────────────────────────── */
@media (max-width: 768px) {
  .prod-card { border-radius: 10px !important; }
  .prod-img  { height: 110px !important; font-size: 34px !important; }
  .prod-info { padding: 9px !important; }
  .prod-name { font-size: 12px !important; line-height: 1.3; }
  .prod-brand{ font-size: 10px !important; }
  .prod-price{ font-size: 13px !important; }
  .prod-price-old { font-size: 10px !important; }
  .prod-add  {
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
  }
  .prod-footer { flex-direction: column !important; gap: 6px !important; }
}

/* ── التصنيفات ──────────────────────────────────── */
@media (max-width: 768px) {
  .categories-grid,
  .cats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .cat-card {
    padding: 10px 6px !important;
    border-radius: 10px !important;
  }
  .cat-icon { font-size: 24px !important; }
  .cat-name { font-size: 11px !important; }
}

/* ── البائعون ───────────────────────────────────── */
@media (max-width: 768px) {
  .sellers-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ── البحث ──────────────────────────────────────── */
@media (max-width: 768px) {
  .search-hero,
  .search-bar-wrap { padding: 12px !important; }

  .search-bar {
    flex-direction: row !important;
    border-radius: 10px !important;
  }
  .search-bar input {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
  .search-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 0 10px 10px 0 !important;
    white-space: nowrap;
  }

  /* الفلاتر على شريط أفقي قابل للتمرير */
  .filters-bar,
  .filter-chips {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .filters-bar::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar { display: none; }

  .filter-chip, .filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* الشريط الجانبي للفلاتر — مخفي بالموبايل */
  .filters-sidebar, .sidebar { display: none !important; }
  .search-layout, .results-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── صفحة الدفع / السلة ────────────────────────── */
@media (max-width: 768px) {
  .checkout-grid,
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cart-item-row {
    flex-direction: row !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .payment-methods {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── لوحة البائع ────────────────────────────────── */
@media (max-width: 768px) {
  .seller-layout,
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .seller-sidebar {
    display: none !important;
  }

  .stats-grid-4,
  .seller-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .listing-table {
    display: block !important;
    overflow-x: auto !important;
  }
}

/* ── لوحة الإدارة ───────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { width: 0 !important; overflow: hidden !important; }
  .main { margin-right: 0 !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .tbl { font-size: 12px !important; }
  .tbl th, .tbl td { padding: 8px 10px !important; }
  .topbar-actions { gap: 6px !important; }
  .tb-btn { padding: 6px 10px !important; font-size: 11px !important; }
}

/* ── صفحة المنتج ────────────────────────────────── */
@media (max-width: 768px) {
  .product-layout {
    grid-template-columns: 1fr !important;
  }
  .product-gallery,
  .product-imgs {
    height: 240px !important;
  }
  .product-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .product-actions button {
    width: 100% !important;
  }
}

/* ── الطلبات ────────────────────────────────────── */
@media (max-width: 768px) {
  .orders-list .order-card { padding: 14px !important; }
  .order-header { flex-direction: column !important; gap: 8px !important; }
  .order-items-row { font-size: 12px !important; }
}

/* ── عام ────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content,
  .container,
  .page-wrap { padding: 12px !important; }

  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }

  .section-header { margin-bottom: 12px !important; }
  .section-title  { font-size: 15px !important; }

  /* مودال — يملأ الشاشة */
  .modal-box {
    width: 96% !important;
    max-height: 90vh !important;
    border-radius: 14px !important;
    padding: 16px !important;
  }

  /* نافذة الدردشة */
  #chat-widget-ap {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    bottom: 70px !important;
  }

  /* زر الدردشة العائم */
  #chat-float-btn {
    bottom: 16px !important;
    left: 16px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
}