/**
 * Preferred Realtor Signup - US (Gravity Form 29).
 *
 * Ported from assets/css/contact.css, which is the only place the redesign's
 * Gravity Forms treatment exists. Everything shared with that page keeps the
 * same values so the two forms read as one system; the rules below marked
 * "not in contact.css" cover field types the contact form does not use.
 *
 * Scoped to body.ij-rform, added by the same gate in inc/assets.php that
 * enqueues this file. The contact page hangs its rules off a .ij-contact
 * wrapper its template renders; this page is a Beaver Builder layout with no
 * template, so the body class is the equivalent hook.
 *
 * Two specificity notes:
 *
 * 1. Every selector carries the three-class prefix `body.ij-rform
 *    .gform_wrapper` (0,3,1). Gravity Forms' own sheet styles this form
 *    through `.gform_wrapper.gravity-theme X` (0,3,0), so a shorter prefix
 *    loses: at `body.ij-rform X` (0,2,1) the required markers stayed visible
 *    and the drop area kept GF's grey fill. contact.css reaches the same
 *    (0,3,1) via `body .ij-contact .cform`.
 * 2. bb-theme/css/base.min.css is Bootstrap-derived and is enqueued AFTER the
 *    child theme's sheets, so every <a> here states its own colour and hover
 *    colour rather than inheriting one.
 */

body.ij-rform .gform_wrapper { margin: 0; }

/* Anti-spam honeypot: GF hides this itself, restated so a stray rule in the
   parent theme cannot reveal it. */
body.ij-rform .gform_wrapper .gform_validation_container,
body.ij-rform .gform_wrapper .gfield--type-honeypot { display: none !important; }

/* ---- Labels ---- */
body.ij-rform .gform_wrapper .gfield_label,
body.ij-rform .gform_wrapper .ginput_complex label,
body.ij-rform .gform_wrapper legend.gfield_label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* The Name field prints its own "Realtor Name" label above the two sub-labels
   the design actually shows ("First Name" / "Last Name"), so it is hidden. */
body.ij-rform.ij-rform--realtor .gform_wrapper .gfield--type-name > .gfield_label { display: none; }

body.ij-rform .gform_wrapper .ginput_complex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.ij-rform .gform_wrapper .ginput_complex > span { display: block; min-width: 0; }

/* Every field on this form is required, so 16 "(Required)" markers and the
   legend above them are noise. The design shows neither. */
body.ij-rform .gform_wrapper .gfield_required,
body.ij-rform .gform_wrapper .gform_required_legend { display: none; }

/* Field hints: "Format: (000) 000-0000.", "Place N/A if none." */
body.ij-rform .gform_wrapper .gfield_description {
  margin-top: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* ---- Text inputs ---- */
body.ij-rform .gform_wrapper input[type="text"],
body.ij-rform .gform_wrapper input[type="email"],
body.ij-rform .gform_wrapper input[type="tel"],
body.ij-rform .gform_wrapper input[type="number"],
body.ij-rform .gform_wrapper textarea {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  outline: none;
  transition: border-color 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}

body.ij-rform .gform_wrapper textarea {
  padding: 14px;
  line-height: 1.6;
  height: 140px;
  min-height: 140px;
  resize: vertical;
}

/* The design sets outline:none on its inputs and offers no focus treatment of
   its own, which would leave keyboard users with nothing. This is the theme's
   focus ring, in the design's green. */
body.ij-rform .gform_wrapper input[type="text"]:focus,
body.ij-rform .gform_wrapper input[type="email"]:focus,
body.ij-rform .gform_wrapper input[type="tel"]:focus,
body.ij-rform .gform_wrapper textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(140,198,62,0.35);
}

body.ij-rform .gform_wrapper ::placeholder { color: var(--color-text-secondary); opacity: 1; }

/* ---- Checkbox groups ---- (not in contact.css: it has radio chips only)
   Services Offered and Marketing materials. The mockups draw checkboxes as
   plain controls tinted green rather than as pills, so these stay a list. */
body.ij-rform .gform_wrapper .gfield_checkbox {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.ij-rform .gform_wrapper .gfield_checkbox .gchoice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.ij-rform .gform_wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-green);
  flex: none;
  margin: 0;
}

body.ij-rform .gform_wrapper .gfield_checkbox label,
body.ij-rform .gform_wrapper .ginput_container_consent label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  cursor: pointer;
  margin: 0;
}

body.ij-rform .gform_wrapper input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 2px;
}

/* ---- File upload ---- (not in contact.css, and not in any mockup)
   No mockup draws an uploader, so this is built from the design's own
   vocabulary: the 12px radius, the border token, and green on interaction. */
body.ij-rform .gform_wrapper .ginput_container_fileupload { margin-top: 8px; }

body.ij-rform .gform_wrapper .gform_drop_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  transition: border-color 200ms cubic-bezier(0.4,0,0.2,1), background 200ms cubic-bezier(0.4,0,0.2,1);
}

body.ij-rform .gform_wrapper .gform_drop_area:hover,
body.ij-rform .gform_wrapper .gform_drop_area.gform_drop_area_hover {
  border-color: var(--brand-green);
  background: var(--color-success-soft);
}

body.ij-rform .gform_wrapper .gform_drop_instructions {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Secondary button: the submit button's shape without its fill, so the two
   are not competing for the same emphasis. */
body.ij-rform .gform_wrapper .gform_button_select_files {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--brand-green);
  border-radius: 100px;
  background: #fff;
  color: var(--brand-green-dark);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1);
}

body.ij-rform .gform_wrapper .gform_button_select_files:hover {
  background: var(--brand-green);
  color: #fff;
}

body.ij-rform .gform_wrapper .gform_button_select_files:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 2px;
}

body.ij-rform .gform_wrapper .gform_fileupload_rules {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

body.ij-rform .gform_wrapper .ginput_preview_list { margin-top: 8px; }

body.ij-rform .gform_wrapper .ginput_preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  color: var(--color-text);
}

/* ---- Consent rows ---- (NDA, Joint Marketing Agreement)
   Unlike the contact form, the label is kept: it is what names which of the
   two agreements the tick applies to. */
body.ij-rform .gform_wrapper .ginput_container_consent {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.ij-rform .gform_wrapper .ginput_container_consent a {
  color: var(--brand-green-dark);
  font-weight: 600;
  text-decoration: underline;
}

body.ij-rform .gform_wrapper .ginput_container_consent a:hover,
body.ij-rform .gform_wrapper .ginput_container_consent a:focus {
  color: var(--brand-green);
  text-decoration: underline;
}

/* The consent statement (Referral agreement): GF's theme draws it as a
   bordered, scrolling 14.4px box. Plain help text instead, the same
   13px / 500 / tertiary as every other description on these forms. */
body.ij-rform .gform_wrapper .gfield_consent_description .gfield_consent_description_text {
  border: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* ---- Submit ---- */
body.ij-rform .gform_wrapper .gform_footer { margin: 24px 0 0; padding: 0; }

body.ij-rform .gform_wrapper input[type="submit"],
body.ij-rform .gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: none;
  border-radius: 100px;
  background: var(--brand-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4,0,0.2,1);
}

body.ij-rform .gform_wrapper input[type="submit"]:hover,
body.ij-rform .gform_wrapper .gform_button:hover { background: var(--brand-green-dark); }

body.ij-rform .gform_wrapper input[type="submit"]:focus-visible {
  outline: 2px solid var(--brand-green-dark);
  outline-offset: 2px;
}

/* ---- Validation ---- */
body.ij-rform .gform_wrapper .gform_validation_errors {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  box-shadow: none;
}

body.ij-rform .gform_wrapper .gform_validation_errors h2,
body.ij-rform .gform_wrapper .gform_submission_error {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

body.ij-rform .gform_wrapper .gfield_description.validation_message,
body.ij-rform .gform_wrapper .gfield_validation_message {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: #b3261e;
}

body.ij-rform .gform_wrapper .gfield_error input[type="text"],
body.ij-rform .gform_wrapper .gfield_error input[type="email"],
body.ij-rform .gform_wrapper .gfield_error input[type="tel"],
body.ij-rform .gform_wrapper .gfield_error textarea { border-color: #b3261e; }

body.ij-rform .gform_wrapper .gfield_error .gform_drop_area { border-color: #b3261e; }

/* GF's AJAX confirmation replaces the form in place. */
body.ij-rform .gform_wrapper .gform_confirmation_message {
  padding: 24px;
  border-radius: 16px;
  background: var(--color-success-soft);
  color: var(--brand-green-dark);
  font-size: 16px;
  font-weight: 600;
}

/* ---- Responsive ----
   GF collapses its own grid at its mobile breakpoint, so only the things GF
   does not know about are restated here. */
@media (max-width: 640px) {
  body.ij-rform .gform_wrapper .ginput_complex { grid-template-columns: minmax(0, 1fr); }
  body.ij-rform .gform_wrapper input[type="submit"],
  body.ij-rform .gform_wrapper .gform_button { width: 100%; justify-content: center; }
  body.ij-rform .gform_wrapper .gform_drop_area { padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ij-rform .gform_wrapper input,
  body.ij-rform .gform_wrapper textarea,
  body.ij-rform .gform_wrapper .gform_drop_area,
  body.ij-rform .gform_wrapper .gform_button_select_files,
  body.ij-rform .gform_wrapper input[type="submit"],
  body.ij-rform .gform_wrapper .gform_button { transition: none; }
}

/* ==========================================================================
   The stepped shell — a port of "Realtor Program Form.dc.html".
   Everything above was written when this page was one long form inside the
   site chrome. The rules below restate what the design sets differently, with
   its own values: the page under its own logo, the top row (back / counter and
   bar / close), a step heading and lead, sentence-case 15px labels with the
   orange marker, help text ABOVE the field, option cards for choices, and the
   Continue bar. Appended, so they win on load order at equal specificity.
   ========================================================================== */

/* ---- Shell ---- */

.ij-rform-shell {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 32px 0;
  background: var(--slate-50);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

.ij-rform-shell a,
.ij-rform-shell a:hover,
.ij-rform-shell a:focus { text-decoration: none; }

.ij-rform-logo { display: block; }
.ij-rform-logo img { height: 44px; width: auto; display: block; }

.ij-rform-frame { width: 100%; max-width: 900px; flex: 1; display: flex; flex-direction: column; padding-bottom: 32px; }

/* ---- Top row: back, counter + bar, close ---- */

.ij-rform-top { margin-top: 40px; display: flex; align-items: center; gap: 20px; }

.ij-rform-back,
.ij-rform-close {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ij-rform-back[hidden] { display: flex !important; visibility: hidden; }
.ij-rform-back:disabled { opacity: 0.35; cursor: default; }
.ij-rform-close:hover { background: var(--slate-100); color: var(--color-text); }
/* The design's back arrow has no hover fill; without this the parent
   theme's blue button:hover shows through, even on the disabled step-1 arrow. */
body .ij-rform-back,
body .ij-rform-back:hover,
body .ij-rform-back:focus,
body .ij-rform-back:active,
body .ij-rform-back:disabled:hover { background: transparent !important; color: var(--color-text) !important; border: none !important; }
.ij-rform-back:focus-visible,
.ij-rform-close:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.ij-rform-progress { flex: 1; min-width: 0; }
.ij-rform-progress[hidden] { display: block !important; visibility: hidden; }
.ij-rform-counter { font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); }
.ij-rform-track { margin-top: 6px; height: 4px; border-radius: 100px; background: var(--slate-200); overflow: hidden; }
.ij-rform-track span { display: block; height: 100%; border-radius: 100px; background: var(--brand-green); transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); }

/* GF's own progress bar: the top row above replaces it. */
body.ij-rform .gform_wrapper .gf_progressbar_wrapper { display: none !important; }

/* ---- Step heading ---- */

.ij-rform-pane { padding: 48px 0 8px; }
.ij-rform-title {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  font-weight: 600;
  color: var(--color-text);
  text-wrap: pretty;
}
.ij-rform-lead { margin: 16px 0 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); }
.ij-rform-body { margin-top: 40px; }

/* The Facebook page's three offers, and the fatwa downloads: the design's
   option-card shape, as information rather than choices. */
.ij-rform-points,
.ij-rform-downloads { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ij-rform-downloads { margin: 0; }
.ij-rform-points li,
.ij-rform-downloads a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.ij-rform-points strong,
.ij-rform-downloads strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--color-text); }
.ij-rform-point-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--color-success-soft); color: var(--brand-green-dark); display: flex; align-items: center; justify-content: center; }
.ij-rform-downloads a { align-items: center; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-rform-downloads a > span:nth-child(2) { flex: 1; }
.ij-rform-downloads a > svg { flex: none; color: var(--brand-green-dark); }
.ij-rform-downloads a:hover,
.ij-rform-downloads a:focus { border-color: var(--brand-green); background: var(--color-success-soft); color: var(--color-text-secondary); }
.ij-rform-downloads a:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---- Field rhythm: 20px between rows, 16px between columns ---- */

body.ij-rform .gform_wrapper .gform_fields { row-gap: 20px !important; column-gap: 16px !important; grid-row-gap: 20px !important; grid-column-gap: 16px !important; }
body.ij-rform .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }

/* Help text sits between the label and the field, as the design places it. */
body.ij-rform .gform_wrapper .gfield:not(fieldset) { display: flex; flex-direction: column; }
body.ij-rform .gform_wrapper .gfield > .gfield_label { order: 0; }
body.ij-rform .gform_wrapper .gfield > .gfield_description:not(.validation_message):not(.gfield_validation_message) { order: 1; }
body.ij-rform .gform_wrapper .gfield > .ginput_container { order: 2; }
body.ij-rform .gform_wrapper .gfield > .validation_message,
body.ij-rform .gform_wrapper .gfield > .gfield_validation_message { order: 3; }

/* ---- Labels: 15px / 600, sentence case, orange marker ---- */

body.ij-rform .gform_wrapper .gfield_label,
body.ij-rform .gform_wrapper legend.gfield_label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-transform: none;
  color: var(--color-text);
}
body.ij-rform .gform_wrapper .ginput_complex label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-top: 6px;
}

body.ij-rform .gform_wrapper .gfield_required { display: inline; margin-left: 4px; color: var(--color-danger); }
body.ij-rform .gform_wrapper .gfield_required .gfield_required_text { display: none; }
body.ij-rform .gform_wrapper .gfield_required::after { content: '*'; }
body.ij-rform .gform_wrapper .gfield_required .gfield_required_asterisk { display: none; }

body.ij-rform .gform_wrapper .gfield_description:not(.validation_message):not(.gfield_validation_message) {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

/* ---- Inputs: 11px 14px, 15px, 12px radius ---- */

body.ij-rform .gform_wrapper input[type="text"],
body.ij-rform .gform_wrapper input[type="email"],
body.ij-rform .gform_wrapper input[type="tel"],
body.ij-rform .gform_wrapper input[type="number"],
body.ij-rform .gform_wrapper input[type="url"],
body.ij-rform .gform_wrapper select,
body.ij-rform .gform_wrapper textarea {
  margin-top: 8px;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background-color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  outline: none;
  box-shadow: none;
}
body.ij-rform .gform_wrapper select { padding-right: 40px; }
body.ij-rform .gform_wrapper textarea { height: auto; min-height: 96px; line-height: 1.6; resize: vertical; }
body.ij-rform .gform_wrapper input:focus,
body.ij-rform .gform_wrapper select:focus,
body.ij-rform .gform_wrapper textarea:focus { border-color: var(--brand-green); box-shadow: var(--ring-focus); }
body.ij-rform .gform_wrapper ::placeholder { color: var(--color-text-tertiary, var(--color-text-secondary)); opacity: 1; }

/* A complex field's sub-inputs (name, address) sit in the design's two-up grid. */
body.ij-rform .gform_wrapper .ginput_complex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
body.ij-rform .gform_wrapper .ginput_complex > span { width: auto !important; padding: 0 !important; margin: 0 !important; }
body.ij-rform .gform_wrapper .ginput_complex .ginput_full,
body.ij-rform .gform_wrapper .ginput_complex .address_line_1,
body.ij-rform .gform_wrapper .ginput_complex .address_line_2 { grid-column: 1 / -1; }
body.ij-rform .gform_wrapper .ginput_complex label { order: 2; }

/* ---- Choices: the design's option cards ---- */

body.ij-rform .gform_wrapper .gfield_checkbox,
body.ij-rform .gform_wrapper .gfield_radio {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}
body.ij-rform .gform_wrapper .gfield_checkbox .gchoice,
body.ij-rform .gform_wrapper .gfield_radio .gchoice {
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: #fff;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.ij-rform .gform_wrapper .gchoice:hover { border-color: var(--brand-green); }
body.ij-rform .gform_wrapper .gchoice:has(input:checked) { border-color: var(--brand-green); background: var(--color-success-soft); }
body.ij-rform .gform_wrapper .gchoice input[type="checkbox"],
body.ij-rform .gform_wrapper .gchoice input[type="radio"] {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-green);
}
body.ij-rform .gform_wrapper .gchoice label {
  display: flex !important;
  align-items: center;
  min-height: 47px;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 16px 12px 46px !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
}
body.ij-rform .gform_wrapper .gchoice input:focus-visible + label { box-shadow: var(--ring-focus); border-radius: 14px; }

/* ---- Paging and submit: the design's footer bar ---- */

body.ij-rform .gform_wrapper .gform_page_footer,
body.ij-rform .gform_wrapper .gform_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 40px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--color-border);
}

/* The top row's back arrow presses this; the design has no second back control.
   Visually hidden rather than display:none: GF's submission handler ignores a
   press on a button that is not rendered, which left the arrow doing nothing. */
body.ij-rform .gform_wrapper .gform_previous_button {
  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;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

body.ij-rform .gform_wrapper .gform_next_button,
body.ij-rform .gform_wrapper .gform_button,
body.ij-rform .gform_wrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 10px 20px !important;
  border: none;
  border-radius: 100px;
  background: var(--brand-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.ij-rform .gform_wrapper .gform_next_button:hover,
body.ij-rform .gform_wrapper .gform_button:hover,
body.ij-rform .gform_wrapper input[type="submit"]:hover { background: var(--brand-green-dark); color: #fff; }
body.ij-rform .gform_wrapper .gform_next_button:focus-visible,
body.ij-rform .gform_wrapper .gform_button:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.ij-rform .gform_wrapper .gform_page_footer::after { content: none; }
body.ij-rform .gform_wrapper .gform_ajax_spinner { margin-left: 4px; }

/* ---- Name fields ----
   The realtor signups show only "First name" / "Last name", as the design
   does, so their "Realtor Name" label stays hidden (rule near the top). Every
   other form keeps it: Customer Registration has two name fields, and without
   their labels the sales rep's name and the customer's look identical. */
body.ij-rform:not(.ij-rform--realtor) .gform_wrapper .gfield--type-name > .gfield_label { display: block; }
body.ij-rform .gform_wrapper .gfield--type-name .ginput_complex label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text);
}
body.ij-rform:not(.ij-rform--realtor) .gform_wrapper .gfield--type-name .ginput_complex label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
/* With the field label hidden, the required marker moves to First / Last. */
body.ij-rform.ij-rform--realtor .gform_wrapper .gfield--type-name.gfield_contains_required .name_first > label::after,
body.ij-rform.ij-rform--realtor .gform_wrapper .gfield--type-name.gfield_contains_required .name_last > label::after { content: "*"; margin-left: 4px; color: var(--color-danger); }

/* ---- Buttons inside a form's own HTML (the calculator's Calculate) ---- */
body.ij-rform .gform_wrapper .gfield_html button.primary-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  background: var(--brand-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.ij-rform .gform_wrapper .gfield_html button.primary-button:hover { background: var(--brand-green-dark); }
body.ij-rform .gform_wrapper .gfield_html h1,
body.ij-rform .gform_wrapper .gfield_html h2,
body.ij-rform .gform_wrapper .gfield_html h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.5px; color: var(--color-text); }

/* ---- Gravity Forms' legacy markup (Business Intake #7, Facebook #12) ----
   These two forms still use GF's pre-2.5 list markup, whose stylesheet
   reaches inputs through `.gform_legacy_markup_wrapper input:not(...)x5`
   (0,6,1) — more specific than anything above — so the design's values are
   restated here with !important. */
body.ij-rform .gform_legacy_markup_wrapper ul.gform_fields { display: flex !important; flex-direction: column; gap: 20px; margin: 0 !important; padding: 0 !important; list-style: none; }
body.ij-rform .gform_legacy_markup_wrapper li.gfield { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; clear: none !important; }
body.ij-rform .gform_legacy_markup_wrapper .gfield_label { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4; }
body.ij-rform .gform_legacy_markup_wrapper .ginput_container { margin-top: 0 !important; }
body.ij-rform .gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body.ij-rform .gform_legacy_markup_wrapper select,
body.ij-rform .gform_legacy_markup_wrapper textarea {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  color: var(--color-text);
}
body.ij-rform .gform_legacy_markup_wrapper select { padding-right: 40px !important; }
body.ij-rform .gform_legacy_markup_wrapper .ginput_complex { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; width: 100% !important; }
body.ij-rform .gform_legacy_markup_wrapper .ginput_complex span,
body.ij-rform .gform_legacy_markup_wrapper .ginput_complex .ginput_left,
body.ij-rform .gform_legacy_markup_wrapper .ginput_complex .ginput_right { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
body.ij-rform .gform_legacy_markup_wrapper .ginput_complex label { margin: 6px 0 0 !important; font-size: 13px !important; font-weight: 500; color: var(--color-text-secondary); letter-spacing: normal; }
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio,
body.ij-rform .gform_legacy_markup_wrapper .gfield_checkbox { margin: 12px 0 0 !important; padding: 0 !important; list-style: none; }
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio li,
body.ij-rform .gform_legacy_markup_wrapper .gfield_checkbox li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  background: #fff;
  overflow: visible !important;
}
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio li:has(input:checked),
body.ij-rform .gform_legacy_markup_wrapper .gfield_checkbox li:has(input:checked) { border-color: var(--brand-green); background: var(--color-success-soft); }
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio li input,
body.ij-rform .gform_legacy_markup_wrapper .gfield_checkbox li input { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0 !important; width: 18px; height: 18px; accent-color: var(--brand-green); }
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio li label,
body.ij-rform .gform_legacy_markup_wrapper .gfield_checkbox li label { display: flex !important; align-items: center; min-height: 47px; box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 16px 12px 46px !important; font-size: 14px !important; cursor: pointer; }
body.ij-rform .gform_legacy_markup_wrapper .gfield_radio { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; }
body.ij-rform .gform_legacy_markup_wrapper .gform_page_footer,
body.ij-rform .gform_legacy_markup_wrapper .gform_footer { margin: 40px 0 0 !important; padding: 24px 0 0 !important; border-top: 1px solid var(--color-border) !important; }
body.ij-rform .gform_legacy_markup_wrapper .gform_page_footer input[type="button"],
body.ij-rform .gform_legacy_markup_wrapper .gform_footer input[type="submit"] { margin: 0 !important; line-height: 1.4 !important; min-height: 0 !important; }

/* ---- List fields (Fix & Flip's "Borrower Name(s)") ----
   GF draws these as a grey table with icon-only add/remove buttons; here each
   row is an ordinary input with its Add / Remove as the design's small pills. */
body.ij-rform .gform_wrapper .gfield_list_container,
body.ij-rform .gform_wrapper .gfield_list_groups { width: 100% !important; margin: 0; padding: 0; border: 0; background: none; }
body.ij-rform .gform_wrapper .gfield_list_group { width: 100% !important; }
body.ij-rform .gform_wrapper .gfield_list_group_item input { width: 100% !important; }
body.ij-rform .gform_wrapper .gfield_list_icons .delete_list_item[style*="hidden"] { display: none !important; }
body.ij-rform .gform_wrapper .gfield_list_group {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body.ij-rform .gform_wrapper .gfield_list_group_item { flex: 1; min-width: 0; padding: 0 !important; }
body.ij-rform .gform_wrapper .gfield_list_icons { display: flex; gap: 6px; padding: 8px 0 0 !important; background: none !important; }
body.ij-rform .gform_wrapper .gfield_list_icons button {
  width: auto !important;
  height: auto !important;
  padding: 7px 14px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 100px;
  background: #fff none !important;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  text-indent: 0 !important;
  overflow: visible !important;
  cursor: pointer;
}
body.ij-rform .gform_wrapper .gfield_list_icons button::before,
body.ij-rform .gform_wrapper .gfield_list_icons button::after { content: none !important; display: none !important; }
body.ij-rform .gform_wrapper .gfield_list_icons .add_list_item { border-color: var(--brand-green) !important; color: var(--brand-green-dark); background: var(--color-success-soft) none !important; }
body.ij-rform .gform_wrapper .gfield_list_icons button:hover { border-color: var(--brand-green) !important; }

/* ---- Phones: the design stacks its two-up rows at 720px ---- */

@media (max-width: 720px) {
  .ij-rform-shell { padding-left: 20px; padding-right: 20px; }
  .ij-rform-top { margin-top: 28px; gap: 12px; }
  .ij-rform-pane { padding-top: 36px; }
  .ij-rform-body { margin-top: 32px; }
  body.ij-rform .gform_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr) !important; }
  body.ij-rform .gform_wrapper .gfield { grid-column: 1 / -1 !important; }
  body.ij-rform .gform_wrapper .ginput_complex,
  body.ij-rform .gform_legacy_markup_wrapper .ginput_complex { grid-template-columns: minmax(0, 1fr) !important; }
  body.ij-rform .gform_legacy_markup_wrapper .gfield_radio { grid-template-columns: minmax(0, 1fr) !important; }
  body.ij-rform .gform_wrapper .gfield_checkbox,
  body.ij-rform .gform_wrapper .gfield_radio { grid-template-columns: minmax(0, 1fr); }
  body.ij-rform .gform_wrapper .gform_next_button,
  body.ij-rform .gform_wrapper .gform_button,
  body.ij-rform .gform_wrapper input[type="submit"] { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ij-rform-track span,
  .ij-rform-back,
  .ij-rform-close,
  .ij-rform-downloads a,
  body.ij-rform .gform_wrapper .gchoice,
  body.ij-rform .gform_wrapper .gform_next_button,
  body.ij-rform .gform_wrapper .gform_button { transition: none; }
}

/* ---- Multi-section forms (the commercial loan application, 2026-10-07) ----
   The layout's top row already counts the steps, so Gravity Forms' own
   numbered step list would say the same thing twice. Section breaks take the
   design's heading style instead of the plugin's light 24px. */
body.ij-rform .gform_wrapper .gf_page_steps { display: none !important; }
body.ij-rform .gform_wrapper .gsection {
	margin-top: 16px; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--color-divider);
}
/* A section that runs straight into another (Owners Information → Owner #1)
   would stack two rules; the next heading's own rule is enough. */
body.ij-rform .gform_wrapper .gsection:has(+ .gsection) { border-bottom: 0; padding-bottom: 0; }
body.ij-rform .gform_wrapper .gsection .gsection_title {
	margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.35; letter-spacing: -0.3px;
	font-weight: 600; color: var(--color-text);
}
body.ij-rform .gform_wrapper .gsection .gsection_description {
	margin-top: 6px; padding: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--color-text-secondary);
}

/* bb-theme's Bootstrap base draws a rule under every <legend>, and Gravity
   Forms uses <legend> for the label of each choice question (radio,
   checkbox, name), so those labels carried a stray grey line. */
body.ij-rform .gform_wrapper legend.gfield_label { border: 0; border-bottom: 0; padding-bottom: 0; }
/* Gravity Forms pulls the address block out by 9px a side to offset column
   gutters this layout does not use, so it sat wider than every other field. */
body.ij-rform .gform_wrapper .ginput_container_address { margin-left: 0; margin-right: 0; }

/* After an AJAX step or a failed validation, Gravity Forms swaps the form in at
   inline opacity:0 and fades it back only once its post-render scripts run. When
   they don't (any script error, or its visibility test never passing), the page
   is left showing the error banner over an invisible form. Never hide it. */
body.ij-rform .gform_wrapper form { opacity: 1 !important; }

/* ---- First / Last name pairs (form 41, added 2026-10-13) ----
   JotForm drew one label ("Legal Name of Applicant", "Key Contact Name",
   each owner's "Name") over two inputs captioned First Name / Last Name. GF
   has two text fields with the same label, which read as a duplicate. The
   pair sits side by side (half width in the form), the second label keeps
   its space so the inputs line up but is not shown, and each description is
   the caption under its input, styled like a Name field's sublabels. */
body.ij-rform .gform_wrapper .ij-name-last > .gfield_label { visibility: hidden; }
body.ij-rform .gform_wrapper .ij-name-first > .gfield_description:not(.validation_message):not(.gfield_validation_message),
body.ij-rform .gform_wrapper .ij-name-last > .gfield_description:not(.validation_message):not(.gfield_validation_message) {
  order: 3;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
body.ij-rform .gform_wrapper .ij-name-first > .validation_message,
body.ij-rform .gform_wrapper .ij-name-first > .gfield_validation_message,
body.ij-rform .gform_wrapper .ij-name-last > .validation_message,
body.ij-rform .gform_wrapper .ij-name-last > .gfield_validation_message { order: 4; }

/* GF stacks half-width fields at 640px; the stacked Last Name needs no label. */
@media (max-width: 640px) {
  body.ij-rform .gform_wrapper .ij-name-last > .gfield_label { display: none; }
  body.ij-rform .gform_wrapper .gfield.ij-name-last { margin-top: -8px !important; }
}

/* ---- Commercial application: Review step and word counters (2026-10-13) ----
   assets/js/gf-commercial.js fills .ij-review with each step's answers. */
body.ij-rform .ij-review { display: flex; flex-direction: column; gap: 16px; }
body.ij-rform .ij-review-step { padding: 20px 24px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; }
body.ij-rform .ij-review-title { margin: 0 0 8px; font-family: var(--font-sans); font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--color-text); }
body.ij-rform .ij-review-sub { margin: 16px 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); }
body.ij-rform .ij-review dl { margin: 0; }
body.ij-rform .ij-review-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
body.ij-rform .ij-review-row:last-child { border-bottom: 0; }
body.ij-rform .ij-review-row dt { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-text-secondary); }
body.ij-rform .ij-review-row dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; white-space: pre-line; }
body.ij-rform .ij-review-empty { color: var(--color-text-secondary); }
@media (max-width: 640px) {
	body.ij-rform .ij-review-step { padding: 16px; }
	body.ij-rform .ij-review-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.gform_wrapper .ij-word-counter.ij-over { color: var(--ij-gf-error, #b3261e); }

/* Commercial application terms (form 41 field 210, 2026-10-13): JotForm's
   credit authorization, in a bordered box that scrolls like JotForm's. */
body.ij-rform .gform_wrapper .ij-terms {
	margin-top: 12px; max-height: 260px; overflow-y: auto; padding: 14px 16px;
	border: 1px solid var(--color-border-strong); border-radius: 12px; background: #fff;
	font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--color-text-secondary);
}
body.ij-rform .gform_wrapper .ij-terms p { margin: 0 0 12px; }
body.ij-rform .gform_wrapper .ij-terms p:last-child { margin-bottom: 0; }