/* NHF Colleges – Apply Now widget styles
 * All themable values are CSS variables so the Elementor widget (or any custom
 * CSS) can override them on the .nhf-apply-form wrapper. Defaults below match
 * the original design. */
.nhf-apply-form {
  --nhf-row-gap: 18px;
  --nhf-field-bg: #ffffff;
  --nhf-field-text: #111827;
  --nhf-field-placeholder: #9ca3af;
  --nhf-field-border: #d1d5db;
  --nhf-field-radius: 10px;
  --nhf-field-pad-y: 12px;
  --nhf-field-pad-x: 14px;
  --nhf-field-font: 15px;
  --nhf-label-color: #111827;
  --nhf-label-font: 14px;
  --nhf-accent: #2563eb;
  --nhf-btn-radius: 999px;
  --nhf-btn-font: 15px;
  --nhf-primary-bg: #2563eb;
  --nhf-primary-bg-hover: #1d4ed8;
  --nhf-primary-text: #ffffff;
  --nhf-ghost-bg: #ffffff;
  --nhf-ghost-text: #111827;
  --nhf-ghost-border: #d1d5db;
  --nhf-consent-color: #6b7280;
  width: 100%;
}
.nhf-form { font-family: inherit; color: var(--nhf-field-text); }
.nhf-form .nhf-row { display: flex; gap: var(--nhf-row-gap); margin-bottom: var(--nhf-row-gap); }
.nhf-form .nhf-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.nhf-form .nhf-col-2 { flex-basis: 100%; }
.nhf-form label {
  font-size: var(--nhf-label-font); font-weight: 600; margin-bottom: 6px; color: var(--nhf-label-color);
}
.nhf-form label span { color: #888888; }
.nhf-form input[type="text"],
.nhf-form input[type="tel"],
.nhf-form input[type="email"],
.nhf-form select {
  width: 100%; box-sizing: border-box;
  padding: var(--nhf-field-pad-y) var(--nhf-field-pad-x);
  font-size: var(--nhf-field-font); color: var(--nhf-field-text);
  background: var(--nhf-field-bg); border: 1px solid var(--nhf-field-border);
  border-radius: var(--nhf-field-radius);
  outline: none; transition: border-color .15s, box-shadow .15s; appearance: none;
}
.nhf-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
  color: var(--nhf-field-placeholder);
}
.nhf-form select:valid { color: var(--nhf-field-text); }
.nhf-form input::placeholder { color: var(--nhf-field-placeholder); }
.nhf-form input:focus, .nhf-form select:focus {
  border-color: var(--nhf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nhf-accent) 18%, transparent);
}
.nhf-form select:disabled { background-color: #f3f4f6; cursor: not-allowed; }
.nhf-form .nhf-divider { height: 1px; background: #e5e7eb; margin: 35px 0px; }
.nhf-form .nhf-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; font-weight: 400; color: var(--nhf-consent-color) !important; line-height: 1.5; margin-bottom: 35px;
}

.nhf-form .nhf-btn-primary:hover{
  box-shadow: 0px 4px 16px rgba(21, 104, 189, 0.5);
}

.nhf-form .nhf-consent input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.nhf-form .nhf-actions { display: flex; gap: 14px; }
.nhf-form .nhf-btn {
  flex: 1 1 0; text-align: center; padding: 14px 18px; border-radius: var(--nhf-btn-radius);
  font-size: var(--nhf-btn-font); font-weight: 600; cursor: pointer; border: 1px solid transparent;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.nhf-form .nhf-btn-ghost { background: var(--nhf-ghost-bg); color: var(--nhf-ghost-text); border-color: var(--nhf-ghost-border); }
.nhf-form .nhf-btn-ghost:hover { background: #f9fafb; }
.nhf-form .nhf-btn-primary { background: var(--nhf-primary-bg); color: var(--nhf-primary-text); }
.nhf-form .nhf-btn-primary:hover { background: var(--nhf-primary-bg-hover); }
.nhf-form .nhf-btn-primary:disabled { opacity: .6; cursor: default; }
.nhf-form .nhf-msg { margin-top: 14px; font-size: 14px; }
.nhf-form .nhf-msg.nhf-ok {
    color: #047857;
    background: #e6fce5;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    font-weight: 600;
}
.nhf-form .nhf-msg.nhf-err {
    color: #dc2626;
    background: #fce5e5;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
}
@media (max-width: 540px) {
  .nhf-form .nhf-row { flex-direction: column; gap: 14px; }
  .nhf-form .nhf-actions { flex-direction: column-reverse; }
}