/* ============================================================
   N.B.S.V.A — css/vendors-list.css
   ONLY affects the vendors LISTING page controls & cards.
   Zero popup rules. Load AFTER css/vendors-page.css.
   ============================================================ */

/* ================= VENDOR PAGE LOADING OVERLAY =================
   Shows a branded spinner + skeleton cards while Firebase data loads.
   body.vendors-loading is added by vendors.html's init script and
   removed after the first refreshDirectory() fires (~900ms). */

/* Full-page loading overlay */
body.vendors-v2.vendors-loading::before {
  content: '';
  position: fixed; inset: 0; z-index: 50;
  background: rgba(7, 9, 7, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: all;
}
body.vendors-v2.vendors-loading::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  width: 42px; height: 42px;
  border: 3px solid rgba(29, 111, 242, .2);
  border-top-color: #1d6ff2;
  border-radius: 50%;
  animation: vendorSpin .7s linear infinite;
}
@keyframes vendorSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Skeleton vendor cards */
.v-skel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px;
  background: var(--card, #111);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.v-skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: skelShimmer 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes skelShimmer { to { transform: translateX(100%); } }
.v-skel-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.v-skel-lines { display: flex; flex-direction: column; gap: 8px; }
.v-skel-lines .l1 { width: 65%; height: 14px; background: rgba(255,255,255,.06); border-radius: 6px; }
.v-skel-lines .l2 { width: 45%; height: 10px; background: rgba(255,255,255,.06); border-radius: 6px; }
.v-skel-lines .l3 { width: 55%; height: 10px; background: rgba(255,255,255,.06); border-radius: 6px; }
.v-skel-tag { width: 90px; height: 22px; background: rgba(255,255,255,.06); border-radius: 999px; }
.v-skel-btn { width: 100%; height: 40px; background: rgba(255,255,255,.06); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .v-skel::after { animation: none; opacity: .4; }
  body.vendors-v2.vendors-loading::after { animation: none; }
}

/* ================= FILTER CHIP STRIPS =================
   On mobile the category chips (.cat-chip-row) and status tabs
   (.tabs) were wrapping into messy centred clusters. Turn each
   into a single horizontal scrolling strip — cleaner, and every
   chip stays reachable via swipe. */
@media (max-width: 640px) {
  body.vendors-v2 .cat-chip-row,
  body.vendors-v2 .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;
    margin-left: -2px; margin-right: -2px;
  }
  body.vendors-v2 .cat-chip-row::-webkit-scrollbar,
  body.vendors-v2 .tabs::-webkit-scrollbar { display: none; }

  body.vendors-v2 .cat-chip,
  body.vendors-v2 .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
}

/* ================= vc2 LISTING GRID =================
   1-column on mobile (≤640px), normal auto-fit on tablet/desktop. */
@media (max-width: 640px) {
  body.vendors-v2 .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ================= vc2 LISTING CARD — MOBILE FIX ================= */
@media (max-width: 640px) {
  body.vendors-v2 .vc2 { padding: 14px 12px; }

  /* names break only between words, never inside them */
  body.vendors-v2 .vc2 h3,
  body.vendors-v2 .vc2 .vc-name,
  body.vendors-v2 .vc2 .vc2-name {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    font-size: .95rem;
    line-height: 1.2;
  }

  /* Verified Vendor chip: let it WRAP if needed (better than being
     clipped by the card's overflow:hidden), and shrink text a touch */
  body.vendors-v2 .vc2 .vc2-verified {
    white-space: normal !important;
    overflow-wrap: break-word;
    font-size: .58rem;
    padding: 3px 8px;
    line-height: 1.3;
  }
  /* other small chips stay on one line */
  body.vendors-v2 .vc2 .vc2-ribbon,
  body.vendors-v2 .vc2 .tag,
  body.vendors-v2 .vc2 .vcheck { white-space: nowrap; }

  /* smaller avatar so the name gets more room */
  body.vendors-v2 .vc2 .vc2-avatar,
  body.vendors-v2 .vc2 img.vc2-avatar {
    width: 46px !important; height: 46px !important;
    flex-shrink: 0;
  }
}

/* very narrow phones: shrink name a touch more */
@media (max-width: 400px) {
  body.vendors-v2 .vc2 h3,
  body.vendors-v2 .vc2 .vc-name,
  body.vendors-v2 .vc2 .vc2-name { font-size: .88rem; }
}