/* =========================================================
   Al-Mashreq eBookstore — mobile.css
   GOAL:
   - Mobile looks EXACTLY like desktop (same structure),
     just smaller paddings/buttons/cards.
   - No drawers / no alternate mobile UI.
   - Stable across Chrome Android + iOS Safari (RTL + flex).
   ========================================================= */

@media (max-width: 980px){

  /* =========================
     A) HEADER — same as desktop but smaller (stable cross-browser)
     ========================= */

  .site-header .container.inner{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;

    /* avoid iOS notch issues */
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  /* Brand (logo + title) stays in place, just smaller */
  .site-header .brand{
    display:flex !important;
    align-items:center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .site-header .brand-logo{
    width: 32px !important;
    height: 32px !important;
  }

  .site-header .brand-title{
    font-size: 0.9rem !important;
    white-space: nowrap !important; /* keep like desktop */
    line-height: 1.2 !important;
  }

  /* Nav pills: same look, smaller; horizontal scroll instead of cutting */
  .site-header .nav{
    display:flex !important;
    flex: 1 1 auto !important; /* IMPORTANT: take remaining width */
    min-width: 0 !important;   /* IMPORTANT: allow overflow-x scroll */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
  }

  .site-header .nav::-webkit-scrollbar{ display:none; }

  .site-header .navlink{
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* =========================
     B) LAYOUT — keep desktop structure, single column
     Sidebar becomes a normal card above results (same UI)
     ========================= */
  .content-shell{
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  /* Put sidebar first (above results) */
  .sidebar{
    position: static !important;
    top: auto !important;
    order: -1 !important;
  }

  .side-card{
    padding: 0.75rem !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(2,10,25,.08) !important;
  }

  .side-head{
    margin-bottom: 6px !important;
  }

  .side-head h2{
    font-size: 0.95rem !important;
  }

  .field{
    margin-top: 0.6rem !important;
  }

  .field-label{
    font-size: 0.75rem !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.35 !important;
  }

  .control{
    min-height: 40px !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    padding: 0 12px !important;
  }

  /* Keep 2 columns where possible like desktop (but not tight) */
  .row-2{
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  /* Buttons smaller but still touch friendly */
  .btn, .filters-close{
    min-height: 40px !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
  }

  /* IMPORTANT: Hide any mobile FAB / drawers if present (keep desktop style only) */
  .filters-fab{ display:none !important; }

  /* =========================
     C) HERO — same desktop style but tighter
     ========================= */
  .hero-main{
    padding: 12px 0 6px !important;
  }

  .hero-card{
    padding: 0.85rem !important;
    border-radius: 18px !important;
  }

  .hero-title{ font-size: 1.15rem !important; }
  .hero-sub{ font-size: 0.95rem !important; }

  .hero-kpis{
    gap: 10px !important;
  }

  .hero-kpis .kpi{
    min-width: 98px !important;
    padding: 0.65rem 0.7rem !important;
    border-radius: 16px !important;
  }

  .hero-kpis .num{ font-size: 1.05rem !important; }
  .hero-kpis .lbl{ font-size: 0.75rem !important; }

  /* =========================
     D) BOOK GRID — keep card look, scale down spacing
     ========================= */
  .grid{
    gap: 0.85rem !important;
  }

  /* Large phones: 2 columns (optional) */
  @media (min-width: 520px){
    .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }

  .book-card{
    padding: 0.75rem !important;
    border-radius: 18px !important;
  }

  .book-card h3{
    font-size: 1rem !important;
    margin: 0.7rem 0 0.35rem !important;
  }

  .book-author{ font-size: 0.85rem !important; }

  .book-links{
    gap: 0.5rem !important;
    margin-top: 0.7rem !important;
  }

  .link-chip{
    min-height: 38px !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
  }

  /* =========================
     E) FOOTER — same look, smaller
     ========================= */
  .site-footer .footer-inner{
    padding: 0.85rem 0.75rem !important;
    gap: 0.75rem !important;
  }

  .foot-logo{
    width: 38px !important;
    height: 38px !important;
  }

  .foot-link{
    min-height: 38px !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.8rem !important;
  }

}

@media (max-width: 980px){
  .content-shell{
    grid-template-columns: 1fr !important;
  }
  .sidebar{
    position: static !important;
    order: -1 !important; /* تظهر قبل النتائج */
  }
}