/* Formidable form pages (forms agent). Loaded by inc/forms.php only on pages with a form block.
   Brand colors come from the "PRTS Brand" Formidable style + the variable layer in style.css. */

/* Headings and notes inside forms */
body .frm_forms.with_frm_style .prts-frm-heading {
	margin: 8px 0 0;
	font-size: 1.25rem;
}
body .frm_forms.with_frm_style .prts-frm-note {
	margin: 0;
	padding: 14px 16px;
	border-left: 4px solid var(--accent-2);
	border-radius: 8px;
	background-color: var(--accent-3);
	color: var(--contrast);
	font-size: 15px;
}
body .frm_forms.with_frm_style .prts-frm-note a,
body .frm_forms.with_frm_style .frm_description a {
	color: var(--accent-2);
	font-weight: 600;
}
body .frm_forms.with_frm_style .prts-frm-note a:hover,
body .frm_forms.with_frm_style .frm_description a:hover {
	color: var(--contrast);
}

/* Success message */
body .frm_forms.with_frm_style .frm_message {
	padding: 24px;
	border-radius: 12px;
}
body .frm_forms.with_frm_style .frm_message p {
	margin: 0 0 10px;
}
body .frm_forms.with_frm_style .frm_message p:last-child {
	margin-bottom: 0;
}
body .frm_forms.with_frm_style .prts-frm-success-title {
	font-family: var(--gp-font--montserrat);
	font-size: 1.25rem;
	font-weight: 800;
}

/* Focus: the site's brand focus style (ink ring + green outline, as in style.css) replaces Formidable's
   blue/grey glow on every control. Mouse clicks on radios/checkboxes get no ring (:focus-visible only). */
body .frm_forms.with_frm_style input:focus,
body .frm_forms.with_frm_style select:focus,
body .frm_forms.with_frm_style textarea:focus,
body .frm_forms.with_frm_style button:focus {
	box-shadow: none !important;
}
body .frm_forms.with_frm_style input:focus-visible,
body .frm_forms.with_frm_style select:focus-visible,
body .frm_forms.with_frm_style textarea:focus-visible,
body .frm_forms.with_frm_style button:focus-visible {
	outline: 3px solid var(--accent) !important; /* Formidable sets outline:none on submit/back buttons */
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px var(--contrast) !important;
}
/* The step indicator is focusable (tabindex=0, "Page 2 of 5"): same brand ring instead of the blue glow */
body .frm_forms.with_frm_style .frm_rootline_group:focus {
	box-shadow: none;
}
body .frm_forms.with_frm_style .frm_rootline_group:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--contrast);
	border-radius: 8px;
}
body .frm_forms.with_frm_style input[type=radio]:focus-visible,
body .frm_forms.with_frm_style input[type=checkbox]:focus-visible {
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px var(--contrast) !important;
}

/* Radios and checkboxes: 20px; checked = ink box with a green tick or dot (brand ink/green pairing) */
body .frm_forms.with_frm_style .frm_radio input[type=radio],
body .frm_forms.with_frm_style .frm_checkbox input[type=checkbox] {
	width: 20px !important;
	min-width: 20px !important;
	height: 20px !important;
	border: 1px solid var(--border-color);
	background-color: var(--base-3);
	cursor: pointer;
}
body .frm_forms.with_frm_style .frm_checkbox input[type=checkbox] {
	border-radius: 5px !important;
}
body .frm_forms.with_frm_style .frm_fields_container .frm_radio input[type=radio]:not([disabled]):checked {
	border-color: var(--contrast) !important;
	background-color: var(--contrast);
}
body .frm_forms.with_frm_style .frm_radio input[type=radio]:checked::before {
	width: 8px;
	height: 8px;
	margin: 5px;
	background-color: var(--accent);
}
body .frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked {
	border-color: var(--contrast) !important;
	background-color: var(--contrast) !important;
}
body .frm_forms.with_frm_style .frm_checkbox input[type=checkbox]:checked::before {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6667 1.5L4.25001 7.91667L1.33334 5' stroke='%2305DF6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-size: 12px !important;
}
body .frm_forms.with_frm_style .frm_radio > label:hover input[type=radio]:not(:checked),
body .frm_forms.with_frm_style .frm_checkbox > label:hover input[type=checkbox]:not(:checked) {
	border-color: var(--contrast);
}

/* Option grids collapse to one column on phones */
@media (max-width: 600px) {
	body .frm_forms .frm_form_field.frm_two_col .frm_opt_container,
	body .frm_forms .frm_form_field.frm_three_col .frm_opt_container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Step indicator (rootline): keep all five steps on one line with their titles */
body .frm_forms.with_frm_style .frm_rootline_group {
	margin: 0 0 32px;
}
body .frm_forms.with_frm_style .frm_rootline.frm_show_titles > .frm_rootline_single {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 4px;
}
body .frm_forms.with_frm_style .frm_rootline_title {
	padding-top: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--contrast-3);
}
body .frm_forms.with_frm_style .frm_rootline .frm_current_page .frm_rootline_title {
	color: var(--contrast);
}
body .frm_forms.with_frm_style .frm_rootline input.frm_page_back {
	background-color: var(--contrast);
	color: var(--accent);
}
@media (max-width: 600px) {
	body .frm_forms.with_frm_style .frm_rootline_single:not(.frm_current_page) .frm_rootline_title {
		display: none;
	}
	body .frm_forms.with_frm_style .frm_rootline .frm_current_page .frm_rootline_title {
		white-space: nowrap;
	}
}

/* Choice labels: long option text wraps beside the box, not under it */
body .frm_forms.with_frm_style .frm_checkbox > label,
body .frm_forms.with_frm_style .frm_radio > label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.4;
}
body .frm_forms.with_frm_style .frm_checkbox > label input[type=checkbox],
body .frm_forms.with_frm_style .frm_radio > label input[type=radio] {
	flex-shrink: 0;
	margin: 1px 0 0;
}
body .frm_forms.with_frm_style .horizontal_radio .frm_radio,
body .frm_forms.with_frm_style .horizontal_radio .frm_checkbox {
	margin-right: 24px;
}

/* No extra gap under the submit row (card padding handles it) */
body .frm_forms.with_frm_style .frm_form_fields > fieldset {
	padding-bottom: 0;
}
body .frm_forms.with_frm_style .frm_fields_container > .frm_form_field:has(> .frm_submit) {
	margin-bottom: 0;
}

/* Surveys: NPS buttons in two tidy rows on phones; Likert choices inline under each statement */
@media (max-width: 640px) {
	body .frm_forms.with_frm_style .frm_nps__buttons {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	body .frm_forms.with_frm_style .frm_nps__button {
		max-width: none;
		min-width: 0;
	}
}
body .frm_forms.with_frm_style .frm_likert--mobile .frm_opt_container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

/* Likert grid (desktop/tablet): a wider statement column, five equal answer columns shared by the heading
   and every row (subgrid), so labels no longer squeeze into Formidable's fixed 150px. */
body .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field {
	display: grid;
	grid-template-columns: minmax(0, 2.6fr) repeat(5, minmax(0, 1fr));
	column-gap: 8px;
	align-items: center;
}
body .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field > .frm_primary_label {
	width: auto;
	max-width: none;
	padding-right: 8px;
	line-height: 1.35;
	text-wrap: balance;
}
body .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field > .frm_opt_container {
	grid-column: 2 / -1;
	display: grid;
	grid-template-columns: subgrid;
	gap: 0 8px;
}
body .frm_forms.with_frm_style .frm_likert__heading .frm_likert__column {
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	color: var(--contrast-2);
}


/* After a successful submission, drop the "required fields" intro above the thank-you message */
body .prts-card:has(.frm_forms .frm_message) > .prts-stack > p.prts-muted {
	display: none;
}

/* Name fields: one "Please enter your first and last name." message across both boxes instead of the same
   message under First and Last. Each sub-field is 49% of the row (12-column grid, 2% gaps), so 204.08% of a
   sub-field = the full row. */
body .frm_forms.with_frm_style .frm_combo_inputs_container:has(> .frm_form_subfield-first .frm_error) > .frm_form_subfield-last .frm_error {
	display: none;
}
body .frm_forms.with_frm_style .frm_combo_inputs_container > .frm_form_subfield-first .frm_error {
	width: 204.08%;
	max-width: none;
}
body .frm_forms.with_frm_style .frm_combo_inputs_container > .frm_form_subfield-last .frm_error {
	width: 204.08%;
	max-width: none;
	margin-left: -104.08%;
}