/* ────── newsletter.css ────── */

/* Container */
#newsletter-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;                    /* ↑ Made it a bit wider */
  background: #ffffff;
  border: 1px solid rgba(212, 212, 255, 0.1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 8px;              /* slightly rounder corners */
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  z-index: 10000;
  display: none;                   /* start hidden until scroll triggers */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* When shown */
#newsletter-popup.visible {
  display: block;
  opacity: 1;
}

/* Header */
#newsletter-popup header {
  background: #2a2f4a;
  color: #ffffff;
  padding: 12px;
  font-size: 18px;                 /* slightly larger heading */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
}

/* Close button (×) */
#newsletter-popup header .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #9bf1ff;
  font-size: 20px;
  cursor: pointer;
}
#newsletter-popup header .close-btn:hover {
  color: #ffffff;
}

/* Content area */
#newsletter-popup .content {
  padding: 16px;
  font-size: 15px;
  color: #242943;
}
#newsletter-popup .content p {
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* Email input */
#newsletter-popup input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #9bf1ff;      /* make border stand out */
  border-radius: 4px;
  background: rgba(212, 212, 255, 0.05);
  color: #242943;
  box-sizing: border-box;
  font-size: 15px;
}

/* Placeholder color darker */
#newsletter-popup input::placeholder {
  color: #999;
}

/* Subscribe button */
#newsletter-popup button.subscribe-btn {
  width: 100%;
  display: block;           /* ensure it behaves like a block‐level element */
  text-align: center;       /* center text horizontally */
  padding: 10px 0;          /* top/bottom padding only, so the height is defined by padding */
  background: #ffffff;
  color: #242943;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  line-height: 1.2;         /* give it a normal line-height so text sits nicely */
  box-sizing: border-box;   /* include border in the overall height calculation */
}

/* Hover / Active states can stay as-is */
#newsletter-popup button.subscribe-btn:hover {
  background-color: #9bf1ff;
  color: #242943 !important;
}

#newsletter-popup button.subscribe-btn:active {
  background-color: #53e3fb;
  color: #242943 !important;
}


/* Optional: fade-out when hiding */
#newsletter-popup.hide {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}