/* Estudia booking form. Inherits the theme's fonts and colours; accent comes from the theme palette. */
.ee-booking {
	/* Outlines/selection use the text colour (always readable); the palette accent is only a background. */
	--ee-accent: var(--wp--preset--color--contrast, #1a1a1a);
	--ee-highlight: var(--wp--preset--color--accent-1, #ffe58a);
	--ee-line: color-mix(in srgb, currentColor 18%, transparent);
	--ee-soft: color-mix(in srgb, currentColor 5%, transparent);
	--ee-muted: color-mix(in srgb, currentColor 65%, transparent);
	--ee-error: #b3261e;
	--ee-radius: 8px;
	max-width: 1200px;
	margin-inline: auto;
}

/* Until booking.js has built the form (adds .is-ready), keep its space free so the footer does not jump (CLS).
   Heights are the measured form heights (EN, no preselection) at phone, tablet and desktop widths.
   Without JavaScript the <noscript> text is shown instead, so no empty space is reserved. */
@media (scripting: enabled) {
	.ee-booking:not(.is-ready):not(.ee-enquiry) { min-height: 2400px; }
}
@media (scripting: enabled) and (max-width: 479px) {
	.ee-booking:not(.is-ready):not(.ee-enquiry) { min-height: 3000px; }
}
@media (scripting: enabled) and (max-width: 359px) {
	.ee-booking:not(.is-ready):not(.ee-enquiry) { min-height: 3200px; }
}
@media (scripting: enabled) and (min-width: 900px) {
	.ee-booking:not(.is-ready):not(.ee-enquiry) { min-height: 2500px; }
}

/* A school is chosen and its options are loading: the course list (note + up to four cards, about 365 px on desktop) will
   fill this space, so reserve most of it and the accommodation step below is not pushed (CLS). Phones stack the form
   and the steps below are off screen, so nothing is reserved there. Removed by booking.js when the options arrive. */
@media (min-width: 900px) {
	.ee-booking.is-loading-options .ee-courses { min-height: 340px; }
}

/* Turnstile runs in "interaction-only" mode: invisible, so the box reserves no space. When the visitor has to act
   (the widget's before-interactive callback sets .is-interactive) the challenge is drawn as an overlay that grows UPWARD
   out of the zero-height box: nothing below it moves, so the buttons under the pointer (send, quote PDF) never shift
   between mouse-down and mouse-up (a layout shift here used to swallow the click).
   The overlay positioning applies ALWAYS, not only while .is-interactive: Cloudflare keeps the widget on screen for a
   moment after a successful check (the "Success" state), and after-interactive-callback has already removed the class by
   then. A widget back in the normal flow of this zero-height box spills DOWNWARD over the send button (found on the
   production test host 2026-10-16: German, Chrome desktop, the box covered the button after the check passed). */
.ee-turnstile,
.cf-turnstile {
	position: relative;
	height: 0;
	min-height: 0;
}
.ee-turnstile > *,
.cf-turnstile > * {
	position: absolute;
	left: 0;
	bottom: 0.5rem;
	z-index: 20;
	max-width: 100%;
}
.ee-turnstile.is-interactive > *,
.cf-turnstile.is-interactive > * {
	background: #fff;
	box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
	border-radius: 4px;
}
.ee-turnstile-status:empty {
	display: none;
}

.ee-booking__form {
	display: grid;
	gap: 2rem;
	align-items: start;
	grid-template-columns: minmax(0, 1fr); /* the column may shrink below its widest content (long names, 130% text) */
}

.ee-booking__form > * {
	min-width: 0;
}

@media (min-width: 900px) {
	.ee-booking__form {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
	.ee-booking__summary {
		position: sticky;
		top: 1.5rem;
	}
}

.ee-booking fieldset.ee-step {
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	padding: 1.25rem 1.25rem 0.5rem;
	margin: 0 0 1.5rem;
	min-width: 0;
}

.ee-booking fieldset.ee-step[disabled] {
	opacity: 0.55;
}

.ee-booking legend {
	font-weight: 600;
	font-size: 1.15em;
	padding-inline: 0.4rem;
}

.ee-booking label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.3rem;
}

.ee-booking input[type="text"],
.ee-booking input[type="email"],
.ee-booking input[type="tel"],
.ee-booking input[type="date"],
.ee-booking input[type="number"],
.ee-booking select,
.ee-booking textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--ee-line);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.ee-booking select option,
.ee-booking select optgroup {
	color: #1a1a1a;
	background: #fff;
}

.ee-booking :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--ee-accent);
	outline-offset: 2px;
}

.ee-booking p {
	margin: 0 0 1rem;
}

.ee-grid-2,
.ee-grid-3 {
	display: grid;
	gap: 0 1rem;
}

@media (min-width: 600px) {
	.ee-grid-2 {
		grid-template-columns: 1fr 1fr;
	}
	.ee-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ee-choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 0.75rem;
}

.ee-booking .ee-choice,
.ee-booking .ee-check {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-weight: 400;
	margin-bottom: 0.6rem;
}

.ee-check input,
.ee-choice input {
	flex: none;
}

/* Name, price and hint of a tick box form one text block next to the box; it wraps instead of widening the page. */
.ee-check__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ee-hint {
	color: var(--ee-muted);
	font-size: 0.9em;
	font-weight: 400;
}

/* Required fields carry an asterisk (hidden from screen readers: the input itself is required); one legend per form.
   #b3261e on white is 6.5:1. */
.ee-required {
	color: var(--ee-error, #b3261e);
	font-weight: 700;
}

.ee-booking .ee-required-legend {
	margin: 0 0 1rem;
	color: var(--ee-muted);
	font-size: 0.9em;
}

.ee-required-legend .ee-required {
	font-weight: 700;
}

/* Reassurance ("Nothing to pay now …"): what people most want to know before they send the form. */
.ee-reassure {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.85rem;
	border-left: 4px solid var(--wp--preset--color--accent-3, #32936f);
	border-radius: 0 var(--ee-radius) var(--ee-radius) 0;
	background: color-mix(in srgb, var(--wp--preset--color--accent-3, #32936f) 10%, transparent);
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.45;
}

.ee-subheading {
	font-size: 1em;
	margin: 0.5rem 0 0.75rem;
}

/* Selectable cards (courses, accommodation) */
.ee-booking .ee-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.75rem;
	align-items: start;
	padding: 0.8rem 1rem;
	margin-bottom: 0.6rem;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	font-weight: 400;
	cursor: pointer;
}

.ee-card:has(input:checked) {
	border-color: var(--ee-accent);
	background: var(--ee-soft);
	box-shadow: inset 0 0 0 1px var(--ee-accent);
}

.ee-card.is-disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.ee-card input {
	margin-top: 0.25em;
}

.ee-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ee-card__body {
	min-width: 0;
}

.ee-card__title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ee-card__meta {
	color: var(--ee-muted);
	font-size: 0.9em;
}

.ee-card__note {
	font-size: 0.85em;
	font-style: italic;
}

.ee-card__price {
	white-space: nowrap;
	font-size: 0.9em;
	min-width: max-content;
}

@media (max-width: 480px) {
	.ee-booking .ee-card {
		grid-template-columns: auto 1fr;
	}
	.ee-card__price {
		grid-column: 2;
	}
}

.ee-badge {
	display: inline-block;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--ee-highlight);
	color: #1a1a1a;
	font-size: 0.8em;
	font-weight: 600;
	vertical-align: 0.1em;
}

.ee-price {
	color: var(--ee-muted);
	white-space: nowrap;
}

/* Summary */
.ee-booking__summary {
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	padding: 1.25rem;
	background: var(--ee-soft);
	transition: opacity 0.15s;
}

.ee-booking__summary.is-loading {
	opacity: 0.6;
}

.ee-booking__summary h2 {
	font-size: 1.2em;
	margin: 0 0 0.75rem;
}

.ee-summary-dates,
.ee-warnings,
.ee-error-list {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	font-size: 0.9em;
}

.ee-lines {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.75rem;
	font-size: 0.95em;
}

.ee-lines th,
.ee-lines td {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--ee-line);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.ee-lines td {
	text-align: right;
	white-space: nowrap;
	padding-left: 0.75rem;
}

.ee-lines tfoot th,
.ee-lines tfoot td {
	font-weight: 700;
	font-size: 1.1em;
	border-bottom: 0;
	padding-top: 0.6rem;
}

.ee-line--discount td,
.ee-line--voucher td {
	color: #1e7a3d;
}

.ee-warnings {
	color: var(--ee-muted);
}

.ee-error,
.ee-error-list {
	color: var(--ee-error);
}

/* Submit */
.ee-submit {
	margin-bottom: 2rem;
}

.ee-button {
	cursor: pointer;
	padding: 0.85rem 1.6rem;
	font: inherit;
	font-weight: 600;
}

.ee-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ee-success {
	padding: 2rem;
	border: 1px solid var(--ee-accent);
	border-radius: var(--ee-radius);
	background: var(--ee-soft);
}

.ee-success:focus {
	outline: none;
}

/* Mobile: sticky total that jumps to the full summary. */
.ee-mobile-total {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: 0 -1rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--base, #fff);
	border-top: 1px solid var(--ee-line);
	box-shadow: 0 -4px 12px rgb(0 0 0 / 0.06);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.ee-mobile-total[hidden] {
	display: none;
}

@media (min-width: 900px) {
	.ee-mobile-total {
		display: none !important;
	}
}

/* Honeypot: hidden from people, visible to naive bots. */
.ee-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ee-booking .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ─── Start-date calendar ─────────────────────────────────────────────────────────────────── */
.ee-booking {
	--ee-cal-start: var(--wp--preset--color--accent-3, #32936f);
	--ee-cal-course: var(--wp--preset--color--accent-1, #d3e5d7);
	--ee-cal-acc: var(--wp--preset--color--accent-4, #243b4a);
	--ee-cal-holiday: var(--wp--preset--color--accent-5, #a91f23);
}

.ee-cal-wrap {
	margin-top: 0.5rem;
}

.ee-cal-label {
	margin: 0 0 0.5rem;
}

.ee-cal {
	max-width: 26rem;
	min-width: 0;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-radius);
	padding: 0.5rem;
}

.ee-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.25rem;
}

.ee-cal__title {
	font-weight: 600;
	text-transform: capitalize;
}

.ee-cal__nav {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ee-line);
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.ee-cal__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.ee-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr)); /* square cells that shrink with the screen */
	gap: 2px;
}

.ee-cal__dow {
	text-align: center;
	font-size: 0.75em;
	color: var(--ee-muted);
	padding: 0.25rem 0;
}

.ee-cal__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-width: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	padding: 0;
}

.ee-cal__day.is-past,
.ee-cal__day.is-weekend {
	color: var(--ee-muted);
}

.ee-cal__day.is-course {
	background: var(--ee-cal-course);
	color: #1a1a1a;
}

/* Public holidays and school holidays alike: the school is closed. */
.ee-cal__day.is-closed,
.ee-cal-key.is-closed {
	background: repeating-linear-gradient(135deg, var(--ee-soft) 0 4px, var(--ee-line) 4px 6px);
	color: var(--ee-muted);
}

/* Possible start dates: green outline; the chosen one filled. */
button.ee-cal__day.is-start {
	border-color: var(--ee-cal-start);
	color: #1d5c44; /* darker than the frame: the number needs 4.5:1 on white (the green frame only 3:1) */
	font-weight: 700;
	cursor: pointer;
}

button.ee-cal__day.is-start:hover,
button.ee-cal__day.is-start:focus-visible {
	background: var(--ee-cal-start);
	color: #fff;
}

button.ee-cal__day:focus-visible {
	outline: 2px solid var(--ee-accent);
	outline-offset: 1px;
}

button.ee-cal__day.is-selected {
	background: var(--ee-cal-start);
	color: #fff;
}

/* Accommodation: a bar along the bottom of every night, rounded at arrival and departure. */
.ee-cal__day.is-acc::after,
.ee-cal-key.is-acc::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 2px;
	height: 5px;
	background: var(--ee-cal-acc);
}

.ee-cal__day.is-checkin::after {
	left: 40%;
	border-radius: 3px 0 0 3px;
}

.ee-cal__day.is-checkout::after {
	right: 40%;
	border-radius: 0 3px 3px 0;
}

.ee-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.85em;
}

.ee-cal-legend li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ee-cal-key {
	position: relative;
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 4px;
	border: 2px solid transparent;
}

.ee-cal-key {
	flex: 0 0 1.1rem; /* stays square when the legend text wraps */
}

.ee-cal-key.is-start {
	border-color: var(--ee-cal-start);
}

.ee-cal-key.is-course {
	background: var(--ee-cal-course);
}

.ee-cal-key.is-acc::after {
	left: 0;
	right: 0;
	border-radius: 3px;
}

.ee-cal-info {
	margin-top: 0.5rem;
	font-size: 0.95em;
}

.ee-cal-info p {
	margin: 0.25rem 0;
}

/* ═══ Modern look (2026-09) ═══════════════════════════════════════════════════════════════════
   Steps as white cards with a numbered title, green selection, two-column option lists, a larger calendar with
   its key beside it, and a summary card that stays in view. Later rules on purpose override the ones above. */
.ee-booking {
	--ee-green: var(--wp--preset--color--accent-3, #32936f);
	--ee-green-dark: #1d5c44;
	--ee-pale: var(--wp--preset--color--accent-1, #d3e5d7);
	--ee-blue: var(--wp--preset--color--accent-4, #243b4a);
	--ee-border: rgb(16 24 40 / 0.1);
	--ee-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.08);
	--ee-shadow-lg: 0 16px 32px -12px rgb(16 24 40 / 0.22);
	--ee-radius: 14px;
	accent-color: var(--ee-green);
}

/* Steps */
.ee-booking fieldset.ee-step {
	position: relative;
	padding: 1.4rem 1.5rem 0.75rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius);
	background: #fff;
	box-shadow: var(--ee-shadow);
	transition: opacity 0.2s, box-shadow 0.2s;
}

.ee-booking fieldset.ee-step:focus-within {
	box-shadow: var(--ee-shadow-lg);
}

.ee-booking fieldset.ee-step[disabled] {
	opacity: 0.5;
	box-shadow: none;
	background: #fafafa;
}

/* The title inside the card instead of on its border. */
.ee-booking legend {
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0;
	margin: 0 0 1.1rem;
	font-size: 1.2em;
	font-weight: 700;
	color: var(--ee-blue);
}

.ee-booking legend + * {
	clear: both;
}

.ee-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--ee-pale);
	color: var(--ee-green-dark);
	font-size: 0.85em;
	font-weight: 700;
}

/* Fields */
.ee-booking input[type="text"],
.ee-booking input[type="email"],
.ee-booking input[type="tel"],
.ee-booking input[type="date"],
.ee-booking input[type="number"],
.ee-booking select,
.ee-booking textarea {
	min-height: 2.9rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgb(16 24 40 / 0.16);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ee-booking :is(input, select, textarea):hover {
	border-color: rgb(16 24 40 / 0.3);
}

.ee-booking :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--ee-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ee-green) 25%, transparent);
}

.ee-booking input[type="radio"],
.ee-booking input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
}

.ee-booking label {
	font-weight: 600;
	font-size: 0.95em;
}

.ee-booking .ee-choice,
.ee-booking .ee-check {
	align-items: center;
	font-weight: 400;
	font-size: 1em;
}

.ee-booking .ee-choice {
	padding: 0.6rem 1rem;
	border: 1px solid var(--ee-border);
	border-radius: 999px;
	cursor: pointer;
}

.ee-booking .ee-choice:has(input:checked) {
	border-color: var(--ee-green);
	background: color-mix(in srgb, var(--ee-pale) 45%, #fff);
}

.ee-subheading {
	color: var(--ee-blue);
	font-weight: 700;
	margin-top: 0.75rem;
}

/* Options: two columns of cards on wide screens */
.ee-courses,
.ee-accommodation {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 0.65rem;
	margin-bottom: 1rem;
}

.ee-course-note {
	grid-column: 1 / -1;
	margin: 0 0 0.25rem !important;
}

.ee-booking .ee-card {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.2rem 0.75rem;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1.5px solid var(--ee-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ee-booking .ee-card:not(.is-disabled):hover {
	border-color: color-mix(in srgb, var(--ee-green) 55%, transparent);
	box-shadow: var(--ee-shadow);
}

.ee-card:has(input:checked) {
	border-color: var(--ee-green);
	background: color-mix(in srgb, var(--ee-pale) 40%, #fff);
	box-shadow: 0 0 0 1px var(--ee-green);
}

.ee-card__price {
	grid-column: 2;
	font-weight: 600;
	color: var(--ee-blue);
	font-size: 0.92em;
}

.ee-card__title {
	color: var(--ee-blue);
}

.ee-badge {
	padding: 0.1em 0.6em;
	background: var(--ee-pale);
	color: var(--ee-green-dark);
}

/* Calendar: larger, with its key and notes beside it on wide screens */
.ee-cal {
	max-width: 28rem;
	padding: 0.75rem;
	border: 1px solid var(--ee-border);
	border-radius: 12px;
	background: #fff;
}

.ee-cal__day {
	border-radius: 8px;
	font-size: 0.95em;
}

.ee-cal__nav {
	border-color: var(--ee-border);
	transition: background 0.15s;
}

.ee-cal__nav:not(:disabled):hover {
	background: var(--ee-pale);
}

@media (min-width: 1100px) {
	.ee-cal-wrap {
		display: grid;
		grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
		column-gap: 1.75rem;
		align-items: start;
	}
	.ee-cal-label {
		grid-column: 1 / -1;
	}
	.ee-cal {
		grid-row: 2 / span 2;
	}
	.ee-cal-legend {
		grid-column: 2;
		grid-row: 2;
		flex-direction: column;
		margin: 0;
		padding: 1rem 1.1rem;
		border-radius: 12px;
		background: #f7f8f7;
	}
	.ee-cal-info {
		grid-column: 2;
		grid-row: 3;
	}
}

.ee-cal-info:not(:empty) {
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--ee-green);
	border-radius: 0 10px 10px 0;
	background: color-mix(in srgb, var(--ee-pale) 35%, #fff);
}

/* Summary card */
.ee-booking__summary {
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius);
	background: #fff;
	box-shadow: var(--ee-shadow-lg);
}

@media (min-width: 900px) {
	.ee-booking__summary {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem); /* below the sticky site header */
	}
}

.ee-booking__summary h2 {
	margin: 0;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, var(--ee-blue), #2f5569);
	color: #fff;
	font-size: 1.1em;
}

.ee-summary-body {
	padding: 1rem 1.25rem 1.25rem;
}

.ee-summary-course {
	font-size: 1.05em;
	color: var(--ee-blue);
}

.ee-lines th,
.ee-lines td {
	border-bottom-color: rgb(16 24 40 / 0.07);
	padding-block: 0.45rem;
}

.ee-lines tfoot th,
.ee-lines tfoot td {
	padding-top: 0.8rem;
	font-size: 1.3em;
	color: var(--ee-blue);
}

.ee-line--discount td,
.ee-line--voucher td {
	color: var(--ee-green);
	font-weight: 600;
}

/* Submit */
.ee-booking .ee-button,
.ee-submit .wp-element-button {
	min-height: 3.25rem;
	padding-inline: 2.2rem;
	border-radius: 12px;
	font-size: 1.05em;
	box-shadow: 0 10px 20px -10px rgb(50 147 111 / 0.8);
}

.ee-success {
	border: 0;
	border-radius: var(--ee-radius);
	background: color-mix(in srgb, var(--ee-pale) 50%, #fff);
	box-shadow: var(--ee-shadow-lg);
}

/* Mobile total bar */
.ee-mobile-total {
	margin: 0 -1rem;
	padding: 0.85rem 1.1rem;
	border-top: 0;
	background: var(--ee-blue);
	color: #fff;
	box-shadow: 0 -8px 20px rgb(0 0 0 / 0.12);
}

.ee-mobile-total__amount {
	font-size: 1.15em;
}

@media (max-width: 599px) {
	.ee-booking fieldset.ee-step {
		padding: 1.1rem 1rem 0.5rem;
	}
}

/* Tick boxes next to longer texts sit at the first line. */
.ee-booking .ee-check {
	align-items: flex-start;
}

.ee-booking .ee-check input {
	margin-top: 0.2em;
}

/* Phones: price to the right of the name, so the option lists stay short. */
@media (max-width: 599px) {
	.ee-booking .ee-card {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 0.75rem 0.85rem;
	}
	.ee-booking .ee-card__price {
		grid-column: 3;
		grid-row: 1;
		text-align: right;
		font-size: 0.85em;
		line-height: 1.3;
	}
}

/* Large text on a phone (e.g. 130%): the list is narrow in em, so the price goes under the name instead of squeezing it. */
.ee-booking .ee-courses,
.ee-booking .ee-accommodation,
.ee-booking .ee-extras {
	container-type: inline-size;
}

@container (max-width: 16em) {
	.ee-booking .ee-card {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.ee-booking .ee-card__price {
		grid-column: 2;
		grid-row: auto;
		text-align: left;
		white-space: normal;
		min-width: 0;
	}
}

/* Chosen school: a card with its photo */
.ee-selected-school {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid var(--ee-border);
	border-radius: 14px;
	background: #fff;
}

.ee-selected-school__img {
	flex: none;
	width: 96px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--ee-pale);
}

.ee-selected-school__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.ee-selected-school__text strong {
	font-size: 1.1em;
	color: var(--ee-blue);
}

.ee-selected-school__text span {
	font-size: 0.9em;
	color: var(--ee-muted);
}

.ee-selected-school .ee-change-school {
	margin-left: auto;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ee-border);
	border-radius: 999px;
	color: inherit;
	font-size: 0.9em;
	text-decoration: none;
	white-space: nowrap;
}

.ee-selected-school .ee-change-school:hover {
	border-color: var(--ee-green);
	background: color-mix(in srgb, var(--ee-pale) 40%, #fff);
}

/* Shortened option lists */
.ee-show-all {
	grid-column: 1 / -1;
	margin: 0.25rem 0 0 !important;
}

.ee-show-all .ee-link-button {
	padding: 0.5rem 1rem;
	border: 1.5px dashed color-mix(in srgb, var(--ee-green) 60%, transparent);
	border-radius: 10px;
	background: none;
	color: var(--ee-green-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ee-show-all .ee-link-button:hover {
	background: color-mix(in srgb, var(--ee-pale) 40%, #fff);
}

/* Accommodation: the tile is the wrapper, so the card and its "More about this" share one border and selection state. */
.ee-card-wrap {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--ee-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ee-card-wrap:hover {
	border-color: color-mix(in srgb, var(--ee-green) 55%, transparent);
	box-shadow: var(--ee-shadow);
}

.ee-card-wrap:has(input:checked) {
	border-color: var(--ee-green);
	background: color-mix(in srgb, var(--ee-pale) 40%, #fff);
	box-shadow: 0 0 0 1px var(--ee-green);
}

.ee-booking .ee-card-wrap > .ee-card,
.ee-booking .ee-card-wrap > .ee-card:not(.is-disabled):hover,
.ee-booking .ee-card-wrap > .ee-card:has(input:checked) {
	flex: 1;
	border: 0;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
}

.ee-card__more {
	padding: 0 1rem 0.7rem 2.9rem; /* in line with the card's title (padding + radio + gap) */
	font-size: 0.88em;
}

.ee-card__more summary {
	cursor: pointer;
	color: var(--ee-green-dark);
	font-weight: 600;
}

.ee-card__more p {
	margin: 0.35rem 0 0.25rem;
	color: var(--ee-muted);
	line-height: 1.5;
}

@media (max-width: 599px) {
	.ee-card__more {
		padding-left: 2.75rem;
	}
}

@media (max-width: 480px) {
	.ee-selected-school__img {
		width: 72px;
		height: 56px;
	}
}

/* Jumps to a step (e.g. #dates from a price table) stop below the sticky site header. */
.ee-booking fieldset.ee-step {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
}

/* Hidden parts stay hidden, whatever display a component sets (e.g. the second student's beginner box). */
.ee-booking [hidden] {
	display: none !important;
}

/* ═══ Compact form (2026-10) ══════════════════════════════════════════════════════════════════ */

/* Course list note: price basis, said once. */
.ee-course-note .ee-hint {
	display: inline;
}

/* Weeks and extra nights before / after on one row. */
.ee-dates-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 0.75rem;
}

.ee-dc-weeks,
.ee-dc-nights,
.ee-night-hint {
	grid-column: 1 / -1;
}

/* "Extra nights" group: one legend, then the two boxes ("Before the course" / "After the course") side by side, equal width. */
.ee-booking .ee-dc-nights {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ee-booking .ee-dc-nights > legend {
	padding: 0;
	margin: 0 0 0.25rem;
	font-weight: 600;
	font-size: 0.95em;
	color: inherit;
	font-family: inherit;
}

.ee-dc-nights__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 0.75rem;
	align-items: start;
}

.ee-dc-nights__row > p {
	margin-top: 0;
}

.ee-dc-nights__row select {
	width: 100%;
}

/* Under the weeks list: what the totals in it include. */
.ee-weeks-hint {
	display: block;
	margin-top: 0.25rem;
}

.ee-dates-controls .ee-night-hint {
	margin-top: -0.4rem;
}

@media (min-width: 600px) {
	.ee-dates-controls {
		grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
		gap: 0 1rem;
	}
	.ee-dc-weeks {
		grid-column: auto;
	}
	.ee-dc-nights {
		grid-column: 2 / -1; /* the two boxes share the right two thirds */
	}
	.ee-dates-controls .ee-night-hint {
		grid-column: 2 / -1; /* under the extra-nights dropdowns, not the weeks */
	}

}

/* Form fields: a 6-column grid; each field sets its width on phones (--m) and wider screens (--d). */
.ee-fields {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 0.75rem;
}

.ee-fields > * {
	grid-column: span var(--m, 6);
}

@media (min-width: 600px) {
	.ee-fields {
		gap: 0 1rem;
	}
	.ee-fields > * {
		grid-column: span var(--d, 3);
	}
}

/* Voucher: a link instead of an open field. */
.ee-voucher {
	margin: 0 0 1rem;
}

.ee-voucher summary {
	cursor: pointer;
	color: var(--ee-green-dark);
	font-weight: 600;
}

.ee-voucher p {
	max-width: 22rem;
	margin: 0.6rem 0 0;
}

/* High season: a dot on the day. */
.ee-booking {
	--ee-cal-season: #c77700;
}

.ee-cal__day.is-season::before,
.ee-cal-key.is-season::before {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ee-cal-season);
}

.ee-cal-key.is-season::before {
	top: 50%;
	right: 50%;
	width: 8px;
	height: 8px;
	transform: translate(50%, -50%);
}

/* Start dates this student cannot use (not open to absolute beginners, or too late for the accommodation): a grey box with a
   dashed frame and a plain number. Dashes against the solid green frame are the non-colour cue; no strikethrough. */
.ee-booking {
	--ee-cal-blocked-bg: #efefef;
	--ee-cal-blocked-line: var(--wp--preset--color--accent-6, #6b6b6b);
}

button.ee-cal__day.is-blocked,
.ee-cal-key.is-blocked {
	border: 2px dashed var(--ee-cal-blocked-line);
}

button.ee-cal__day.is-blocked {
	color: #4a4a4a;
	font-weight: 500;
	cursor: not-allowed;
}

button.ee-cal__day.is-blocked:not(.is-closed):not(.is-course),
.ee-cal-key.is-blocked {
	background: var(--ee-cal-blocked-bg);
}

button.ee-cal__day.is-blocked:hover {
	background-color: var(--ee-cal-blocked-bg); /* no hover change: it cannot be chosen */
}

@media (max-width: 480px) {
	button.ee-cal__day.is-start,
	button.ee-cal__day.is-blocked {
		aspect-ratio: auto;
		min-height: 44px;
	}
}

@media (forced-colors: active) {
	button.ee-cal__day.is-blocked,
	.ee-cal-key.is-blocked {
		border-color: GrayText;
		color: GrayText;
	}
}

/* Phones: the price breakdown is a panel that opens above the total bar (the summary card itself stays in the
   flow only when it has errors to show). */
.ee-mobile-total {
	width: calc(100% + 2rem);
	border: 0;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ee-mobile-total__label {
	flex: 1;
	font-size: 0.9em;
	font-weight: 500;
}

.ee-mobile-total__chev::before {
	content: "▴";
	display: inline-block;
	transition: transform 0.2s;
}

.ee-mobile-total[aria-expanded="true"] .ee-mobile-total__chev::before {
	transform: rotate(180deg);
}

@media (max-width: 899px) {
	.ee-booking__summary {
		display: none;
	}
	.ee-booking__summary.has-errors {
		display: block;
	}
	.ee-booking.is-summary-open .ee-booking__summary {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--ee-bar-h, 3.5rem);
		z-index: 9;
		max-height: 45vh;
		overflow-y: auto;
		border-radius: var(--ee-radius) var(--ee-radius) 0 0;
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.18);
	}
	.ee-booking.is-summary-open .ee-booking__summary h2 {
		position: sticky;
		top: 0;
	}
}

/* Quote as PDF (spec 007): name field and a secondary button under "Send booking request". */
.ee-pdf {
	max-width: 32rem;
	margin: 0 0 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(16 24 40 / 0.12);
}

.ee-pdf p {
	margin-bottom: 0.6rem;
}

.ee-pdf label {
	display: block;
	margin-bottom: 0.3rem;
}

.ee-pdf input[name="pdf_name"] {
	width: 100%;
	scroll-margin-bottom: 6rem; /* not hidden behind the sticky total bar on phones (WCAG 2.4.11) */
}

.ee-pdf__note {
	color: var(--ee-muted);
	font-size: 0.9em;
}

.ee-booking .ee-pdf__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem; /* 44 px target */
	padding: 0.5rem 1.4rem;
	border: 2px solid var(--ee-blue);
	border-radius: 10px;
	background: #fff;
	color: var(--ee-blue);
	box-shadow: none;
	font-size: 1em;
	font-weight: 600;
	scroll-margin-bottom: 6rem;
}

.ee-booking .ee-pdf__button:hover {
	background: color-mix(in srgb, var(--ee-blue) 8%, #fff);
}

/* Not usable yet: still focusable, the hint next to it says why. Text 6.4:1 and border 3.1:1 on white. */
.ee-booking .ee-pdf__button[aria-disabled="true"] {
	border-color: #8a949c;
	color: #55606a;
	cursor: not-allowed;
}

.ee-booking .ee-pdf__button[aria-disabled="true"]:hover {
	background: #fff;
}

.ee-booking .ee-pdf__button[aria-busy="true"] {
	cursor: progress;
}

.ee-pdf .ee-hint {
	margin: 0.6rem 0 0;
}

.ee-pdf__status {
	margin: 0.6rem 0 0;
	color: #1e7a3d;
	font-weight: 600;
}

/* Stays in the page when empty so the screen reader announces what is written into it. */
.ee-pdf__status:empty {
	margin: 0;
}

.ee-pdf .ee-error {
	margin: 0.6rem 0 0;
}

@media (max-width: 599px) {
	.ee-booking .ee-pdf__button {
		display: flex;
		width: 100%;
	}
}
/* Group 1 (2026-10-10): accommodation totals, error summary, slow-loading notes, mobile sheet close/backdrop, deposit line. */
.ee-card__price-sub {
	display: block;
	color: var(--ee-muted);
	font-size: 0.8em;
	font-weight: 400;
}

.ee-line__detail {
	display: block;
	color: var(--ee-muted);
	font-size: 0.85em;
	font-weight: 400;
}

.ee-slow:empty,
.ee-minor-hint:empty {
	display: none;
}

.ee-field-error {
	display: block;
	margin-top: 0.25rem;
	color: var(--ee-error);
	font-size: 0.9em;
}

.ee-booking [aria-invalid="true"] {
	border-color: var(--ee-error);
	outline-color: var(--ee-error);
}

.ee-error-summary {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--ee-error);
	border-radius: var(--ee-radius);
	color: var(--ee-error);
}

.ee-error-summary[hidden] {
	display: none;
}

.ee-error-summary p {
	margin: 0 0 0.4rem;
}

.ee-error-summary ul {
	margin: 0;
	padding-left: 1.2rem;
}

.ee-error-summary a {
	color: inherit;
	font-weight: 600;
}

.ee-summary-close,
.ee-sheet-backdrop {
	display: none;
}

.ee-mobile-total {
	flex-wrap: wrap;
}

.ee-mobile-total__deposit {
	flex-basis: 100%;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.3;
}

.ee-mobile-total__deposit:empty {
	display: none;
}

@media (max-width: 899px) {
	.ee-booking.is-summary-open .ee-booking__summary {
		max-height: min(45vh, calc(100dvh - var(--ee-bar-h, 3.5rem) - 3rem));
	}
	.ee-booking.is-summary-open .ee-summary-close {
		position: sticky;
		top: 0.4rem;
		z-index: 3;
		display: block;
		float: right;
		min-width: 44px;
		min-height: 44px;
		margin: 0.2rem 0.4rem 0 0;
		padding: 0.4rem 0.9rem;
		border: 1px solid var(--ee-line);
		border-radius: var(--ee-radius);
		background: #fff;
		color: inherit;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
	.ee-booking .ee-sheet-backdrop:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 8;
		display: block;
		background: rgb(0 0 0 / 0.35);
	}
}

.ee-submit .ee-button {
	scroll-margin-bottom: 8rem; /* the submit button is never left behind the sticky total bar */
}

/* General enquiry form: direct email/WhatsApp line on top, hint above the message box. */
.ee-enquiry__direct {
	margin: 0 0 1rem;
}
.ee-enquiry span.ee-hint {
	display: block;
	margin: 0.15rem 0 0.4rem;
}

/* The school's online terms link: its own line under the terms checkbox text. */
.ee-terms-online {
	display: block;
	margin-top: 0.25rem;
}