/* ============================================================
   CFA FORM COMPONENT
   Phase: Components > Forms
   Requires: cfa-tokens.css loaded first

   APPROACH — CSS-only coexistence pass:
   PHP form classes are aliased alongside CFA equivalents.
   No template markup changes required in this pass.
   When a template is migrated to CFA classes, remove the
   alias from the selector list.

   PHP class → CFA equivalent mapping:
     Wrappers:
       .input_field            → .cfa-field
       .input_field2           → .cfa-field
       .select_field           → .cfa-field
       .checkbox_field         → .cfa-field (checkbox context)
       .form-group (Bootstrap) → .cfa-field

     Labels:
       .form_input_label       → .cfa-field-label
       .form_input_label_edit  → .cfa-field-label
       .form_input_label_edit2 → .cfa-field-label
       .form_input_label_app   → .cfa-field-label

     Inputs:
       .form_input             → .cfa-field-input
       .form-control (Bootstrap input) → .cfa-field-input / .cfa-field-select

     Error states:
       .error-inp              → .cfa-field--error (on parent)
       .error-class            → .cfa-field--error (on parent)
       .error-msg              → .cfa-field-error
       .error_msg              → .cfa-field-error (block variant)

   KNOWN LIMITS in this pass:
   - .select_field_container selects: hidden by jQuery sbSkin() plugin
     (opacity:0 on native select). sbSkin() replacement is a follow-up.
     Native select inside .select_field_container is left untouched.
   - TinyMCE / rich-text textarea: not styled here (plugin-managed)
   ============================================================ */


/* ================================================================
   CSS CUSTOM PROPERTIES — form-specific (extends tokens.css)
   ================================================================ */

/* Form-specific layout tokens — red tokens now live in cfa-tokens.css */
:root {
  --cfa-field-height:       44px;
  --cfa-field-padding-v:    11px;
  --cfa-field-padding-h:    14px;
}


/* ================================================================
   FIELD WRAPPER
   Turns any form group into a flex column with consistent gap.
   ================================================================ */

.cfa-field,
.input_field,
.input_field2,
.select_field,
.form-group {
  display: flex !important;
  flex-direction: column;
  gap: var(--cfa-space-2);
  margin-bottom: var(--cfa-space-5);
  position: relative;
}

/* Checkbox wrapper — row layout (label beside checkbox) */
.cfa-field--check,
.checkbox_field {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--cfa-space-3);
  margin-bottom: var(--cfa-space-4);
  position: relative;
}


/* ================================================================
   FIELD LABEL
   ================================================================ */

.cfa-field-label,
.form_input_label,
.form_input_label_edit,
.form_input_label_edit2,
.form_input_label_app,
.form_input_label_app2,
.form_input_label_alt,
.cfa-field .control-label,
.form-group .control-label {
  display: block !important;
  float: none !important;      /* clear existing float:left in PHP labels */
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text-mid) !important;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Required asterisk */
.cfa-field-required {
  color: var(--cfa-red);
  margin-left: 2px;
  font-weight: var(--cfa-weight-bold);
}


/* ================================================================
   INPUT, SELECT, TEXTAREA  —  shared base
   ================================================================ */

.cfa-field-input,
.cfa-field-select,
.cfa-field-textarea,
.form_input,
.jform-btn,
.form-group .form-control,
.form-control.cfa-styled {
  /* Reset legacy image-based styling from style.css */
  background-image: none !important;
  background: var(--cfa-bg) !important;

  /* Layout */
  display: block;
  width: 100%;
  min-height: var(--cfa-field-height);
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h);
  box-sizing: border-box;
  float: none;

  /* Typography */
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  font-weight: var(--cfa-weight-normal);
  color: var(--cfa-text) !important;
  line-height: 1.5;

  /* Border */
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
  box-shadow: none !important;

  /* Behaviour */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--cfa-transition-fast),
    box-shadow var(--cfa-transition-fast);
}

/* ================================================================
   JOIN/PROFILE FORMS (legacy .join-form / .jform-btn family)
   Many onboarding/KYC flows render <label> + .jform-btn directly,
   bypassing .form_input_label / .form_input. Normalize via main-only
   overrides without changing templates.
   ================================================================ */

body.cfa-app .join-form label {
  display: block;
  float: none !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text-mid) !important;
  line-height: 1.4;
  margin: 0 0 var(--cfa-space-2) !important;
}

body.cfa-app .join-form .jform-btn {
  width: 100% !important;
  min-height: var(--cfa-field-height) !important;
  height: auto !important;
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h) !important;
  margin: 0 0 var(--cfa-space-4) !important;
  background: var(--cfa-bg) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  color: var(--cfa-text) !important;
  box-sizing: border-box !important;
}

body.cfa-app .join-form .jform-btn:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
  outline: none !important;
}

body.cfa-app .join-form .jform-btn:disabled,
body.cfa-app .join-form .jform-btn[disabled],
body.cfa-app .join-form .jform-btn:read-only {
  background: var(--cfa-bg-soft) !important;
  border-color: var(--cfa-border) !important;
  color: var(--cfa-text-muted) !important;
}

/* Date dropdowns plugin renders 3 selects (day/month/year) */
body.cfa-app .join-form .date-dropdowns {
  display: flex;
  gap: var(--cfa-space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--cfa-space-4);
}

body.cfa-app .join-form .date-dropdowns select {
  flex: 1 1 120px;
  min-height: var(--cfa-field-height) !important;
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h) !important;
  background: var(--cfa-bg) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  color: var(--cfa-text) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

body.cfa-app .join-form .date-dropdowns select:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
  outline: none !important;
}

/* Postcode finder button (legacy .btn-address) */
body.cfa-app .join-form .btn-address {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;
  min-height: var(--cfa-field-height);
  border-radius: var(--cfa-radius-md) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  background: transparent !important;
  color: var(--cfa-text-mid) !important;
  font-family: var(--cfa-font-body) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  cursor: pointer;
  box-shadow: none !important;
}

body.cfa-app .join-form .btn-address:hover {
  border-color: var(--cfa-cobalt) !important;
  color: var(--cfa-cobalt) !important;
}

/* Continue CTA inside join/profile forms often uses legacy .login_btn.
   Make it primary *only in this form context*. */
body.cfa-app .join-form .login_btn {
  background: var(--cfa-cobalt) !important;
  color: #ffffff !important;
  padding: 13px 26px !important;
  min-height: 44px;
  border-radius: var(--cfa-radius-md) !important;
  border: none !important;
  box-shadow: var(--cfa-shadow-cobalt);
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

body.cfa-app .join-form .login_btn:hover {
  background: var(--cfa-cobalt-mid) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

body.cfa-app .join-form .login_btn:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.30);
  outline-offset: 2px;
  background: var(--cfa-cobalt-mid) !important;
}

body.cfa-app .join-form .login_btn:active {
  background: var(--cfa-navy) !important;
  transform: none;
  box-shadow: none;
}


/* ── Focus ── */
.cfa-field-input:focus,
.cfa-field-select:focus,
.cfa-field-textarea:focus,
.form_input:focus,
.form-group .form-control:focus,
.form-control.cfa-styled:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
  background: var(--cfa-bg) !important;
  outline: none;
}

/* ── Disabled ── */
.cfa-field-input:disabled,
.cfa-field-select:disabled,
.cfa-field-textarea:disabled,
.form_input:disabled,
.form-group .form-control:disabled {
  background: var(--cfa-bg-soft) !important;
  color: var(--cfa-text-muted) !important;
  cursor: not-allowed;
  border-color: var(--cfa-border) !important;
  box-shadow: none !important;
}

/* ── Read-only ── */
.cfa-field-input:read-only,
.cfa-field-textarea:read-only {
  background: var(--cfa-bg-soft) !important;
  border-color: var(--cfa-border) !important;
  box-shadow: none !important;
}

/* ── Placeholder ── */
.cfa-field-input::placeholder,
.cfa-field-textarea::placeholder,
.form_input::placeholder,
.form-control.cfa-styled::placeholder {
  color: var(--cfa-text-muted);
  font-weight: var(--cfa-weight-normal);
}


/* ================================================================
   TEXTAREA OVERRIDES
   ================================================================ */

.cfa-field-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}


/* ================================================================
   SELECT  —  native (non-sbSkin)
   NOTE: Selects inside .select_field_container are managed by
   the jQuery sbSkin() plugin (opacity:0 on native select).
   Those are left untouched. Only explicitly CFA-classed selects
   and Bootstrap .form-control selects receive these styles.
   ================================================================ */

.cfa-field-select,
select.cfa-field-select {
  padding-right: 36px;     /* room for the custom arrow */
  cursor: pointer;
}

/* Select wrapper — positions the custom arrow indicator */
.cfa-field-select-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.cfa-field-select-wrap .cfa-field-select {
  width: 100%;
}

.cfa-field-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cfa-text-muted);
  font-size: 12px;
  line-height: 1;
}

/* Bootstrap .form-control select: same arrow treatment */
.form-group .form-control[multiple] {
  padding-right: var(--cfa-field-padding-h);  /* no arrow for multi-select */
  height: auto;
  min-height: var(--cfa-field-height);
}


/* ================================================================
   ERROR STATE  —  applied via parent modifier
   .error-inp / .error-class on the input → trigger via JS
   .cfa-field--error on the wrapper → CFA pattern
   ================================================================ */

/* Parent-level error class (CFA pattern) */
.cfa-field--error .cfa-field-input,
.cfa-field--error .cfa-field-select,
.cfa-field--error .cfa-field-textarea,
.cfa-field--error .form-control {
  border-color: var(--cfa-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* Input-level error class (PHP pattern: JS adds .error-inp or .error-class) */
.error-inp,
.error-class {
  border-color: var(--cfa-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
  background: var(--cfa-bg) !important;
}


/* ================================================================
   SUCCESS STATE
   ================================================================ */

.cfa-field--success .cfa-field-input,
.cfa-field--success .cfa-field-select,
.cfa-field--success .cfa-field-textarea {
  border-color: var(--cfa-green) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.10) !important;
}


/* ================================================================
   HINT TEXT  —  helper text below the input
   ================================================================ */

.cfa-field-hint {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-xs);
  color: var(--cfa-text-muted);
  line-height: 1.5;
  margin-top: 0;
}


/* ================================================================
   ERROR TEXT  —  shown below input when field is invalid
   PHP aliases: .error-msg (inline), .error_msg (block)
   ================================================================ */

/* CFA field error (shown only when parent has .cfa-field--error) */
.cfa-field-error {
  display: none;
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-xs) !important;
  color: var(--cfa-red) !important;
  font-weight: var(--cfa-weight-medium);
  line-height: 1.4;
  margin-top: 0;
}

.cfa-field--error .cfa-field-error {
  display: block;
}

/* PHP inline error text alias (.error-msg has !important in style.css) */
.error-msg {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  color: var(--cfa-red) !important;
  font-weight: var(--cfa-weight-medium) !important;
  display: block;
  line-height: 1.4;
  margin-top: var(--cfa-space-1);
}

/* PHP block error message alias (.error_msg — margin 40px in style.css) */
.error_msg {
  background: var(--cfa-red-pale);
  border: 1px solid var(--cfa-red-border);
  border-radius: var(--cfa-radius-sm);
  padding: var(--cfa-space-4) var(--cfa-space-5);
  margin: var(--cfa-space-5) 0;
}

.error_msg p {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  font-weight: var(--cfa-weight-medium) !important;
  color: var(--cfa-red) !important;
  margin: 0;
}

/* ================================================================
   LEGACY LABELS (required/optional)
   Many main-platform forms use <label class="required|optional"> outside
   of .form_input_label. Normalize these to the same label system.
   Scoped to main platform via body.cfa-app.
   ================================================================ */

body.cfa-app label.required,
body.cfa-app label.optional,
body.cfa-app .myaccount-style label.required,
body.cfa-app .myaccount-style label.optional {
  display: block;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text-mid) !important;
  line-height: 1.4;
  margin: 0 0 var(--cfa-space-2);
  float: none !important;
}

/* Optional: make the trailing * less visually heavy when embedded in label text */
body.cfa-app label.required * {
  font-weight: inherit;
}

/* ================================================================
   LEGACY SELECT LABEL WRAPPER (.form_select_label)
   Pattern: <span.form_select_label><label ...></label></span>
   ================================================================ */

body.cfa-app .form_select_label {
  display: block;
  margin-bottom: var(--cfa-space-2);
}

/* ================================================================
   BORDERLESS INPUT/SELECT VARIANT (inputwithoutborder)
   Used in phone country code and address finder selects.
   Normalize to standard field appearance on main platform.
   ================================================================ */

body.cfa-app select.inputwithoutborder,
body.cfa-app input.inputwithoutborder {
  background: var(--cfa-bg) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h) !important;
  min-height: var(--cfa-field-height);
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  color: var(--cfa-text) !important;
  outline: none;
}

body.cfa-app select.inputwithoutborder:focus,
body.cfa-app input.inputwithoutborder:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
}

/* Join form phone code + number alignment */
body.cfa-app .phone-field-wrapper {
  display: flex;
  gap: var(--cfa-space-3);
  align-items: stretch;
  flex-wrap: wrap;
}

body.cfa-app .phone-field-wrapper select,
body.cfa-app .phone-field-wrapper input {
  flex: 1 1 160px;
}

/* ================================================================
   LEGACY ERROR LISTS (.errors)
   Used as <ul class="errors"><li>...</li></ul> across main flows.
   Keep semantics but normalize visuals.
   ================================================================ */

body.cfa-app ul.errors,
body.cfa-app .errors {
  color: var(--cfa-red);
  font-family: var(--cfa-font-body);
}

body.cfa-app ul.errors {
  list-style: none;
  padding: 0;
  margin: var(--cfa-space-3) 0;
}

body.cfa-app ul.errors > li {
  background: var(--cfa-red-pale);
  border: 1px solid var(--cfa-red-border);
  border-radius: var(--cfa-radius-sm);
  padding: var(--cfa-space-3) var(--cfa-space-4);
  margin: 0 0 var(--cfa-space-2);
  font-size: var(--cfa-text-sm);
  font-weight: var(--cfa-weight-medium);
}


/* ================================================================
   CHECKBOX  &  RADIO  —  custom styling
   Applies to native inputs without hiding them (accessible).
   ================================================================ */

/* ── Custom checkbox appearance ── */
.cfa-field input[type="checkbox"],
.cfa-field input[type="radio"],
.checkbox_field input[type="checkbox"],
.checkbox_field input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox input[type="radio"],
.checkbox_edit input[type="checkbox"],
.checkbox_edit input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid var(--cfa-border-strong);
  border-radius: var(--cfa-radius-sm);
  background: var(--cfa-bg);
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--cfa-transition-fast),
    background var(--cfa-transition-fast);
  flex-shrink: 0;
  margin-top: 2px;  /* optical alignment with label */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cfa-field input[type="radio"],
.checkbox input[type="radio"],
.checkbox_edit input[type="radio"] {
  border-radius: 50%;
}

/* Checked state */
.cfa-field input[type="checkbox"]:checked,
.checkbox_field input[type="checkbox"]:checked,
.checkbox input[type="checkbox"]:checked,
.checkbox_edit input[type="checkbox"]:checked {
  background: var(--cfa-cobalt);
  border-color: var(--cfa-cobalt);
}

/* Checkmark via pseudo-element */
.cfa-field input[type="checkbox"]:checked::after,
.checkbox_field input[type="checkbox"]:checked::after,
.checkbox input[type="checkbox"]:checked::after,
.checkbox_edit input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 5px;
}

/* Radio checked */
.cfa-field input[type="radio"]:checked,
.checkbox input[type="radio"]:checked {
  background: var(--cfa-cobalt);
  border-color: var(--cfa-cobalt);
  box-shadow: inset 0 0 0 3px white;
}

/* Focus */
.cfa-field input[type="checkbox"]:focus-visible,
.cfa-field input[type="radio"]:focus-visible,
.checkbox_field input[type="checkbox"]:focus-visible,
.checkbox input[type="checkbox"]:focus-visible,
.checkbox_edit input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(36, 81, 209, 0.30);
  outline-offset: 2px;
}

/* Hover */
.cfa-field input[type="checkbox"]:hover:not(:checked):not(:disabled),
.checkbox input[type="checkbox"]:hover:not(:checked):not(:disabled),
.checkbox_edit input[type="checkbox"]:hover:not(:checked):not(:disabled) {
  border-color: var(--cfa-cobalt);
}

/* Disabled */
.cfa-field input[type="checkbox"]:disabled,
.cfa-field input[type="radio"]:disabled,
.checkbox input[type="checkbox"]:disabled,
.checkbox_edit input[type="checkbox"]:disabled {
  background: var(--cfa-bg-soft);
  border-color: var(--cfa-border);
  cursor: not-allowed;
}

/* Checkbox edit wrapper */
.checkbox_edit {
  margin-bottom: var(--cfa-space-3) !important;
}

.checkbox_edit label {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  color: var(--cfa-text) !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

/* Checkbox label */
.cfa-field--check label,
.checkbox_field label,
.checkbox label {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  font-weight: var(--cfa-weight-normal);
  color: var(--cfa-text-mid);
  cursor: pointer;
  line-height: 1.5;
  margin-bottom: 0;
  float: none !important;
}


/* ================================================================
   BOOTSTRAP FORM-GROUP INTEGRATION
   Layers CFA styling onto Bootstrap form-group + form-control
   without removing Bootstrap's grid and layout classes.
   ================================================================ */

/* Override Bootstrap's .form-control — scoped to form wrappers only.
   NOT applied globally to avoid breaking nav search inputs, datepickers,
   and any compact Bootstrap components outside of form contexts. */
.input_field .form-control,
.input_field2 .form-control,
.select_field .form-control,
.form-group .form-control,
.cfa-field .form-control {
  border-radius: var(--cfa-radius-sm) !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  color: var(--cfa-text) !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  height: auto !important;
  min-height: var(--cfa-field-height);
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h) !important;
  box-shadow: none !important;
  background: var(--cfa-bg) !important;
  background-image: none !important;
  transition:
    border-color var(--cfa-transition-fast),
    box-shadow var(--cfa-transition-fast);
}

.input_field .form-control:focus,
.input_field2 .form-control:focus,
.select_field .form-control:focus,
.form-group .form-control:focus,
.cfa-field .form-control:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
  outline: none;
}

.form-control.has-error,
.has-error .form-control {
  border-color: var(--cfa-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* Bootstrap control-label override */
.control-label {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text-mid) !important;
  float: none !important;
  display: block;
  margin-bottom: var(--cfa-space-2);
}


/* ================================================================
   LAMINAS FORM HELPERS
   Styles applied to elements rendered by Laminas view helpers
   (formRow, formInput, formSelect, formLabel).
   These typically render without CFA classes, so we target
   form context elements broadly but safely.
   ================================================================ */

/* Label rendered by formRow inside a .cfa-field */
.cfa-field > label,
.input_field > label,
.select_field > label,
.form-group > label {
  display: block !important;
  float: none !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: var(--cfa-text-mid) !important;
  margin-bottom: var(--cfa-space-1);
}

/* Input rendered by formRow — inherits .cfa-field-input styles via .form-control above */
.cfa-field > input[type="text"],
.cfa-field > input[type="email"],
.cfa-field > input[type="password"],
.cfa-field > input[type="number"],
.cfa-field > input[type="tel"],
.cfa-field > input[type="url"],
.cfa-field > input[type="date"],
.cfa-field > input[type="search"],
.input_field > input[type="text"],
.input_field > input[type="email"],
.input_field > input[type="password"],
.input_field > input[type="number"],
.select_field > select {
  width: 100%;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-base) !important;
  color: var(--cfa-text) !important;
  background: var(--cfa-bg) !important;
  background-image: none !important;
  border: 1.5px solid var(--cfa-border-strong) !important;
  border-radius: var(--cfa-radius-sm) !important;
  padding: var(--cfa-field-padding-v) var(--cfa-field-padding-h) !important;
  min-height: var(--cfa-field-height);
  box-shadow: none !important;
  box-sizing: border-box;
  transition: border-color var(--cfa-transition-fast), box-shadow var(--cfa-transition-fast);
}

.cfa-field > input:focus,
.input_field > input:focus,
.select_field > select:focus {
  border-color: var(--cfa-cobalt) !important;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, 0.12) !important;
  outline: none;
}


/* ================================================================
   FORM SECTION / GROUP HEADING
   For multi-section forms with titled groups.
   ================================================================ */

.cfa-form-section {
  margin-bottom: var(--cfa-space-9);
}

.cfa-form-section-title {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-base);
  font-weight: var(--cfa-weight-bold);
  color: var(--cfa-text);
  letter-spacing: var(--cfa-tracking-wide);
  text-transform: uppercase;
  padding-bottom: var(--cfa-space-3);
  border-bottom: 1px solid var(--cfa-border);
  margin-bottom: var(--cfa-space-5);
}


/* ================================================================
   FORM FEEDBACK SUMMARY  —  top-of-form error list
   ================================================================ */

.cfa-form-feedback {
  padding: var(--cfa-space-4) var(--cfa-space-5);
  border-radius: var(--cfa-radius-sm);
  margin-bottom: var(--cfa-space-6);
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  display: none;
}

.cfa-form-feedback.is-visible {
  display: block;
}

.cfa-form-feedback--error {
  background: var(--cfa-red-pale);
  border: 1px solid var(--cfa-red-border);
  color: var(--cfa-red);
}

.cfa-form-feedback--success {
  background: var(--cfa-green-pale);
  border: 1px solid rgba(5, 150, 105, 0.30);
  color: var(--cfa-green);
}

.cfa-form-feedback p,
.cfa-form-feedback ul {
  margin: 0;
  font-family: var(--cfa-font-body);
}

.cfa-form-feedback ul {
  padding-left: var(--cfa-space-5);
  margin-top: var(--cfa-space-2);
}


/* ================================================================
   RECAPTCHA WIDGET
   designer.css scales with transform-origin:0 0 which causes
   misalignment. Override to centre and use a sensible origin.
   ================================================================ */

.g-recaptcha {
  display: flex !important;
  justify-content: flex-start !important;
  margin: var(--cfa-space-4) 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* Wrapper div Google injects */
.g-recaptcha > div {
  border: 1px solid var(--cfa-border) !important;
  border-radius: var(--cfa-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--cfa-shadow-sm) !important;
  transform: none !important;
  -webkit-transform: none !important;
  margin: 0 !important;
}

/* Centered variant (password reset etc.) */
.frm-reset-pwd .g-recaptcha {
  justify-content: center !important;
}

#rc-imageselect {
  transform: none !important;
  -webkit-transform: none !important;
}


/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 600px) {
  .cfa-field-input,
  .cfa-field-select,
  .cfa-field-textarea,
  .form_input,
  .form-control {
    font-size: var(--cfa-text-base) !important;  /* prevent iOS zoom on focus */
  }
}


/* ================================================================
   FILE UPLOAD FIELD (.cfa-file-upload-field)
   ================================================================ */

.cfa-file-upload-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: var(--cfa-space-4) !important;
}

.cfa-file-upload-field .cfa-file-label {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-medium) !important;
  color: var(--cfa-text) !important;
  margin: 0 !important;
}

.cfa-file-input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Hide the native file input but keep it accessible */
.cfa-file-upload-field input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Primary button style for the file upload */
.cfa-file-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  color: #fff !important;
  background: var(--cfa-cobalt) !important;
  border: none !important;
  border-radius: var(--cfa-radius-md) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.cfa-file-btn:hover {
  background: var(--cfa-cobalt-dark, #1a3a8a) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.cfa-file-btn:focus {
  outline: 2px solid var(--cfa-cobalt) !important;
  outline-offset: 2px !important;
}

.cfa-file-msg {
  font-family: var(--cfa-font-body) !important;
  font-size: var(--cfa-text-xs) !important;
  color: var(--cfa-text-muted) !important;
}