/* Bio-Lec global Ninja Forms restyle.
   Applies to EVERY Ninja Form on the site (enqueue this file site-wide in
   functions.php — see the snippet in the chat). Pairs with
   assets/common/js/ninja-forms.js, which mirrors each field's label into its
   placeholder so the label reads as a placeholder. Brand colours hardcoded
   (#329AE0 / #0065B8) so it looks the same regardless of page tokens. */

/* Labels are visually hidden (kept for screen readers); their text is shown as
   the field placeholder via ninja-forms.js. */
.nf-form-cont .nf-field-label label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Compact, rounded text fields */
.nf-form-cont .nf-field-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
.nf-form-cont .nf-field-element textarea,
.nf-form-cont .nf-field-element select{
  width:100%;
  height:48px;
  padding:10px 16px;
  border:1px solid #DCE7F2;
  border-radius:12px;
  background:#F2F7FC;
  font-size:15px;
  line-height:1.3;
  color:#1A1F1A;
  box-shadow:none;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.nf-form-cont .nf-field-element textarea{ height:auto; min-height:110px; padding-top:12px; resize:vertical; }
.nf-form-cont .nf-field-element select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230065B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}

.nf-form-cont .nf-field-element input::placeholder,
.nf-form-cont .nf-field-element textarea::placeholder{ color:#8B9AAC; opacity:1; }

.nf-form-cont .nf-field-element input:hover,
.nf-form-cont .nf-field-element textarea:hover,
.nf-form-cont .nf-field-element select:hover{ border-color:#C2D7EC; }

.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element textarea:focus,
.nf-form-cont .nf-field-element select:focus{
  outline:none; background:#fff; border-color:#329AE0; box-shadow:0 0 0 3px rgba(50,154,224,.18);
}

/* Tighter vertical rhythm between fields */
.nf-form-cont .nf-field-container{ margin-bottom:14px; }

/* Keep Ninja Forms hidden fields hidden (Hidden field type, _hidden, hidden
   container). They must not render as visible inputs. */
.nf-form-cont .nf-field-container.hidden-container,
.nf-form-cont .field-wrap.hidden-wrap,
.nf-form-cont nf-field input[type=hidden],
.nf-form-cont .nf-field-element input[type=hidden]{
  display:none !important;
}

/* Submit button — compact rounded brand pill */
.nf-form-cont .nf-field-element input[type=button],
.nf-form-cont .nf-field-element input[type=submit]{
  height:50px; width:auto; padding:0 34px; border:0; border-radius:999px;
  background:linear-gradient(120deg,#329AE0,#0065B8);
  color:#fff; font-weight:700; font-size:15px; line-height:50px; letter-spacing:.2px;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,101,184,.28);
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.nf-form-cont .nf-field-element input[type=button]:hover,
.nf-form-cont .nf-field-element input[type=submit]:hover{
  filter:brightness(1.06); box-shadow:0 8px 22px rgba(0,101,184,.34);
}
.nf-form-cont .nf-field-element input[type=button]:active,
.nf-form-cont .nf-field-element input[type=submit]:active{
  transform:translateY(1px) scale(.99); box-shadow:0 4px 12px rgba(0,101,184,.26);
}

/* Validation — soft, subtle error state (no big red icon box) */

/* Hide Ninja Forms' default red exclamation indicator that sits on the
   right edge of an invalid field. */
.nf-form-cont .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap .nf-field-element::after,
.nf-form-cont .nf-field-element .ninja-forms-field-error,
.nf-form-cont .nf-error-field-errors > .nf-error-msg ~ *{ display:none !important; }

/* Error message: small, muted, with a tiny dot instead of a loud block */
.nf-form-cont .nf-error-msg{
  font-size:12px; line-height:1.3; margin-top:5px; color:#B3261E; font-weight:500;
}

/* Invalid field: soft red border + faint ring, no harsh fill */
.nf-form-cont .nf-error .nf-field-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
.nf-form-cont .nf-error .nf-field-element textarea,
.nf-form-cont .nf-error .nf-field-element select{
  border-color:#E5837C;
  box-shadow:0 0 0 3px rgba(179,38,30,.10);
}
.nf-form-cont .nf-error .nf-field-element input:focus,
.nf-form-cont .nf-error .nf-field-element textarea:focus,
.nf-form-cont .nf-error .nf-field-element select:focus{
  border-color:#B3261E;
  box-shadow:0 0 0 3px rgba(179,38,30,.18);
}