/* ============================================================
   VitrinCar — Marketplace homepage MOBILE layer (≤768px ONLY)
   Desktop is untouched: every rule lives inside the media query.
   Restyles existing markup app-like + powers the bottom nav + drawer.
   ============================================================ */

/* Desktop: the mobile-only elements never show. */
.mp-bottomnav, .mside, .mside-scrim, .mh-mob, .sell-mob, .sellopt { display: none; }

@media (max-width: 768px) {
  :root{ --mpv:#7c4dff; --mpp:#d84fb7; --mpo:#ff6a3d; }

  body{
    background:
      radial-gradient(circle at top left, rgba(124,92,255,.22), transparent 30%),
      radial-gradient(circle at top right, rgba(255,96,72,.16), transparent 26%),
      linear-gradient(180deg,#050914 0%,#081020 45%,#060a14 100%) !important;
    background-attachment: fixed;
  }

  /* Leave room for the fixed bottom nav. */
  main, .page, .container, .wrap { padding-bottom: 96px !important; }
  body{ overflow-x: hidden; }

  /* ---- Collapse the shared top nav → clean mobile header (logo left + burger right) ---- */
  .mpnav-links, .mpnav-actions, .mpnav-spacer { display: none !important; }
  .mpnav-brand { order: 1 !important; }
  .mpnav-burger { order: 9 !important; margin-inline-start: auto !important; display: inline-flex !important; }
  .mpnav-inner { align-items: center !important; }
  /* vc_mega_nav fallback names (harmless if that nav isn't rendered) */
  .nav-links, .nav-right { display: none !important; }
  .nav-logo { order: 1 !important; }
  .nav-burger { order: 9 !important; margin-inline-start: auto !important; display: grid !important; }

  /* ---- Hero ---- */
  .hero{ border-radius:26px !important; padding:20px !important; }
  .hero h1{ font-size:30px !important; line-height:1.08 !important; }
  .hero-sub{ font-size:14px !important; }
  .hero-grid{ grid-template-columns:1fr !important; }
  .hero-cta{ flex-wrap:wrap !important; gap:10px !important; }
  .hero-cta .btn{ flex:1 1 auto !important; justify-content:center !important; }

  /* ---- Featured slider (.show) ---- */
  .show{ border-radius:22px !important; }
  .show-title{ font-size:22px !important; }

  /* ---- Simple search ---- */
  .simple-search{ padding:22px 4px 4px !important; }
  .ss-title{ font-size:22px !important; }
  .ss-form{ border-radius:16px !important; }

  /* ---- Find panel (filters) ---- */
  .find{ padding:16px !important; border-radius:22px !important; }
  .find-head h2{ font-size:18px !important; }
  .find-grid{ grid-template-columns:1fr !important; gap:12px !important; }
  .find-tabs{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* ---- Body-type chips: horizontal scroll ---- */
  .cats{ display:flex !important; gap:10px !important; overflow-x:auto !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px !important; }
  .cats::-webkit-scrollbar{ display:none; }
  .cats > *{ flex:0 0 auto !important; }

  /* ---- Sections ---- */
  .section{ margin-top:22px !important; }
  .sec-head h2, .section h2{ font-size:19px !important; }

  /* ---- Car cards: single, clean app cards ---- */
  .px-grid{ display:flex !important; gap:14px !important; overflow-x:auto !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory; }
  .px-grid::-webkit-scrollbar{ display:none; }
  .px-card{ flex:0 0 82% !important; scroll-snap-align:start;
    background:rgba(15,22,40,.88) !important; border:1px solid rgba(255,255,255,.08) !important;
    border-radius:20px !important; box-shadow:0 20px 50px rgba(0,0,0,.4) !important; }

  /* Any genuine multi-col grids collapse to one clean column. */
  .vehicles-grid, .vf-grid, .cars-grid, .grid-cards, .listing-grid{ grid-template-columns:1fr !important; }

  /* ---- Sections sit tight, one after another (compact) ---- */
  .section{ margin-top:14px !important; }
  .sec-head{ margin-bottom:10px !important; }

  /* ---- Explore-cars-on-live-map: drop the outer frame; show only the card ---- */
  .mh{ padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; border-radius:0 !important; }
  .mh-grid > .mh-col:first-child,
  .mh-grid > .mh-col--mid{ display:none !important; }
  .mh-grid{ grid-template-columns:1fr !important; gap:10px !important; }
  .mh-col{ padding:14px !important; border-radius:18px !important; }      /* the remaining "Smart way" col */
  .mh-feats{ gap:8px !important; }
  .mh-feat{ padding:8px 0 !important; }
  .mh-btn{ width:100% !important; justify-content:center !important; }

  .mh-mob{ display:flex !important; gap:0; position:relative; overflow:hidden;
    background:linear-gradient(135deg,#0e1428,#0a0f20); border:1px solid rgba(255,255,255,.08);
    border-radius:22px; box-shadow:0 20px 60px rgba(0,0,0,.4); margin-bottom:12px; }
  .mh-mob-l{ flex:1 1 56%; padding:18px 14px; position:relative; z-index:2; min-width:0; }
  .mh-mob-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .mh-mob-head h3{ font-size:17px; font-weight:800; margin:0; color:#fff; line-height:1.15; }
  .mh-mob-live{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#34d27f; background:rgba(52,210,127,.14); border:1px solid rgba(52,210,127,.4); padding:3px 8px; border-radius:999px; }
  .mh-mob-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#34d27f; box-shadow:0 0 8px #34d27f; }
  .mh-mob-l p{ color:#a8b3cf; font-size:12.5px; margin:8px 0 12px; line-height:1.5; }
  .mh-mob-bul{ list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:8px; }
  .mh-mob-bul li{ display:flex; align-items:center; gap:9px; color:#dce3f5; font-size:12.5px; font-weight:600; }
  .mh-mob-bul svg{ width:15px; height:15px; color:#a78bfa; flex:0 0 15px; }
  .mh-mob-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:13px;
    background:linear-gradient(135deg,#7c4dff,#8b4fff); color:#fff; font-weight:800; font-size:13px; text-decoration:none;
    box-shadow:0 12px 28px rgba(124,77,255,.45); }
  .mh-mob-btn svg{ width:16px; height:16px; }
  .mh-mob-map{ flex:1 1 44%; position:relative; min-width:118px;
    background:
      radial-gradient(circle at 70% 32%, rgba(124,92,255,.14), transparent 55%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 32px),
      #0b1020; }
  .mh-pin{ position:absolute; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800;
    background:linear-gradient(135deg,#6a5bff,#8b4fff); border:1.5px solid rgba(255,255,255,.3); }
  .mh-pin--big{ width:54px; height:54px; font-size:16px; top:34%; left:30%;
    box-shadow:0 0 0 12px rgba(139,79,255,.2), 0 0 26px rgba(139,79,255,.5); }
  .mh-pin--s1{ width:34px; height:34px; font-size:13px; top:12%; right:9%; box-shadow:0 0 0 7px rgba(139,79,255,.16); }
  .mh-pin--s2{ width:30px; height:30px; font-size:12px; bottom:12%; right:16%; box-shadow:0 0 0 6px rgba(139,79,255,.16); }

  /* ---- Stats: compact 2×2 ---- */
  .stats{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .stats > *{ padding:14px 12px !important; border-radius:16px !important; }
  .stat-ic{ width:36px !important; height:36px !important; }

  /* ---- Sell your car now? — show 1:1 mobile card, hide desktop banner ---- */
  .sell{ padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; border-radius:0 !important; display:block !important; }
  .sell > div:not(.sell-mob), .sell .sell-img{ display:none !important; }

  .sell-mob{ display:block !important; position:relative; overflow:visible; border-radius:22px;
    background:radial-gradient(circle at 72% 42%, rgba(124,92,255,.18), transparent 60%) !important;
    border:none !important; box-shadow:none !important; padding:14px 4px; }
  .sell-mob-top{ position:relative; min-height:150px; }
  .sell-mob-l{ position:relative; z-index:2; max-width:62%; }
  .sell-mob-l h3{ font-size:20px; font-weight:800; margin:0 0 8px; color:#fff; line-height:1.15; }
  .sell-mob-l h3 span{ background:linear-gradient(90deg,#a78bfa,#d84fb7); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sell-mob-l p{ color:#a8b3cf; font-size:12.5px; line-height:1.55; margin:0; }
  .sell-mob-car{ position:absolute; right:-10px; top:0; bottom:0; width:52%; z-index:1; }
  .sell-mob-car img{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:115%; max-width:none; object-fit:contain;
    filter:drop-shadow(0 18px 30px rgba(124,77,255,.4)); }
  .sell-bubble{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; border-radius:12px;
    background:rgba(13,18,34,.82); border:1px solid rgba(124,92,255,.4); backdrop-filter:blur(8px); box-shadow:0 10px 24px rgba(0,0,0,.4); }
  .sell-bubble i{ width:24px; height:24px; border-radius:8px; background:linear-gradient(135deg,#7c4dff,#8b4fff); color:#fff; font-style:normal; font-weight:800; font-size:13px; display:grid; place-items:center; flex:0 0 auto; }
  .sell-bubble span{ display:flex; flex-direction:column; line-height:1.05; color:#fff; font-weight:800; font-size:12.5px; }
  .sell-bubble span small{ color:#9aa6c9; font-weight:600; font-size:9px; }
  .sell-bubble--1{ top:6px; left:42%; }
  .sell-bubble--2{ top:44%; right:2px; }
  .sell-bubble--3{ bottom:8px; left:38%; }
  .sell-mob-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
  .sell-ms{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:11px 9px; text-align:center; }
  .sell-ms .ic{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:rgba(124,92,255,.16); color:#c4b5fd; margin-bottom:6px; }
  .sell-ms .ic svg{ width:17px; height:17px; }
  .sell-ms b{ display:block; font-size:12px; color:#fff; }
  .sell-ms small{ color:#9aa6c9; font-size:10.5px; }
  .sell-mob-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:13px; border-radius:14px;
    background:linear-gradient(135deg,#7c4dff,#8b4fff); color:#fff; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 14px 34px rgba(124,77,255,.45); }

  /* ---- Sell options: Sell to a partner / Sell privately ---- */
  .sellopt{ display:flex !important; flex-direction:column; gap:12px; margin-top:14px; }
  .so-card{ position:relative; border-radius:18px; padding:16px 14px; background:rgba(13,20,38,.82); border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 44px rgba(0,0,0,.35); }
  .so-card--primary{ border-color:rgba(124,92,255,.45); box-shadow:0 18px 50px rgba(124,77,255,.28); background:radial-gradient(circle at 90% 0%, rgba(124,92,255,.16), transparent 50%), rgba(13,20,38,.82); }
  .so-badge{ position:absolute; top:-10px; left:14px; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
    background:linear-gradient(135deg,#7c4dff,#8b4fff); color:#fff; font-size:10.5px; font-weight:800; box-shadow:0 8px 20px rgba(124,77,255,.5); }
  .so-badge svg{ width:12px; height:12px; }
  .sellopt .so-main{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; margin-top:6px; text-align:left !important; }
  .sellopt .so-row{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:7px !important; flex:0 1 auto !important; min-width:0 !important; }
  .so-ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
    background:rgba(124,92,255,.14); color:#c4b5fd; border:1px solid rgba(124,92,255,.3); }
  .so-ic svg{ width:22px; height:22px; }
  .so-txt{ min-width:0; }
  .so-txt small{ display:block; color:#a8b3cf; font-size:11px; }
  .so-txt b{ display:block; font-size:14.5px; font-weight:800; color:#fff; line-height:1.2; }
  .sellopt .so-list{ list-style:none; padding:0; margin:0; display:flex !important; flex-direction:column !important; gap:6px; flex:1 1 auto !important; min-width:0 !important; }
  .so-list li{ display:flex; align-items:center; gap:7px; color:#dce3f5; font-size:11.5px; font-weight:600; line-height:1.2; }
  .so-list li::before{ content:""; width:17px; height:17px; flex:0 0 17px; border-radius:50%;
    background:#7c4dff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/11px no-repeat; }
  .sellopt .so-btn{ display:flex !important; align-items:center; justify-content:center; gap:6px; padding:11px 14px; border-radius:12px;
    flex:0 0 auto !important; width:auto !important; min-width:0 !important; white-space:nowrap;
    font-weight:800; font-size:12.5px; text-decoration:none; color:#dce3f5; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
  .so-btn svg{ width:16px; height:16px; }
  .so-btn--primary{ color:#fff; background:linear-gradient(135deg,#7c4dff,#8b4fff); border-color:transparent; box-shadow:0 14px 34px rgba(124,77,255,.45); }

  /* ---- Footer: tighter ---- */
  .vc-footer-grid, .footer-grid{ grid-template-columns:1fr 1fr !important; }
  .vc-foot-brand{ grid-column:1 / -1 !important; }

  /* generic card softening */
  .card, .section, .find, .hero{ box-shadow:0 20px 60px rgba(0,0,0,.35); }

  /* ============ FIXED BOTTOM NAVIGATION ============ */
  .mp-bottomnav{
    display:flex; align-items:flex-end; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:1300;
    background:rgba(9,14,30,.88); backdrop-filter:blur(22px) saturate(1.1);
    border-top:1px solid rgba(255,255,255,.08);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .mp-bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    color:#8b97b8; text-decoration:none; font-size:11px; font-weight:600; padding:6px 2px; }
  .mp-bn-item svg{ width:22px; height:22px; }
  .mp-bn-item.is-active{ color:#a78bfa; }
  .mp-bn-sell{ position:relative; }
  .mp-bn-sell .mp-bn-fab{ width:52px; height:52px; margin-top:-22px; border-radius:50%;
    background:linear-gradient(135deg,var(--mpv),var(--mpp)); display:grid; place-items:center;
    color:#fff; box-shadow:0 12px 28px rgba(124,77,255,.5); }
  .mp-bn-sell .mp-bn-fab svg{ width:26px; height:26px; }

  /* ============ SIDE DRAWER (right) ============ */
  .mside-scrim{ display:block; position:fixed; inset:0; background:rgba(4,6,14,.62);
    backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; z-index:1400; }
  .mside-scrim.open{ opacity:1; visibility:visible; }
  .mside{ display:flex; position:fixed; top:0; right:0; bottom:0; width:88vw; max-width:420px;
    flex-direction:column; overflow-y:auto; padding:16px 14px 24px; z-index:1500;
    background:linear-gradient(180deg,rgba(15,22,42,.96),rgba(7,10,24,.98));
    backdrop-filter:blur(28px); border-radius:32px 0 0 32px;
    box-shadow:-30px 0 80px rgba(0,0,0,.6),-1px 0 0 rgba(124,92,255,.18);
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); }
  html[dir=rtl] .mside{ right:auto; left:0; border-radius:0 32px 32px 0; transform:translateX(-100%); }
  .mside.open{ transform:translateX(0); }
  .mside-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
  .mside-brand{ display:flex; align-items:center; gap:12px; }
  .mside-mark{ width:50px; height:50px; border-radius:50%; border:2px solid rgba(124,92,255,.6);
    display:grid; place-items:center; color:#fff; box-shadow:0 0 22px rgba(124,92,255,.35); }
  .mside-mark svg{ width:26px; height:26px; }
  .mside-brand b{ font-size:20px; font-weight:900; color:#fff; display:block; line-height:1.1; }
  .mside-brand small{ color:#a8b3cf; font-size:12px; }
  .mside-x{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1); color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; }
  .mside-nav{ display:flex; flex-direction:column; gap:8px; }
  .mside-link{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:16px;
    color:#dce3f5; font-size:16px; font-weight:600; text-decoration:none;
    background:rgba(13,20,38,.55); border:1px solid rgba(255,255,255,.06); }
  .mside-link svg{ width:22px; height:22px; flex:0 0 22px; color:#a8b3cf; }
  .mside-link .chev{ margin-inline-start:auto; color:#5f6f8c; width:18px; height:18px; flex:0 0 18px; }
  .mside-link .badge{ margin-inline-start:auto; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
    background:#7c4dff; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; }
  .mside-link .badge + .chev{ margin-inline-start:8px; }
  .mside-link:hover{ background:rgba(255,255,255,.05); }
  .mside-link.is-active{ background:linear-gradient(135deg,var(--mpv),var(--mpp)); border-color:transparent; color:#fff; box-shadow:0 12px 30px rgba(124,77,255,.4); }
  .mside-link.is-active svg, .mside-link.is-active .chev{ color:#fff; }
  .mside-sell{ display:flex; align-items:center; gap:14px; margin-top:12px; padding:16px;
    border-radius:18px; text-decoration:none; color:#fff;
    background:linear-gradient(120deg,rgba(124,77,255,.9),rgba(216,79,183,.9)); box-shadow:0 16px 40px rgba(124,77,255,.4); }
  .mside-sell .ic{ width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:0 0 auto; }
  .mside-sell .ic svg{ width:24px; height:24px; }
  .mside-sell b{ font-size:16px; display:block; }
  .mside-sell small{ opacity:.9; font-size:12.5px; }
  .mside-sell .chev{ margin-inline-start:auto; width:24px !important; height:24px !important; flex:0 0 24px; color:#fff; }
  .mside-sell .ic svg{ width:24px; height:24px; }
  .mside-lang{ margin-top:14px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(13,20,38,.55); overflow:hidden; }
  .mside-lang-head{ width:100%; display:flex; align-items:center; gap:14px; padding:15px 16px; background:none; border:none; color:#dce3f5; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
  .mside-lang-head svg{ width:22px; height:22px; color:#a8b3cf; }
  .mside-lang-head .cur{ margin-inline-start:auto; color:#a8b3cf; font-weight:600; }
  .mside-lang-list{ display:none; flex-direction:column; padding:4px 8px 10px; }
  .mside-lang-list.open{ display:flex; }
  .mside-lang-list a{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; color:#dce3f5; font-size:15px; text-decoration:none; }
  .mside-lang-list a:hover{ background:rgba(255,255,255,.05); }
  .mside-lang-list a .tick{ margin-inline-start:auto; color:#7c4dff; font-weight:900; }
  .mside-safe{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:16px; border-radius:18px;
    border:1px solid rgba(124,92,255,.3); background:rgba(124,92,255,.08); color:#dce3f5; text-decoration:none; }
  .mside-safe .ic{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(124,92,255,.5); display:grid; place-items:center; color:#c4b5fd; flex:0 0 auto; }
  .mside-safe b{ display:block; font-size:14.5px; color:#fff; }
  .mside-safe small{ color:#a8b3cf; font-size:12.5px; }
  .mside-logout{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:15px 16px; border-radius:16px;
    border:1px solid rgba(255,107,61,.35); background:linear-gradient(90deg,rgba(124,92,255,.1),rgba(255,107,61,.1)); color:#ff6b3d; font-weight:800; font-size:16px; text-decoration:none; }
  .mside-logout svg{ width:22px; height:22px; }
  /* Account header (logged in) */
  .mside-acct{ display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
  .mside-ava{ width:50px; height:50px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
    background:linear-gradient(135deg,var(--mpv),var(--mpp)); color:#fff; font-weight:800; font-size:20px; border:2px solid rgba(124,92,255,.55); }
  .mside-ava img{ width:100%; height:100%; object-fit:cover; }
  .mside-acct-txt{ min-width:0; }
  .mside-acct-txt b{ display:block; font-size:17px; font-weight:800; color:#fff; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw; }
  .mside-acct-txt small{ color:#a8b3cf; font-size:12.5px; }
  /* Login button (guest) */
  .mside-login{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:15px 16px; border-radius:16px;
    color:#fff; font-weight:800; font-size:16px; text-decoration:none;
    background:linear-gradient(135deg,var(--mpv),var(--mpp)); box-shadow:0 14px 34px rgba(124,77,255,.4); }
  .mside-login svg{ width:22px; height:22px; }
}