/* mailerlite.css — skin the embedded MailerLite Apply form to the Nutanagentcy
   design system (reps.md / blueprint §2). Targets MailerLite's rendered classes.
   Scoped to #apply-skin (a wrapper we control) + MailerLite's own class chain so
   these rules out-specify MailerLite's instance-ID inline <style>; !important is
   used only where MailerLite itself uses it. Loaded after components.css. */

/* ---- container / wrapper: drop the light card, fill our column ---- */
#apply-skin .ml-form-embedContainer { width: 100% !important; }

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  background: transparent !important;
  border: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody { padding: 0 !important; }
#apply-skin .ml-form-align-center,
#apply-skin .ml-form-align-default { text-align: left !important; }

/* ---- labels: General Sans, uppercase, ash ---- */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody label {
  display: block !important;
  margin: 0 0 10px 0 !important;
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  color: var(--ash) !important;
}

/* ---- field rows + inputs: surface-2 field, pearl text, champagne focus ---- */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 0 var(--s4) 0 !important; }

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow input,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow textarea {
  background-color: #341f57 !important;
  color: var(--pearl) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  font-family: var(--fb) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease) !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow textarea {
  min-height: 128px !important;
  resize: vertical !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea::placeholder {
  color: rgba(157, 144, 180, .55) !important;
}

/* focus / focus-visible */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow input:focus,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow input:focus-visible,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow textarea:focus,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-fieldRow textarea:focus-visible {
  outline: none !important;
  border-color: var(--champagne) !important;
  background-color: #3d2563 !important;
  box-shadow: 0 0 0 3px rgba(220, 196, 155, .18) !important;
}

/* ---- error state (legible red on the dark field) ---- */
#apply-skin .ml-error input,
#apply-skin .ml-error textarea,
#apply-skin .ml-error select { border-color: #ff6b6b !important; }

#apply-skin .ml-error label,
#apply-skin .ml-error .label-description,
#apply-skin .ml-error .label-description p,
#apply-skin .ml-error label:first-child { color: #ff6b6b !important; }

/* ---- consent checkbox row ---- */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin: 0 0 var(--s4) 0 !important; }

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
  position: static !important;
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 0 !important;
  opacity: 1 !important;
  z-index: auto !important;
  accent-color: var(--champagne) !important;
  cursor: pointer !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description p {
  margin: 0 !important;
  font-family: var(--fb) !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ash) !important;
}

/* ---- submit: our foil button (gradient + sheen sweep + lift) ---- */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { margin: 0 !important; width: 100% !important; }

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-embedSubmit button,
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-embedSubmit button.primary {
  position: relative !important;
  overflow: hidden !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  color: var(--void) !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  padding: 15px 30px !important;
  cursor: pointer !important;
  background: linear-gradient(145deg, #E8D4A8, #DCC49B 40%, #C9AE82) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 12px 28px -12px rgba(220, 196, 155, .5) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  transform: translateX(-120%) !important;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) !important;
  transition: transform .7s var(--ease) !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-block-form .ml-form-embedSubmit button:hover {
  background: linear-gradient(145deg, #E8D4A8, #DCC49B 40%, #C9AE82) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 16px 34px -12px rgba(220, 196, 155, .6) !important;
}

#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover::after { transform: translateX(120%) !important; }
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:active { transform: translateY(0) scale(.985) !important; }
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible { outline: 2px solid var(--champagne-2) !important; outline-offset: 3px !important; }

/* loading state (ML toggles display; keep the foil look, drop the sheen) */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
  justify-content: center !important;
  background: linear-gradient(145deg, #E8D4A8, #DCC49B 40%, #C9AE82) !important;
  opacity: .85 !important;
}
#apply-skin .ml-form-embedSubmitLoad { display: inline-block !important; width: 20px !important; height: 20px !important; }
#apply-skin .ml-form-embedSubmitLoad:after {
  content: " " !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: 1px !important;
  border-radius: 50% !important;
  border: 3px solid !important;
  border-color: #180228 #180228 #180228 transparent !important;
  animation: nm-ml-spin 1s linear infinite !important;
}
@keyframes nm-ml-spin { to { transform: rotate(360deg); } }

/* ---- success panel: our success styling ---- */
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; }
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
  margin: 0 !important;
  border: 1px solid rgba(220, 196, 155, .5) !important;
  background: rgba(220, 196, 155, .07) !important;
  border-radius: var(--r) !important;
  padding: 32px !important;
}
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  margin: 0 0 8px 0 !important;
  font-family: var(--fd) !important;
  font-weight: 380 !important;
  font-size: 1.5rem !important;
  color: var(--champagne) !important;
}
#apply-skin .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  margin: 0 !important;
  font-family: var(--fb) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--ash) !important;
}