/* ═══════════════════════════════════════════════════════════
   Vedamaxx Newsletter v3.1 — Popup CSS
   NEW: Stack Finder quiz + Footer lead form styles
   Kept: overlay/modal shell + admin helpers + toast
═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --vmn-green:   #1B4332;
  --vmn-gold:    #C9A84C;
  --vmn-gold2:   #F0C060;
  --vmn-light:   #F4F7F2;
  --vmn-white:   #FFFFFF;
  --vmn-text:    #1A2E20;
  --vmn-muted:   #6B7F70;
  --vmn-border:  rgba(27,67,50,0.12);
  --vmn-radius:  16px;
  --vmn-radius-sm: 10px;
  --vmn-shadow:  0 20px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.1);
  --vmn-ff: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vmn-fh: Georgia, 'Times New Roman', serif;
}

/* ── OVERLAY ────────────────────────────────────────────── */
#vmn-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#vmn-overlay.vmn-open {
  display: flex;
  animation: vmnFadeIn .28s ease;
}
@keyframes vmnFadeIn { from{opacity:0} to{opacity:1} }

/* ── MODAL SHELL ────────────────────────────────────────── */
#vmn-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--vmn-white);
  border-radius: 24px;
  box-shadow: var(--vmn-shadow);
  animation: vmnSlideUp .34s cubic-bezier(.22,.9,.36,1);
  scrollbar-width: thin;
  scrollbar-color: var(--vmn-gold) transparent;
}
#vmn-modal::-webkit-scrollbar { width:4px; }
#vmn-modal::-webkit-scrollbar-thumb { background:var(--vmn-gold); border-radius:4px; }
@keyframes vmnSlideUp {
  from { opacity:0; transform: translateY(32px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)    scale(1);    }
}

/* ── CLOSE BUTTON ────────────────────────────────────────── */
#vmn-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px 0 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.08);
  color: #555;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background .2s;
}
#vmn-close:hover { background: rgba(0,0,0,0.16); }

/* ── TOAST ───────────────────────────────────────────────── */
#vmn-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--vmn-green);
  color: var(--vmn-white);
  padding: 10px 22px;
  border-radius: 99px;
  font-size: .9rem;
  font-family: var(--vmn-ff);
  z-index: 9999999;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
  white-space: nowrap;
}
#vmn-toast.vmn-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════
   STACK INTRO SCREEN
══════════════════════════════════════════════════════════ */
.vmn-stack-intro {
  padding: 32px 28px 28px;
  text-align: center;
  background: linear-gradient(160deg, #f8fff6 0%, #fff 100%);
}
.vmn-si-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--vmn-green), #2D6A4F);
  color: var(--vmn-white);
  font-size: .72rem;
  font-family: var(--vmn-ff);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.vmn-si-headline {
  font-family: var(--vmn-fh);
  font-size: 1.85rem;
  color: var(--vmn-text);
  line-height: 1.25;
  margin-bottom: 12px;
}
.vmn-si-headline em {
  color: var(--vmn-green);
  font-style: italic;
}
.vmn-si-sub {
  font-family: var(--vmn-ff);
  font-size: .92rem;
  color: var(--vmn-muted);
  line-height: 1.55;
  margin-bottom: 20px;
}
.vmn-si-sub strong { color: var(--vmn-green); }

/* Pill row */
.vmn-si-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.vmn-pill {
  background: rgba(27,67,50,0.07);
  color: var(--vmn-green);
  font-family: var(--vmn-ff);
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(27,67,50,0.15);
}

/* Start button */
.vmn-si-start {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--vmn-green) 0%, #2D6A4F 100%);
  color: var(--vmn-white);
  font-family: var(--vmn-ff);
  font-size: 1.05rem;
  font-weight: 700;
  border: none; border-radius: var(--vmn-radius);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(27,67,50,0.35);
  transition: transform .18s, box-shadow .18s;
  margin-bottom: 18px;
}
.vmn-si-start:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(27,67,50,0.45); }
.vmn-si-start:active { transform: translateY(0); }

/* Social proof */
.vmn-si-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--vmn-ff); font-size: .8rem; color: var(--vmn-muted);
}
.vmn-si-avs {
  display: flex;
}
.vmn-si-avs span {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vmn-green), var(--vmn-gold));
  color: var(--vmn-white);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  border: 2px solid var(--vmn-white);
  margin-left: -8px;
}
.vmn-si-avs span:first-child { margin-left: 0; }

/* ══════════════════════════════════════════════════════════
   STACK QUESTION SCREEN
══════════════════════════════════════════════════════════ */
.vmn-stack-quiz {
  padding: 24px 24px 28px;
}

/* Progress bars */
.vmn-sq-progress {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.vmn-sq-bars {
  display: flex; gap: 5px; flex: 1;
}
.vmn-sq-bar {
  flex: 1; height: 5px; border-radius: 99px;
  background: var(--vmn-border);
  transition: background .3s;
}
.vmn-sq-bar.done   { background: var(--vmn-green); }
.vmn-sq-bar.active { background: var(--vmn-gold); animation: vmnPulseBar 1.2s infinite; }
@keyframes vmnPulseBar {
  0%,100% { opacity:1; } 50% { opacity:.6; }
}
.vmn-sq-step {
  font-family: var(--vmn-ff);
  font-size: .75rem;
  font-weight: 700;
  color: var(--vmn-muted);
  white-space: nowrap;
}

/* Question */
.vmn-sq-qicon {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 12px;
  animation: vmnPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vmnPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
.vmn-sq-qtext {
  font-family: var(--vmn-fh);
  font-size: 1.35rem;
  color: var(--vmn-text);
  text-align: center;
  line-height: 1.35;
  margin-bottom: 22px;
}

/* Option grid — 2x2 */
.vmn-sq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vmn-sq-opt {
  padding: 18px 12px 16px;
  border: 2px solid var(--vmn-border);
  border-radius: var(--vmn-radius);
  background: var(--vmn-white);
  cursor: pointer;
  text-align: center;
  transition: all .18s ease;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.vmn-sq-opt::before {
  content: '';
  position: absolute; inset:0;
  background: linear-gradient(135deg, rgba(27,67,50,0.04), transparent);
  opacity:0; transition: opacity .18s;
}
.vmn-sq-opt:hover { border-color: var(--vmn-green); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(27,67,50,0.12); }
.vmn-sq-opt:hover::before { opacity:1; }
.vmn-sq-opt.vmn-sq-sel {
  border-color: var(--vmn-green);
  background: linear-gradient(135deg, #EBF4F0, #F5FAF7);
  box-shadow: 0 0 0 3px rgba(27,67,50,0.12), 0 6px 18px rgba(27,67,50,0.15);
}
.vmn-sq-opt-em {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
}
.vmn-sq-opt-lbl {
  font-family: var(--vmn-ff);
  font-size: .84rem;
  font-weight: 600;
  color: var(--vmn-text);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════
   LEAD FORM SCREEN (after quiz)
══════════════════════════════════════════════════════════ */
.vmn-stack-lead {
  padding: 28px 24px;
}
.vmn-sl-top {
  text-align: center;
  margin-bottom: 24px;
}
.vmn-sl-check {
  font-size: 2.4rem;
  margin-bottom: 10px;
  animation: vmnPop .4s cubic-bezier(.34,1.56,.64,1);
}
.vmn-sl-title {
  font-family: var(--vmn-fh);
  font-size: 1.5rem;
  color: var(--vmn-text);
  margin-bottom: 8px;
}
.vmn-sl-sub {
  font-family: var(--vmn-ff);
  font-size: .88rem;
  color: var(--vmn-muted);
  line-height: 1.5;
}
.vmn-sl-sub strong { color: var(--vmn-green); }

.vmn-sl-form { display: flex; flex-direction: column; gap: 12px; }
.vmn-sl-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.vmn-sl-form input, .vmn-sl-form select {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px;
  border: 1.5px solid var(--vmn-border);
  border-radius: var(--vmn-radius-sm);
  font-family: var(--vmn-ff); font-size: .9rem;
  color: var(--vmn-text);
  background: var(--vmn-white);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.vmn-sl-form input:focus {
  border-color: var(--vmn-green);
  box-shadow: 0 0 0 3px rgba(27,67,50,0.1);
}
.vmn-sl-btn {
  padding: 15px;
  background: linear-gradient(135deg, var(--vmn-green), #2D6A4F);
  color: var(--vmn-white);
  font-family: var(--vmn-ff); font-size: .97rem; font-weight: 700;
  border: none; border-radius: var(--vmn-radius);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(27,67,50,0.3);
  transition: transform .18s, box-shadow .18s;
}
.vmn-sl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27,67,50,0.38); }
.vmn-sl-skip {
  background: none; border: none;
  color: var(--vmn-muted); font-family: var(--vmn-ff); font-size: .82rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  padding: 4px 0;
  transition: color .2s;
}
.vmn-sl-skip:hover { color: var(--vmn-text); }
.vmn-sl-trust {
  font-family: var(--vmn-ff); font-size: .76rem; color: var(--vmn-muted);
  text-align: center; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════════════════════ */
.vmn-stack-loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 52px 28px 56px;
  text-align: center;
}
.vmn-stl-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(27,67,50,0.12);
  border-top-color: var(--vmn-green);
  animation: vmnSpin 1s linear infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 24px;
}
@keyframes vmnSpin { to { transform: rotate(360deg); } }
.vmn-stl-title {
  font-family: var(--vmn-fh);
  font-size: 1.3rem; color: var(--vmn-text); line-height:1.3; margin-bottom:14px;
}
.vmn-stl-step {
  font-family: var(--vmn-ff); font-size: .85rem; color: var(--vmn-muted);
  margin-bottom: 20px; min-height: 20px;
}
.vmn-stl-dots { display: flex; gap: 7px; }
.vmn-stl-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--vmn-green);
  animation: vmnDot 1.2s infinite ease-in-out;
}
.vmn-stl-dots span:nth-child(2) { animation-delay:.2s; }
.vmn-stl-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes vmnDot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ══════════════════════════════════════════════════════════
   RESULT SCREEN
══════════════════════════════════════════════════════════ */
.vmn-stack-result { overflow: hidden; }

.vmn-sr-hero {
  background: linear-gradient(145deg, var(--stack-color, var(--vmn-green)) 0%, color-mix(in srgb, var(--stack-color, var(--vmn-green)) 60%, #000) 100%);
  padding: 36px 28px 32px;
  text-align: center;
  color: var(--vmn-white);
  position: relative;
  overflow: hidden;
}
.vmn-sr-hero::before {
  content:'';
  position:absolute; top:-40%; right:-20%;
  width:300px; height:300px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  pointer-events:none;
}
.vmn-sr-congrats {
  font-family: var(--vmn-ff); font-size: .82rem; font-weight:600;
  letter-spacing:.5px; opacity:.85; margin-bottom:10px;
}
.vmn-sr-label {
  font-family: var(--vmn-fh);
  font-size: 1.5rem; line-height:1.2; margin-bottom:8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.vmn-sr-headline {
  font-family: var(--vmn-ff); font-size: .88rem; opacity:.88; line-height:1.45;
}

.vmn-sr-body { padding: 24px 22px 28px; }

.vmn-sr-desc {
  font-family: var(--vmn-ff); font-size: .88rem; color: var(--vmn-muted);
  line-height: 1.6; margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--vmn-light);
  border-radius: var(--vmn-radius-sm);
  border-left: 3px solid var(--vmn-green);
}
.vmn-sr-ptitle {
  font-family: var(--vmn-ff); font-size: .82rem; font-weight:700;
  color: var(--vmn-muted); text-transform:uppercase; letter-spacing:1px;
  margin-bottom: 12px;
}

/* Product cards */
.vmn-sr-prods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.vmn-sr-prod {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--vmn-border);
  border-radius: var(--vmn-radius-sm);
  background: var(--vmn-white);
  transition: border-color .2s, box-shadow .2s;
}
.vmn-sr-prod:hover {
  border-color: var(--vmn-green);
  box-shadow: 0 4px 14px rgba(27,67,50,0.1);
}
.vmn-sr-prod-em { font-size: 1.7rem; flex-shrink:0; }
.vmn-sr-prod-info { flex: 1; }
.vmn-sr-prod-name { font-family: var(--vmn-ff); font-size: .9rem; font-weight:700; color: var(--vmn-text); }
.vmn-sr-prod-ben  { font-family: var(--vmn-ff); font-size: .78rem; color: var(--vmn-muted); margin-top:2px; }
.vmn-sr-prod-price { font-family: var(--vmn-ff); font-size: .85rem; font-weight:700; color: var(--vmn-green); flex-shrink:0; }

/* Coupon block */
.vmn-sr-coupon {
  background: linear-gradient(135deg, var(--vmn-green) 0%, #2D6A4F 100%);
  border-radius: var(--vmn-radius);
  padding: 20px 22px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.vmn-sr-coupon::after {
  content:'';
  position:absolute; top:-30%; left:-10%;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,0.05);
  pointer-events:none;
}
.vmn-sr-coup-empty {
  background: linear-gradient(135deg, #4a5568, #2d3748);
}
.vmn-sr-coup-label {
  color: rgba(255,255,255,0.8);
  font-family: var(--vmn-ff); font-size: .8rem; font-weight:600;
  letter-spacing:.5px; margin-bottom: 10px;
}
.vmn-sr-coup-code {
  font-family: 'Courier New', monospace;
  font-size: 1.7rem; font-weight:900; letter-spacing:5px;
  color: var(--vmn-gold2);
  cursor: pointer;
  padding: 10px 18px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px; display:inline-block;
  border: 1.5px dashed rgba(201,168,76,0.5);
  transition: transform .15s, box-shadow .15s;
  user-select: all;
}
.vmn-sr-coup-code:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.vmn-sr-coup-hint {
  font-family: var(--vmn-ff); font-size: .75rem; color: rgba(255,255,255,0.65);
  margin-top: 8px;
}
.vmn-sr-coup-exp {
  font-family: var(--vmn-ff); font-size: .76rem; color: rgba(255,255,255,0.5);
  margin-top: 6px;
}

/* Action buttons */
.vmn-sr-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.vmn-sr-shop {
  display:flex; align-items:center; justify-content:center;
  padding: 13px 10px;
  background: linear-gradient(135deg, var(--vmn-green), #2D6A4F);
  color: var(--vmn-white);
  font-family: var(--vmn-ff); font-size: .88rem; font-weight:700;
  border-radius: var(--vmn-radius-sm);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(27,67,50,0.28);
}
.vmn-sr-shop:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(27,67,50,0.38); color:var(--vmn-white); }
.vmn-sr-wa {
  display:flex; align-items:center; justify-content:center;
  padding: 13px 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: var(--vmn-white);
  font-family: var(--vmn-ff); font-size: .88rem; font-weight:700;
  border-radius: var(--vmn-radius-sm);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(37,211,102,0.28);
}
.vmn-sr-wa:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,211,102,0.38); color:var(--vmn-white); }
.vmn-sr-retake {
  display:block; width:100%;
  background: none; border: 1.5px solid var(--vmn-border);
  color: var(--vmn-muted);
  font-family: var(--vmn-ff); font-size:.85rem;
  padding: 10px; border-radius: var(--vmn-radius-sm);
  cursor: pointer; transition: all .2s;
}
.vmn-sr-retake:hover { border-color: var(--vmn-green); color: var(--vmn-green); }

/* ══════════════════════════════════════════════════════════
   FOOTER LEAD CAPTURE FORM  [vmn_lead_form]
══════════════════════════════════════════════════════════ */
.vmn-footer-form-root {
  width: 100%;
}
.vmn-ff-wrap {
  background: linear-gradient(135deg, var(--vmn-green) 0%, #2D6A4F 100%);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  font-family: var(--vmn-ff);
  position: relative;
  overflow: hidden;
}
.vmn-ff-wrap::before {
  content:'';
  position:absolute; top:-60%; right:-20%;
  width:350px; height:350px; border-radius:50%;
  background:rgba(255,255,255,0.05); pointer-events:none;
}
.vmn-ff-headline {
  font-family: var(--vmn-fh);
  font-size: 1.4rem; color: var(--vmn-white); margin-bottom: 8px;
}
.vmn-ff-sub {
  font-size: .88rem; color: rgba(255,255,255,0.8);
  line-height: 1.5; margin-bottom: 20px;
}
.vmn-ff-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: stretch;
}
.vmn-ff-inp {
  flex: 1 1 160px; min-width: 140px; max-width: 220px;
  padding: 12px 16px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--vmn-radius-sm);
  background: rgba(255,255,255,0.12);
  color: var(--vmn-white);
  font-family: var(--vmn-ff); font-size: .88rem;
  outline: none;
  transition: border-color .2s, background .2s;
  backdrop-filter: blur(4px);
}
.vmn-ff-inp::placeholder { color: rgba(255,255,255,0.55); }
.vmn-ff-inp:focus {
  border-color: var(--vmn-gold);
  background: rgba(255,255,255,0.18);
}
.vmn-ff-btn {
  flex: 1 1 160px; min-width: 140px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--vmn-gold), #E8A020);
  color: #1A1A1A;
  font-family: var(--vmn-ff); font-size: .92rem; font-weight: 800;
  border: none; border-radius: var(--vmn-radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,0.4);
  transition: transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.vmn-ff-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.55); }
.vmn-ff-btn:disabled { opacity:.7; transform:none; cursor:not-allowed; }
.vmn-ff-msg {
  font-family: var(--vmn-ff); font-size: .88rem;
  margin-top: 14px; line-height: 1.55; text-align:center;
}
.vmn-ff-trust {
  font-size: .75rem; color: rgba(255,255,255,0.55);
  margin-top: 12px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #vmn-modal { border-radius: 20px 20px 0 0; max-height: 95vh; }
  #vmn-overlay { align-items: flex-end; padding: 0; }

  .vmn-si-headline { font-size: 1.55rem; }
  .vmn-sq-qtext    { font-size: 1.15rem; }
  .vmn-sr-label    { font-size: 1.25rem; }

  .vmn-sl-row { grid-template-columns: 1fr; }
  .vmn-sr-actions { grid-template-columns: 1fr; }

  .vmn-ff-wrap { border-radius: 14px; padding: 24px 18px; }
  .vmn-ff-inp  { max-width: 100%; flex-basis: 100%; }
  .vmn-ff-btn  { flex-basis: 100%; }
}

@media (max-width: 360px) {
  .vmn-sq-grid { grid-template-columns: 1fr; }
  .vmn-sq-opt  { padding: 14px 12px 12px; }
}