/*
 * The five enrolment form pages (Registration form 3, Sleeping and Napping 4, Medical Statement 5, Photo Release 6,
 * Contract and Policies 7). CSS only, scoped to body.rp-forms (RP_LAYOUT_PUBLISH_FORMS): no field, setting or
 * behaviour changes. The theme puts them in a saturated blue panel (#0077bb) with small white labels, hides every
 * validation message and paints error text white; this is a calm white card with dark labels and visible errors.
 */

body.rp-forms {
	--rp-line: #cfdcd3;
	--rp-muted: #4a5a52;
	--rp-error: #b3261e;
}

/* ---------- The panel ---------- */
.rp-forms section.registration-page {
	margin-bottom: 170px; /* the footer photo overlaps the end of every page */
	padding: 26px 5% 0;
	color: var(--rp-ink);
}

.rp-forms section.registration-page .content-wrapper {
	max-width: 860px;
	margin: 0;
	padding: 36px 40px 40px;
	border: 1px solid var(--rp-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 10px 30px rgb(0 60 40 / 8%);
	text-align: left;
}

.rp-forms section.registration-page .content-heading {
	margin-bottom: 18px;
}

.rp-forms section.registration-page h2.section-heading {
	margin: 0;
	font: 700 34px/1.2 var(--rp-display);
	color: var(--rp-ink);
	text-align: left;
	text-shadow: none;
}

/* Contract and Policies prints its title twice (section heading and form title). */
.rp-forms #gform_wrapper_7 .gform_title {
	display: none;
}

.rp-forms section.registration-page .gform_wrapper h2,
.rp-forms section.registration-page .gform_wrapper h3,
.rp-forms section.registration-page .gform_wrapper .gsection_title {
	font-family: var(--rp-display);
	color: var(--rp-ink);
	text-align: left;
}

.rp-forms section.registration-page .gform_wrapper .gsection {
	margin-top: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rp-line);
}

/* ---------- Text: the legal paragraphs and the inline sentences ---------- */
/* The theme's paragraphs ask for "Source Sans Pro bold", which is never loaded (a serif shows). */
.rp-forms section.registration-page .content-wrapper,
.rp-forms section.registration-page .content-wrapper p,
.rp-forms section.registration-page .gfield_html,
.rp-forms section.registration-page .gfield_html li {
	font-family: var(--rp-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--rp-ink);
	text-align: left;
}

.rp-forms section.registration-page .gfield_html p,
.rp-forms section.registration-page .gfield_html ul,
.rp-forms section.registration-page .gfield_html ol {
	max-width: 70ch;
	margin: 0 0 12px;
}

.rp-forms section.registration-page .gfield_html strong,
.rp-forms section.registration-page .gfield_html b {
	font-weight: 700;
}

/* The fill-in-the-blank sentences ("I ___, understand that my child(ren) ___ ...") come from theme CSS. */
.rp-forms section.registration-page .text-d-flex,
.rp-forms section.registration-page .text-d-flex::before,
.rp-forms section.registration-page .text-d-flex::after {
	color: var(--rp-ink);
	font-family: var(--rp-body);
	font-size: 17px;
}

.rp-forms section.registration-page .text-d-flex {
	flex-wrap: wrap;
}

/* ---------- Labels and fields ---------- */
.rp-forms section.registration-page .gfield_label,
.rp-forms section.registration-page legend.gfield_label {
	margin-bottom: 6px;
	font: 700 16px/1.3 var(--rp-body);
	color: var(--rp-ink);
}

.rp-forms section.registration-page .gfield_required {
	color: var(--rp-error);
	font-weight: 600;
}

.rp-forms section.registration-page .gform-field-label--type-sub,
.rp-forms section.registration-page .gfield_description,
.rp-forms section.registration-page .gform-field-label--type-inline,
.rp-forms section.registration-page .gchoice label {
	font: 400 15px/1.4 var(--rp-body);
	color: var(--rp-ink);
}

.rp-forms section.registration-page .gform-field-label--type-sub,
.rp-forms section.registration-page .gfield_description {
	color: var(--rp-muted);
}

.rp-forms section.registration-page input[type="text"],
.rp-forms section.registration-page input[type="email"],
.rp-forms section.registration-page input[type="tel"],
.rp-forms section.registration-page input[type="number"],
.rp-forms section.registration-page input[type="password"],
.rp-forms section.registration-page input[type="date"],
.rp-forms section.registration-page select,
.rp-forms section.registration-page textarea {
	min-height: 46px;
	padding: 9px 12px;
	border: 1px solid #8fa39a !important;
	border-radius: 10px !important;
	background-color: #fff;
	font: 400 16px/1.3 var(--rp-body);
	color: var(--rp-ink);
	box-sizing: border-box;
}

.rp-forms section.registration-page input::placeholder,
.rp-forms section.registration-page textarea::placeholder {
	color: #6b7a72;
}

.rp-forms section.registration-page input:focus,
.rp-forms section.registration-page select:focus,
.rp-forms section.registration-page textarea:focus {
	outline: 3px solid rgb(0 119 187 / 35%);
	outline-offset: 0;
	border-color: var(--rp-blue) !important;
}

.rp-forms section.registration-page input[type="checkbox"],
.rp-forms section.registration-page input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--rp-green);
}

.rp-forms section.registration-page .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
}

/* Signature pads, if any, get a visible edge on white. */
.rp-forms section.registration-page .gfield--type-signature canvas,
.rp-forms section.registration-page .ginput_container_signature {
	border-color: #8fa39a;
}

/* ---------- Progress bar (Registration, 4 steps) ---------- */
.rp-forms section.registration-page .gf_progressbar_title,
.rp-forms section.registration-page p.gf_progressbar_title {
	color: var(--rp-ink) !important;
	font: 600 15px/1.3 var(--rp-body);
}

.rp-forms section.registration-page .gf_progressbar {
	background: #e3ece6;
	border-radius: 999px;
}

.rp-forms section.registration-page .gf_progressbar_percentage.percentbar_blue {
	background: var(--rp-green) !important;
	color: #fff;
}

/* ---------- Buttons on white: the dark outline again (rp-cta.css made it white for the blue panel) ---------- */
.rp-cta.rp-forms .registration-page .gform_wrapper.gform_wrapper input[type="submit"],
.rp-cta.rp-forms .registration-page .gform_wrapper.gform_wrapper input[type="button"].gform_next_button,
.rp-cta.rp-forms .registration-page .gform_wrapper.gform_wrapper input[type="button"].gform_previous_button {
	border-color: var(--rp-ink) !important;
}

.rp-forms section.registration-page .gform_page_footer,
.rp-forms section.registration-page .gform_footer {
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--rp-line);
}

/* ---------- Errors (the theme hid every message and made error text white) ---------- */
.rp-forms section.registration-page .gform_validation_errors {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 2px solid var(--rp-error);
	border-radius: 12px;
	background: #fdf1f0;
	box-shadow: none;
}

.rp-forms section.registration-page .gform_validation_errors .gform_submission_error {
	font: 700 17px/1.4 var(--rp-body);
	color: var(--rp-error);
}

.rp-forms section.registration-page .validation_message,
.rp-forms section.registration-page .gfield_validation_message {
	display: block !important;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font: 600 15px/1.4 var(--rp-body);
	color: var(--rp-error) !important;
}

.rp-forms section.registration-page .gfield_error .gfield_label,
.rp-forms section.registration-page .gfield_error legend {
	color: var(--rp-error) !important;
}

.rp-forms section.registration-page .gfield_error .gform-field-label--type-sub,
.rp-forms section.registration-page .gfield_error [aria-invalid="true"] + label,
.rp-forms section.registration-page .gfield_error label + [aria-invalid="true"] {
	color: var(--rp-muted) !important;
}

.rp-forms section.registration-page .gfield_error input,
.rp-forms section.registration-page .gfield_error select,
.rp-forms section.registration-page .gfield_error textarea {
	border: 2px solid var(--rp-error) !important;
}

/* The confirmation message after a form is sent. */
.rp-forms section.registration-page .gform_confirmation_message {
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--rp-mint);
	font: 600 18px/1.5 var(--rp-body);
	color: var(--rp-ink);
}

@media (max-width: 699px) {
	.rp-forms section.registration-page { padding: 12px 16px 0; margin-bottom: 150px; }
	.rp-forms section.registration-page .content-wrapper { padding: 22px 16px 26px; border-radius: 18px; }
	.rp-forms section.registration-page h2.section-heading { font-size: 26px; }
	.rp-forms #back-to-top { display: none; }
}