/* ═══════════════════════════════════════════════════════════════
   VSS OPT-IN  ::  shared modal + inline lead-capture component
   Vantage Strategic Systems · exitblueprint.io
   Single source of truth for every MODULE ZERO capture surface.
   Paired with assets/js/vss-optin.js
   ═══════════════════════════════════════════════════════════════ */

.vss-optin{
  --vo-green: var(--green, #1fff93);
  --vo-bg:    var(--bg2, #0f1319);
  --vo-line:  var(--card-border, rgba(255,255,255,0.08));
  --vo-muted: var(--muted, rgba(255,255,255,0.55));
  --vo-mute2: var(--muted2, rgba(255,255,255,0.35));
  --vo-ease:  cubic-bezier(0.16,1,0.3,1);
  --vo-err:   #ff5c5c;
}

/* ───────────── Layer 1 · Backdrop ───────────── */

.vss-optin-backdrop{
  position:fixed; inset:0;
  z-index:2147483640;
  background:rgba(4,6,9,0.74);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
  opacity:0; visibility:hidden;
  transition:opacity .32s var(--vo-ease), visibility 0s linear .32s;
}
.vss-optin-backdrop.is-open{
  opacity:1; visibility:visible;
  transition:opacity .32s var(--vo-ease), visibility 0s linear 0s;
}

/* ───────────── Layer 2 · Dialog shell ───────────── */

.vss-optin-shell{
  position:fixed; inset:0;
  z-index:2147483641;
  display:flex; align-items:center; justify-content:center;
  padding:24px 20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  visibility:hidden;
  pointer-events:none;
}
.vss-optin-shell.is-open{ visibility:visible; pointer-events:auto; }

.vss-optin-dialog{
  position:relative;
  width:100%; max-width:530px;
  background:linear-gradient(163deg, #131a24 0%, #0b0e13 62%, #0a0d12 100%);
  border:1px solid rgba(31,255,147,0.16);
  border-radius:22px;
  box-shadow:
    0 48px 110px rgba(0,0,0,0.66),
    0 12px 32px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.05);
  padding:38px 36px 30px;
  opacity:0;
  transform:translateY(22px) scale(0.965);
  transition:opacity .3s var(--vo-ease), transform .44s var(--vo-ease);
  overflow:hidden;
}
.vss-optin-shell.is-open .vss-optin-dialog{
  opacity:1; transform:translateY(0) scale(1);
}

/* hairline gradient rule along the top edge, matches .green-divider */
.vss-optin-dialog::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--vo-green),transparent);
  opacity:.85;
}
/* soft green bloom behind the header */
.vss-optin-dialog::after{
  content:''; position:absolute; top:-140px; left:50%;
  width:420px; height:280px; margin-left:-210px;
  background:radial-gradient(ellipse at center, rgba(31,255,147,0.13), transparent 68%);
  pointer-events:none;
}

.vss-optin-dialog > *{ position:relative; z-index:1; }

/* ───────────── Close ───────────── */

.vss-optin-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vo-line);
  border-radius:11px;
  color:var(--vo-mute2);
  cursor:pointer;
  transition:color .2s var(--vo-ease), border-color .2s var(--vo-ease),
             background .2s var(--vo-ease), transform .2s var(--vo-ease);
}
@media(hover:hover){
  .vss-optin-close:hover{
    color:var(--vo-green);
    border-color:rgba(31,255,147,0.4);
    background:rgba(31,255,147,0.07);
    transform:rotate(90deg);
  }
}
.vss-optin-close:active{ transform:scale(0.92); }

/* ───────────── Header ───────────── */

.vss-optin-eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--vo-green);
  display:flex; align-items:center; gap:9px;
  margin-bottom:15px;
}
.vss-optin-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--vo-green); box-shadow:0 0 9px var(--vo-green);
  flex:none;
  animation:vssOptinPulse 2.4s ease-in-out infinite;
}
@keyframes vssOptinPulse{
  0%,100%{ opacity:1;   transform:scale(1); }
  50%    { opacity:.45; transform:scale(0.82); }
}

.vss-optin-title{
  font-family:'Poppins',sans-serif;
  font-weight:900; line-height:1.1;
  font-size:clamp(25px, 5.4vw, 33px);
  letter-spacing:-0.5px;
  color:#fff;
  margin-bottom:12px;
}
.vss-optin-title .vo-g{ color:var(--vo-green); }

.vss-optin-sub{
  font-size:14.5px; line-height:1.62;
  color:var(--vo-muted);
  margin-bottom:22px;
}

/* ───────────── Benefit rows ───────────── */

.vss-optin-perks{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.vss-optin-perks li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; line-height:1.5;
  color:rgba(255,255,255,0.78);
}
.vss-optin-perks li svg{
  flex:none; width:15px; height:15px; margin-top:3px;
  color:var(--vo-green);
}

/* ───────────── Form ───────────── */

.vss-optin-form{ display:flex; flex-direction:column; gap:14px; }

.vss-optin-field{ position:relative; }

.vss-optin-input{
  width:100%;
  padding:16px 18px;
  background:rgba(255,255,255,0.035);
  border:1px solid var(--vo-line);
  border-radius:13px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:15px; font-weight:500;
  letter-spacing:0.3px;
  transition:border-color .22s var(--vo-ease), background .22s var(--vo-ease),
             box-shadow .22s var(--vo-ease);
  -webkit-appearance:none; appearance:none;
}
.vss-optin-input::placeholder{ color:var(--vo-mute2); letter-spacing:1px; }
.vss-optin-input:focus{
  outline:none;
  border-color:rgba(31,255,147,0.55);
  background:rgba(31,255,147,0.04);
  box-shadow:0 0 0 3px rgba(31,255,147,0.12);
}
.vss-optin-input.has-error{
  border-color:var(--vo-err);
  box-shadow:0 0 0 3px rgba(255,92,92,0.13);
}

/* ───────────── Consent blocks ───────────── */

.vss-optin-consents{
  display:flex; flex-direction:column; gap:12px;
  margin:4px 0 2px;
}

.vss-optin-consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:13px 14px;
  background:rgba(255,255,255,0.022);
  border:1px solid var(--vo-line);
  border-radius:13px;
  transition:border-color .22s var(--vo-ease), background .22s var(--vo-ease);
}
/* the optional block is allowed to look inviting, never louder than required */
.vss-optin-consent[data-kind="marketing"]{
  background:rgba(31,255,147,0.028);
  border-color:rgba(31,255,147,0.14);
}
.vss-optin-consent.is-checked{ border-color:rgba(31,255,147,0.38); }
.vss-optin-consent.has-error{
  border-color:var(--vo-err);
  background:rgba(255,92,92,0.05);
  animation:vssOptinShake .38s var(--vo-ease);
}
@keyframes vssOptinShake{
  0%,100%{ transform:translateX(0); }
  22%    { transform:translateX(-5px); }
  55%    { transform:translateX(4px); }
  80%    { transform:translateX(-2px); }
}

.vss-optin-box{
  flex:none;
  width:21px; height:21px; margin-top:1px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.22);
  border-radius:6px;
  cursor:pointer;
  position:relative;
  -webkit-appearance:none; appearance:none;
  transition:background .2s var(--vo-ease), border-color .2s var(--vo-ease);
}
.vss-optin-box::after{
  content:''; position:absolute;
  left:6.5px; top:2.5px; width:5px; height:10px;
  border:solid #05070a; border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg) scale(0.4);
  opacity:0;
  transition:opacity .16s var(--vo-ease), transform .22s var(--vo-ease);
}
.vss-optin-box:checked{
  background:var(--vo-green);
  border-color:var(--vo-green);
}
.vss-optin-box:checked::after{ opacity:1; transform:rotate(45deg) scale(1); }
.vss-optin-box:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(31,255,147,0.28);
}
@media(hover:hover){
  .vss-optin-box:hover{ border-color:rgba(31,255,147,0.5); }
}

.vss-optin-copy{ min-width:0; }

.vss-optin-chip{
  display:inline-block;
  font-family:'Poppins',sans-serif;
  font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 7px;
  border-radius:5px;
  margin-right:7px;
  vertical-align:1px;
  white-space:nowrap;
}
.vss-optin-chip.req{
  color:var(--vo-mute2);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}
.vss-optin-chip.opt{
  color:var(--vo-green);
  background:rgba(31,255,147,0.09);
  border:1px solid rgba(31,255,147,0.28);
}

.vss-optin-consent label{
  display:block;
  font-size:13px; line-height:1.55;
  color:rgba(255,255,255,0.8);
  cursor:pointer;
}
.vss-optin-consent[data-kind="marketing"] label strong{
  color:#fff; font-weight:700;
}
.vss-optin-note{
  display:block;
  margin-top:5px;
  font-size:11.5px; line-height:1.5;
  color:var(--vo-mute2);
}
.vss-optin-consent a{
  color:var(--vo-green);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
@media(hover:hover){ .vss-optin-consent a:hover{ text-decoration-thickness:2px; } }

/* ───────────── Submit ───────────── */

.vss-optin-submit{
  position:relative;
  width:100%;
  margin-top:4px;
  padding:17px 22px;
  background:var(--vo-green);
  color:#05070a;
  border:none; border-radius:13px;
  font-family:'Poppins',sans-serif;
  font-size:14px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s var(--vo-ease), box-shadow .25s var(--vo-ease),
             opacity .2s var(--vo-ease);
  box-shadow:0 10px 30px rgba(31,255,147,0.2);
}
.vss-optin-submit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.45) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .7s var(--vo-ease);
}
@media(hover:hover){
  .vss-optin-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 42px rgba(31,255,147,0.32);
  }
  .vss-optin-submit:hover::after{ transform:translateX(120%); }
}
.vss-optin-submit:active{ transform:translateY(0) scale(0.985); }
.vss-optin-submit:disabled{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}
.vss-optin-submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(31,255,147,0.3), 0 10px 30px rgba(31,255,147,0.2);
}

/* ───────────── Error line (screen-reader live region) ───────────── */

.vss-optin-alert{
  font-size:12px; line-height:1.5;
  color:var(--vo-err);
  min-height:0;
}
.vss-optin-alert:empty{ display:none; }

/* ───────────── Legal footer ───────────── */

.vss-optin-legal{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--vo-line);
  font-size:11px; line-height:1.6;
  color:var(--vo-mute2);
}
.vss-optin-legal a{
  color:var(--vo-muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(hover:hover){ .vss-optin-legal a:hover{ color:var(--vo-green); } }

/* ───────────── Success state ───────────── */

.vss-optin-done{
  display:none;
  text-align:center;
  padding:8px 0 6px;
}
.vss-optin.is-done .vss-optin-done{
  display:block;
  animation:vssOptinRise .5s var(--vo-ease) both;
}
.vss-optin.is-done .vss-optin-body{ display:none; }

@keyframes vssOptinRise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

.vss-optin-done-icon{
  width:62px; height:62px;
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,255,147,0.09);
  border:1px solid rgba(31,255,147,0.3);
  border-radius:18px;
  color:var(--vo-green);
}
.vss-optin-done-icon svg{ width:29px; height:29px; }

.vss-optin-done-title{
  font-family:'Poppins',sans-serif;
  font-size:22px; font-weight:900; letter-spacing:-0.3px;
  color:#fff;
  margin-bottom:11px;
}
.vss-optin-done-text{
  font-size:14px; line-height:1.65;
  color:var(--vo-muted);
  max-width:380px; margin:0 auto 16px;
}
.vss-optin-done-text strong{ color:#fff; }
.vss-optin-done-meta{
  font-size:11.5px; letter-spacing:1.1px; text-transform:uppercase;
  font-family:'Poppins',sans-serif; font-weight:600;
  color:var(--vo-mute2);
}

/* ═══════════════ INLINE VARIANT ═══════════════ */

.vss-optin.is-inline{
  display:block;
  max-width:560px;
  margin:0 auto;
  text-align:left;
}
.vss-optin.is-inline .vss-optin-eyebrow,
.vss-optin.is-inline .vss-optin-title,
.vss-optin.is-inline .vss-optin-sub,
.vss-optin.is-inline .vss-optin-perks{ display:none; }

.vss-optin.is-inline .vss-optin-done{
  padding:26px 22px;
  background:rgba(31,255,147,0.04);
  border:1px solid rgba(31,255,147,0.22);
  border-radius:18px;
}

/* ═══════════════ RESPONSIVE ═══════════════ */

@media(max-width:600px){
  .vss-optin-shell{
    padding:0;
    align-items:flex-end;
  }
  .vss-optin-dialog{
    max-width:none;
    border-radius:24px 24px 0 0;
    border-bottom:none;
    padding:30px 22px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:94vh;
    max-height:94dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(38px);
  }
  .vss-optin-shell.is-open .vss-optin-dialog{ transform:translateY(0); }

  /* grab handle: signals "drag/dismiss" affordance on the sheet */
  .vss-optin-dialog::before{
    top:9px; left:50%; right:auto;
    width:38px; height:4px; margin-left:-19px;
    border-radius:2px;
    background:rgba(255,255,255,0.18);
  }
  .vss-optin-close{ top:16px; right:12px; width:34px; height:34px; }
  .vss-optin-eyebrow{ margin-top:12px; }
  .vss-optin-title{ padding-right:38px; }
  .vss-optin-perks{ margin-bottom:22px; }
  .vss-optin-input{ font-size:16px; } /* ≥16px stops iOS Safari zoom-on-focus */
  .vss-optin-consent{ padding:12px; gap:11px; }
  .vss-optin-submit{ padding:16px 18px; font-size:13px; }
}

@media(max-width:380px){
  .vss-optin-dialog{ padding-left:17px; padding-right:17px; }
  .vss-optin-consent label{ font-size:12.5px; }
}

/* short viewports (landscape phones): centre and scroll rather than sheet */
@media(max-height:560px) and (min-width:601px){
  .vss-optin-shell{ align-items:flex-start; }
  .vss-optin-dialog{ padding-top:30px; padding-bottom:24px; }
}

/* ═══════════════ MOTION / CONTRAST PREFERENCES ═══════════════ */

@media(prefers-reduced-motion:reduce){
  .vss-optin-backdrop,
  .vss-optin-dialog,
  .vss-optin-submit,
  .vss-optin-close,
  .vss-optin-box,
  .vss-optin-box::after{
    transition-duration:.01ms !important;
  }
  .vss-optin-dialog{ transform:none !important; }
  .vss-optin-shell.is-open .vss-optin-dialog{ transform:none !important; }
  .vss-optin-eyebrow::before{ animation:none; }
  .vss-optin-consent.has-error{ animation:none; }
  .vss-optin.is-done .vss-optin-done{ animation:none; }
  .vss-optin-submit::after{ display:none; }
}

@media(prefers-contrast:more){
  .vss-optin-consent{ border-color:rgba(255,255,255,0.32); }
  .vss-optin-box{ border-color:rgba(255,255,255,0.55); }
  .vss-optin-sub,
  .vss-optin-legal{ color:rgba(255,255,255,0.75); }
}

/* ═══════════════ COOKIE-BANNER COEXISTENCE ═══════════════ */
/* While the opt-in dialog is open the cookie bar is parked, so the two
   overlays never stack. vss-optin.js restores it on close. */
body.vss-optin-open #vss-cookie-banner{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(100%) !important;
  pointer-events:none !important;
}
body.vss-optin-open{ overflow:hidden; }