/**
 * Kid Ease Book a Tour form.
 *
 * @package KidEase\TourRequests
 */

/* Day and time choices sit on one line from 640px up; phones keep GF's stacked list. */
@media (min-width: 640px) {
	.gform_wrapper .gfield.ke-choices-inline .gfield_checkbox,
	.gform_wrapper .gfield.ke-choices-inline .gfield_radio {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px 24px;
	}

	.gform_wrapper .gfield.ke-choices-inline .gchoice {
		margin: 0;
	}
}

/* Use the site's body font (Open Sans) rather than GF's system font stack. */
.gform_wrapper.ke-tour-form_wrapper,
.gform_wrapper.ke-tour-form_wrapper :is(input, textarea, select, button, label, legend, .gsection_title, .gfield_description, .gform_required_legend) {
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), "Open Sans", sans-serif;
}

/* Numbered, coloured section panels. Form_Layout wraps each Section field and the fields after it. */
.gform_wrapper .ke-panel {
	--ke-panel-bg: #eef1ea;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 2%;
	row-gap: 18px;
	align-items: start;
	padding: 22px 18px 24px;
	border-radius: 16px;
	background: var(--ke-panel-bg);
}

.gform_wrapper .ke-panel--1 { --ke-panel-bg: #eef1ea; } /* green #8F9F72 at 15% */
.gform_wrapper .ke-panel--2 { --ke-panel-bg: #eeecee; } /* grey #8D838C at 15% */
.gform_wrapper .ke-panel--3 { --ke-panel-bg: #e8e9e4; } /* dark green #676A49 at 15% */
.gform_wrapper .ke-panel--4 { --ke-panel-bg: #f5ebe8; } /* red #BF7869 at 15% */

.gform_wrapper .ke-panel .gfield.gsection {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Larger tick boxes and radios, closer to the client's mockup. */
.gform_wrapper .ke-panel .gchoice input[type="checkbox"],
.gform_wrapper .ke-panel .gchoice input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	accent-color: var(--e-global-color-primary, #2d4a7f);
	vertical-align: middle;
}

.gform_wrapper .ke-panel .gchoice label {
	font-size: 1rem;
	vertical-align: middle;
}

.gform_wrapper .ke-panel .gsection_title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--e-global-color-primary, #2d4a7f);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
	line-height: 1.2;
}

.gform_wrapper .ke-panel-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 2.1em;
	height: 1.7em;
	padding: 0 0.35em;
	border-radius: 6px;
	background: var(--e-global-color-primary, #2d4a7f);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.gform_wrapper .ke-panel input[type="text"],
.gform_wrapper .ke-panel input[type="email"],
.gform_wrapper .ke-panel input[type="tel"],
.gform_wrapper .ke-panel textarea,
.gform_wrapper .ke-panel select {
	background-color: #fff;
}

/* Nurseries: one per row on phones, three columns from 640px. */
.gform_wrapper .gfield.ke-choices-grid .gfield_checkbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 24px;
}

.gform_wrapper .gfield.ke-choices-grid .gchoice {
	margin: 0;
}

/* Start date sits in a slightly darker box beside the start question. */
.gform_wrapper .ke-panel .gfield.ke-field-start-date {
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(45, 74, 127, 0.06);
}

/* The last panel runs on into the footer, so the button sits inside the pink box. */
.gform_wrapper.gravity-theme .gform_body:has(.ke-panel--4) + .gform_footer,
.gform_wrapper .gform_body:has(.ke-panel--4) + .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0;
	padding: 4px 18px 24px;
	border-radius: 0 0 16px 16px;
	background: #f5ebe8;
}

.gform_wrapper .ke-panel--4:last-child {
	padding-bottom: 12px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.gform_wrapper .gform_footer button.gform_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 6px;
	background: var(--e-global-color-primary, #2d4a7f);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper .gform_footer button.gform_button:focus-visible {
	background: #1f3560;
}

.gform_wrapper .gform_footer button.gform_button:focus-visible {
	outline: 3px solid #2d4a7f;
	outline-offset: 3px;
}

.gform_wrapper .ke-submit-note p {
	margin: 0;
}

@media (min-width: 640px) {
	.gform_wrapper .ke-panel {
		padding: 28px 28px 30px;
	}

	.gform_wrapper .gfield.ke-choices-grid .gfield_checkbox {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gform_wrapper.gravity-theme .gform_body:has(.ke-panel--4) + .gform_footer,
	.gform_wrapper .gform_body:has(.ke-panel--4) + .gform_footer {
		padding: 4px 28px 28px;
	}
}