/* =========================================================
   Al-Mashreq eBookstore — mobile.css (FINAL)
   GOAL:
   - Mobile looks like desktop (same layout), just smaller.
   - Filters are ALWAYS visible on mobile (no drawer).
   - Add a professional collapse/expand for filters (mobile only).
   - Desktop/Windows is NOT affected (media only).
   ========================================================= */

@media (max-width: 980px){

  /* =========================
     A) HEADER — compact, stable cross-browser (RTL)
     ========================= */
  .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;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .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;
    line-height: 1.2 !important;
  }

  .site-header .nav{
    display:flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    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) IMPORTANT FIX — show filters ABOVE results
     - order doesn't work in CSS Grid, so switch to flex-column on mobile
     ========================= */
  .content-shell{
    display: flex !important;           /* grid -> flex */
    flex-direction: column !important;  /* stack */
    gap: 0.85rem !important;
  }

  .sidebar{
    /* disable drawer overlay rules from styles.css */
    display: block !important;      /* overrides display:none in styles.css */
    position: static !important;    /* cancel fixed overlay */
    inset: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    z-index: auto !important;

    order: 0 !important;            /* show first */
  }

  .results-area{ order: 1 !important; }

  /* if JS adds filters-open, don't lock scrolling */
  body.filters-open{ overflow: auto !important; }

  .side-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    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;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .side-head h2{
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  /* =========================
     B2) Mobile filters collapse toggle
     ========================= */
  .filters-toggle{
    margin-inline-start: auto !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: rgba(255,255,255,.95) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  /* Hide toggle on desktop (extra safety) */
  @media (min-width: 981px){
    .filters-toggle{ display:none !important; }
  }

  .filters-body{ display: block; }

  .sidebar.filters-collapsed .filters-body{
    display: none !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;
  }

  .row-2{
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  .btn, .filters-close{
    min-height: 40px !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
  }

  /* Since sidebar is always visible on mobile, hide drawer controls */
  .filters-fab{ display:none !important; }
  #openFilters{ display:none !important; }
  #closeFilters{ display:none !important; }

  /* =========================
     C) HERO — 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 — compact
     ========================= */
  .grid{ gap: 0.85rem !important; }

  @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 — compact
     ========================= */
  .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){

  /* =========================
     BOOK CARDS — Mobile polish
     ========================= */

  /* 1) Tighten card spacing */
  .book-card{
    padding: 0.85rem !important;        /* أقل فراغات */
    border-radius: 18px !important;
  }

  /* 2) Cover: bigger + consistent ratio, no excessive empty area */
  .book-cover,
  .book-card img{
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    display: block !important;
  }

  /* إذا الغلاف داخل wrapper محدد ارتفاع، نجعله يتصرف طبيعي */
  .cover,
  .cover-wrap,
  .book-cover-wrap{
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* 3) Title & meta: cleaner hierarchy */
  .book-card h3{
    margin: 0.65rem 0 0.35rem !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  /* أي وصف للمؤلف أو سطر ثانوي */
  .book-author,
  .meta,
  .book-meta{
    margin-top: 0.15rem !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    opacity: 0.95;
  }

  /* 4) Improve "Author / Language / ISBN" rows (even if they're plain text) */
  .book-card p,
  .book-card .line,
  .book-card .kv{
    margin: 0.25rem 0 !important;
  }

  /* 5) Links row: wrap nicely, bigger tap targets, less empty space */
  .book-links{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    margin-top: 0.75rem !important;
  }

  .link-chip,
  .book-links a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;     /* لمس أسهل */
    padding: 0.45rem 0.75rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /* 6) Make chips feel "buttony" and consistent */
  .link-chip:active,
  .book-links a:active{
    transform: scale(.98);
  }

  /* 7) Reduce huge bottom gaps between cards */
  #results .group,
  #results .section,
  .results-area{
    row-gap: 0.9rem !important;
  }

  /* 8) Optional: make category header ("Fiction") tighter */
  #results h2,
  #results h3.section-title{
    margin: 0.75rem 0 0.35rem !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }

  /* 9) Optional: reduce the "Generated from Excel" spacing */
  .page-foot{
    margin-top: 0.75rem !important;
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
  }
}

@media (max-width: 980px){

  /* =========================
     BOOK BADGES (Mobile Only)
     ========================= */

  .book-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f3f5f8;
    border: 1px solid rgba(0,0,0,.06);
  }

  .badge-author{
    background: #eef3ff;
    color: #1b3a8a;
  }

  .badge-lang{
    background: #e8f7f0;
    color: #0f5132;
  }

  .badge-isbn{
    background: #f5f5f5;
    color: #444;
  }
}