/* =========================================================
   v2.8.27 — Newsletter form matches waitlist form
   Scope: newsletter form styling only.
   ========================================================= */

/* Newsletter card: same visual rhythm as waitlist form */
.newsletter-card,
.newsletter-box,
section.newsletter,
.newsletter-section .card,
section:has(form[data-newsletter]),
section:has(#newsletter-form) {
  border: 1px solid #C7D7EE;
  border-radius: 28px;
  background: #FFFFFF;
}

/* Normalize newsletter form layout */
.newsletter-card form,
.newsletter-box form,
.newsletter-section form,
form.newsletter,
form[data-newsletter],
#newsletter-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Each field group should behave like waitlist fields */
.newsletter-card .form-group,
.newsletter-box .form-group,
.newsletter-section .form-group,
form.newsletter .form-group,
form[data-newsletter] .form-group,
#newsletter-form .form-group,
.newsletter-card label,
.newsletter-box label,
.newsletter-section label,
form.newsletter label,
form[data-newsletter] label,
#newsletter-form label {
  display: block !important;
}

/* Label style like waitlist */
.newsletter-card label,
.newsletter-box label,
.newsletter-section label,
form.newsletter label,
form[data-newsletter] label,
#newsletter-form label {
  font-family: Inter, Manrope, "Helvetica Neue", Arial, sans-serif !important;
  color: #304563 !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

/* Inputs like waitlist */
.newsletter-card input,
.newsletter-box input,
.newsletter-section input,
form.newsletter input,
form[data-newsletter] input,
#newsletter-form input {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  border: 1px solid #C7D7EE !important;
  border-radius: 2px !important;
  background: #F7FAFE !important;
  color: #0F1B2D !important;
  font-family: Inter, Manrope, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  padding: 14px 18px !important;
  outline: none !important;
  margin: 0 !important;
}

.newsletter-card input:focus,
.newsletter-box input:focus,
.newsletter-section input:focus,
form.newsletter input:focus,
form[data-newsletter] input:focus,
#newsletter-form input:focus {
  border-color: #1857B8 !important;
  box-shadow: 0 0 0 3px rgba(24, 87, 184, 0.12) !important;
  background: #FFFFFF !important;
}

/* Button same spacing/shape as waitlist */
.newsletter-card button,
.newsletter-box button,
.newsletter-section button,
form.newsletter button,
form[data-newsletter] button,
#newsletter-form button {
  margin-top: 12px !important;
  justify-self: start !important;
  min-width: 190px !important;
  min-height: 58px !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-family: Inter, Manrope, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* Prevent label/input overlap caused by older inherited form CSS */
.newsletter-card label + input,
.newsletter-box label + input,
.newsletter-section label + input,
form.newsletter label + input,
form[data-newsletter] label + input,
#newsletter-form label + input {
  margin-top: 0 !important;
}

/* Some versions have direct label/input without field wrapper; add vertical spacing */
.newsletter-card form > label:not(:first-child),
.newsletter-box form > label:not(:first-child),
.newsletter-section form > label:not(:first-child),
form.newsletter > label:not(:first-child),
form[data-newsletter] > label:not(:first-child),
#newsletter-form > label:not(:first-child) {
  margin-top: 2px !important;
}

/* Mobile: full width like waitlist */
@media (max-width: 760px) {
  .newsletter-card,
  .newsletter-box,
  section.newsletter,
  .newsletter-section .card,
  section:has(form[data-newsletter]),
  section:has(#newsletter-form) {
    border-radius: 22px !important;
  }

  .newsletter-card form,
  .newsletter-box form,
  .newsletter-section form,
  form.newsletter,
  form[data-newsletter],
  #newsletter-form {
    gap: 20px !important;
  }

  .newsletter-card button,
  .newsletter-box button,
  .newsletter-section button,
  form.newsletter button,
  form[data-newsletter] button,
  #newsletter-form button {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}