/*------------------------------------*\
    #SCHEDULE A TOUR TEMPLATE
    Styles for page-schedule-tour.php only.

    The page layout uses an `st-` prefix so no other template shares its
    selectors, and defines its own `--st-` tokens (the values match the
    `--sdp-` tokens in wpsl-store.css) so the file stands on its own.

    The form section below is copied from universal-form.css and renumbered
    for form 148, a duplicate of the universal wizard form 147.  Duplicating a
    form in Gravity Forms keeps its field ids, so #field_148_140,
    #input_148_58 etc. line up with 147's; only the form id changes.  CSS
    classes typed into the form editor (field CSS classes and the markup
    inside HTML fields) are copied verbatim, so in form 148 they are renamed
    from 147 to 148 by hand: .form-148-inputs, .form-148-inputs-2,
    .form-148-modified-step, .form-148-child-title, .form-148-comments,
    .universal-form-148-step, .universal-148-step-copy, and .gform_148_title
    in the confirmation message.  Form 148 drops 147's "CONNECT WITH US" title
    and intro fields, so their rules aren't copied here.

    universal-form.css still loads on this page (functions.php enqueues it
    wherever the store locator is active), but its rules are keyed to 147, so
    the two forms can be restyled independently.
\*------------------------------------*/

:root {
	--st-primary: #264e60;
	--st-secondary: #7eddde;
	--st-bg-light: #fcf2ed;
	--st-text-primary: #000;
	--st-white: #fff;
	--st-spacing-sm: 16px;
	--st-font-primary: "Magazine Grotesque", "Helvetica", sans-serif;
	--st-font-secondary: "Georgia Pro", "Times New Roman", Times, serif;
	--st-font-heading: "Georgia Pro Condensed Light", "Times New Roman", Times,
		serif;
}

/* ===== HERO LAYOUT ===== */

/* One grid for both layouts, so the image and form can sit under the text on
   mobile and beside it on desktop from the same markup.  The outer tracks are
   the page gutters and grow to centre the content; items that span `full`
   run edge to edge.

   Mobile and tablet: a single column, as wide as the image and form (max
   549px).  Rows: heading, body text, image, form. */
.st-hero {
	--st-aside: 549px; /* hero image and form card width */
	--st-edge: max(20px, (100% - var(--st-aside)) / 2);
	display: grid;
	grid-template-columns:
		[full-start] var(--st-edge)
		[main-start aside-start] minmax(0, 1fr)
		[main-end aside-end] var(--st-edge)
		[full-end];
	margin-top: 120px; /* the fixed header's height */
	margin-bottom: 75px;
}

@media screen and (max-width: 839px) {
	.st-hero {
		margin-top: 109px;
	}
}

@media screen and (max-width: 767px) {
	.st-hero {
		margin-top: 87px;
	}
}

/* The blue band behind the text carries on the header's background. */
.st-hero::before {
	content: "";
	grid-column: full;
	grid-row: 1 / 3;
	background-color: var(--st-secondary);
}

.st-heading {
	grid-column: main;
	grid-row: 1;
	padding: 40px 8px 0;
}

.st-subtitle {
	margin: 0;
	font-family: var(--st-font-primary);
	font-size: 18px;
	line-height: 120%;
	font-weight: 400;
	color: var(--st-text-primary);
}

.st-title {
	margin: 0;
	font-family: var(--st-font-heading);
	font-size: 28px;
	line-height: 133%;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--st-text-primary);
}

.st-body {
	grid-column: main;
	grid-row: 2;
	padding: 8px 8px 50px;
	font-family: var(--st-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--st-text-primary);
}

.st-body p {
	margin: 0 0 1em;
}

.st-body p:last-child {
	margin-bottom: 0;
}

.st-body strong,
.st-body b {
	font-weight: 700;
}

.st-body a {
	color: var(--st-primary);
	font-weight: 700;
	text-decoration: underline;
}

/* Keep the phone number whole: it would otherwise break after "359-" when
   the column is 282-297px or 419-447px wide (viewports of about 338-353px
   and 1064-1092px). */
.st-body a[href^="tel:"] {
	white-space: nowrap;
}

/* The image spans the full width so its background can carry the blue band
   halfway down it; the padding keeps the picture itself in the column. */
.st-media {
	display: block;
	grid-column: full;
	grid-row: 3;
	padding: 0 var(--st-edge);
	background: linear-gradient(var(--st-secondary) 50%, transparent 50%);
}

.st-media img {
	display: block;
	width: 100%;
	max-height: 203.5px;
	object-fit: cover;
}

/* ===== FORM CARD ===== */

.st-form {
	grid-column: aside;
	grid-row: 4;
	padding: 40px 16px 75px;
	background-color: var(--st-bg-light);
	border-radius: 0 0 8px 8px;
}

/* The form sits in a 460px column inside the 549px card: wide enough for the
   four step 2 cards at their full 103px (4 x 103 + 3 x 16px gaps), where
   every label and subtitle fits the 106px card height.  Below ~452px the
   longer subtitles wrap to an extra line.  !important because wpsl-store.css
   zeroes every .gform_legacy_markup_wrapper's margin with it. */
.st-form .gform_wrapper,
.st-form .gform_confirmation_wrapper {
	max-width: 460px;
	margin: 0 auto !important;
}

.st-form .gform_legacy_markup_wrapper .gform_page_footer {
	padding: 0 !important;
}

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

/* ===== DESKTOP ===== */

/* Two columns: heading and body text on the left, image and form on the
   right.  The blue band stops at the bottom of the image, so the form card
   starts on white.  The layout is 1060px wide rather than the site's usual
   1020px, so the 463px text column fits the body copy's phone number on one
   line (it needs 448px). */
@media screen and (min-width: 992px) {
	.st-hero {
		--st-edge: max(24px, (100% - 1060px) / 2);
		grid-template-columns:
			[full-start] var(--st-edge)
			[main-start] minmax(0, 1fr)
			[main-end] 48px
			[aside-start] var(--st-aside)
			[aside-end] var(--st-edge)
			[full-end];
	}

	.st-hero::before {
		grid-row: 1;
	}

	.st-heading {
		padding: 24px 0 0;
	}

	.st-subtitle {
		font-size: 24px;
	}

	.st-title {
		font-size: 56px;
		letter-spacing: normal;
		text-wrap: balance; /* "SCHEDULE / A TOUR" rather than "SCHEDULE A / TOUR" */
	}

	.st-body {
		padding: 24px 0 0;
	}

	.st-media {
		grid-column: aside;
		grid-row: 1;
		align-self: end;
		margin-top: 24px;
		padding: 0;
		background: none;
	}

	.st-form {
		grid-row: 2;
		padding: 16px 16px 50px;
		border-radius: 0;
	}
}

/*------------------------------------*\
    FORM 148 (COPIED FROM UNIVERSAL-FORM.CSS)
\*------------------------------------*/

/* Form 148's pages match 147's: page 1 is the school picker, and 148 page N
   is 139 page N-1.  The program-type and number-of-children cards are scoped
   to their radio fields (#field_148_140, #field_148_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_148_N and need renumbering when the page order changes. */

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

/* Page 1 is added here (147 leaves it out) so the school field lines up with
   the full-width Continue button, as in the mock. */
@media only screen and (min-width: 641px) {
	.gform_legacy_markup_wrapper #gform_page_148_1 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_148_3 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_148_4 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_148_5 ul.gform_fields li.gfield,
	.gform_legacy_markup_wrapper #gform_page_148_6 ul.gform_fields li.gfield {
		padding-right: 0 !important;
	}
}

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

.gform_body .gform_page .gform_page_fields .gform_fields .form-148-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_148_1 {
		margin-right: 8px;
	}

	#gform_page_148_6 .gform_page_fields #gform_fields_148_6 .form-148-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_148 .creme-start-date input.datepicker,
#gform_148 .creme-child-dob input.datepicker,
#gform_148 #input_148_42,
#gform_148 #input_148_1,
#gform_148 #input_148_2,
#gform_148 #input_148_3,
#gform_148 #input_148_4,
#gform_148 #input_148_82,
#gform_148 #input_148_124,
#gform_148 #input_148_127 {
	border: 1px solid #606060;
	border-radius: 4px;
	color: #000;
	font-family: Inter, sans-serif;
	font-size: 14px;
}

#gform_148 .creme-start-date input.datepicker::placeholder,
#gform_148 .creme-child-dob input.datepicker::placeholder,
#gform_148 #input_148_42::placeholder,
#gform_148 #input_148_1::placeholder,
#gform_148 #input_148_2::placeholder,
#gform_148 #input_148_3::placeholder,
#gform_148 #input_148_4::placeholder,
#gform_148 #input_148_82::placeholder,
#gform_148 #input_148_124::placeholder,
#gform_148 #input_148_127::placeholder {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	font-family: var(--st-font-primary);
}

/* style.css italicises every input::placeholder site-wide. */
#gform_148 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_148 .creme-start-date .gform-datepicker-toggle,
#gform_148 .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_148 .creme-start-date input.datepicker,
#gform_148 .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_148 .creme-start-date .gfield_description:not(.validation_message),
#gform_148 .creme-child-dob .gfield_description:not(.validation_message) {
	padding: 8px 0 0;
	font-family: var(--st-font-primary);
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
	color: var(--st-text-primary);
}

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

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

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

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

#label_148_111_0,
#label_148_111_1,
#label_148_111_2,
#label_148_111_3 {
	margin: 0 !important;
}

/* Georgia Pro Condensed Light, like the page's H1: "Georgia Pro" isn't loaded
   on the site, so the universal form title falls back to Times New Roman. */
#gform_confirmation_message_148 .gform_148_title {
	letter-spacing: normal;
	padding-top: 0;
	font-family: var(--st-font-heading);
	font-size: 28px;
	line-height: 133%;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--st-text-primary);
	margin-bottom: var(--st-spacing-sm);
	margin-top: 0;
	margin-bottom: 6px;
	text-align: left;
}

#gform_wrapper_148 .gform_heading {
	display: none;
}

#gform_fields_148 .universal-form-148-step {
	text-align: left;
}

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

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

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

#field_148_132 {
	margin-top: 0;
}

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

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

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

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

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

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

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

#field_148_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(--st-font-primary);
	font-size: 14px;
	line-height: 112%;
	font-weight: 700;
	text-transform: capitalize;
	color: #000;
	position: relative;
	max-width: 103px;
	/* min-height rather than a fixed height: if a label or subtitle ever wraps
	   to an extra line, the card grows instead of squeezing the icon.
	   height: 100% fills the stretched .gchoice so all four stay the same
	   height. */
	height: 100%;
	min-height: 106px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
}

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

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

/* Add icons using pseudo-elements - customize these based on your needs */
#field_148_140 .gfield_radio .gchoice label::before {
	content: "";
	display: block;
	flex-shrink: 0; /* the icon is a flex item of the card; keep it 20px */
	width: 20px;
	height: 20px;
	margin: 0 auto 8px auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

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

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

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

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

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

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

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

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

#field_148_140 .gfield_radio .gchoice_148_140_3 label::after {
	content: "Several weeks per year";
}

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

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

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

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

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

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

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

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

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

/* ===== SCHOOL PICKER (PAGE 148_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_148 is needed to outrank GF's legacy input rules. */

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

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

#gform_148 .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_148 .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_148 .sdp-combobox__input::placeholder {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	font-family: var(--st-font-primary);
}

#gform_148 .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_148 .sdp-combobox__list[hidden],
#gform_148 .sdp-combobox__list li[hidden] {
	display: none;
}

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

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

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

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

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

/* Miles from the zip code typed into the school search. */
#gform_148 .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 148_4) ===== */

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

/* Container for radio buttons - make them display as a grid */
#field_148_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_148_118 .gfield_radio .gchoice {
	flex: 1 1 0;
	margin: 0 !important; /* Override default margins */
	padding: 0;
}

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

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

#field_148_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(--st-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_148_118 .gfield_radio .gchoice label:hover {
	border-color: var(--st-primary);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

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

/* Add icons using pseudo-elements  */
#field_148_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_148_118 .gfield_radio .gchoice_148_118_0 label::before {
	background-image: url("/wp-content/uploads/2025/07/one-child.png");
}

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

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

/* Add subtitle text */
#field_148_118 .gfield_radio .gchoice label::after {
	content: attr(data-subtitle);
	display: block;
	font-family: var(--st-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_148_118 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		justify-content: center;
		margin-bottom: 24px;
	}

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

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

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

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

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

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

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

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

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

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

@media screen and (min-width: 1163px) {
	#gform_page_148_6 #gform_fields_148_6 #field_148_1,
	#gform_page_148_6 #gform_fields_148_6 #field_148_2 {
		display: inline-block;
	}
}

@media screen and (max-width: 1162px) {
	#gform_page_148_6 #gform_fields_148_6 #field_148_1,
	#gform_page_148_6 #gform_fields_148_6 #field_148_2 {
		width: 100%;
	}

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

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

#gform_page_148_6 #input_148_1,
#gform_page_148_6 #input_148_2,
#gform_page_148_6 #input_148_3,
#gform_page_148_6 #input_148_4 {
	width: 100%;
}

#gform_page_148_6 .universal-148-step-copy {
	margin-bottom: 8px;
}

#gform_page_148_6 #input_148_82 {
	height: 65px;
}

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

/* Left-aligned under the title rather than centred as in universal-form.css;
   the id outranks that file's plain .universal-final-copy rule. */
#gform_confirmation_message_148 .universal-final-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

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

.universal-received {
	font-family: var(--st-font-primary);
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: var(--st-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 148 - Horizontal layout */
@media (max-width: 768px) {
	#field_148_140 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	#field_148_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_148_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_148_140 .gfield_checkbox .gchoice label {
		line-height: 1.3;
		padding-top: 12px;
	}

	#field_148_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_148_118 .gfield_radio {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

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

	#field_148_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_148_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_148_118 .gfield_radio .gchoice label::after {
		display: none;
	}
}

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

/* Carried over from universal-form.css, where they stop the program pages'
   section typography (.program-section-text h3 / p, specificity (0,1,1))
   beating the plain single-class rules above (0,1,0).  Re-asserting the
   form's own values behind the wrapper id (1,1,0) keeps the wizard copy the
   same wherever form 148 is embedded. */

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

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

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

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

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

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