/* ============================================================
   N.B.S.V.A — css/vendors-page.css   (v3)
   Vendors page: hero character art (vph2) + the REBUILT vendor
   profile popup (vp3 — all-new class names so no old rule in
   style.css can ever collide with it again).
   Loaded AFTER css/style.css on vendors.html.
   ============================================================ */

/* ================= HERO GIRL — fills the right side ================= */
body.vendors-v2 .vph2 { position: relative; overflow: hidden; min-height: 340px; }
body.vendors-v2 .vph2 .container { position: relative; z-index: 1; }
body.vendors-v2 .vph2-art {
  position: absolute; top: 0; right: -58; bottom: 0;
  height: 100%; width: min(44%, 560px);
  object-fit: contain; object-position: right center;
  opacity: .95; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%),
                      linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%),
                      linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: drop-shadow(0 0 40px rgba(29,111,242,.35));
}
@media (max-width: 860px) {
  body.vendors-v2 .vph2 { min-height: 0; }
  body.vendors-v2 .vph2-art { width: 78%; opacity: .38; object-position: right top; }
}

/* ================= MODAL LAYOUT RESET =================
   Kills any old #modalBody grid/flex rule left in style.css. */
#modalBody,
.modal #modalBody,
body.vendors-v2 #modalBody {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-count: auto !important;
  height: auto !important;
}
/* Everything lives inside ONE wrapper, so even a surviving grid
   rule physically cannot split the popup into columns. */
#modalBody .vp3-wrap {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  float: none !important;
}

/* ================= vp3 — HEADER CARD ================= */
#modalBody .vp3-head {
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(29,111,242,.28);
  background:
    radial-gradient(420px 220px at 88% 0%, rgba(29,111,242,.18), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  padding: 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px;
}
#modalBody .vp3-art {
  position: absolute; top: -8%; right: -2%; height: 118%; width: 46%;
  object-fit: contain; object-position: right top;
  opacity: .15; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%),
                      linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%),
                      linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
#modalBody .vp3-id {
  display: flex; gap: 16px; align-items: center;
  flex: 1 1 300px; min-width: 0; position: relative; z-index: 1;
}
#modalBody .vp3-avatar {
  position: relative; flex-shrink: 0;
  border-radius: 20px; padding: 3px;
  background: linear-gradient(135deg, #1d6ff2, #12B76A);
  box-shadow: 0 0 24px -8px rgba(29,111,242,.6);
}
#modalBody .vp3-avatar > img,
#modalBody .vp3-avatar > div { display: block; border-radius: 17px; }
#modalBody .vp3-check {
  position: absolute; right: -6px; bottom: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #1d6ff2; color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #0f1013; box-shadow: 0 0 12px rgba(29,111,242,.7);
}
#modalBody .vp3-who { min-width: 0; flex: 1; }
#modalBody .vc2-verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 4px;
  background: rgba(29,111,242,.14); color: #7db3ff;
  border: 1px solid rgba(29,111,242,.35);
}
#modalBody .vp3-name {
  font-size: 1.45rem; line-height: 1.15; margin: 2px 0 8px;
  overflow-wrap: anywhere;
}
#modalBody .vp3-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#modalBody .vp3-chip {
  display: inline-flex; align-items: center;
  font-size: .7rem; color: #9aa39d; padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 999px;
  background: rgba(255,255,255,.02); white-space: nowrap;
}
#modalBody .vp3-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* trust ring panel */
#modalBody .vp3-trust {
  display: flex; align-items: center; gap: 14px;
  margin-left: auto; position: relative; z-index: 1;
  border: 1px solid rgba(18,183,106,.35); border-radius: 16px;
  padding: 12px 18px;
  background: rgba(18,183,106,.06);
  box-shadow: 0 0 28px -12px rgba(18,183,106,.55);
}
#modalBody .vp3-ring {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#12B76A calc(var(--p, 0) * 1%), rgba(255,255,255,.08) 0);
  position: relative;
}
#modalBody .vp3-ring::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: #101216;
}
#modalBody .vp3-ring span {
  position: relative; font-weight: 800; font-size: .95rem; color: #4fdc9c;
}
#modalBody .vp3-trust-txt { display: flex; flex-direction: column; gap: 3px; }
#modalBody .vp3-trust-txt .l {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: #9aa39d; font-weight: 700;
}
#modalBody .vp3-trust-txt .stars { color: #F5B301; letter-spacing: .12em; font-size: .9rem; }
#modalBody .vp3-trust-txt .c { font-size: .7rem; color: #9aa39d; }

/* ================= vp3 — STAT STRIP ================= */
#modalBody .vp3-stats {
  display: flex !important; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
#modalBody .vp3-stat {
  flex: 1 1 150px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  padding: 10px 14px; background: rgba(255,255,255,.02);
}
#modalBody .vp3-stat .ic { font-size: 1.1rem; flex-shrink: 0; }
#modalBody .vp3-stat .t { display: flex; flex-direction: column; min-width: 0; }
#modalBody .vp3-stat .l {
  font-size: .6rem; color: #9aa39d; letter-spacing: .06em; text-transform: uppercase;
}
#modalBody .vp3-stat .n {
  font-weight: 700; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ================= vp3 — CONTACT BUTTONS ================= */
#modalBody .vp3-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#modalBody .vp3-wa { flex: 1 1 220px; }
#modalBody .vp3-soc {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px;
  font-weight: 600; font-size: .85rem; text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03); color: #e6e9e7;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
#modalBody .vp3-soc:hover { transform: translateY(-1px); }
#modalBody .vp3-soc .ic {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  background: rgba(255,255,255,.1);
}
#modalBody .vp3-soc.tiktok:hover { border-color: rgba(255,0,80,.55); box-shadow: 0 0 18px -6px rgba(0,242,234,.5); }
#modalBody .vp3-soc.telegram { color: #6fc0f5; border-color: rgba(41,171,226,.4); background: rgba(41,171,226,.08); }
#modalBody .vp3-soc.telegram .ic { background: rgba(41,171,226,.25); }
#modalBody .vp3-soc.telegram:hover { box-shadow: 0 0 18px -6px rgba(41,171,226,.6); }
#modalBody .vp3-soc.facebook { color: #7aa7ff; border-color: rgba(24,119,242,.45); background: rgba(24,119,242,.1); }
#modalBody .vp3-soc.facebook .ic { background: rgba(24,119,242,.3); }
#modalBody .vp3-soc.facebook:hover { box-shadow: 0 0 18px -6px rgba(24,119,242,.6); }
#modalBody .vp3-soc.community { color: #ffd98a; border-color: rgba(245,179,1,.4); background: rgba(245,179,1,.08); }
#modalBody .vp3-soc.community .ic { background: rgba(245,179,1,.22); }
#modalBody .vp3-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

/* sections below never leave dead space */
#modalBody .vp-section { margin-bottom: 20px; }
#modalBody .vp-box { overflow-wrap: anywhere; }

/* ================= RESPONSIVE ================= */
@media (max-width: 820px) {
  #modalBody .vp3-trust { margin-left: 0; flex: 1 1 100%; justify-content: center; padding: 12px; }
}
@media (max-width: 640px) {
  body.vendors-v2 .modal-back.open {
    align-items: flex-end; padding: 0;
    overscroll-behavior: contain; touch-action: none;
  }
  body.vendors-v2 .modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; max-height: 92dvh;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y; /* the popup itself handles vertical touch scroll */
    border-radius: 18px 18px 0 0;
  }
  #modalBody .vp3-head { padding: 16px; gap: 14px; }
  #modalBody .vp3-id { gap: 12px; }
  #modalBody .vp3-name { font-size: 1.2rem; }
  #modalBody .vp3-art { width: 70%; opacity: .1; }
  #modalBody .vp3-ring { width: 62px; height: 62px; }
  #modalBody .vp3-stat { flex: 1 1 calc(50% - 5px); padding: 9px 12px; }
  #modalBody .vp3-wa { flex: 1 1 100%; }
  #modalBody .vp3-soc { flex: 1 1 calc(50% - 5px); justify-content: center; }
}
@media (max-width: 380px) {
  #modalBody .vp3-stat { flex: 1 1 100%; }
  #modalBody .vp3-soc { flex: 1 1 100%; }
}

/* ================= MODAL BACKDROP CHARACTER ART ================= */
/* NOTE: overflow-x only — a plain `overflow: hidden` here was overriding
   the mobile `overflow-y: auto` and made the popup unscrollable. */
body.vendors-v2 .modal {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* scroll stays inside the popup */
}

body.vendors-v2 .modal::before {
    content: '';
    position: absolute;
    top: 270px;
    right: -70px;
    width: min(90%, 550px);
    height: 480px;
    z-index: 0;
    pointer-events: none;
    background: url(../assets/vendors-hero.png) top right / contain no-repeat;
    opacity: .22;
    filter: brightness(0.95) contrast(1.08) saturate(1.05);

    -webkit-mask-image:
        linear-gradient(180deg, #000 15%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image:
        linear-gradient(180deg, #000 15%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 22%);

    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

body.vendors-v2 .modal > * { position: relative; z-index: 1; }

/* ================= PLAY-STORE REVIEW SUMMARY ================= */
#modalBody .rv-summary { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
#modalBody .rv-avg {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 0 0 auto; min-width: 110px;
}
#modalBody .rv-avg .big { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #fff; }
#modalBody .rv-avg .stars { color: #F5B301; letter-spacing: .1em; }
#modalBody .rv-avg .c { font-size: .7rem; color: #9aa39d; text-align: center; }
#modalBody .rv-bars { flex: 1 1 220px; min-width: 0; }
#modalBody #rvMoreBtn { margin-top: 4px; }
@media (max-width: 480px) {
  #modalBody .rv-summary { gap: 14px; }
  #modalBody .rv-avg { min-width: 88px; }
  #modalBody .rv-avg .big { font-size: 2.1rem; }
}

/* ================= REVIEW STAR FILTER ================= */
#modalBody .rv-filter {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-top: 14px; padding-bottom: 4px;
}
#modalBody .rv-filter::-webkit-scrollbar { display: none; }
#modalBody .rv-chip {
  flex-shrink: 0; cursor: pointer;
  font-size: .76rem; font-weight: 600; color: #c8cdca;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12);
  transition: border-color .15s, background .15s, color .15s;
}
#modalBody .rv-chip:hover { border-color: rgba(255,255,255,.3); }
#modalBody .rv-chip.active {
  background: rgba(29,111,242,.18); color: #9cc4ff;
  border-color: rgba(29,111,242,.55);
}