/* =============================================================================
   CARLO RINO — Gravity Forms Newsletter Styling
   Figma: Node 770:5268 (Frame 95 — Newsletter Form)
   Design tokens: Bodytext/Reg 16/16 (Quicksand Regular 16/1.52)
   ============================================================================= */

/* ─── Gravity Forms Orbital Theme Overrides ─────────────────────────────── */

/* Hide the top heading/description so only the input + button row shows */
#gform_wrapper_3 .gform_heading {
  display: none !important;
}

/* ─── Form Container (full width, flex row, gap 4px) ─────────────────── */
#gform_wrapper_3 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/*
 * Input lives in .gform-body; button lives in sibling .gform_footer.
 * Put the form itself into a horizontal flex row so they sit side by side.
 */
#gform_wrapper_3 form#gform_3 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.25rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Body (email field) fills remaining width */
#gform_wrapper_3 .gform-body,
#gform_wrapper_3 .gform_body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gform_wrapper_3 .gform_fields {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#gform_wrapper_3 .gfield {
  padding: 0 !important;
  margin: 0 !important;
}

#gform_wrapper_3 .ginput_container,
#gform_wrapper_3 .ginput_container_email {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Footer (Subscribe button) sits beside the input — shrink to content */
#gform_wrapper_3 .gform-footer,
#gform_wrapper_3 .gform_footer {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

#gform_wrapper_3 .gform_footer input[type="submit"] {
  margin: 0 !important;
}

/* Keep hidden GF fields out of the flex layout */
#gform_wrapper_3 .gform_footer .gform_hidden,
#gform_wrapper_3 .gform_footer input[type="hidden"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Akismet honeypot — already display:none, keep it out of flex flow */
#gform_wrapper_3 .akismet-fields-container {
  display: none !important;
  position: absolute !important;
}

/* ─── Email Input Field (Figma: cream bg, light grey border, 2px radius) ── */
#gform_wrapper_3 .ginput_container_email input[type="email"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 3rem !important;
  padding: 0.75rem !important;
  background: #faf7f6 !important;
  border: 0.062rem solid #e7e7e7 !important;
  border-radius: 0.125rem !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
  color: #333 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

#gform_wrapper_3 .ginput_container_email input[type="email"]::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

#gform_wrapper_3 .ginput_container_email input[type="email"]:focus {
  border-color: #e81f76 !important;
}

/* ─── Subscribe Button (Figma: pink bg, 106×48, 2px radius, white text) ── */
#gform_wrapper_3 .gform_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  width: 6.625rem !important;
  min-width: 6.625rem !important;
  height: 3rem !important;
  padding: 0.75rem 1rem !important;
  background: #e81f76 !important;
  border: none !important;
  border-radius: 0.125rem !important;
  cursor: pointer !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.52 !important;
  color: #ffffff !important;
  text-transform: none !important;
  white-space: nowrap !important;
  backdrop-filter: blur(0.312rem) !important;
  -webkit-backdrop-filter: blur(0.312rem) !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
  box-sizing: border-box !important;
}

#gform_wrapper_3 .gform_button:hover {
  background: #d01a66 !important;
}

#gform_wrapper_3 .gform_button:focus,
#gform_wrapper_3 .gform_button:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── Hide label since we want placeholder-only look ──────────────────── */
#gform_wrapper_3 .gfield_label {
  display: none !important;
}

/* ─── Hide validation errors in the inline row (shown below if needed) ──── */
#gform_wrapper_3 .gfield_validation_message,
#gform_wrapper_3 .validation_message {
  display: none !important;
}

/* ─── Responsive: stack on small screens ──────────────────────────────── */
@media (max-width: 480px) {
  #gform_wrapper_3 form#gform_3 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  #gform_wrapper_3 .gform-body,
  #gform_wrapper_3 .gform_body {
    width: 100% !important;
  }

  #gform_wrapper_3 .gform-footer,
  #gform_wrapper_3 .gform_footer,
  #gform_wrapper_3 .gform_button {
    width: 100% !important;
  }
}

/* ─── Confirmation / success message styling ──────────────────────────── */
#gform_wrapper_3 .gform_confirmation_message {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 1rem !important;
  background: #f0faf0 !important;
  border: 0.062rem solid #b8e6b8 !important;
  border-radius: 0.125rem !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #2e7d32 !important;
}