/* ==========================================================================
   bdsmchat.co — /vip/ only. Drafted 2026-10-08.

   Carries everything 321sexchat.com/vip/ says about VIP and VIP+, in
   bdsmchat's own look. Every rule is scoped ".bv-page" (the wrapper the page
   opens inside .page-content), so nothing here can reach another page, and
   this file is loaded by /vip/ alone. Loaded AFTER assets/site.css.

   Same palette as assets/invisible.css (taken from what the site already
   ships, not invented) — duplicated on purpose rather than loading that file,
   so an edit to /invisible/ can never move this page:
     #d80808  brand red        #ba0000  its hover
     #0f0f12  footer ground    #16161b  panel
     #23232b  hairline         #9a9aa6  muted type (6.9:1 on #0f0f12)
   ========================================================================== */

.bv-page {
  --bv-brand: #d80808;
  --bv-brand-deep: #ba0000;
  --bv-brand-soft: rgba(216, 8, 8, .12);
  --bv-ground: #0f0f12;
  --bv-panel: #16161b;
  --bv-panel-2: #1c1c22;
  --bv-line: #23232b;
  --bv-ink: #ffffff;
  --bv-muted: #9a9aa6;
  --bv-wrap: 1180px;
  color: var(--bv-ink);
  font-size: 16px;
  line-height: 1.6;
}
.bv-page *, .bv-page *::before, .bv-page *::after { box-sizing: border-box; }

.bv-page .bv-wrap { max-width: var(--bv-wrap); margin: 0 auto; padding: 0 22px; }
.bv-page section { padding: 46px 0; }
.bv-page section + section { border-top: 1px solid var(--bv-line); }

.bv-page .bv-eyebrow {
  margin: 0 0 8px;
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--bv-brand);
}
.bv-page .bv-title,
.bv-page .bv-sect-title,
.bv-page .bv-band-title {
  margin: 0 0 14px; color: var(--bv-ink); font-weight: 600; line-height: 1.25;
}
.bv-page .bv-title { font-size: 30px; }
.bv-page .bv-sect-title { font-size: 24px; }
.bv-page .bv-band-title { font-size: 34px; }
.bv-page .bv-lede,
.bv-page .bv-band-sub { margin: 0 0 18px; color: var(--bv-muted); font-size: 17px; }
.bv-page .bv-lede b, .bv-page .bv-band-sub b { color: var(--bv-ink); }
.bv-page a { color: var(--bv-brand); }

/* ------------------------------------------------------------------ TABS */
.bv-page .bv-tabs { padding: 30px 0 0; border: 0; }
.bv-page .bv-tabs-in {
  display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto;
  padding: 5px; background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 999px;
}
.bv-page .bv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border-radius: 999px;
  color: var(--bv-muted); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.bv-page .bv-tab:hover { color: var(--bv-ink); }
.bv-page .bv-tab.is-on { background: var(--bv-brand); color: #ffffff; }
.bv-page .bv-tab-new {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: #ffffff; color: var(--bv-brand-deep);
}
/* one pane at a time once the script has picked one; without JS both show */
html[data-viptab="vip"]  .bv-page [data-pane="plus"],
html[data-viptab="plus"] .bv-page [data-pane="vip"] { display: none; }

/* ----------------------------------------------------------------- INTRO */
.bv-page .bv-intro-grid {
  display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: center;
}
.bv-page .bv-intro-art {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--bv-line); background: #000;
}
.bv-page .bv-intro-art img { display: block; width: 100%; height: auto; }
/* VIP+ : the same neon sign, with a red neon plus hung beside it */
.bv-page .bv-neon-plus {
  position: absolute; right: 7%; top: 50%; transform: translateY(-58%);
  font: 700 92px/1 Poppins, Arial, sans-serif; color: #ffe3e3;
  text-shadow: 0 0 4px #ff6a6a, 0 0 12px #ff1f1f, 0 0 26px #d80808, 0 0 48px #d80808;
}
.bv-page .bv-intro-copy .bv-lede:last-child { margin-bottom: 0; }

.bv-page .bv-chips {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.bv-page .bv-chips li {
  display: inline-flex; align-items: baseline; gap: 8px; margin: 0;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 999px;
  padding: 7px 16px;
}
.bv-page .bv-chip-n { font-weight: 700; color: var(--bv-ink); font-size: 16px; }
.bv-page .bv-chip-l { color: var(--bv-muted); font-size: 14px; }
.bv-page .bv-chips .bv-nudge { border-color: var(--bv-brand); background: var(--bv-brand-soft); }
.bv-page .bv-nudge a { color: var(--bv-ink); text-decoration: none; font-size: 14px; }
.bv-page .bv-nudge b { color: #ff5252; }

/* ------------------------------------------------------------- FEATURES */
.bv-page .bv-cards {
  display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 22px;
}
.bv-page .bv-feat {
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 10px;
  padding: 20px 20px 22px; border-top: 2px solid var(--bv-brand);
}
.bv-page .bv-feat.is-wide { grid-column: 1 / -1; }
.bv-page .bv-feat-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.bv-page .bv-ico {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--bv-ground); border: 1px solid var(--bv-line); border-radius: 9px;
  font-size: 21px; line-height: 1;
}
.bv-page .bv-feat-t { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--bv-ink); line-height: 1.3; }
.bv-page .bv-feat-d { margin: 0; color: var(--bv-muted); font-size: 14.5px; }
.bv-page .bv-feat-d b { color: var(--bv-ink); }

/* ----------------------------------------------------------------- BAND */
.bv-page .bv-band { background: var(--bv-ground); }
.bv-page .bv-band-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 34px; align-items: center;
}
.bv-page .bv-band-pts {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr);
}
.bv-page .bv-band-pts li {
  margin: 0; display: flex; flex-direction: column; gap: 4px;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-left: 3px solid var(--bv-brand);
  border-radius: 8px; padding: 15px 16px;
}
.bv-page .bv-band-k {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--bv-ink);
}
.bv-page .bv-band-v { color: var(--bv-muted); font-size: 14.5px; }

/* ----------------------------------------------------------- HOW TO BUY */
.bv-page .bv-buy-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start;
}
.bv-page .bv-fee { margin: 0 0 18px; color: var(--bv-ink); font-size: 17px; font-weight: 600; }
.bv-page .bv-fee span { color: #ff5252; }
.bv-page .bv-steps { list-style: none; margin: 0; padding: 0; counter-reset: bvstep; display: grid; gap: 12px; }
.bv-page .bv-steps li {
  counter-increment: bvstep; margin: 0; position: relative;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 8px;
  padding: 14px 16px 14px 58px; color: var(--bv-muted); font-size: 14.5px;
}
.bv-page .bv-steps li::before {
  content: counter(bvstep); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bv-brand); color: #ffffff; font-weight: 700; font-size: 14px;
}
.bv-page .bv-steps strong { color: var(--bv-ink); }
.bv-page .bv-assure { display: grid; gap: 12px; }
.bv-page .bv-assure p {
  margin: 0; display: flex; gap: 14px; align-items: flex-start;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 8px;
  padding: 16px; color: var(--bv-muted); font-size: 14.5px;
}
.bv-page .bv-assure b { display: block; color: var(--bv-ink); font-size: 15.5px; margin-bottom: 2px; }
.bv-page .bv-assure .bv-ico { font-size: 19px; }

/* --------------------------------------------------------- VIP+ GROUPS */
.bv-page .bv-groups { columns: 2; column-gap: 18px; margin-top: 22px; }
.bv-page .bv-group {
  break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 18px;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 10px; padding: 18px 18px 8px;
}
.bv-page .bv-group-t {
  margin: 0 0 10px; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--bv-brand);
}
.bv-page .bv-list { list-style: none; margin: 0; padding: 0; }
.bv-page .bv-list li { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.bv-page .bv-list .bv-ico { width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
.bv-page .bv-list-tx { display: flex; flex-direction: column; line-height: 1.35; }
.bv-page .bv-list-tx b { color: var(--bv-ink); font-size: 15px; font-weight: 600; }
.bv-page .bv-list-tx span { color: var(--bv-muted); font-size: 13.5px; }

/* ------------------------------------------------------ VIP vs VIP+ TABLE */
.bv-page .bv-cmp {
  max-width: 760px; margin: 22px auto 0; background: var(--bv-panel);
  border: 1px solid var(--bv-line); border-radius: 10px; overflow: hidden;
}
.bv-page .bv-cmp-head,
.bv-page .bv-cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; align-items: center;
}
.bv-page .bv-cmp-head > span {
  padding: 12px 14px; text-align: center; font-weight: 700; font-size: 14px; color: var(--bv-ink);
}
.bv-page .bv-cmp-head > span:first-child { text-align: left; }
.bv-page .bv-cmp-head .bv-cmp-plus { background: var(--bv-brand); color: #ffffff; }
.bv-page .bv-cmp-grp {
  padding: 16px 14px 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--bv-brand); border-top: 1px solid var(--bv-line);
}
.bv-page .bv-cmp-row { border-top: 1px solid var(--bv-line); }
.bv-page .bv-cmp-k {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--bv-ink); font-size: 14.5px;
}
.bv-page .bv-cmp-k i { font-style: normal; width: 22px; text-align: center; flex: 0 0 auto; }
.bv-page .bv-cmp-v {
  padding: 10px 8px; text-align: center; color: var(--bv-muted); font-size: 13.5px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.bv-page .bv-cmp-v.bv-cmp-plus { background: var(--bv-brand-soft); color: var(--bv-ink); }
.bv-page .bv-cmp-v b { color: var(--bv-ink); font-weight: 700; }
.bv-page .bv-yes svg { width: 20px; height: 20px; display: block; fill: none; stroke: #ff5252; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bv-page .bv-cmp-v:not(.bv-cmp-plus) .bv-yes svg { stroke: #9a9aa6; }
.bv-page .bv-no { color: #55555f; }
.bv-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ----------------------------------------------------------- SMALL PRINT */
.bv-page .bv-final {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 20px; align-items: center;
  background: var(--bv-panel); border: 1px solid var(--bv-line); border-radius: 10px;
  padding: 22px; margin-top: 18px;
}
.bv-page .bv-final .bv-ico { width: 52px; height: 52px; font-size: 26px; }
.bv-page .bv-points { list-style: none; margin: 0; padding: 0; }
.bv-page .bv-points li {
  position: relative; padding-left: 18px; margin-bottom: 9px; color: var(--bv-muted); font-size: 14.5px;
}
.bv-page .bv-points li:last-child { margin-bottom: 0; }
.bv-page .bv-points li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bv-brand);
}
.bv-page .bv-points strong { color: var(--bv-ink); }
.bv-page .bv-final-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.bv-page .bv-btn {
  display: inline-block; background: var(--bv-brand); color: #ffffff; border-radius: 6px;
  padding: 12px 24px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.bv-page .bv-btn:hover, .bv-page .bv-btn:focus { background: var(--bv-brand-deep); color: #ffffff; }
.bv-page .bv-cta-alt { color: var(--bv-muted); font-size: 14px; text-decoration: none; white-space: nowrap; }

/* ---------------------------------------------------------------- NARROW */
@media (max-width: 980px) {
  .bv-page .bv-cards { grid-template-columns: repeat(2, 1fr); }
  .bv-page .bv-band-grid,
  .bv-page .bv-buy-grid { grid-template-columns: 1fr; }
  .bv-page .bv-intro-grid { grid-template-columns: 280px 1fr; gap: 24px; }
  .bv-page .bv-neon-plus { font-size: 72px; }
}
@media (max-width: 700px) {
  .bv-page section { padding: 34px 0; }
  .bv-page .bv-wrap { padding: 0 16px; }
  .bv-page .bv-intro-grid { grid-template-columns: 1fr; text-align: center; }
  .bv-page .bv-intro-art { max-width: 320px; margin: 0 auto; }
  .bv-page .bv-neon-plus { font-size: 70px; }
  .bv-page .bv-chips { justify-content: center; }
  .bv-page .bv-cards,
  .bv-page .bv-band-pts { grid-template-columns: 1fr; }
  .bv-page .bv-feat.is-wide { grid-column: auto; }
  .bv-page .bv-groups { columns: 1; }
  .bv-page .bv-final { grid-template-columns: 1fr; text-align: center; }
  .bv-page .bv-final .bv-ico { margin: 0 auto; }
  .bv-page .bv-points { text-align: left; }
  .bv-page .bv-title { font-size: 25px; }
  .bv-page .bv-sect-title { font-size: 21px; }
  .bv-page .bv-band-title { font-size: 28px; }
  .bv-page .bv-tab { padding: 9px 18px; }
  .bv-page .bv-cmp-head,
  .bv-page .bv-cmp-row { grid-template-columns: minmax(0, 1fr) 76px 84px; }
  .bv-page .bv-cmp-k { padding: 10px 10px; font-size: 14px; }
  .bv-page .bv-cmp-v { font-size: 12.5px; padding: 8px 4px; }
}

/* ---- VIP+ videos [2026-10-08] ---- */
.bv-vids{padding:56px 0}
.bv-vid-row{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,62%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
@media (min-width:700px){ .bv-vid-row{grid-auto-columns:minmax(200px,30%)} }
@media (min-width:1040px){ .bv-vid-row{grid-auto-flow:row; grid-template-columns:repeat(5,1fr); overflow:visible} }
.bv-vid{margin:0; scroll-snap-align:start; min-width:0}
.bv-vid video{display:block; width:100%; height:auto; aspect-ratio:9/16; background:#000; border-radius:14px; border:1px solid var(--bv-line); object-fit:cover}
.bv-vid-box{position:relative; cursor:pointer}
.bv-vid-box.is-on{cursor:auto}
.bv-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--bv-brand); box-shadow:0 6px 18px rgba(216,8,8,.45); display:flex; align-items:center; justify-content:center; transition:transform .15s ease, background .15s ease}
.bv-play svg{width:26px; height:26px; fill:#fff; margin-left:3px}
.bv-vid-box:hover .bv-play, .bv-play:focus-visible{transform:translate(-50%,-50%) scale(1.08); background:var(--bv-brand-deep)}
.bv-play:focus-visible{outline:3px solid #fff; outline-offset:2px}
.bv-vid-box.is-on .bv-play{display:none}
.bv-vid figcaption{margin-top:9px; line-height:1.3}
.bv-vid figcaption b{display:block; color:var(--bv-ink); font-size:15px}
.bv-vid figcaption span{display:block; color:var(--bv-muted); font-size:13px}