/*------------------------------------*\
    UNIVERSAL WIZARD FORM STYLES
\*------------------------------------*/

/* Form 147 is a duplicate of the "Connect With Us - Wizard" form (139), so it
   renders the same markup with its own form id.  These rules mirror the form
   139 block in wpsl-store.css; keep the two in step when either changes.

   Gravity Forms renumbers generated ids (#gform_147, #gform_page_147_1,
   #input_147_58, .gchoice_147_140_0 ...) but copies field CSS classes typed
   into the form editor verbatim, so those were renumbered by hand in the form
   editor: .form-147-inputs, .universal-form-147-step, .universal-147-step-copy and
   .gform_147_title.  wpsl-store.css keeps the 139 originals for form 139.

   Form 147 also has an extra first page (the school picker), so its pages run
   one ahead of 139's: 147 page N is 139 page N-1.  The program-type and
   number-of-children cards are scoped to their radio fields (#field_147_140,
   #field_147_118) rather than their pages, so adding or removing a page in
   the form editor doesn't move them.  Rules that style a whole page (footer
   spacing, column padding) still use #gform_page_147_N and need renumbering
   when the page order changes.

   One deliberate difference from 139: 139 centres its inputs, buttons and
   number-of-children cards in a 320px column, while 147 lets them fill the
   form's full width.  Don't copy the 320px caps back over from wpsl-store.css. */

/* ===== STYLES FOR WIZARD FORM ===== */

@media only screen and (min-width: 641px) {
	.gform_legacy_markup_wrapper #gform_page_147_3 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_147_4 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_147_5 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_147_6 ul.gform_fields li.gfield {
		padding-right: 0 !important;
	}
}

@media only screen and (min-width: 768px) {
	#gform_147
		.gform_body
		.gform_page
		.gform_page_fields
		.gform_fields
		.form-147-modified-step {
		margin-top: 24px !important;
	}
}

.gform_body .gform_page .gform_page_fields .gform_fields .form-147-inputs {
	margin: 16px auto 0 !important;
}

/* First and last name share one line: two halves split by an 8px gap. */
@media screen and (min-width: 1163px) {
	#field_147_1 {
		margin-right: 8px;
	}

	#gform_page_147_6 .gform_page_fields #gform_fields_147_6 .form-147-inputs-2 {
		width: calc(50% - 4px);
	}
}

/* The date fields (Desired Start Date, each child's Date of Birth) are
   matched by class: their ids differ between forms 147 and 148 and between
   environments. */
#gform_147 .creme-start-date input.datepicker,
#gform_147 .creme-child-dob input.datepicker,
#gform_147 #input_147_42,
#gform_147 #input_147_1,
#gform_147 #input_147_2,
#gform_147 #input_147_3,
#gform_147 #input_147_4,
#gform_147 #input_147_82,
#gform_147 #input_147_124,
#gform_147 #input_147_127 {
	border: 1px solid #606060;
	border-radius: 4px;
	color: #000;
	font-family: Inter, sans-serif;
	font-size: 14px;
}

#gform_147 .creme-start-date input.datepicker::placeholder,
#gform_147 .creme-child-dob input.datepicker::placeholder,
#gform_147 #input_147_42::placeholder,
#gform_147 #input_147_1::placeholder,
#gform_147 #input_147_2::placeholder,
#gform_147 #input_147_3::placeholder,
#gform_147 #input_147_4::placeholder,
#gform_147 #input_147_82::placeholder,
#gform_147 #input_147_124::placeholder,
#gform_147 #input_147_127::placeholder {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	font-family: var(--sdp-font-primary);
}

/* style.css italicises every input::placeholder site-wide. */
#gform_147 input::placeholder {
	font-style: normal;
}

/* The calendar button sits inside the date input, on the right, instead of
   on its own line below it.  .ginput_container_date is already
   position: relative (GF places the calendar panel against it).  Clicking
   the input itself still just types: GF 3.x opens the calendar only from
   this button. */
#gform_147 .creme-start-date .gform-datepicker-toggle,
#gform_147 .creme-child-dob .gform-datepicker-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	width: 44px;
	height: 40px;
	transform: translateY(-50%);
}

/* Keeps typed dates clear of the button. */
#gform_147 .creme-start-date input.datepicker,
#gform_147 .creme-child-dob input.datepicker {
	padding-right: 44px;
}

/* Help text from each date field's Description setting.  GF's legacy CSS
   sets it in the inherited serif; this matches the SMS disclaimer
   (.inq_disclaimer) and the body copy's links.  Validation messages share
   the class, hence the :not(). */
#gform_147 .creme-start-date .gfield_description:not(.validation_message),
#gform_147 .creme-child-dob .gfield_description:not(.validation_message) {
	padding: 8px 0 0;
	font-family: var(--sdp-font-primary);
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
	color: var(--sdp-text-primary);
}

#gform_147 .creme-start-date .gfield_description a,
#gform_147 .creme-child-dob .gfield_description a {
	color: var(--sdp-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* Matched by class, not id: the button ids carry the page-break field id
   (#gform_next_button_147_<field>), and those ids change whenever the form
   is rebuilt by hand on another environment instead of imported. */
#gform_147 .gform_previous_button {
	width: 100%;
	background-color: #fff;
	border: 2px solid #264e60;
	color: #264e60;
	font-family: var(--sdp-font-primary);
	font-size: 16px;
	font-weight: 400;
	padding: 8px 0;
	border-radius: 4px;
	margin: 0;
}

#gform_147 .gform_next_button,
#gform_147 .gform_button {
	width: 100%;
	background-color: rgba(38, 78, 96);
	border: none;
	color: var(--sdp-white);
	font-family: var(--sdp-font-primary);
	font-size: 16px;
	font-weight: 700;
	padding: 8px 0;
	border-radius: 4px;
	margin: 0;
}

#gform_147 .gform_page_footer {
	margin: 50px auto 0;
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
}

#label_147_111_0,
#label_147_111_1,
#label_147_111_2,
#label_147_111_3 {
	margin: 0 !important;
}

#gform_wrapper_147 .gform_147_title {
	letter-spacing: normal;
	padding-top: 0;
	font-family: var(--sdp-font-secondary);
	font-size: 28px;
	line-height: 133%;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sdp-text-primary);
	margin-bottom: var(--sdp-spacing-sm);
	margin-top: 0;
	margin-bottom: 6px;
	text-align: left;
}

#gform_confirmation_message_147 .gform_147_title {
	letter-spacing: normal;
	padding-top: 0;
	font-family: var(--sdp-font-secondary);
	font-size: 28px;
	line-height: 133%;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sdp-text-primary);
	margin-bottom: var(--sdp-spacing-sm);
	margin-top: 0;
	margin-bottom: 6px;
	text-align: left;
}

#field_147_66,
#field_147_113 {
	margin: 0;
}

#gform_wrapper_147 .gform_heading {
	display: none;
}

.universal-form-147-headline {
	margin-top: 0;
	margin-bottom: 32px;
	font-family: var(--sdp-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--sdp-text-primary);
}

#gform_fields_147 .universal-form-147-step {
	text-align: left;
}

.gform_page_fields .universal-147-step-copy {
	text-align: left;
	font-family: var(--sdp-font-primary);
	font-size: 18px;
	line-height: 112%;
	font-weight: 700;
	color: var(--sdp-text-primary);
	margin: 0;
}

.universal-form-147-step {
	text-align: left;
	font-family: var(--sdp-font-primary);
	text-transform: uppercase;
	font-size: 12px;
	line-height: 133%;
	font-weight: 400;
	color: var(--sdp-text-primary);
	margin-bottom: 4px;
	letter-spacing: 0.15em;
	text-decoration: underline dotted #7eddde;
	text-underline-offset: 4px;
}

#gform_fields_147 .universal-147-step-copy {
	font-family: var(--sdp-font-primary);
	font-size: 18px;
	line-height: 112%;
	font-weight: 700;
	color: var(--sdp-text-primary);
	margin: 0;
}

#field_147_132 {
	margin-top: 0;
}

.universal-form-147-step-select {
	text-align: center;
	font-family: var(--sdp-font-primary);
	font-size: 12px;
	line-height: 100%;
	font-weight: 400;
	color: var(--sdp-text-primary);
	margin-top: 4px;
	margin-bottom: 0;
}

#gform_147 .gform-field-label {
	font-size: 12px;
	font-weight: 400;
	font-family: var(--sdp-font-primary);
	line-height: 100%;
	text-transform: capitalize;
}

/* Hide the default radio boxes */
#field_147_140 .gfield_radio input[type="radio"] {
	display: none;
}

/* Container for radio buttons - make them display as a grid */
#field_147_140 .gfield_radio {
	display: flex;
	justify-content: center;
	/* flex-wrap: wrap; */
	gap: 16px;
	margin-top: 10px;
}

/* Style each choice as a card */
#field_147_140 .gfield_radio .gchoice {
	margin: 0 !important; /* Override default margins */
	padding: 0;
}

#field_147_140 .ginput_container_radio {
	margin-top: 24px;
}

/* Style the labels as clickable cards */
#field_147_140 .gfield_radio .gchoice {
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}

#field_147_140 .gfield_radio .gchoice label {
	display: block;
	border: 0.5px solid rgba(96, 96, 96, 0.5);
	border-radius: 4px;
	padding: 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #ffffff;
	font-family: var(--sdp-font-primary);
	font-size: 14px;
	line-height: 112%;
	font-weight: 700;
	text-transform: capitalize;
	color: #000;
	position: relative;
	max-width: 103px;
	height: 106px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
}

/* Hover effect */
#field_147_140 .gfield_radio .gchoice label:hover {
	border-color: var(--sdp-primary);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Selected state */
#field_147_140 .gfield_radio input[type="radio"]:checked + label {
	border-color: var(--sdp-primary);
	background-color: #7eddde;
}

/* Add icons using pseudo-elements - customize these based on your needs */
#field_147_140 .gfield_radio .gchoice label::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto 8px auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Full Time icon */
#field_147_140 .gfield_radio .gchoice_147_140_0 label::before {
	background-image: url("/wp-content/uploads/2025/07/full-time.png");
}

/* Part Time icon */
#field_147_140 .gfield_radio .gchoice_147_140_1 label::before {
	background-image: url("/wp-content/uploads/2025/07/part-time.png");
}

/* After School icon */
#field_147_140 .gfield_radio .gchoice_147_140_2 label::before {
	background-image: url("/wp-content/uploads/2025/07/after-school.png");
}

/* Summer icon */
#field_147_140 .gfield_radio .gchoice_147_140_3 label::before {
	background-image: url("/wp-content/uploads/2025/07/summer.png");
}

/* Add subtitle text */
#field_147_140 .gfield_radio .gchoice label::after {
	content: attr(data-subtitle);
	display: block;
	font-family: var(--sdp-font-primary);
	text-transform: initial;
	font-size: 12px;
	color: #000;
	margin-top: 8px;
	font-weight: 400;
}

/* Specific subtitles for each option */
#field_147_140 .gfield_radio .gchoice_147_140_0 label::after {
	content: "Monday - Friday";
}

#field_147_140 .gfield_radio .gchoice_147_140_1 label::after {
	content: "A couple days per week";
}

#field_147_140 .gfield_radio .gchoice_147_140_2 label::after {
	content: "A couple hours per day";
}

#field_147_140 .gfield_radio .gchoice_147_140_3 label::after {
	content: "Several weeks per year";
}

/* Stores that only offer Full Time / Part Time — hide the After School and
   Summer cards.  Hidden, not removed via gform_pre_render, so GF keeps the
   gchoice_147_140_N numbering the icon/subtitle rules above rely on. */
.sdp-form-limited-programs #field_147_140 .gfield_radio .gchoice_147_140_2,
.sdp-form-limited-programs #field_147_140 .gfield_radio .gchoice_147_140_3 {
	display: none;
}

/* GF renders the wizard buttons as <button>; the input selectors are kept
   for older markup. */
#gform_147 button.disabled,
#gform_147 input[type="button"].disabled,
#gform_147 input[type="submit"].disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 768px) {
	#field_147_140 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		justify-content: center;
	}

	#field_147_140 .gfield_radio .gchoice label {
		max-width: none;
		width: 100%;
		height: 100px;
		padding: 16px 12px;
		font-size: 14px;
	}

	#field_147_140 .gfield_radio .gchoice label::before {
		margin-bottom: 8px;
	}

	#field_147_140 .gfield_radio .gchoice label::after {
		font-size: 12px;
	}

	#field_147_140 .ginput_container_radio {
		margin-top: 0;
	}

	.universal-form-147-step-select {
		text-align: left;
	}

	#gform_147 .gform_page_footer {
		margin: 24px auto 0;
	}
}

@media (max-width: 480px) {
	#field_147_140 .gfield_radio {
		grid-template-columns: 1fr;
	}
}

/* ===== SCHOOL PICKER (FIELD 154, PAGE 147_1) ===== */

/* sdp-galleries.js hides the <select> and puts a type-to-filter combobox in
   its place.  The input copies the select's box (theme select styles plus the
   legacy GF padding) and redraws its arrow, so the closed field looks as it
   did.  #gform_147 is needed to outrank GF's legacy input rules. */

#gform_147 .sdp-combobox__native {
	display: none;
}

#gform_147 .sdp-combobox {
	position: relative;
	margin-bottom: 14px; /* the hidden select's margin */
}

#gform_147 .sdp-combobox__input {
	width: 100%;
	max-width: none;
	height: 40px;
	margin: 0;
	padding: 2px 36px 2px 4px;
	border: 1px solid #c3c3c3;
	border-radius: 0;
	background: #fff
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='7'%3E%3Cpath d='M0 0h15L7.5 7z' fill='%23444'/%3E%3C/svg%3E")
		no-repeat 97.5% center;
	color: #000; /* chosen school, matching the other filled-in fields */
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 21px;
	cursor: text;
}

#gform_147 .sdp-combobox__input[aria-expanded="true"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='7'%3E%3Cpath d='M0 7h15L7.5 0z' fill='%23444'/%3E%3C/svg%3E");
}

#gform_147 .sdp-combobox__input::placeholder {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	font-family: var(--sdp-font-primary);
}

#gform_147 .sdp-combobox__list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 240px;
	margin: 4px 0 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 4px;
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}

#gform_147 .sdp-combobox__list[hidden],
#gform_147 .sdp-combobox__list li[hidden] {
	display: none;
}

#gform_147 .sdp-combobox__list li {
	margin: 0;
	padding: 8px 12px;
	font-family: var(--sdp-font-primary);
	font-size: 14px;
	line-height: 133%;
	color: var(--sdp-text-primary);
	text-align: left;
	list-style: none;
}

#gform_147 .sdp-combobox__option {
	display: flex;
	align-items: baseline;
	cursor: pointer;
}

#gform_147 .sdp-combobox__option.is-active {
	background-color: rgba(126, 221, 222, 0.35);
}

#gform_147 .sdp-combobox__option[aria-selected="true"] {
	font-weight: 700;
}

#gform_147 .sdp-combobox__empty,
#gform_147 .sdp-combobox__note {
	color: #5c6b80;
	cursor: default;
}

/* Miles from the zip code typed into the school search. */
#gform_147 .sdp-combobox__distance {
	flex: none;
	margin-left: auto;
	padding-left: 12px;
	color: #5c6b80;
	font-weight: 400;
	white-space: nowrap;
}

/* ===== NUMBER OF CHILDREN CARDS (FIELD 118, PAGE 147_4) ===== */

/* Hide the default radio button circles */
#field_147_118 .gfield_radio input[type="radio"] {
	display: none;
}

/* Container for radio buttons - make them display as a grid */
#field_147_118 .gfield_radio {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 10px;
	margin-bottom: 50px;
	width: auto;
}

/* Style each choice as a card; the cards share the row equally */
#field_147_118 .gfield_radio .gchoice {
	flex: 1 1 0;
	margin: 0 !important; /* Override default margins */
	padding: 0;
}

@media only screen and (min-width: 768px) {
	#field_147_118 .ginput_container_radio {
		margin-top: 24px;
	}
}

/* Style the labels as clickable cards */
#field_147_118 .gfield_radio .gchoice {
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}

#field_147_118 .gfield_radio .gchoice label {
	display: block;
	border: 0.5px solid rgba(96, 96, 96, 0.5);
	border-radius: 4px;
	padding: 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #ffffff;
	font-family: var(--sdp-font-primary);
	font-size: 16px;
	line-height: 112%;
	font-weight: 700;
	text-transform: capitalize;
	color: #000;
	position: relative;
	width: 100%;
	max-width: none; /* GF legacy caps radio labels at 85% */
	height: 106px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
}

/* Hover effect */
#field_147_118 .gfield_radio .gchoice label:hover {
	border-color: var(--sdp-primary);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Selected state */
#field_147_118 .gfield_radio input[type="radio"]:checked + label {
	border-color: var(--sdp-primary);
	background-color: #7eddde;
}

/* Add icons using pseudo-elements  */
#field_147_118 .gfield_radio .gchoice label::before {
	content: "";
	display: block;
	width: 53px;
	height: 40px;
	margin: 0 auto 8px auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* First option icon for the children cards */
#field_147_118 .gfield_radio .gchoice_147_118_0 label::before {
	background-image: url("/wp-content/uploads/2025/07/one-child.png");
}

/* Second option icon for the children cards */
#field_147_118 .gfield_radio .gchoice_147_118_1 label::before {
	background-image: url("/wp-content/uploads/2025/07/two-children.png");
}

/* Third option icon for the children cards */
#field_147_118 .gfield_radio .gchoice_147_118_2 label::before {
	background-image: url("/wp-content/uploads/2025/07/three-children.png");
}

/* Add subtitle text */
#field_147_118 .gfield_radio .gchoice label::after {
	content: attr(data-subtitle);
	display: block;
	font-family: var(--sdp-font-primary);
	text-transform: initial;
	font-size: 12px;
	color: #000;
	margin-top: 8px;
	font-weight: 400;
}

/* Responsive design for the children cards */
@media (max-width: 768px) {
	#field_147_118 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		justify-content: center;
		margin-bottom: 24px;
	}

	#field_147_118 .gfield_radio .gchoice label {
		max-width: none;
		width: 100%;
		height: 100px;
		padding: 16px 12px;
		font-size: 14px;
	}

	#field_147_118 .gfield_radio .gchoice label::before {
		margin-bottom: 8px;
	}

	#field_147_118 .gfield_radio .gchoice label::after {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	#field_147_118 .gfield_radio {
		grid-template-columns: 1fr;
	}
}

/* ===== STYLES FOR PAGE 147_5 (CHILD DETAILS) ===== */

.form-147-child-title,
.form-147-comments {
	font-family: var(--sdp-font-primary);
	font-size: 12px;
	line-height: 133%;
	font-weight: 700;
	color: var(--sdp-primary);
	letter-spacing: 3%;
	margin: 24px 0 8px;
}

@media only screen and (max-width: 768px) {
	.form-147-child-title,
	.form-147-comments {
		margin-top: 16px;
	}
}

.gform_body
	#gform_page_147_5
	.gform_page_fields
	.gform_fields
	.form-147-inputs {
	margin: 8px auto 0 !important;
}

#gform_page_147_5 .gform_page_footer {
	margin-top: 32px;
}

/* ===== STYLES FOR PAGE 147_6 (CONTACT DETAILS) ===== */

@media screen and (min-width: 1163px) {
	#gform_page_147_6 #gform_fields_147_6 #field_147_1,
	#gform_page_147_6 #gform_fields_147_6 #field_147_2 {
		display: inline-block;
	}
}

@media screen and (max-width: 1162px) {
	#gform_page_147_6 #gform_fields_147_6 #field_147_1,
	#gform_page_147_6 #gform_fields_147_6 #field_147_2 {
		width: 100%;
	}

	.gform_body
		#gform_page_147_6
		.gform_page_fields
		.gform_fields
		.form-147-inputs-2 {
		margin: 8px auto 0 !important;
	}
}

.gform_body
	#gform_page_147_6
	.gform_page_fields
	.gform_fields
	.form-147-inputs {
	margin: 8px auto 0 !important;
}

#gform_page_147_6 #input_147_1,
#gform_page_147_6 #input_147_2,
#gform_page_147_6 #input_147_3,
#gform_page_147_6 #input_147_4 {
	width: 100%;
}

#gform_page_147_6 .universal-147-step-copy {
	margin-bottom: 8px;
}

#gform_page_147_6 #input_147_82 {
	height: 65px;
}

#gform_page_147_6 .gform_page_footer {
	margin-top: 32px;
}

.universal-final-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sdp-contact-form #gform_confirmation_message_147 .universal-final-copy .universal-thanks,
.final-appeal-form #gform_confirmation_message_147 .universal-final-copy .universal-thanks {
	font-family: var(--sdp-font-primary);
	text-align: center;
	font-size: 18px;
	line-height: 112%;
	font-weight: 700;
	color: var(--sdp-primary);
	margin-bottom: 24px;
	margin-top: 0;
}

.universal-received {
	font-family: var(--sdp-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--sdp-text-primary);
	max-width: 320px;
	margin-top: 10px;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.universal-final-copy {
		padding-bottom: 24px;
	}
}

/* Mobile responsive design WIZARD FORM 147 - Horizontal layout */
@media (max-width: 768px) {
	#field_147_140 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	#field_147_140 .gfield_radio .gchoice label {
		max-width: none;
		height: auto;
		min-height: 70px;
		padding: 16px;
		font-size: 18px;
		font-weight: 400;
		line-height: 112%;

		/* Set up for horizontal layout */
		display: block;
		text-align: left;
		position: relative;
		padding-left: 70px;
	}

	/* Position icon on the left */
	#field_147_140 .gfield_radio .gchoice label::before {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		width: 31px;
		height: 31px;
	}

	/* Position main text */
	#field_147_140 .gfield_checkbox .gchoice label {
		line-height: 1.3;
		padding-top: 12px;
	}

	#field_147_140 .gfield_checkbox .gchoice label::after {
		display: block;
		margin-top: 4px;
		font-size: 14px;
		font-weight: 400;
		color: #000;
		line-height: 1.2;
	}
}

/* Mobile layout for the children cards */
@media (max-width: 767px) {
	#field_147_118 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	#field_147_118 .gfield_radio .gchoice {
		margin: 0 !important;
		padding: 0;
	}

	#field_147_118 .gfield_radio .gchoice label {
		max-width: none;
		height: auto;
		min-height: 57px;
		padding: 19px 16px 16px 90px;
		font-size: 18px;
		font-weight: 400;
		line-height: 112%;
		display: block;
		text-align: left;
		position: relative;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	#field_147_118 .gfield_radio .gchoice label::before {
		position: absolute !important;
		left: 16px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		margin: 0 !important;

		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	#field_147_118 .gfield_radio .gchoice label::after {
		display: none;
	}
}

/*------------------------------------*\
    TEMPLATE OVERRIDES
\*------------------------------------*/

/* Form 139 is only ever embedded on store pages.  Form 147 is embedded on the
   program pages, whose template wraps it in .program-section-text - and
   style.css styles every `h3` and `p` inside that container (section
   typography: uppercase Georgia h3 with top padding, 16px Magazine Grotesque
   p with 20px margins).

   Those selectors are (0,1,1); the plain single-class rules above are (0,1,0),
   so the section typography wins and the wizard copy picks up the wrong size,
   letter-spacing, casing and spacing.  Re-assert the form's own values behind
   the wrapper id (1,1,0) so form 147 reads identically to form 139 wherever it
   is embedded. */

#gform_wrapper_147 .universal-form-147-headline {
	margin-top: 0;
	margin-bottom: 32px;
}

#gform_wrapper_147 .universal-form-147-step {
	font-size: 12px;
	line-height: 133%;
	letter-spacing: 0.15em;
	margin-top: 12px;
	margin-bottom: 4px;
}

#gform_wrapper_147 .universal-147-step-copy {
	letter-spacing: normal;
	text-transform: none;
	padding-top: 0;
}

#gform_wrapper_147 .universal-form-147-step-select {
	font-size: 12px;
	line-height: 100%;
	letter-spacing: normal;
	margin-top: 4px;
	margin-bottom: 0;
}

#gform_wrapper_147 .form-147-child-title,
#gform_wrapper_147 .form-147-comments {
	font-family: var(--sdp-font-primary);
	font-size: 12px;
	line-height: 133%;
	font-weight: 700;
	margin: 24px 0 8px;
}

@media only screen and (max-width: 768px) {
	#gform_wrapper_147 .form-147-child-title,
	#gform_wrapper_147 .form-147-comments {
		margin-top: 16px;
	}
}

@media (max-width: 768px) {
	#gform_wrapper_147 .universal-form-147-step-select {
		text-align: left;
	}
}

/*------------------------------------*\
    FINAL APPEAL LAYOUT
\*------------------------------------*/

/* Form card + ruler image for embedding form 147 outside the store page.
   These rules mirror the store page final appeal (.sdp-contact-section,
   .sdp-contact-container, .sdp-contact-form, .sdp-contact-image) in
   wpsl-store.css; keep the two in step when either changes.

   The one deliberate difference: no margin-top.  On the store page the
   section follows white content, but on the program pages it sits directly
   under a light-blue section, where the margin shows as a white stripe. */

.final-appeal-section {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--sdp-secondary);
	padding: var(--sdp-spacing-lg);
	z-index: 2;
}

.final-appeal-container {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 1068px;
	padding: 0 24px;
}

.final-appeal-image {
	width: 100%;
	max-width: 527px;
	height: auto;
	object-fit: cover;
}

.final-appeal-form {
	background-color: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 670px;
	height: 100%;
	padding: 32px 32px 50px;
}

.final-appeal-form .gform_legacy_markup_wrapper .gform_page_footer {
	margin: 0;
	padding: 0 !important;
}

.final-appeal-form select,
.final-appeal-form .ginput_container select {
	font-family: var(--sdp-font-primary);
	font-size: 14px;
}

@media (max-width: 991px) {
	.final-appeal-section {
		padding: var(--sdp-spacing-md);
		padding-top: 32px;
	}

	.final-appeal-form {
		padding: 16px 16px 50px;
	}

	.final-appeal-container {
		flex-direction: column;
		align-items: center;
		padding: 0;
	}
}