:root {
	--sampere-red: #e21217;
	--sampere-white: #fff;
}

.booking-form fieldset {
	border: 0;
	padding: 0;
	margin: 0.5em 0;
}

.booking-form legend {
	display: block;
	width: 100%;
	color: var(--sampere-red);
  font-family: "playfair display",serif;
	font-size: 1.5em;
	font-weight: bold;
  line-height: 1.2;
  margin: 0.5em 0;
	padding: 0 0 0.25em 0;
	border-bottom: 1px solid #ccc;
}

.booking-form p { margin: 0; }

.booking-form label {
	display: block;
	width: 100%;
	font-weight: bold;
}

.booking-form input, .booking-form select {
	box-sizing: border-box;
	width: 100%;
}

.booking-form option {
	font-family: Lato, sans-serif;
}

.booking-form.processing input, 
.booking-form.processing select, 
.booking-form.processing button {
	pointer-events: none;
}

.booking-form input[type="checkbox"], .booking-form input[type="checkbox"] + label {
	display: inline-block;
	vertical-align: middle;
}

.booking-form input[type="checkbox"] {
	width: 1.25em;
	height: 1.25em;
}

.booking-form input[type="checkbox"] + label {
	width: auto;
	margin: 0 0.25em;
}

.booking-form .personal-data {
	display: grid;
	grid-template-areas: 
		"name name gender birthdate"
		"email email phone phone"
		"idnumber idnumber country country"
		"level . former-student former-student"
	;
	gap: 1em;
}

.booking-form .personal-data .name {
	grid-area: name;
	display: grid;
	grid-template-areas: "label label" "first-name last-name";
	gap: 0 1em;
}
.booking-form .personal-data .name > label { grid-area: label; }
.booking-form .personal-data .name .first { grid-area: first-name; }
.booking-form .personal-data .name .last { grid-area: last-name; }
.booking-form .personal-data .name .first input, 
.booking-form .personal-data .name .last input {
	margin-bottom: 0;
}
.booking-form .personal-data .gender { grid-area: gender; }
.booking-form .personal-data .birthdate { grid-area: birthdate; }
.booking-form .personal-data .phone { grid-area: phone; }
.booking-form .personal-data .email { grid-area: email; }
.booking-form .personal-data .idnumber { grid-area: idnumber; }
.booking-form .personal-data .country { grid-area: country; }
.booking-form .personal-data .level { 
	grid-area: level; 
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 1em;
}
.booking-form .personal-data .former-student { grid-area: former-student; }

.booking-form .personal-data .name input + label {
	font-weight: normal;
}

.booking-form .personal-data .level label { width: auto; }

.booking-form .course-data .course.combination {
	display: grid;
	grid-template-areas: 
		"course-1 course-2 course-3"
		"extras extras extras"
		"date date duration"
	;
	align-items: end;
	gap: 0.5em;
}
.booking-form .course-data .course.combination.has-2 {
	grid-template-areas: 
		"course-1 course-2"
		"extras extras"
		"date duration"
	;
}

.booking-form .course-data .course.combination .course:nth-child(1) { 
	grid-area: course-1; 
}
.booking-form .course-data .course.combination .course:nth-child(2) { 
	grid-area: course-2; 
}
.booking-form .course-data .course.combination .course:nth-child(3) { 
	grid-area: course-3; 
}
.booking-form .course-data .course.combination .extras { grid-area: extras; }
.booking-form .course-data .course.combination .date { grid-area: date; }
.booking-form .course-data .course.combination .duration { 
	grid-area: duration; 
}

.booking-form .course-data .course input:invalid,
.booking-form .course-data .course select:invalid {
	color: var(--sampere-red);
	border-color: var(--sampere-red);
}

.booking-form .course-data .course.combination .extras .extra {
	font-weight: normal;
}
.booking-form .course-data .course.combination .extras .extra strong {
	display: block;
}
.booking-form .course-data .course.combination .extras .extra input + span {
	margin-left: 0.5em;
}

.booking-form .course-data .course.choice {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: 
		"course date"
	;
	align-items: end;
	gap: 0.5em;
}
.booking-form .course-data .course.choice.has-duration {
	grid-template-areas: 
		"course course" 
		"date duration"
	;
}
.booking-form .course-data .course.choice .course { grid-area: course; }
.booking-form .course-data .course.choice .date { grid-area: date; }
.booking-form .course-data .course.choice .duration { 
	grid-area: duration; 
}

.booking-form .course-data .course .duration.hidden { display: none; }

.booking-form .course-data .course.stay.has-accommodation,
.booking-form .course-data .course.stay.has-duration {
	display: grid;
	grid-template-columns: auto auto;
	gap: 1em;
}
.booking-form .course-data .course.stay.has-accommodation.has-duration {
	grid-template-columns: auto auto auto;
}

.booking-form .other-services input[type="checkbox"] + label,
.booking-form .terms-and-conditions input[type="checkbox"] + label {
	text-align: justify;
	font-weight: normal;
	width: auto;
}

.booking-form .terms-and-conditions p {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.5em;
	margin: 1em 0;
}

.booking-form .terms-and-conditions input[type="checkbox"] {
	width: 1.25em;
	height: 1.25em;
	margin: 0;
}

.booking-form fieldset.quote { 
	opacity: 0; 
	overflow: hidden;
	height: 0;
	transition: all 0.2s linear;
}
.booking-form.has-quote fieldset.quote {
	opacity: 1;
	height: auto;
}
.booking-form fieldset.quote legend { display: none; }
.booking-form.has-quote fieldset.quote legend { display: block; }

.booking-form fieldset.quote dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;
	gap: 0.5em;
}

.booking-form fieldset.quote dl > div {
	background: rgba(0, 0, 0, 0.1);
  padding: 0.33em;
}

.booking-form fieldset.quote dl div.courses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5em;

}

.booking-form fieldset.quote dd {
	padding: 0;
	margin: 0;
}

.booking-form fieldset.quote .fee dd, .booking-form fieldset.quote .deposit dd {
	font-weight: bold;
}

.booking-form.has-quote input, .booking-form.has-quote select {
	pointer-events: none;
}

.booking-form .buttons {
	display: flex;
	gap: 1em;
}

.booking-form button.quote,
.booking-form button.payment,
.booking-form button.change,
.booking-form-dialog form[method="dialog"] button {
	font-size: 1em;
	text-transform: uppercase;
	background-color: var(--sampere-red);
	color: var(--sampere-white);
	font-weight: normal;
	border: 0;
	padding: 0.5em 1em;
	cursor: pointer;
}

.booking-form button.payment,
.booking-form button.change,
.booking-form.has-quote button.quote {
	display: none;
}
.booking-form button.quote,
.booking-form.has-quote button.payment,
.booking-form.has-quote button.change {
	display: inline-block;
}

.booking-form button.quote .icon::before,
.booking-form button.payment .icon::before {
	font-style: normal;
	content: ">";
	display: inline-block;
	width: 1em;
	height: 1em;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.booking-form.processing button.quote .icon::before,
.booking-form.processing button.payment .icon::before {
	vertical-align: middle;
	content: url(spinner.svg);
	animation: spin 1s linear infinite;
}

.booking-form:invalid button.quote,
.booking-form.processing button.quote,
.booking-form:invalid button.payment,
.booking-form.processing button.payment,
.booking-form:invalid button.change,
.booking-form.processing button.change {
	background-color: #ccc;
	cursor: not-allowed;
	pointer-events: none;
}

.booking-form-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.enrolment-summary {
	box-sizing: border-box;
  max-width: 960px;
  margin: 0 auto;
  background: rgba( 0, 0, 0, 0.065 );
  padding: 1em 2em;
}

.enrolment-summary .courses .title, .enrolment-summary .cost .title {
	margin-bottom: 0;
}

.enrolment-summary .course-name {
	margin: 1em 0 0 0;
}

.enrolment-summary ol.courses { 
	padding-left: 0; 
	margin-left: 0;
}
.enrolment-summary ol.courses.single { 
	list-style-type: none;
}

.enrolment-summary .cost dl {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	gap: 0.5em;
}

.enrolment-summary .cost dl div {
	background: rgba(0, 0, 0, 0.1);
  padding: 0.33em;
}

.enrolment-summary .cost dl div.full {
	margin-left: -0.5em;
}

.enrolment-summary .cost dd {
	padding: 0;
	margin: 0;
}

.enrolment-summary .cost .fee dd, .enrolment-summary .cost .deposit dd {
	font-weight: bold;
}