/* =================================================
   NINJA FORMS — GLOBAL VISUAL STYLES (TIGHTER)
================================================= */

.nf-form-content{
  color: #2B1B4D;
}

/* Labels */
.nf-field-label{
  margin-bottom: 0.35rem;
}

.nf-field-label label,
.nf-label-span{
  font-size: 0.95rem;
  line-height: 1.25;
}

/* Required note */
.nf-form-fields-required{
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Field spacing */
.nf-field-container{
  margin-bottom: 0.9rem;
}

/* Inputs */
.nf-form-content input:not([type="radio"]):not([type="checkbox"]),
.nf-form-content select,
.nf-form-content textarea{
  width: 100%;
  min-height: 52px;          /* was 60px */
  padding: 0.85rem 1.05rem;  /* was 1rem 1.25rem */
  font-size: 1rem;           /* was 1.05rem */

  border-radius: 14px;       /* was 16px */
  border: 2px solid #E6E8F6;
  background-color: #ffffff;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nf-form-content textarea{
  min-height: 120px;         /* was 140px */
  resize: vertical;
}

/* Focus */
.nf-form-content input:focus,
.nf-form-content select:focus,
.nf-form-content textarea:focus{
  outline: none;
  border-color: #C9CDF3;
  box-shadow: 0 0 0 3px rgba(201,205,243,0.30); /* slightly calmer */
}

/* Select arrow */
.nf-form-content select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232B1B4D' d='M5.5 7.5L10 12l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 14px;
  padding-right: 3rem;
}

/* Radios & checkboxes */
.nf-form-content input[type="radio"],
.nf-form-content input[type="checkbox"]{
  width: 18px;  /* was 20px */
  height: 18px; /* was 20px */
}

/* Radio list spacing */
.nf-form-content ul{
  margin: 0.5rem 0 0.75rem;
  padding: 0;
}

.nf-form-content li{
  margin: 0.35rem 0;
}

/* Submit */
.nf-form-content input[type="submit"],
.nf-form-content button[type="submit"]{
  min-height: 52px;
  padding: 0.9rem 1rem;
  border-radius: 14px;
}

/* ===== Ninja Forms: scoped to Newsletter only ===== */
#newsletter.newsletter-signup .newsletter-form .nf-form-cont{
  width: 100%;
}

#newsletter.newsletter-signup .newsletter-form .nf-field-container{
  margin-bottom: 0.85rem;
}

#newsletter.newsletter-signup .newsletter-form .nf-field-label label{
  font-size: 0.95rem;
  font-weight: 600;
  color: #141727;
}

#newsletter.newsletter-signup .newsletter-form .nf-field-element input:not([type="button"]):not([type="submit"]),
#newsletter.newsletter-signup .newsletter-form .nf-field-element select,
#newsletter.newsletter-signup .newsletter-form .nf-field-element textarea{
  width: 100%;
  max-width: 100%;
  background: #fff;
  color: #141727;
  border: 1px solid rgba(20, 23, 39, 0.18);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  font-size: 1rem;
  line-height: 1.2;
  outline: none;
}

#newsletter.newsletter-signup .newsletter-form .nf-field-element input::placeholder,
#newsletter.newsletter-signup .newsletter-form .nf-field-element textarea::placeholder{
  color: rgba(20, 23, 39, 0.55);
}

#newsletter.newsletter-signup .newsletter-form .nf-field-element input:focus,
#newsletter.newsletter-signup .newsletter-form .nf-field-element select:focus,
#newsletter.newsletter-signup .newsletter-form .nf-field-element textarea:focus{
  border-color: rgba(245, 197, 214, 0.9);
  box-shadow: 0 0 0 4px rgba(245, 197, 214, 0.35);
}

#newsletter.newsletter-signup .newsletter-form .submit-container input[type="button"],
#newsletter.newsletter-signup .newsletter-form .submit-container input[type="submit"],
#newsletter.newsletter-signup .newsletter-form .submit-container button{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #f5c5d6;
  color: #2c1448;
  transition: transform 120ms ease, filter 120ms ease;
}

#newsletter.newsletter-signup .newsletter-form .submit-container input[type="button"]:hover,
#newsletter.newsletter-signup .newsletter-form .submit-container input[type="submit"]:hover,
#newsletter.newsletter-signup .newsletter-form .submit-container button:hover{
  filter: brightness(0.97);
}

#newsletter.newsletter-signup .newsletter-form .submit-container input[type="button"]:active,
#newsletter.newsletter-signup .newsletter-form .submit-container input[type="submit"]:active,
#newsletter.newsletter-signup .newsletter-form .submit-container button:active{
  transform: translateY(1px);
}


/* =================================================
   NINJA FORMS — 2-COLUMN LAYOUT (USING one-half)
   Add a wrapper class around this form if possible
   e.g. <div class="care-enquiry-form">[ninja_form id="X"]</div>
================================================= */

.care-enquiry-form .nf-form-content{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Your global margin-bottom adds extra height; gap replaces it */
.care-enquiry-form .nf-field-container{
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 0;
}

/* Make "one-half" actually half width on desktop */
@media (min-width: 820px){
  .care-enquiry-form .nf-field-container.one-half{
    flex: 1 1 calc(50% - 16px);
  }
}

/* Keep long fields full width */
.care-enquiry-form .nf-field-container.textarea-container,
.care-enquiry-form .nf-field-container.listradio-container,
.care-enquiry-form .nf-field-container.listcheckbox-container,
.care-enquiry-form .nf-field-container.submit-container,
.care-enquiry-form .nf-field-container.html-container{
  flex: 1 1 100% !important;
}


/* Tighten field spacing now that layout is 2-col */
.nf-field-container {
  margin-bottom: 0.6rem; /* was 0.9rem */
}

/* Slightly tighter textarea */
.nf-form-content textarea {
  min-height: 100px; /* was 120px */
}

/* Tighten list spacing (radios/checkboxes) */
.nf-form-content ul {
  margin: 0.35rem 0 0.6rem;
}

.nf-form-content li {
  margin: 0.25rem 0;
}


/* =================================================
   Ninja Form #2 (Build Your Care) — fix privacy spacing + layout
   Put this LAST
================================================= */

/* 1) Ensure Form 2 uses flex+gap even if wrapper class isn't present */
#nf-form-2-cont .nf-form-content{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 2) Ensure the privacy checkbox row is treated as a full-width row */
#nf-form-2-cont .nf-field-container.checkbox-container{
  flex: 1 1 100% !important;
}

/* 3) Add actual vertical breathing room: date -> privacy -> submit */
#nf-form-2-cont #nf-field-20-container{
  margin-bottom: 16px !important;
}

#nf-form-2-cont #nf-field-23-container{
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* 4) Optional: better checkbox/label alignment */
#nf-form-2-cont #nf-field-23-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
}

#nf-form-2-cont #nf-field-23-wrap .nf-field-element{ order: 1; }
#nf-form-2-cont #nf-field-23-wrap .nf-field-label{ order: 2; margin: 0; }

/* =================================================
   Ninja Form #3 — make submit button purple
================================================= */

#nf-form-3-cont .submit-container .nf-field-element .nf-element,
#nf-form-3-cont .submit-container input[type="submit"],
#nf-form-3-cont .submit-container button[type="submit"]{
  background: #2b0f47 !important;
  color: #ffffff !important;
  border: 0 !important;
}

#nf-form-3-cont .submit-container .nf-element:hover{
  background: #1d0833 !important;
}

#nf-form-3-cont .submit-container .nf-element:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(255,199,217,0.45) !important;
}