/**
 * JBS — "Request a rating" Gravity Form.
 *
 * Styles the request-a-rating form that sits in the white card beside the
 * ratings hero (/ratings-with-form-dev/ → Gravity Form id 11).
 *
 * Scope
 * -----
 * Every rule is scoped with
 *   .gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper)
 * so it can never leak onto the newsletter form (id 8) or any other form.
 *
 * The :is() list gives the whole selector ID specificity (1,1,0), which beats
 * Gravity Forms' Orbital theme rules (~0,6,1) outright — so the only
 * !important declarations here are the two that answer an upstream
 * !important in the Elementor kit (post-17241.css), each flagged in place.
 * The .jbs-rating-form_wrapper half is a future-proof
 * hook: put `jbs-rating-form` in the form's Settings → Form Layout → Custom CSS
 * Class field and these styles follow the form to any id.
 *
 * Tokens (JBS design system — kept in sync with style.css):
 *   red #FF0533 · red-deep #D40029 · ink #16181C · stone #6E695E
 */

/* ============================================================
   Tokens + form shell
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) {
	--jbs-red: #FF0533;
	--jbs-red-deep: #D40029;
	--jbs-ink: #16181C;
	--jbs-stone: #6E695E;
	--jbs-line: #D9D5CD;
	--jbs-line-strong: #B4AEA3;
	--jbs-field-bg: #FFFFFF;
	/* 6px — the radius the page's own buttons use ("Talk to an Advocate",
	   "See the latest ratings", "Arrange your consultation"), so the fields and
	   the submit button sit in the same family as every other control here. */
	--jbs-radius: 6px;
	/* Field box metrics are matched to the Popup Enquiry form (id 10) so the
	   two forms read as the same control: 38px tall, 5px inner padding. */
	--jbs-field-h: 38px;
	/* 5px vertical keeps form 10's box; 8px horizontal gives the text room to
	   breathe off the border, and lines the inputs up with the textarea. */
	--jbs-field-pad: 5px 8px;
	/* Half the 130px textarea form 10 ships — two comfortable lines of message. */
	--jbs-textarea-h: 68px;
	--jbs-textarea-pad: 12px 8px;
	/* Control text — 13px rather than GF's 14px. The card column is ~270px, so
	   the drop stops "Phone Number*" crowding its half-width field. */
	--jbs-field-font-size: 13px;
	--jbs-font: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	width: 100%;
	margin: 0;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) form {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* Field grid — tighter than the site-wide 20px row gap; the form lives in a
   narrow card so the rhythm needs to be compact. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_fields {
	column-gap: 12px;
	row-gap: 14px;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .ginput_container {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Honeypot / spam field must never take a grid cell. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_validation_container {
	display: none;
}

/* ============================================================
   Labels
   Most fields run label-less in the form settings (placeholders carry the
   name) — GF hides those with a screen-reader-only .hidden_label rule, which
   this must not undo, hence :not(.hidden_label). Any label switched back to
   visible in GF renders as a small uppercase caption.
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield:not(.hidden_label) > .gfield_label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--jbs-font);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jbs-stone);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_required {
	color: var(--jbs-red);
}

/* ============================================================
   Property Status — radios on one line
   Markup: fieldset > legend + .ginput_container_radio > .gfield_radio > .gchoice
   Orbital stacks these vertically (.gfield--choice-align-vertical); this lays
   them out as a single wrapping row.
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield--type-radio {
	border: 0;
	margin: 0;
	padding: 0;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 10px 22px;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Custom radio dot — Orbital renders a hard-edged 20px square here.
   place-content:center is load-bearing: Orbital's checked indicator is a
   statically-positioned ::before that it centres with its own flex context,
   which appearance:none discards — without this the dot sits top-left. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--jbs-line-strong);
	border-radius: 50%;
	background: var(--jbs-field-bg);
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease;
}

/* The dot itself — reclaimed from Orbital (7px, GF blue) and driven by scale
   so the box never reflows between states. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jbs-red);
	transform: scale(0);
	transition: transform .15s ease;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]:checked::before {
	transform: scale(1);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]:hover {
	border-color: var(--jbs-stone);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]:checked {
	border-color: var(--jbs-red);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 5, 51, .24);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_radio input[type="radio"]:checked:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 5, 51, .24);
}

/* Choice labels sit inline beside their dot, not as block-level rows. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gchoice label {
	display: inline-block;
	margin: 0;
	padding: 0;
	max-width: none;
	font-family: var(--jbs-font);
	font-size: var(--jbs-field-font-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jbs-ink);
	cursor: pointer;
}

/* ============================================================
   Inputs + textarea
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="text"],
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="email"],
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="tel"],
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="number"],
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: var(--jbs-field-h);
	padding: var(--jbs-field-pad);
	border: 1px solid var(--jbs-line);
	border-radius: var(--jbs-radius);
	outline: none;
	/* Flat fields — clears the inherited rgba(18,25,97,.08) 0 1px 4px lift. */
	box-shadow: none;
	background: var(--jbs-field-bg);
	color: var(--jbs-ink);
	font-family: var(--jbs-font);
	/* !important is forced on us: the Elementor kit ships
	   `.gform_wrapper input, .gform_wrapper textarea { font-size: 14px !important }`
	   (post-17241.css), which no selector can outrank. */
	font-size: var(--jbs-field-font-size) !important;
	font-weight: 500;
	line-height: 1.2;
	transition: border-color .16s ease, box-shadow .16s ease;
}

/* Message field — half the stock height, still user-resizable. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) textarea {
	height: var(--jbs-textarea-h);
	min-height: var(--jbs-textarea-h);
	padding: var(--jbs-textarea-pad);
	line-height: 1.5;
	resize: vertical;
	/* Another forced !important: the Elementor kit ships
	   `.elementor-kit-17241 textarea { border-radius: 3px !important }`, which
	   no amount of specificity can beat. This keeps --jbs-radius authoritative
	   so the textarea can never drift away from the inputs. */
	border-radius: var(--jbs-radius) !important;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input::placeholder,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) textarea::placeholder {
	color: var(--jbs-stone);
	opacity: 1;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input:focus,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) textarea:focus {
	border-color: var(--jbs-red);
	box-shadow: 0 0 0 3px rgba(255, 5, 51, .16);
}

/* Strip the number spinner — it eats ~18px of an already narrow half field.
   Orbital repaints the spin button with its own chevron icon, so appearance
   alone won't clear it; the pseudo-element has to be removed outright. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="number"]::-webkit-outer-spin-button,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input[type="number"]::-webkit-inner-spin-button {
	display: none;
	-webkit-appearance: none;
	margin: 0;
}

/* Keep autofill from painting a pale blue box over the field. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) input:-webkit-autofill {
	-webkit-text-fill-color: var(--jbs-ink);
	caret-color: var(--jbs-ink);
	-webkit-box-shadow: 0 0 0 100px var(--jbs-field-bg) inset;
	transition: background-color 9999s ease 0s;
}

/* ============================================================
   Submit — full-width red bar
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_footer {
	display: block;
	width: 100%;
	margin: 18px 0 0;
	padding: 0;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_footer .gform_button {
	display: block;
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--jbs-radius);
	cursor: pointer;
	font-family: var(--jbs-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	color: #fff;
	background: var(--jbs-red);
	/* Same lift the page's red CTAs carry. */
	box-shadow: 0 6px 18px rgba(255, 5, 51, .28);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_footer .gform_button:hover {
	background: var(--jbs-red-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(255, 5, 51, .38);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_footer .gform_button:active {
	transform: translateY(0);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_footer .gform_button:focus-visible {
	outline: 2px solid var(--jbs-ink);
	outline-offset: 2px;
}

/* The AJAX spinner would otherwise sit inline and shove the full-width button. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_ajax_spinner {
	display: block;
	margin: 10px auto 0;
}

/* ============================================================
   Validation + confirmation
   ============================================================ */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_error input,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_error textarea {
	border-color: var(--jbs-red-deep);
	background: #FFF7F8;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield_validation_message,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .validation_message {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--jbs-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jbs-red-deep);
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_validation_errors {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid rgba(212, 0, 41, .28);
	border-radius: var(--jbs-radius);
	background: #FFF7F8;
	box-shadow: none;
}

/* Drop the summary list of error links — every field already prints its own
   message directly above it, so in a card this narrow the list just repeats
   the same five lines and pushes the form below the fold. The <h2> headline
   stays, and it still takes focus on a failed submit. */
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_validation_errors > ol,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_validation_errors > ul {
	display: none;
}

.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_validation_errors > h2 {
	margin: 0;
	font-family: var(--jbs-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jbs-red-deep);
}

.gform_confirmation_wrapper:is(#gform_confirmation_wrapper_11, .jbs-rating-form_wrapper) .gform_confirmation_message,
.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gform_confirmation_message {
	font-family: var(--jbs-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--jbs-ink);
}

/* ============================================================
   Narrow viewports — stack the half-width pairs
   ============================================================ */
@media (max-width: 600px) {
	.gform_wrapper:is(#gform_wrapper_11, .jbs-rating-form_wrapper) .gfield--width-half {
		grid-column: 1 / -1;
	}
}