/**
 * Application page (Gravity Form 1, "Acquisition Request").
 *
 * Two halves:
 *
 * 1. The split-screen shell — scoped under .ij-apply-split, which only
 *    this template renders.
 * 2. The Gravity Forms restyle — every selector prefixed
 *    `body.ij-apply .gform_wrapper`.
 *
 * **That prefix is load-bearing, not decoration.** Gravity Forms styles
 * this form through `.gform_wrapper.gravity-theme X` and enqueues
 * basic.min.css, theme-components.min.css and theme.min.css at the very
 * end of the page — after this file. Equal specificity therefore LOSES
 * on load order, so every rule here has to outrank its GF counterpart
 * outright.
 *
 * The leading `body` is what does that, exactly as in tokens.css. GF's
 * two classes (`.gform_wrapper.gravity-theme`) and ours
 * (`body.ij-apply .gform_wrapper`) both score two classes at the same
 * depth — but `body` adds an element, which breaks the tie in our favour
 * at every level. Rules that also carry one of GF's own classes
 * (`.gfield_radio label`, `.ginput_container_consent`) sit a further
 * class clear.
 *
 * None of this is taken on trust: tests/test-css-cascade.php computes
 * the arithmetic against GF's real stylesheets, for every sheet listed
 * in ij_gf_styled_sheets(), and treats a tie as a failure — the same
 * check that caught contact.css rendering the consent chips one letter
 * per line.
 *
 * The form itself is untouched. Every control below is GF's own markup.
 */

/* =========================================================================
   1. The split screen
   =========================================================================

   Values below are taken from the design AS IT RENDERS, measured off
   https://ijara-websitenew.vercel.app/Apply.dc.html, not from reading its
   source. The two differ in one important way: the source puts a
   photograph and a gradient behind the left panel and then lays an opaque
   `.pane` over both, so the published page shows a FLAT DARK PANEL and the
   photograph never appears. Reproducing the source rather than the render
   is why an earlier version of this page did not match. */

body.ij-apply { background: var(--slate-900); }

.ij-apply-split {
	height: 100vh;
	height: 100dvh; /* mobile browsers: the visual viewport, not the layout one */
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

/* ---- Left panel ---------------------------------------------------------- */

.ij-apply-aside {
	position: relative;
	flex: 0 1 34%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	background: var(--slate-900);
}

.ij-apply-pane {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: clamp(32px, 5vw, 72px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
}

.ij-apply-pane::-webkit-scrollbar { width: 6px; }
.ij-apply-pane::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 100px; }

.ij-apply-logo { position: relative; display: block; flex: none; }

/* The design closes the panel with a support number. */
.ij-apply-help {
	position: relative;
	margin: 48px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}

body .ij-apply-help a { color: var(--brand-green-light); font-weight: 600; }
body .ij-apply-help a:hover { color: #fff; }

/* ---- The step rail ------------------------------------------------------- */

.ij-apply-steps {
	position: relative;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.ij-apply-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	/* Pinned, not `auto`: the label is taller than the bullet, and letting
	   it drive row 1 stretched every step from the design's 88px to 103. */
	grid-template-rows: 44px 1fr;
	column-gap: 20px;
	align-items: start;
}

.ij-apply-bullet {
	grid-column: 1;
	grid-row: 1;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border-radius: 100px;
	border: 2px solid rgba(255, 255, 255, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		background 200ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
		color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The connector between one bullet and the next. */
.ij-apply-rule {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;
	width: 1px;
	min-height: 28px;
	margin: 8px 0;
	background: rgba(255, 255, 255, 0.28);
	display: block;
}

.ij-apply-step:last-child .ij-apply-rule { display: none; }

.ij-apply-label { grid-column: 2; grid-row: 1; padding: 2px 0 8px; }

.ij-apply-num {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.ij-apply-name {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: rgba(255, 255, 255, 0.6);
}

/* The step in progress: a WHITE FILLED disc with a green check and a wide
   soft halo. The design uses the same treatment for the current step as
   for completed ones — there is no hollow "ring" state in the render. */
.ij-apply-step.is-current .ij-apply-bullet,
.ij-apply-step.is-done .ij-apply-bullet {
	border-color: #fff;
	background: #fff;
	color: var(--brand-green-dark);
}

.ij-apply-step.is-current .ij-apply-bullet { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18); }

.ij-apply-step.is-current .ij-apply-num,
.ij-apply-step.is-current .ij-apply-name { color: #fff; }

.ij-apply-step.is-done .ij-apply-num,
.ij-apply-step.is-done .ij-apply-name { color: rgba(255, 255, 255, 0.8); }

/* ---- Right panel --------------------------------------------------------- */

.ij-apply-main {
	position: relative;
	flex: 1 1 66%;
	min-width: 0;
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
	background: var(--surface-sunken);
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---- Top chrome: back and close ------------------------------------------
   The back chevron is the design's only back control; Gravity Forms' own
   "Previous" button is hidden further down. It drives that button rather
   than duplicating the paging logic. */

.ij-apply-chrome {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ij-apply-chrome-gap { flex: 1 1 0; min-width: 0; }

.ij-apply-back,
.ij-apply-close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	cursor: pointer;
}

.ij-apply-back[disabled] { opacity: 0.35; pointer-events: none; }

.ij-apply-close:hover { background: var(--slate-100); }

/* The design's back arrow has no hover fill (the theme's button:hover
   also turned its chevron white). */
body .ij-apply-back,
body .ij-apply-back:hover,
body .ij-apply-back:focus,
body .ij-apply-back:active { background: transparent !important; color: var(--color-text) !important; border: 0 !important; }

body .ij-apply-close { color: var(--color-text); }
body .ij-apply-close:hover { color: var(--color-text); }

.ij-apply-back:focus-visible,
.ij-apply-close:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
}

/* The form scrolls under the chrome, which stays put. */
.ij-apply-form {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	margin-top: 56px;
	padding-right: 8px;
	box-sizing: border-box;
	scrollbar-width: thin;
}

/* The scroll box clips on every side (overflow-y:auto makes overflow-x auto
   too), and on desktop its content started flush at its left and top edges,
   so each field's 1px border, the 3px focus ring (--ring-focus), the 4px
   outline on the choice cards and the error banner's border were cut off on
   the left (fixed 2026-10-02). 8px of padding inside, cancelled by the same
   negative margin outside, gives them room without moving anything.
   Phones keep their own 24px padding (max-width:560px below). */
@media (min-width: 561px) {
	.ij-apply-form {
		margin-top: 48px;
		margin-left: -8px;
		padding-top: 8px;
		padding-left: 8px;
	}
}

.ij-apply-form::-webkit-scrollbar { width: 6px; }
.ij-apply-form::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 100px; }

/* =========================================================================
   2. Gravity Forms
   ========================================================================= */

body.ij-apply .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-apply .gform_wrapper .gform_validation_container { display: none !important; }

/* GF's own percentage progress bar. The rail in the left panel is what
   reports progress on this page, and two progress indicators disagreeing
   with each other is worse than one. */
body.ij-apply .gform_wrapper .gf_progressbar_wrapper { display: none; }

/* ---- Field frame --------------------------------------------------------- */

body.ij-apply .gform_wrapper .gform_fields { row-gap: 32px; }
body.ij-apply .gform_wrapper .gfield { margin: 0; }

body.ij-apply .gform_wrapper .gfield_label,
body.ij-apply .gform_wrapper legend.gfield_label {
	display: block;
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.7px;
	font-weight: 600;
	color: var(--color-text);
	text-wrap: pretty;
}

/* Required marker: one red "*" after every required label, the same as
   the site's other forms. */
body.ij-apply .gform_wrapper .gfield_required { display: inline; margin-left: 4px; color: var(--color-danger); }
body.ij-apply .gform_wrapper .gfield_required > .gfield_required_asterisk,
body.ij-apply .gform_wrapper .gfield_required > .gfield_required_text { display: none; }
body.ij-apply .gform_wrapper .gfield_required::after { content: "*"; }

/* No `.gform_fileupload_rules` here: form 1 has no upload field, so such
   a rule would match nothing. Its field types are address, captcha,
   checkbox, consent, email, html, name, number, phone, radio, section,
   slider and text — and tests/test-application.php holds this file to
   markup the form actually renders. */
body.ij-apply .gform_wrapper .gfield_description {
	padding: 0;
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

/* ---- Choice cards (radio and checkbox) -----------------------------------
   The design's big selectable cards. GF renders
   `.gfield_radio > .gchoice > input + label`, so the INPUT is hidden and
   the LABEL becomes the card — `input:checked + label` then carries the
   selected state without needing :has(). */

body.ij-apply .gform_wrapper .gfield_radio,
body.ij-apply .gform_wrapper .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

body.ij-apply .gform_wrapper .gchoice { margin: 0; }

body.ij-apply .gform_wrapper .gfield_radio input[type="radio"],
body.ij-apply .gform_wrapper .gfield_checkbox input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.ij-apply .gform_wrapper .gfield_radio label,
body.ij-apply .gform_wrapper .gfield_checkbox label {
	position: relative;
	min-height: 56px;
	padding: 12px 16px;
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px solid var(--color-border-strong);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
	display: flex;
	gap: 10px;
	align-items: center;
	overflow: hidden;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The radio dot the design draws inside each card, rebuilt from
   pseudo-elements since the real input is hidden. */
body.ij-apply .gform_wrapper .gfield_radio label::before,
body.ij-apply .gform_wrapper .gfield_checkbox label::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border-radius: 100px;
	border: 2px solid var(--color-border-strong);
	background: #fff;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.ij-apply .gform_wrapper .gfield_checkbox label::before { border-radius: 6px; }

/* The selected marker is drawn INSIDE the ring with an inset shadow, not
   as a second absolutely-positioned pseudo-element. The old `::after` was
   pinned to `top: 50%` of the label, which on a one-line card sat inside
   the ring but on a card with a sub-label dropped onto the second row —
   so a selected option showed its dot twice. */

/* The label is the positioning context for the inner dot. */
body.ij-apply .gform_wrapper .gfield_radio label,
body.ij-apply .gform_wrapper .gfield_checkbox label { position: relative; }

body.ij-apply .gform_wrapper .gfield_radio label:hover,
body.ij-apply .gform_wrapper .gfield_checkbox label:hover {
	border-color: var(--brand-green-light);
	background: var(--slate-50);
}

body.ij-apply .gform_wrapper .gfield_radio input:checked + label,
body.ij-apply .gform_wrapper .gfield_checkbox input:checked + label {
	border-color: var(--brand-green);
	background: var(--color-success-soft);
}

body.ij-apply .gform_wrapper .gfield_radio input:checked + label::before,
body.ij-apply .gform_wrapper .gfield_checkbox input:checked + label::before { border-color: var(--brand-green); }

body.ij-apply .gform_wrapper .gfield_radio input:checked + label::before,
body.ij-apply .gform_wrapper .gfield_checkbox input:checked + label::before {
	background: var(--brand-green);
	box-shadow: inset 0 0 0 3px #fff;
}

/* Hiding the input takes its focus ring with it, so the card shows the
   ring instead — otherwise this form becomes unusable by keyboard. */
body.ij-apply .gform_wrapper .gfield_radio input:focus-visible + label,
body.ij-apply .gform_wrapper .gfield_checkbox input:focus-visible + label {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
}

/* ---- The Image Choices plugin ------------------------------------------
   `image-choices-for-gravity-forms` renders the picture inside each label
   AND brings its own layout, which is not the design's: a column-direction
   card, a 118px-tall image, and a per-field column count (this form is set
   to six across) that makes every card about 90px wide.

   Its rules are scoped `.gform_wrapper .gfield.init_pcafe_imgp …`, which
   scores 40-50 — above the 31 of a plain `body.ij-apply .gform_wrapper
   .gfield_radio`. The block above therefore loses on the fields that use
   it, which is most of this form. Matching the plugin's own scope is what
   wins: these selectors score 51-62.

   Measured, not reasoned about. Before this block the choice cards
   rendered 92px wide with a 62x118 flag stacked above wrapped text, and
   the radio dot sitting on top of the image. */

body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp .gfield_radio,
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

/* The plugin sizes each choice with `width:150px` and a `flex` basis from
   the field's column setting. In a grid container the flex basis is
   ignored, but the width is not. */
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp .gchoice {
	display: block;
	width: auto;
}

/* Back to the design's horizontal card: image beside the text, not above
   it, with the gutter the radio dot lives in. */
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp.pcafe_theme_basic .gchoice label {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: 14px;
	background: #fff;
	font-size: 14px;
	/* 600, not 500: the design's pill renders its label span at 14px/600.
	   The button element around it computes 13.33px/400, which is just the
	   UA default showing through — matching that made ours look thin. */
	font-weight: 600;
	/* 18px, matching the design's measured line box. Poppins' default
	   `normal` is 20.3px here, which only shows on the options whose label
	   wraps to two lines — and because the row stretches to its tallest
	   card, that made every pill 67px against the design's 62. */
	line-height: 18px;
	text-align: left;
}

body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp .gchoice input:checked + label {
	border-color: var(--brand-green);
	background: var(--color-success-soft);
}

/* The plugin pins the image at 118px tall. The design's slot is a small
   mark beside the label, not a photograph above it. */
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp.pcafe_theme_basic label img {
	width: 24px;
	height: auto;
	max-height: none;
	object-fit: contain;
	border-radius: 3px;
}

/* The plugin puts the text in its own span, which its column layout lets
   wrap mid-word. */
/* The plugin gives this span `margin-top:15px` to separate the label from
   the image it stacks ABOVE it. Laid out in a row that margin is pure
   height: it is what made the card 61px tall against the design's 56. */
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp .pcafe_imgp_text {
	min-width: 0;
	text-align: left;
}

/* The margin needs the plugin's own full depth to beat it:
   `.gform_wrapper .gfield.init_pcafe_imgp.pcafe_theme_basic .gchoice label
   .pcafe_imgp_text` scores 61, so a shorter override at 51 silently lost
   and the card stayed 61px tall. This scores 72. */
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp.pcafe_theme_basic .gchoice label .pcafe_imgp_text {
	margin: 0;
}

/* The Image Choices plugin puts a picture inside each label. The design
   has the same slot — a small image beside the text. */
body.ij-apply .gform_wrapper .pcafe_imgp_wrap { flex: none; display: flex; }

body.ij-apply .gform_wrapper .pcafe_imgp_wrap img {
	width: 28px;
	height: auto;
	border-radius: 3px;
	display: block;
}

body.ij-apply .gform_wrapper .pcafe_imgp_text { min-width: 0; }

/* ---- Steps after the first: the same pill, plus an icon ------------------
   Measured off the design driven to step 2, not assumed. Apply.dc.html's
   `cards()` helper (18/20 padding, radius 16, a sub-label under the text)
   is NOT what the goal, credit, property, search or agent steps render.
   They use the same compact `.opt` pill as step 1 — 12/16 padding, radius
   14, gap 10, vertically centred, label 14px/600 — with a 20px green icon
   between the radio dot and the text, and NO sub-label.

   Measured on the design at step 2: w=222 h=62 pad=12px 16px radius=14px
   border=1px rgb(222,231,237) gap=10px align=center, grid 222px/16px.

   So the only thing these steps need beyond the base pill is a tighter
   grid; everything else is inherited. */

body.ij-apply .gform_wrapper .gfield:not(#field_1_2) .gfield_radio,
body.ij-apply .gform_wrapper .gfield:not(#field_1_2) .gfield_checkbox,
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp:not(#field_1_2) .gfield_radio,
body.ij-apply .gform_wrapper .gfield.init_pcafe_imgp:not(#field_1_2) .gfield_checkbox {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	/* The Image Choices plugin sets `align-items: flex-start`, which leaves
	   the pills in a row at their natural heights instead of matching. */
	align-items: stretch;
}

/* `.gchoice` is the grid item, so it has to pass its stretched height down
   to the label that actually draws the pill. */
body.ij-apply .gform_wrapper .gfield:not(#field_1_2) .gchoice {
	display: flex;
	width: auto;
}

body.ij-apply .gform_wrapper .gfield:not(#field_1_2) .gchoice label {
	flex: 1 1 auto;
}

/* The icon this theme injects, in the design's green, between the dot and
   the label text. */
body.ij-apply .gform_wrapper .ij-choice-icon {
	flex: none;
	display: flex;
	color: var(--brand-green-dark);
}

body.ij-apply .gform_wrapper .ij-choice-icon svg { width: 20px; height: 20px; }

/* The Image Choices pictures are red badge PNGs hotlinked from another
   install; the design uses line icons. Hidden, not removed - the form's
   data is untouched and turning this rule off brings them straight back. */
body.ij-apply .gform_wrapper .gfield:not(#field_1_2) .pcafe_imgp_wrap { display: none; }

/* ---- Text, number, email, tel, select, textarea -------------------------- */

body.ij-apply .gform_wrapper input[type="text"],
body.ij-apply .gform_wrapper input[type="email"],
body.ij-apply .gform_wrapper input[type="tel"],
body.ij-apply .gform_wrapper input[type="url"],
body.ij-apply .gform_wrapper input[type="number"],
body.ij-apply .gform_wrapper input[type="password"],
body.ij-apply .gform_wrapper select,
body.ij-apply .gform_wrapper textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	box-sizing: border-box;
	border-radius: 12px;
	border: 1px solid var(--color-border-strong);
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	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-apply .gform_wrapper input[type="text"]:focus,
body.ij-apply .gform_wrapper input[type="email"]:focus,
body.ij-apply .gform_wrapper input[type="tel"]:focus,
body.ij-apply .gform_wrapper input[type="url"]:focus,
body.ij-apply .gform_wrapper input[type="number"]:focus,
body.ij-apply .gform_wrapper select:focus,
body.ij-apply .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--brand-green);
	box-shadow: var(--ring-focus);
}

/* Sub-labels (First / Last, Address line 1 / 2) sit under their input. */
/* Only the SUB-labels (First / Middle / Last, Address line 1 / 2) are
   small. `gfield_label_before_complex` sits on the field's own legend —
   "Name", "Email Opt-Out" — so styling it here made those two questions
   render as grey 13px text while Email and Phone beside them were 24px
   headings. It carries `.gfield_label` too, so leaving it out gives it
   the heading treatment the rest of the form has. */
body.ij-apply .gform_wrapper .ginput_complex label {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-secondary);
	letter-spacing: 0;
}

/* ---- Slider fields (Gravity Slider Fields) ------------------------------- */

body.ij-apply .gform_wrapper input[type="range"] {
	width: 100%;
	height: 6px;
	margin: 20px 0;
	border-radius: 100px;
	background: var(--slate-200);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

body.ij-apply .gform_wrapper input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 100px;
	border: 3px solid #fff;
	background: var(--brand-green);
	box-shadow: 0 1px 4px rgba(17, 16, 22, 0.24);
	cursor: pointer;
}

body.ij-apply .gform_wrapper input[type="range"]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 100px;
	border: 3px solid #fff;
	background: var(--brand-green);
	box-shadow: 0 1px 4px rgba(17, 16, 22, 0.24);
	cursor: pointer;
}

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

/* ---- Consent fields -----------------------------------------------------
   These are checkboxes, but they are a sentence to agree to rather than
   a choice between options, so they opt out of the card grid above. */

body.ij-apply .gform_wrapper .ginput_container_consent { display: flex; align-items: flex-start; gap: 12px; }

body.ij-apply .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	position: static;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	clip: auto;
	accent-color: var(--brand-green);
	flex: none;
}

body.ij-apply .gform_wrapper .ginput_container_consent label {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	display: inline;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--color-text-secondary);
	cursor: pointer;
}

body.ij-apply .gform_wrapper .ginput_container_consent label::before,
body.ij-apply .gform_wrapper .ginput_container_consent label::after { display: none; }

body.ij-apply .gform_wrapper .ginput_container_consent a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.ij-apply .gform_wrapper .ginput_container_consent a:hover,
body.ij-apply .gform_wrapper .ginput_container_consent a:focus-visible { color: var(--brand-green-dark); }

/* ---- Filling the pane ----------------------------------------------------
   The design's footer sits on the BOTTOM edge of the right-hand pane, not
   directly under the last field. That needs an unbroken flex column from
   the scrolling container down to the page, so the fields can take up the
   slack.

   `display: flex !important` on the page is deliberate and narrowly
   scoped: Gravity Forms writes `style="display: block"` inline when it
   advances a page, and an inline style beats any ordinary rule. The
   `:not([style*="none"])` guard is what keeps the other 24 pages hidden —
   without it every page would be shown at once. */

body.ij-apply .gform_wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

body.ij-apply .gform_wrapper form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

body.ij-apply .gform_wrapper .gform-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

body.ij-apply .gform_wrapper .gform_page:not([style*="none"]) {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

body.ij-apply .gform_wrapper .gform_page_fields { flex: 1 1 auto; }

/* ---- Buttons ------------------------------------------------------------- */

/* Every page of this form, including the last, closes with a
   `.gform_page_footer` — a multi-page form never renders the
   single-page `.gform_footer`, so styling it would be a rule that
   matches nothing. */
body.ij-apply .gform_wrapper .gform_page_footer {
	flex: 0 0 auto;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

body.ij-apply .gform_wrapper .gform_button,
body.ij-apply .gform_wrapper .gform_next_button,
body.ij-apply .gform_wrapper .gform_previous_button {
	min-height: 48px;
	padding: 12px 28px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.ij-apply .gform_wrapper .gform_button,
body.ij-apply .gform_wrapper .gform_next_button {
	background: var(--brand-green);
	color: #fff;
	order: 1;
}

body.ij-apply .gform_wrapper .gform_button:hover,
body.ij-apply .gform_wrapper .gform_next_button:hover,
body.ij-apply .gform_wrapper .gform_button:focus-visible,
body.ij-apply .gform_wrapper .gform_next_button:focus-visible {
	background: var(--brand-green-dark);
	color: #fff;
}

/* Back is secondary and sits to the left of Next, which is why the
   primary buttons above take order:2. */
body.ij-apply .gform_wrapper .gform_previous_button {
	background: #fff;
	border-color: var(--color-border-strong);
	color: var(--color-text);
	order: 2;
}

body.ij-apply .gform_wrapper .gform_previous_button:hover,
body.ij-apply .gform_wrapper .gform_previous_button:focus-visible {
	background: var(--slate-50);
	color: var(--color-text);
}

/* ---- Section breaks ------------------------------------------------------
   Page 25 carries two `gsection` fields ("Last Step", "Commercial Loans:
   Next Steps"). GF renders them as headings inside the field list. */

body.ij-apply .gform_wrapper .gsection {
	margin: 8px 0 0;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--color-divider);
}

body.ij-apply .gform_wrapper .gsection_title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.7px;
	font-weight: 600;
	color: var(--color-text);
}

/* The asterisks are hidden above, so the legend that explains them is
   now describing something that is not on screen. */
body.ij-apply .gform_wrapper .gform_required_legend { display: none; }

/* ---- Complex fields (name, address) --------------------------------------
   GF lays these out with its own grid-row/grid-col pair. The columns are
   left to GF — it knows which sub-fields a locale needs — but the gutter
   between them is the design's. */

body.ij-apply .gform_wrapper .gform-grid-row { gap: 16px; }
body.ij-apply .gform_wrapper .ginput_complex { row-gap: 16px; }

/* ---- Slider fields (Gravity Slider Fields) -------------------------------
   These are NOT `input[type=range]`. The plugin ships a hidden text input
   and builds a **noUiSlider** widget beside it, so a range-input rule
   never touches them — which is why the thumb rendered in noUiSlider's
   default teal on every money question.

   The plugin's own rules are `.gform-theme--framework .gfield--type-slider
   .noUi-handle` (30); these score 41. The accent variable is also
   redefined, because the filled bar is keyed to Gravity Forms' own
   `--gf-ctrl-accent-color` rather than to any colour of ours. */

body.ij-apply .gform_wrapper { --gf-ctrl-accent-color: var(--brand-green); }

body.ij-apply .gform_wrapper .gfield--type-slider .noUi-target {
	height: 8px;
	margin: 20px 0 8px;
	border: 0;
	border-radius: 100px;
	background: var(--slate-200);
	box-shadow: none;
}

body.ij-apply .gform_wrapper .gfield--type-slider .noUi-connect { background: var(--brand-green); }

body.ij-apply .gform_wrapper .gfield--type-slider .noUi-handle {
	width: 20px;
	height: 20px;
	right: -10px;
	top: -6px;
	border: 3px solid #fff;
	border-radius: 100px;
	background: var(--brand-green-dark);
	box-shadow: var(--shadow-low);
	cursor: pointer;
}

/* noUiSlider draws two grip lines inside the handle with pseudo-elements. */
body.ij-apply .gform_wrapper .gfield--type-slider .noUi-handle::before,
body.ij-apply .gform_wrapper .gfield--type-slider .noUi-handle::after { display: none; }

body.ij-apply .gform_wrapper .gfield--type-slider .noUi-handle:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 3px;
}

/* The two end labels the plugin prints under the track. */
body.ij-apply .gform_wrapper .min-val-relation,
body.ij-apply .gform_wrapper .max-val-relation {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* The design's footer carries Continue alone. Gravity Forms' "Start Over"
   (a reset input) and its "Previous" button are both hidden: back is the
   chevron in the top chrome, where the design puts it. Hidden rather than
   removed, so no markup or form setting changes and turning these two
   rules off brings them straight back. */
body.ij-apply .gform_wrapper .gform_page_footer .form-reset { display: none !important; }

/* "Previous" must NOT be display:none. Gravity Forms 3.x's handleButtonClick()
   only honours a clicked button it considers visible (computed display is not
   "none"); for a hidden one it silently substitutes the page's visible
   Continue button. With display:none here, the chevron's click on Previous
   was submitted as "next", so step 2's validation ran and the visitor got
   "There was a problem with your submission" instead of going back
   (fixed 2026-10-02). So it is hidden visually instead: off-screen, clipped
   and transparent, but still display:inline-block. application.js also takes
   it out of the tab order, since the chevron is the control people use. */
body.ij-apply .gform_wrapper .gform_previous_button {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---- "Start Over" (hidden above; styling kept for reference) -------------
   `<input type="reset" class="form-reset secondary-button">`, which is
   neither a GF theme button nor anything this sheet was targeting, so it
   rendered as a default grey browser button beside two pills. It is a
   destructive action, so it reads as a quiet text button rather than
   competing with Continue. */

body.ij-apply .gform_wrapper .gform_page_footer .form-reset {
	order: 3;
	margin-left: auto;
	min-height: 48px;
	padding: 12px 16px;
	border: 0;
	border-radius: 100px;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.ij-apply .gform_wrapper .gform_page_footer .form-reset:hover,
body.ij-apply .gform_wrapper .gform_page_footer .form-reset:focus-visible {
	background: var(--slate-50);
	color: var(--color-text);
}

/* ---- A lone checkbox is a toggle, not a choice card ----------------------
   The choice-card grid is for picking between options. "Email Opt-Out" is
   a single checkbox, and rendering it as a full-width bordered card made
   it read as a selectable option rather than a preference. Scoped with
   `:only-child` so a real multi-choice checkbox field keeps its cards. */

body.ij-apply .gform_wrapper .gfield_checkbox .gchoice:only-child label {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--color-text-secondary);
}

body.ij-apply .gform_wrapper .gfield_checkbox .gchoice:only-child label::before {
	position: static;
	transform: none;
	margin-right: 12px;
	flex: none;
	border-radius: 6px;
}

body.ij-apply .gform_wrapper .gfield_checkbox .gchoice:only-child input:checked + label {
	background: none;
}

/* ---- Validation ---------------------------------------------------------- */

body.ij-apply .gform_wrapper .gfield_error .gfield_label { color: var(--color-text); }

body.ij-apply .gform_wrapper .validation_message {
	margin: 10px 0 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	background: #fdecec;
	font-size: 14px;
	font-weight: 500;
	color: #96271f;
}

body.ij-apply .gform_wrapper .gform_validation_errors {
	margin: 0 0 32px;
	padding: 16px 20px;
	border: 0;
	border-radius: 14px;
	background: #fdecec;
	box-shadow: none;
}

body.ij-apply .gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #96271f;
}

/* ---- Confirmation -------------------------------------------------------- */

body.ij-apply .gform_confirmation_wrapper {
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.ij-apply-bullet,
	body.ij-apply .gform_wrapper .gfield_radio label,
	body.ij-apply .gform_wrapper .gfield_checkbox label,
	body.ij-apply .gform_wrapper .gform_button,
	body.ij-apply .gform_wrapper .gform_next_button,
	body.ij-apply .gform_wrapper .gform_previous_button { transition: none; }

	body.ij-apply .gform_wrapper .gfield_radio label::after,
	body.ij-apply .gform_wrapper .gfield_checkbox label::after { transition: none; }
}

/* ---- Legacy "radio-image" styles from ijara-custom-forms -----------------
   plugins/ijara-custom-forms/assets/css/acquisition-request.css still loads
   on this page and styles every `.radio-image` field for the OLD form: a
   110px coloured ring (`.input-border`) and a 70px icon (`.input-icon`)
   absolutely positioned under each choice, and
   `.gchoice { margin: 0 10px 10px 10px !important }` (0-4-0).
   The rings and icons are what drew the big red-circled flags below the
   step 1 pills; the margin is what pushed the pills 10px in from the
   column and widened the gap between them to 44px against the design's 24.
   The !important can only be beaten by another !important of higher
   specificity, hence 0-5-1 here. */
body.ij-apply .gform_wrapper .radio-image .input-border,
body.ij-apply .gform_wrapper .radio-image .input-icon { display: none !important; }

body.ij-apply .gform_wrapper .radio-image .gfield_radio .gchoice { margin: 0 !important; }

/* The legacy form also prints each credit option's score band as a loose
   `.credit-score-range` span beside the choice ("620–680"). The design's
   credit pills carry the label only. */
body.ij-apply .gform_wrapper .credit-score-range { display: none !important; }

/* The same sheet pins yes/no labels over the (now hidden) ring:
   `.radio-image.yes-no .gfield_radio .gchoice label { position:absolute;
   top:47px; width:110px; font-size:24px }` (0-5-1). */
body.ij-apply .gform_wrapper .gfield.radio-image.yes-no .gfield_radio .gchoice label {
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	font-size: 14px;
	color: var(--color-text);
}

/* ---- Question frame, measured off Apply.dc.html at 1440x900 --------------
   Every page opens with an HTML field (`.form-section-title`) holding only
   a screen-reader label. As a grid row it is 0px tall but still earns the
   32px row gap, which put every question 32px below the design's. Taken
   out of the flow, still read by screen readers. */
body.ij-apply .gform_wrapper .gfield.form-section-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Design: h2 24/28.8, then the intro 16px below it at 16/1.55, capped at
   640px so it wraps where the design's does. The legend already carries
   12px of bottom margin. */
body.ij-apply .gform_wrapper legend.gfield_label + .gfield_description {
	max-width: 640px;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.55;
}

/* Design: the options start 40px under the intro (`.stepwrap`). */
body.ij-apply .gform_wrapper .gfield_description + .ginput_container_radio,
body.ij-apply .gform_wrapper .gfield_description + .ginput_container_checkbox { margin-top: 40px; }

/* ---- Step 1 flags ---------------------------------------------------------
   The design shows a small rectangular flag (24px wide, radius 2) in each
   pill. inc/application-choices.php injects those as `.ij-choice-flag`;
   the plugin's round badge PNG it replaces is hidden, not removed. */
body.ij-apply .gform_wrapper #field_1_2 .pcafe_imgp_wrap { display: none; }

body.ij-apply .gform_wrapper .ij-choice-flag { flex: none; display: flex; }

body.ij-apply .gform_wrapper .ij-choice-flag img {
	display: block;
	width: 24px;
	height: auto;
	border-radius: 2px;
}

/* ---- Continue ------------------------------------------------------------
   Design: 14px/600, padding 10px 20px, 41px tall, the label followed by a
   16px arrow icon 8px away. The button is an <input>, which cannot hold an
   SVG, so the arrow is its background and the text arrow Gravity Forms
   carries in the label is stripped in inc/application-choices.php. */
body.ij-apply .gform_wrapper .gform_next_button {
	--ij-next-arrow: 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='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	min-height: 0;
	padding: 10px 44px 10px 20px;
	font-size: 14px;
	line-height: 21px;
	background-image: var(--ij-next-arrow);
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px 16px;
}

/* The hover rule above sets the `background` shorthand, which resets the
   image; restated here at the same specificity, later in the file. */
body.ij-apply .gform_wrapper .gform_next_button:hover,
body.ij-apply .gform_wrapper .gform_next_button:focus-visible {
	background-image: var(--ij-next-arrow);
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px 16px;
}

/* =========================================================================
   3. Breakpoints
   ========================================================================= */

/* Below the split, the panel stops being a column and becomes a header:
   the rail turns horizontal and scrolls, so the form gets the whole
   width. A 34% panel at tablet width leaves the choice cards too narrow
   to sit two abreast, which is the layout the design is built around. */
@media (max-width: 900px) {
	.ij-apply-split {
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: visible;
		flex-wrap: wrap;
	}

	.ij-apply-aside { flex: 1 1 100%; height: auto; }
	.ij-apply-main { flex: 1 1 100%; height: auto; overflow: visible; }

	.ij-apply-pane { padding: 32px; }

	.ij-apply-steps {
		margin-top: 32px;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 8px;
	}

	.ij-apply-step {
		flex: none;
		grid-template-columns: 32px auto;
		grid-template-rows: auto;
		column-gap: 10px;
		align-items: center;
	}

	.ij-apply-bullet { width: 32px; height: 32px; }
	.ij-apply-rule { display: none; }
	.ij-apply-label { padding: 0; padding-right: 16px; }
	.ij-apply-num { font-size: 11px; }
	.ij-apply-name { font-size: 14px; margin-top: 2px; white-space: nowrap; }
}

@media (max-width: 560px) {
	.ij-apply-form { padding: 24px; }

	body.ij-apply .gform_wrapper .gfield_label,
	body.ij-apply .gform_wrapper legend.gfield_label { font-size: 20px; letter-spacing: -0.5px; }

	body.ij-apply .gform_wrapper .gfield_radio,
	body.ij-apply .gform_wrapper .gfield_checkbox { grid-template-columns: minmax(0, 1fr); }

	body.ij-apply .gform_wrapper .gform_page_footer { flex-direction: column-reverse; align-items: stretch; }

	body.ij-apply .gform_wrapper .gform_button,
	body.ij-apply .gform_wrapper .gform_next_button,
	body.ij-apply .gform_wrapper .gform_previous_button { width: 100%; }
}

/* =========================================================================
   4. The design's 23 Sep mobile rework (Apply.dc.html, om-mobile-form)
   ========================================================================= */

/* Below 900px the step rail is a compact row of dots that fits the width —
   no scrolling, no labels — and the form's Back / Continue bar is pinned to
   the bottom of the screen. Replaces the horizontally scrolling rail above.
   Design selectors: .steptrack .steprow .stepcol .steplbl .formnav. */
@media (max-width: 900px) {
	html, body.ij-apply { overflow-x: hidden; }
	.ij-apply-split { width: 100% !important; max-width: 100% !important; }
	.ij-apply-aside, .ij-apply-main, .ij-apply-pane { max-width: 100% !important; overflow-x: hidden !important; }
	.ij-apply-logo img { height: 40px !important; }

	.ij-apply-aside .ij-apply-pane { padding: 16px 20px !important; align-items: center !important; }

	.ij-apply-steps { margin-top: 20px !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; overflow: visible !important; width: 100% !important; padding: 0 4px !important; }
	.ij-apply-step { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0 !important; }
	.ij-apply-step:last-child { flex: 0 0 auto !important; }
	.ij-apply-bullet { flex: none !important; width: 22px !important; height: 22px !important; }
	.ij-apply-bullet svg { width: 11px !important; height: 11px !important; }
	.ij-apply-rule { display: block !important; flex: 1 1 auto !important; width: auto !important; height: 2px !important; min-height: 0 !important; margin: 0 4px !important; }
	.ij-apply-step:last-child .ij-apply-rule { display: none !important; }
	.ij-apply-label { display: none !important; }

	/* The form body clears the pinned bar. */
	.ij-apply-main { padding-bottom: 84px !important; }
	body.ij-apply .gform_wrapper .gform_page_footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 1200; margin: 0 !important; padding: 12px 20px !important; border-top: 1px solid var(--color-border) !important; background: #fff; box-shadow: 0 -8px 24px rgba(9, 13, 16, 0.08); flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; }
	body.ij-apply .gform_wrapper .gform_page_footer .gform_button,
	body.ij-apply .gform_wrapper .gform_page_footer .gform_next_button,
	body.ij-apply .gform_wrapper .gform_page_footer .gform_previous_button { width: auto !important; flex: 0 0 auto !important; justify-content: center; }

	/* 16px stops iOS zooming the page when a field takes focus. */
	body.ij-apply input, body.ij-apply select, body.ij-apply textarea { max-width: 100% !important; box-sizing: border-box !important; font-size: 16px !important; }
	body.ij-apply img, body.ij-apply video, body.ij-apply iframe { max-width: 100%; height: auto; }
}

@media (max-width: 560px) {
	body.ij-apply h1 { font-size: 26px !important; letter-spacing: -1.1px !important; line-height: 1.14 !important; }
	body.ij-apply h2 { font-size: 23px !important; letter-spacing: -0.8px !important; }
}

/* Completed steps jump back to that step (application.js, 2026-10-05). */
.ij-apply-step.is-jumpable { cursor: pointer; }
.ij-apply-step.is-jumpable:hover .ij-apply-name { text-decoration: underline; text-underline-offset: 4px; }
.ij-apply-step.is-jumpable:hover .ij-apply-bullet { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14); }
.ij-apply-step.is-jumpable:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 4px; border-radius: 12px; }

/* No slide-in on the next step (owner's request, 2026-10-07). The ijara-forms
   plugin adds animate.css's "animated fadeInRight" to each page it opens
   (assets/js/helpers.js setActivePage); the step now just appears. */
body.ij-apply .gform_wrapper .gform_page.animated,
body.ij-apply .gform_wrapper .gform_page.fadeInRight { animation: none !important; transform: none !important; opacity: 1 !important; }