/* =========================================================
   Email Nudge (compact, subtle, cross-site)
   ========================================================= */

.nudge{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(360px, calc(100vw - 36px));
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  padding:12px;

  /* animation setup */
  opacity:0;
  transform:translateY(32px) scale(.97);
  pointer-events:none;

  /* slower fade */
  transition:opacity 3.9s ease;

  z-index:9999;
}

.nudge.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* =========================================================
   Your heading + subtext
   ========================================================= */

#emailNudge > h3{
  padding-right:44px;            /* room for X */
  font-size:16px;
  line-height:1.15;
  margin:0 44px 4px 0;
  font-weight:650;
}

#emailNudge > p{
  font-size:13px;
  line-height:1.25;
  margin:0 0 8px 0;
  opacity:.85;
}

/* =========================================================
   Close button
   ========================================================= */

.nudge__close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:rgba(0,0,0,.65);
  z-index:2;
}

.nudge__close:hover{
  background:#fff;
  color:rgba(0,0,0,.9);
  border-color:rgba(0,0,0,.2);
}

/* =========================================================
   MailerLite embed (nudge-only)
   Goal: keep it compact and consistent with your UI
   ========================================================= */

/* Reduce / remove MailerLite internal padding + margins that create tall boxes */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedBody,
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-successBody{
  padding:0 !important;
}

#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedContent{
  margin:0 !important;
  padding:0 !important;
}

/* Hide MailerLite title/description block inside embed (you already have your own) */
#emailNudge .ml-embedded .ml-form-embedContent > h4,
#emailNudge .ml-embedded .ml-form-embedContent > p{
  display:none !important;
}

/* Remove MailerLite wrapper look (your nudge already has styling) */
#emailNudge .ml-embedded .ml-form-embedWrapper{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Tighten spacing around submit block */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit{
  margin:8px 0 0 0 !important;
}

/* Input + button styling inside embed */
#emailNudge .ml-embedded input[type="email"]{
  width:100% !important;
  padding:10px 12px !important;
  border:1px solid #ccc !important;
  border-radius:10px !important;
  font-size:15px !important;
  box-sizing:border-box !important;
}

#emailNudge .ml-embedded button[type="submit"],
#emailNudge .ml-embedded .ml-form-embedSubmit button{
  margin-top:8px !important;
  width:100% !important;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:10px !important;
  cursor:pointer !important;
  font-size:15px !important;
}

/* Hide MailerLite privacy block (use your own reliable privacy line instead) */
#emailNudge .ml-embedded .ml-form-embedPermissions{
  display:none !important;
}

/* If reCAPTCHA ever gets injected again due to caching/account settings, collapse it */
#emailNudge .ml-embedded .ml-form-recaptcha{
  max-height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   Your custom privacy line (clickable, consistent)
   ========================================================= */

#emailNudge .nudge__privacy{
  margin-top:8px !important;
  font-size:12px !important;
  line-height:16px !important;
  color:rgba(0,0,0,.65) !important;
  text-align:left !important;
}

#emailNudge .nudge__privacy a{
  color:inherit !important;
  text-decoration:underline;
}

#emailNudge .nudge__privacy a:hover{
  text-decoration:none;
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .nudge{
    transform:none !important;
    transition:opacity .15s linear !important;
  }
}
/* Hide MailerLite’s built-in success message inside the nudge */
#emailNudge .ml-embedded .ml-form-successBody{
  display:none !important;
}

/* Our own “confirm your email” message */
#emailNudge .nudge__confirm{
  margin:8px 0 0 0 !important;
  font-size:12px !important;
  line-height:16px !important;
  color:rgba(0,0,0,.65) !important;
}
/* ============================================
   Fix extra vertical gap between input + button
   (MailerLite adds margins/padding by default)
   ============================================ */

/* Remove the big padding inside the embedded body */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedBody{
  padding: 0 !important;
}

/* Tighten the field row spacing */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-fieldRow{
  margin: 0 0 6px 0 !important;
}

/* Tighten the overall form content spacing */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-formContent{
  margin: 0 !important;
}

/* Tighten submit area spacing */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedSubmit{
  margin: 6px 0 0 0 !important;
}

/* Remove any default bottom margin MailerLite puts on the input itself */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer input[type="email"]{
  margin: 0 !important;
}
/* ============================================
   After-submit UX fixes (double opt-in)
   - Hide MailerLite "Thank you" block (misleading)
   - Remove extra vertical padding/margins
   - Make "Almost done" stand out
   ============================================ */

/* 1) Hide MailerLite success message inside the nudge */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-successBody{
  display: none !important;
}

/* 2) Remove any remaining extra spacing around the embedded container */
#emailNudge .ml-embedded,
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer,
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedWrapper{
  margin: 0 !important;
  padding: 0 !important;
}

/* If MailerLite leaves the form body hidden, don't let it reserve space */
#emailNudge .ml-embedded [id^="mlb2-"].ml-form-embedContainer .ml-form-embedBody[style*="display: none"]{
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Tight + clear confirmation line */
#emailNudge .nudge__confirm{
  margin: 8px 0 6px 0 !important;  /* kills the big gap */
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  color: #0a3d0a !important;       /* readable “success” green */
  background: rgba(16, 185, 129, .14) !important;
  border: 1px solid rgba(16, 185, 129, .25) !important;
}

/* Optional: make it even more “noticeable” without being loud */
#emailNudge .nudge__confirm::before{
  content: "✓ ";
}
/* When submitted, hide the MailerLite embed entirely */
#emailNudge.is-submitted .ml-embedded{
  display: none !important;
}