/* RubyLou brand styling for the MailerLite supported embedded form.
   Scoped to .rl-ml-form so the pricing (#founding) embed keeps its own styling.
   The embed keeps its own markup, consent checkbox, reCAPTCHA, validation, double
   opt-in, and success flow — only the presentation is themed here. */

.rl-ml-form { width: 100%; }
.rl-ml-form .ml-form-embedContainer { display: block; width: 100%; }
.rl-ml-form .ml-form-align-center { text-align: left; }

/* Card wrapper — cream panel matching RubyLou */
.rl-ml-form #mlb2-43409046 .ml-form-embedWrapper,
.rl-ml-form .ml-form-embedWrapper.embedForm {
  background-color: #F4F0E8 !important;
  border: 1px solid #e6ded2 !important;
  border-radius: 16px !important;
  max-width: 520px !important;
  width: 100% !important;
}
/* Hide the MailerLite header image; we use our own heading */
.rl-ml-form .ml-form-embedHeader { display: none !important; }

.rl-ml-form .ml-form-embedBody,
.rl-ml-form .ml-form-successBody { padding: 22px 22px 6px !important; }
.rl-ml-form .ml-form-embedContent,
.rl-ml-form .ml-form-successContent { text-align: left !important; margin: 0 0 14px 0 !important; }

.rl-ml-form .ml-form-embedContent h4,
.rl-ml-form .ml-form-successContent h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important; font-weight: 600 !important; color: #3D2B2F !important;
  text-align: left !important; margin: 0 0 6px 0 !important;
}
.rl-ml-form .ml-form-embedContent p,
.rl-ml-form .ml-form-successContent p {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important; line-height: 1.55 !important; color: #5b4a48 !important;
  text-align: left !important; margin: 0 0 6px 0 !important;
}

/* Email field — full width so it aligns with the submit button */
.rl-ml-form .ml-form-fieldRow,
.rl-ml-form .ml-field-group { width: 100% !important; }
.rl-ml-form .ml-form-fieldRow input,
.rl-ml-form .ml-form-embedBody .ml-form-fieldRow input {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important; color: #3D2B2F !important;
  background: #fff !important; border: 1px solid #d9cdbb !important;
  border-radius: 10px !important; padding: 12px 14px !important; line-height: 1.4 !important;
  width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
.rl-ml-form .ml-form-fieldRow input:focus { border-color: #9DAC92 !important; outline: none !important; }

/* Consent checkbox beside its label (not stacked) */
.rl-ml-form .ml-form-checkboxRow label.checkbox {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  margin: 0 !important; padding: 0 !important; font-weight: normal !important; min-height: 0 !important;
}
.rl-ml-form .ml-form-checkboxRow input[type="checkbox"] {
  position: static !important; opacity: 1 !important; z-index: auto !important;
  width: 18px !important; height: 18px !important; margin: 1px 0 0 !important; flex: 0 0 auto !important;
  accent-color: #6B9467 !important;
}
.rl-ml-form .ml-form-checkboxRow .label-description { margin: 0 !important; position: static !important; }
.rl-ml-form .ml-form-checkboxRow .label-description p,
.rl-ml-form .ml-form-checkboxRow label p {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 12.5px !important; line-height: 1.45 !important; color: #5b4a48 !important; margin: 0 !important;
}

/* Submit button — ruby with white text, matching RubyLou controls */
.rl-ml-form .ml-form-embedSubmit button,
.rl-ml-form .ml-form-embedSubmit button.primary {
  background-color: #F4573A !important; color: #FFFFFF !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important;
  border: none !important; border-radius: 30px !important;
  padding: 12px 20px !important; min-height: 44px !important; width: 100% !important;
}
.rl-ml-form .ml-form-embedSubmit button:hover { background-color: #e04a2f !important; }

/* Success confirmation — consistent RubyLou panel */
.rl-ml-form .ml-form-successBody .ml-form-successContent h4 { color: #4c6047 !important; }

@media (max-width: 560px) {
  .rl-ml-form .ml-form-embedWrapper.embedForm { max-width: 100% !important; }
}

/* Structural bits carried over from the MailerLite embed (spinner, a11y, spacing) */
.rl-ml-form .ml-form-embedSubmitLoad { display: inline-block; width: 20px; height: 20px; }
.rl-ml-form .ml-form-embedSubmitLoad:after { content: " "; display: block; width: 11px; height: 11px; margin: 1px; border-radius: 50%; border: 4px solid #fff; border-color: #fff #fff #fff transparent; animation: ml-form-embedSubmitLoad 1.2s linear infinite; }
@keyframes ml-form-embedSubmitLoad { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.rl-ml-form .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.rl-ml-form .ml-form-embedSubmit button.loading { display: none; }
/* Even vertical rhythm between field, consent, reCAPTCHA and button */
.rl-ml-form .ml-form-fieldRow { margin: 0 0 16px; float: none !important; }
.rl-ml-form .ml-form-checkboxRow { margin: 0 0 16px; float: none !important; width: 100% !important; }
.rl-ml-form .ml-form-embedSubmit { margin: 4px 0 0 !important; float: none !important; width: 100% !important; }
.rl-ml-form .g-recaptcha { margin: 0 0 16px; }
.rl-ml-form .ml-form-recaptcha { float: none !important; }
.rl-ml-form .ml-error input { border-color: #B23B2E !important; }
.rl-ml-form .ml-error .label-description, .rl-ml-form .ml-error .label-description p, .rl-ml-form .ml-error label:first-child { color: #B23B2E !important; }