/* ============================================================
   ShebaKhoj — Facebook Mobile View (<=700px only)
   Desktop untouched. Everything scoped inside media query.
   Style goal: FB app feel — compact topbar, fake search pill,
   stories strip, sticky tabs, full-bleed feed cards, FB dock.
   ============================================================ */

/* Hidden on desktop by default */
.fb-m-bar,
.fb-m-stories { display: none; }

@media (max-width: 700px) {

  /* ---------- Base: FB gray canvas ---------- */
  body { background: var(--canvas); font-size: 15px; }
  .container { padding-inline: 12px; }
  .page { padding-block: 0 40px; }

  /* ---------- 1. Topbar: FB style ---------- */
  .topbar {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: 0 1px 4px rgba(8,15,28,.08);
  }
  .topbar.is-stuck { background: var(--surface); box-shadow: 0 1px 4px rgba(8,15,28,.1); }
  .topbar-in { min-height: 56px; gap: 8px; }
  .logo { font-size: 1.3rem; letter-spacing: -.03em; }
  .logo-mark { width: 34px; height: 34px; border-radius: 50%; font-size: .9rem; }
  .logo:hover .logo-mark { transform: none; border-radius: 50%; }
  .logo small { display: none; }

  /* hide desktop login/register text buttons on tiny screens -> keep icons */
  .top-actions .btn { display: none; }
  .top-actions { gap: 6px; margin-inline-start: auto; }
  .icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 0;
  }
  .user-chip { padding: 3px; border: 0; background: transparent; max-width: none; }
  .user-chip .ua { width: 34px; height: 34px; }
  .scroll-progress { display: none; }

  /* ---------- 2. FB fake search bar (avatar + pill) ---------- */
  .fb-m-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-2);
    position: sticky; top: 56px; z-index: 60;
  }
  .fb-m-avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
    color: #fff; font-weight: 800; font-size: 1rem;
  }
  .fb-m-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .fb-m-fake-search {
    flex: 1; display: flex; align-items: center; gap: 8px;
    min-width: 0; padding: 10px 14px; border-radius: 999px;
    background: var(--surface-3); color: var(--ink-500);
    font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden;
  }
  .fb-m-fake-search i { font-size: .85rem; }
  .fb-m-fake-search:active { background: var(--line); }
  .fb-m-post-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-800);
    font-size: .8rem; font-weight: 800;
  }

  /* ---------- 3. Hero -> compact FB cover ---------- */
  .hero { padding: 0 0 12px; background: var(--surface); color: var(--ink-800); }
  .hero::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-visual { display: none; } /* heavy orbit/photo off on mobile */
  .hero-copy { max-width: none; padding: 14px 12px 0; }
  .hero-eyebrow { font-size: .72rem; background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-800); }
  .hero h1 { color: var(--ink-900); font-size: 1.45rem; margin: 10px 0 6px; letter-spacing: -.02em; }
  .hero h1 em { background: none; color: var(--brand-700); -webkit-background-clip: unset; background-clip: unset; }
  .hero-lede { color: var(--ink-500); font-size: .9rem; margin-bottom: 12px; }
  .hero-search { padding: 8px; gap: 8px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: none; }
  .hero-search-field { padding: 10px 12px; min-height: 0; }
  .hero-search-row { grid-template-columns: 1fr auto; }
  .hero-search-row .btn.lg { padding: 11px 16px; font-size: .92rem; border-radius: 999px; }
  .hero-near { padding: 10px 14px; font-size: .82rem; }
  .hero-pills { margin-top: 12px; }
  .hero-pills span { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-600); font-size: .76rem; padding: 6px 11px; }
  .hero-pills i { color: var(--brand-600); }
  .hero-stats { gap: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: repeat(4,1fr); text-align: center; }
  .hero-stats div b { color: var(--ink-900); font-size: 1.05rem; }
  .hero-stats div small { color: var(--ink-500); font-size: .7rem; }

  .assurance { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .assurance span { padding: 10px 11px; font-size: .78rem; }
  .assurance i { width: 30px; height: 30px; border-radius: 50%; }
  .assurance b { font-size: .8rem; }
  .assurance small { font-size: .7rem; }

  /* ---------- 4. Stories strip (FB style) ---------- */
  .fb-m-stories {
    display: block;
    background: var(--surface);
    border-block: 1px solid var(--line-2);
    margin: 10px -12px 0; padding: 12px 12px 10px;
  }
  .fb-m-stories-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .fb-m-stories-head b { font-size: .92rem; color: var(--ink-900); }
  .fb-m-stories-head a { font-size: .78rem; font-weight: 700; color: var(--brand-700); }
  .fb-m-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fb-m-strip::-webkit-scrollbar { display: none; }
  .fb-m-story {
    flex: 0 0 auto; width: 74px; scroll-snap-align: start;
    display: grid; justify-items: center; gap: 5px; text-align: center;
  }
  .fb-m-story .ring {
    width: 64px; height: 64px; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 200deg, var(--brand-400), var(--accent-400), var(--violet), var(--brand-400));
    display: grid; place-items: center;
  }
  .fb-m-story .ring > span {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--surface);
    display: grid; place-items: center; font-size: 1.5rem; overflow: hidden;
  }
  .fb-m-story small { font-size: .68rem; font-weight: 600; color: var(--ink-700); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fb-m-story.create .ring { background: var(--line); }
  .fb-m-story.create .ring > span { background: var(--surface-2); color: var(--brand-700); font-size: 1.2rem; }

  /* ---------- 5. Categories -> already grid, make 2-col compact ---------- */
  .sec-head { margin: 14px 0 10px; }
  .sec-head h2 { font-size: 1.15rem; }
  .sec-head p { font-size: .82rem; }
  .cat-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cat-card { padding: 12px 6px 10px; border-radius: 14px; gap: 6px; }
  .cat-card > span:first-child { width: 44px; height: 44px; border-radius: 50%; font-size: 1.25rem; }
  .cat-card b { font-size: .72rem; line-height: 1.3; }
  .cat-arrow { display: none; }

  /* ---------- 6. Sticky FB tabs ---------- */
  .chip-row {
    position: sticky; top: 111px; z-index: 55;
    display: flex; gap: 8px; overflow-x: auto;
    margin: 12px -12px 0; padding: 10px 12px;
    background: var(--surface); border-block: 1px solid var(--line-2);
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; font-size: .82rem; padding: 8px 14px; }

  /* ---------- 7. Feed cards: full-bleed FB gaps ---------- */
  .feed-layout { display: block; margin-top: 0; }
  .feed-layout > div { min-width: 0; }
  /* section wrapper edge-to-edge */
  .feed-layout.section-tight { padding-inline: 0; }
  .feed-layout.section-tight > div > .sec-head,
  .feed-layout.section-tight > div > .chip-row,
  .feed-layout.section-tight > div > .text-center,
  .feed-layout.section-tight > div > .empty { margin-inline: 12px; }
  .offer-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 4px 12px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .offer-grid::-webkit-scrollbar { display: none; }
  .offer-card { flex: 0 0 228px; scroll-snap-align: start; }
  .offer-card:hover { transform: none; }
  .offer-visual { height: 110px; font-size: 2.4rem; }

  .post-card {
    border: 0; border-radius: 0; box-shadow: none;
    margin: 0 0 8px; padding-bottom: 2px;
    border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  }
  .post-card:hover { transform: none; box-shadow: none; }
  .post-head { padding: 10px 12px 0; }
  .post-text { padding: 8px 12px 0; }
  .post-card .post-title { font-size: .98rem; }
  .post-card .post-body { font-size: .9rem; }
  .post-media img, .post-media video { aspect-ratio: 4 / 3; }
  .price-row, .countdown { margin-inline: 12px; }
  .post-stats { margin: 8px 12px 0; }
  .post-actions { padding: 4px 6px; }
  .post-act { font-size: .82rem; padding: 10px 4px; } /* bigger touch target */
  .post-cta { padding: 8px 12px 12px; }
  .post-cta .btn { flex: 1 1 0; font-size: .8rem; padding: 9px 6px; border-radius: 10px; }

  /* ---------- 8. Sidebar -> stacked CTA, no clutter ---------- */
  .feed-layout .stack { display: grid; gap: 8px; margin: 8px 12px 0; }
  .feed-layout .side-card { margin: 0; border-radius: 14px; }
  .side-banner { margin: 0; border-radius: 14px; padding: 18px; }

  /* ---------- 9. Bottom dock: true FB look ---------- */
  .mobile-dock {
    box-shadow: 0 -1px 8px rgba(8,15,28,.1);
    border-top: 1px solid var(--line);
  }
  .md-item { min-height: 58px; font-size: 1.25rem; }
  .md-item span { font-size: .6rem; font-weight: 700; }
  .md-item.active { color: var(--brand-600); }
  .md-item.active::before { width: 34px; }

  /* ---------- 10. Footer compact ---------- */
  .footer { margin-top: 12px; padding-top: 30px; padding-bottom: 10px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 20px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .to-top { bottom: calc(var(--dock-h) + 18px); right: 12px; width: 42px; height: 42px; }
  .toast-region { left: 12px; right: 12px; bottom: calc(var(--dock-h) + 12px); }

  /* ---------- 11. FB-style profiles (provider + public customer) ---------- */
  .profile-cover { height: 150px; border-radius: 0; margin-inline: -12px; }
  .profile-head { grid-template-columns: auto minmax(0, 1fr); margin-top: -40px; padding-inline: 12px; gap: 12px; }
  .profile-head .avatar { width: 84px; height: 84px; font-size: 2.1rem; border: 3px solid var(--surface); }
  .profile-head .profile-id { margin-top: 40px; }
  .profile-head .profile-cta { margin-top: 0; }
  .profile-id h1 { font-size: 1.3rem; }
  .profile-username { font-size: .84rem; }
  .profile-id .profile-meta { font-size: .8rem; gap: 6px 10px; }
  .profile-cta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .profile-cta .btn { justify-content: center; padding: 10px 8px; font-size: .85rem; }
  .profile-tabs { position: sticky; top: 111px; z-index: 55; background: var(--surface); margin-inline: -12px; padding-inline: 12px; border-bottom: 1px solid var(--line-2); }
  .profile-pane > :first-child { margin-top: 12px; }
  .rate-sum { gap: 14px; }
  .review-grid { grid-template-columns: 1fr; gap: 8px; }
  .review-cell { border-radius: 12px; }
}

/* Very small phones: 2-col categories still fit */
@media (max-width: 380px) {
  .cat-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cat-card > span:first-child { width: 40px; height: 40px; font-size: 1.1rem; }
  .assurance { grid-template-columns: 1fr 1fr; }
  .fb-m-story { width: 66px; }
  .fb-m-story .ring { width: 58px; height: 58px; }
}

/* Dark mode keeps FB feel */
@media (max-width: 700px) {
  [data-theme="dark"] .fb-m-bar { background: var(--surface); }
  [data-theme="dark"] .fb-m-fake-search { background: var(--surface-3); }
  [data-theme="dark"] .hero { background: var(--surface); }
  [data-theme="dark"] .fb-m-stories { background: var(--surface); }
  [data-theme="dark"] .chip-row { background: var(--surface); }
}