/* =============================================================================
   Gravity Forms — Global Overrides
   Loaded at priority 99, after GF enqueues its own stylesheets.
   Uses !important throughout to beat GF's Orbital theme stylesheet.
   ========================================================================== */

/* ── Hide GF form title & description (widgets supply their own) ────────── */
.gform_wrapper .gform_title,
.gform_wrapper .gform_description {
	display: none !important;
}

/* ── Remove GF wrapper margin ───────────────────────────────────────────── */
.gform_wrapper {
	margin: 0 !important;
}

/* ── Field list reset ───────────────────────────────────────────────────── */
.gform_wrapper .gform_fields {
	list-style: none !important;
	padding: 0 !important;
}

.gform_wrapper .gfield {
	list-style: none !important;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label:not(.gform-field-label--type-sub):not(.gform-field-label--type-inline) {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.875rem !important; /* 14px — Figma */
	font-weight: 500 !important;    /* Medium — Figma */
	line-height: 1.25rem !important; /* 20px — Figma */
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	margin-bottom: 0.75rem !important; /* 12px — Figma label-to-input gap */
}

/* Parent labels on compound fields (Full Name, Location) — hidden.
   The sub-labels (First Name, Last Name, City, State) serve as the visible labels. */
.gform_wrapper .gfield_label_before_complex {
	display: none !important;
}

/* "(Required)" text label — hidden per design */
.gform_wrapper .gfield_required_text {
	display: none !important;
}

/* Asterisk on sub-labels — hide */
.gform_wrapper .gform-field-label--type-sub .gfield_required {
	display: none !important;
}

/* Sub-labels (First Name / Last Name / City / State) — match main label style */
.gform_wrapper .gform-field-label--type-sub {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 0.875rem !important; /* 14px — same as field labels */
	font-weight: 500 !important;
	line-height: 1.25rem !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	opacity: 1 !important;
	margin-bottom: 0.75rem !important;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.gform_wrapper .gform-footer,
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	padding: 0 !important;
	margin-top: 1.5rem !important;
	border: none !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button {
	font-family: 'Gotham Office', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	background: var(--e-global-color-slate, #4b667c) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0.75rem 1.5rem !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
	width: auto !important;
	display: inline-block !important;
	box-shadow: none !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	background: var(--e-global-color-dark-navy, #1a2a38) !important;
}

/* ── Required marker ────────────────────────────────────────────────────── */
.gform_wrapper .gfield_required {
	color: #e05252 !important;
}

/* ── Validation messages ────────────────────────────────────────────────── */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #e05252 !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	font-family: 'Gotham Office', sans-serif !important;
	font-size: 0.75rem !important;
	margin-top: 0.25rem !important;
}

/* =============================================================================
   Dark form theme — .jl-dark-form wraps the GF shortcode output.
   Override GF Orbital CSS variables + explicit property rules.
   ========================================================================== */

/* Override GF's injected CSS variables (needs !important to beat the inline
   <style> GF injects on #gform_wrapper_N[data-form-index] with high specificity) */
.jl-dark-form .gform_wrapper,
.jl-dark-form .gform-theme {
	--gf-color-primary:               var(--e-global-color-slate, #4b667c) !important;
	--gf-color-primary-contrast:      #ffffff !important;
	--gf-color-in-ctrl:               transparent !important;
	--gf-color-in-ctrl-contrast:      #edf0f2 !important;
	--gf-color-in-ctrl-darker:        rgba(255,255,255,0.04) !important;
	--gf-color-in-ctrl-lighter:       rgba(255,255,255,0.12) !important;
	--gf-color-out-ctrl-light:        rgba(255,255,255,0.25) !important;
	--gf-color-out-ctrl-dark:         rgba(255,255,255,0.6) !important;
	--gf-color-secondary-contrast:    #edf0f2 !important;
	--gf-color-out-ctrl-dark-darker:  #edf0f2 !important;
	--gf-color-out-ctrl-dark-lighter: rgba(237,240,242,0.65) !important;
	--gf-radius:                      10px !important;
	color:                            #edf0f2 !important;
}

/* ── Labels: white, Montserrat Medium ───────────────────────────────────── */
.jl-dark-form .gform_wrapper .gfield_label,
.jl-dark-form .gform_wrapper .gform-field-label {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	opacity: 1 !important;
}

/* ── Inputs: transparent bg, white text, #ccc border ───────────────────── */
.jl-dark-form .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.jl-dark-form .gform_wrapper textarea,
.jl-dark-form .gform_wrapper select {
	font-family: 'Gotham Office', sans-serif !important;
	font-size: 0.875rem !important;
	height: 46px !important;
	padding: 0.75rem 1rem !important;
	border-radius: 10px !important;
	border: 2px solid #cccccc !important;
	background: transparent !important;
	color: #edf0f2 !important;
	outline: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
}

.jl-dark-form .gform_wrapper textarea {
	height: auto !important;
	min-height: 110px !important;
	resize: vertical !important;
}

.jl-dark-form .gform_wrapper input::placeholder,
.jl-dark-form .gform_wrapper textarea::placeholder {
	color: rgba(237, 240, 242, 0.6) !important;
	opacity: 1 !important;
}

.jl-dark-form .gform_wrapper input:focus,
.jl-dark-form .gform_wrapper textarea:focus,
.jl-dark-form .gform_wrapper select:focus {
	border-color: rgba(255,255,255,0.8) !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
	outline: none !important;
}

/* Select dropdown arrow — custom white chevron */
.jl-dark-form .gform_wrapper select,
.jl-dark-form .gform-theme select,
.jl-dark-form .gform-theme--orbital select,
.jl-dark-form select.gfield_select {
	height: 46px !important;
	line-height: 1 !important;
	padding: 14px 2.5rem 14px 1rem !important;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23cccccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	color: #edf0f2 !important;
	text-align: left !important;
}

/* Select options need a solid bg so they're readable in the browser picker */
.jl-dark-form .gform_wrapper select option,
.jl-dark-form select option {
	background: #2d3f4f !important;
	color: #edf0f2 !important;
	-webkit-text-fill-color: #edf0f2 !important;
}

/* Field description text (e.g. "Which option best describes your situation?") */
.jl-dark-form .gform_wrapper .gfield_description,
.jl-dark-form .gform-theme .gfield_description {
	font-family: 'Gotham Office', sans-serif !important;
	font-size: 0.8125rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	margin-bottom: 0.5rem !important;
}

/* ── Radio & checkbox: horizontal flex-wrap, custom styled ──────────────── */
.jl-dark-form .gform_wrapper .gfield_radio,
.jl-dark-form .gform_wrapper .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0.75rem 1rem !important; /* tighter horizontal gap so all 4 fit on one line */
	list-style: none !important;
	padding: 0 !important;
	margin: 0.5rem 0 0 !important;
}

/* GF 2.5+ uses .gchoice; older uses li — target both */
.jl-dark-form .gform_wrapper .gfield_radio .gchoice,
.jl-dark-form .gform_wrapper .gfield_radio li,
.jl-dark-form .gform_wrapper .gfield_checkbox .gchoice,
.jl-dark-form .gform_wrapper .gfield_checkbox li {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.5625rem !important;
	margin: 0 !important;
	list-style: none !important;
}

/* Custom radio appearance — 20px circle, white-60 border */
.jl-dark-form .gform_wrapper .gfield_radio input[type="radio"],
.jl-dark-form .gform_wrapper .gfield_checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	flex-shrink: 0 !important;
	border: 2px solid rgba(255,255,255,0.6) !important;
	border-radius: 50% !important;
	background: transparent !important;
	cursor: pointer !important;
	position: relative !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease !important;
}

.jl-dark-form .gform_wrapper .gfield_radio input[type="radio"]:checked,
.jl-dark-form .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked {
	background: #ffffff !important;
	border-color: #ffffff !important;
}

.jl-dark-form .gform_wrapper .gfield_radio input[type="radio"]:checked::after {
	content: '' !important;
	position: absolute !important;
	inset: 3px !important;
	border-radius: 50% !important;
	background: #4b667c !important;
}

/* Radio/checkbox labels — Inter Medium per Figma */
.jl-dark-form .gform_wrapper .gform-field-label--type-inline,
.jl-dark-form .gform_wrapper .gfield_radio label,
.jl-dark-form .gform_wrapper .gfield_checkbox label {
	font-family: 'Inter', 'Gotham Office', sans-serif !important;
	font-size: 0.875rem !important; /* 14px — Figma */
	font-weight: 500 !important;    /* Medium — Figma */
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	cursor: pointer !important;
	margin: 0 !important;
	line-height: 1.25rem !important;
}

/* ── Required / validation: softer red ──────────────────────────────────── */
.jl-dark-form .gform_wrapper .gfield_required {
	color: #ff9999 !important;
}

.jl-dark-form .gform_wrapper .validation_message,
.jl-dark-form .gform_wrapper .gfield_validation_message {
	color: #ff9999 !important;
}

/* ── Submit button: white text ──────────────────────────────────────────── */
.jl-dark-form .gform_wrapper input[type="submit"],
.jl-dark-form .gform_wrapper button[type="submit"],
.jl-dark-form .gform_wrapper .gform_button {
	color: #ffffff !important;
}