/*
 * Cruiselink front end. Colours, fonts and corners only come from --ewcl-* properties,
 * set in Cruiselink > Settings > Branding (BrandingCss).
 */
.ewcl {
	/* Fixed base: themes often set html to 10px, which would shrink every em/rem. */
	font-size: var(--ewcl-font-size, 16px);
	/* Spacing scale (16px base): tight inside a group, generous between groups. */
	--ewcl-space-xs: 0.5em;
	--ewcl-space-s: 1em;
	--ewcl-space-m: 1.5em;
	--ewcl-space-l: 2.5em;
	--ewcl-space-xl: 3.5em;
	line-height: 1.5;
	box-sizing: border-box;
	max-width: var(--ewcl-max-width, 1140px);
	margin: var(--ewcl-step-gap, 2em) auto;
	padding-inline: 16px;
	font-family: var(--ewcl-font-body, inherit);
	color: var(--ewcl-color-text);
	background: var(--ewcl-color-bg);
}

.ewcl h2,
.ewcl h3 {
	font-family: var(--ewcl-font-heading, inherit);
}

.ewcl a {
	color: var(--ewcl-color-primary);
}

.ewcl :focus-visible {
	outline: 3px solid var(--ewcl-color-focus);
	outline-offset: 2px;
	box-shadow: var(--ewcl-shadow-focus);
}

.ewcl-button {
	display: inline-block;
	padding: 0.75em 1.5em;
	border: 0;
	border-radius: var(--ewcl-radius-button);
	background: var(--ewcl-color-primary);
	color: var(--ewcl-color-on-primary);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ewcl-button:hover {
	background: var(--ewcl-color-primary-hover);
}

.ewcl-button--secondary {
	background: var(--ewcl-color-secondary);
	color: var(--ewcl-color-on-secondary);
}

.ewcl-button--secondary:hover {
	background: var(--ewcl-color-secondary-hover);
}

.ewcl input,
.ewcl select,
.ewcl textarea {
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-input);
	font: inherit;
}

.ewcl-panel,
.ewcl-placeholder {
	padding: 1.25em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-color-surface);
}

.ewcl-status {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.875em;
	font-weight: 600;
}

.ewcl-status--bookable { background: var(--ewcl-color-success-tint); color: var(--ewcl-color-success); }
.ewcl-status--phone { background: var(--ewcl-color-warning-tint); color: var(--ewcl-color-warning); }
.ewcl-status--full { background: var(--ewcl-color-error-tint); color: var(--ewcl-color-error); }

.ewcl-error {
	color: var(--ewcl-color-error);
	font-weight: 600;
}

/* ---------- Notices ----------
 * One system for every message: a tinted box in the message's tone with a line icon, so
 * "the price changed" and "this coach is full" read as Cruiselink, not as WordPress admin.
 * Tone and icon are variables, so a theme can restyle all of them in one place.
 */
.ewcl {
	--ewcl-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.5v.2'/%3E%3C/svg%3E");
	--ewcl-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17v.2'/%3E%3C/svg%3E");
	--ewcl-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
	--ewcl-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.4 2.8 2.8L16.2 9.6'/%3E%3C/svg%3E");
}

.ewcl-notice,
.ewcl-error-summary {
	--ewcl-tone: var(--ewcl-color-info);
	--ewcl-tone-tint: var(--ewcl-color-info-tint);
	--ewcl-icon: var(--ewcl-icon-info);
	display: grid;
	grid-template-columns: 1.5em minmax(0, 1fr);
	column-gap: 0.85em;
	align-items: start;
	padding: 1em 1.25em;
	border: 1px solid var(--ewcl-tone);
	border: 1px solid color-mix(in srgb, var(--ewcl-tone) 30%, transparent);
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-tone-tint);
	color: var(--ewcl-color-text);
}

.ewcl-notice::before,
.ewcl-error-summary::before {
	content: "";
	grid-row: 1 / span 9;
	width: 1.5em;
	height: 1.5em;
	background: var(--ewcl-tone);
	-webkit-mask: var(--ewcl-icon) center / contain no-repeat;
	mask: var(--ewcl-icon) center / contain no-repeat;
}

.ewcl-notice > *,
.ewcl-error-summary > * {
	grid-column: 2;
}

.ewcl-notice strong {
	color: var(--ewcl-color-text);
}

.ewcl-notice--warning {
	--ewcl-tone: var(--ewcl-color-warning);
	--ewcl-tone-tint: var(--ewcl-color-warning-tint);
	--ewcl-icon: var(--ewcl-icon-warning);
}

.ewcl-notice--error,
.ewcl-error-summary {
	--ewcl-tone: var(--ewcl-color-error);
	--ewcl-tone-tint: var(--ewcl-color-error-tint);
	--ewcl-icon: var(--ewcl-icon-error);
}

.ewcl-notice--success {
	--ewcl-tone: var(--ewcl-color-success);
	--ewcl-tone-tint: var(--ewcl-color-success-tint);
	--ewcl-icon: var(--ewcl-icon-success);
}

.ewcl-help {
	margin-top: var(--ewcl-space-l);
	padding-top: var(--ewcl-space-m);
	border-top: 1px solid var(--ewcl-color-border);
	color: var(--ewcl-color-text-muted);
}

.ewcl-help a {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Search (EW-306) ---------- */

.ewcl-search__fields {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	align-items: start;
}

.ewcl-field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ewcl-field > label,
.ewcl-field > legend {
	font-size: 1em;
	font-weight: 600;
	padding: 0;
}

.ewcl-field select,
.ewcl-field input[type="number"] {
	width: 100%;
	min-height: 44px;
	padding: 0.5em 0.75em;
	background: var(--ewcl-color-bg);
	color: var(--ewcl-color-text);
}

.ewcl-field select:disabled {
	opacity: 0.6;
}

.ewcl-journey label {
	display: flex;
	gap: 0.5em;
	align-items: center;
	min-height: 44px;
	font-weight: 400;
}

/* "Which way?" as a segmented switch where :has() is supported; radios underneath, so
   keyboard (arrow keys) and screen readers behave as a radio group. Plain radios elsewhere. */
@supports selector(:has(*)) {
	.ewcl .ewcl-journey {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.ewcl .ewcl-journey > legend {
		grid-column: 1 / -1;
		margin-bottom: 0.35em;
	}

	/* Room for three readable segments: two columns of the search grid when there are 3+. */
	@media (min-width: 62em) {
		.ewcl .ewcl-search__fields > .ewcl-journey {
			grid-column: span 2;
		}
	}

	.ewcl .ewcl-journey label {
		position: relative;
		justify-content: center;
		min-height: 44px;
		padding: 0.35em 0.5em;
		border: 1px solid var(--ewcl-color-border);
		background: var(--ewcl-color-bg);
		text-align: center;
		line-height: 1.2;
		cursor: pointer;
	}

	.ewcl .ewcl-journey label + label {
		border-left: 0;
	}

	.ewcl .ewcl-journey label:first-of-type {
		border-radius: var(--ewcl-radius-input) 0 0 var(--ewcl-radius-input);
	}

	.ewcl .ewcl-journey label:last-of-type {
		border-radius: 0 var(--ewcl-radius-input) var(--ewcl-radius-input) 0;
	}

	.ewcl .ewcl-journey input[type="radio"] {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}

	.ewcl .ewcl-journey label:has(input:checked) {
		border-color: var(--ewcl-color-primary);
		background: var(--ewcl-color-primary);
		color: var(--ewcl-color-on-primary);
		font-weight: 600;
	}

	.ewcl .ewcl-journey label:has(input:focus-visible) {
		z-index: 1;
		outline: 3px solid var(--ewcl-color-focus);
		outline-offset: 2px;
	}

	.ewcl .ewcl-journey label:hover:not(:has(input:checked)) {
		background: var(--ewcl-color-primary-tint);
	}
}

.ewcl-hint {
	margin: 0;
	color: var(--ewcl-color-text-muted);
	font-size: 0.9375em;
}

.ewcl-stepper {
	display: flex;
	align-items: stretch;
	max-width: 11em;
}

.ewcl-stepper input[type="number"] {
	text-align: center;
	border-radius: 0;
	-moz-appearance: textfield;
}

.ewcl-stepper__btn {
	min-width: 44px;
	border: 1px solid var(--ewcl-color-border);
	background: var(--ewcl-color-surface);
	color: var(--ewcl-color-text);
	font: inherit;
	font-size: 1.25em;
	cursor: pointer;
}

.ewcl-stepper__btn:first-child { border-radius: var(--ewcl-radius-input) 0 0 var(--ewcl-radius-input); }
.ewcl-stepper__btn:last-child { border-radius: 0 var(--ewcl-radius-input) var(--ewcl-radius-input) 0; }
.ewcl-stepper__btn:disabled { opacity: 0.4; cursor: default; }

.ewcl-search__dates {
	margin-top: 1.5em;
}

.ewcl-search.is-loading .ewcl-search__summary {
	color: var(--ewcl-color-text-muted);
}

.ewcl-search__loading {
	margin: 0;
	color: var(--ewcl-color-text-muted);
}

.ewcl-dates {
	margin: 1em 0 0;
	padding: 0;
	border: 0;
}

.ewcl-dates > legend {
	margin-bottom: 0.5em;
	padding: 0;
	font-size: 1em;
	font-weight: 600;
}

.ewcl-month + .ewcl-month {
	margin-top: 1em;
}

.ewcl-month__name {
	margin: 0 0 0.5em;
	font-weight: 600;
}

.ewcl-month__days {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.ewcl-chip {
	position: relative;
	cursor: pointer;
}

.ewcl-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: inherit;
}

.ewcl-chip__face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 4em;
	min-height: 4.25em;
	padding: 0.4em 0.5em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-input);
	background: var(--ewcl-color-bg);
	line-height: 1.2;
}

.ewcl-chip__dow { font-size: 0.875em; }
.ewcl-chip__day { font-size: 1.35em; font-weight: 700; }
.ewcl-chip__tag { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.ewcl-chip:hover .ewcl-chip__face { border-color: var(--ewcl-color-primary); }

.ewcl-chip input:checked + .ewcl-chip__face {
	border-color: var(--ewcl-color-primary);
	background: var(--ewcl-color-primary);
	color: var(--ewcl-color-on-primary);
}

.ewcl-chip input:checked + .ewcl-chip__face .ewcl-chip__dow { color: inherit; }

.ewcl-chip input:focus-visible + .ewcl-chip__face {
	outline: 3px solid var(--ewcl-color-focus);
	outline-offset: 2px;
}

.ewcl-chip.is-phone .ewcl-chip__tag { color: var(--ewcl-color-warning); }
.ewcl-chip.is-phone input:checked + .ewcl-chip__face .ewcl-chip__tag { color: inherit; }

.ewcl-chip.is-full {
	cursor: not-allowed;
}

.ewcl-chip.is-full .ewcl-chip__face {
	background: var(--ewcl-color-surface);
	color: var(--ewcl-color-text-muted);
	text-decoration: line-through;
}

.ewcl-chip.is-full .ewcl-chip__tag {
	color: var(--ewcl-color-error);
	text-decoration: none;
}

.ewcl-search__result {
	margin-top: 1.5em;
}

.ewcl-search__result > * + * {
	margin-top: 0.75em;
}

.ewcl-result__route {
	margin: 0;
	font-family: var(--ewcl-font-heading, inherit);
	font-size: 1.15em;
	font-weight: 700;
}

.ewcl-result__meta { margin: 0; color: var(--ewcl-color-text-muted); }
.ewcl-result__price { margin: 0; }
.ewcl-result__price strong { font-size: 1.5em; margin-right: 0.25em; }

.ewcl-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ewcl [hidden] {
	display: none !important;
}

/* Theme form styles leak in (full-width, fixed-height inputs): reset inside the plugin. */
.ewcl *,
.ewcl *::before,
.ewcl *::after {
	box-sizing: border-box;
}

/* !important only to beat starter-theme rules like `form input { width: 100% !important }`. */
.ewcl input[type="radio"],
.ewcl input[type="checkbox"] {
	flex: none;
	width: 1.25em !important;
	height: 1.25em;
	margin: 0;
	padding: 0;
	accent-color: var(--ewcl-color-primary);
}

.ewcl .ewcl-field select {
	height: auto;
	font-size: 1em;
}

.ewcl .ewcl-stepper input[type="number"] {
	flex: 0 0 4em;
	width: 4em !important;
	height: auto;
	padding: 0.5em;
	font-size: 1em;
	border-left: 0;
	border-right: 0;
}

.ewcl .ewcl-stepper__btn {
	height: auto;
	padding: 0;
	font-size: 1.25em;
	line-height: 1;
}

.ewcl-journey label {
	width: auto;
	font-size: 1em;
}

/* Months side by side when there's room. */
.ewcl-dates:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25em 2em;
}

.ewcl-dates > legend,
.ewcl-dates > p {
	flex: 0 0 100%;
}

.ewcl-month + .ewcl-month {
	margin-top: 0;
}

/* Buttons that are links: keep button colours over `.ewcl a` and theme link styles. */
.ewcl a.ewcl-button,
.ewcl a.ewcl-button:visited,
.ewcl a.ewcl-button:hover {
	color: var(--ewcl-color-on-primary);
	text-decoration: none;
}

.ewcl a.ewcl-button--secondary,
.ewcl a.ewcl-button--secondary:visited,
.ewcl a.ewcl-button--secondary:hover {
	color: var(--ewcl-color-on-secondary);
}

/* ---------- Trip ticket ----------
 * The trip panel is drawn as a coach ticket: the journey on top, a perforated tear with
 * notches, and a stub with the party size and fare. It's the one decorative element of the
 * journey; everything around it stays plain. Side column on wide screens, folded to one line
 * on phones, receipt under the confirmation.
 */

.ewcl-trip {
	position: relative;
	margin: 0;
	padding: 1.25em 1.5em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-color-surface);
}

.ewcl-trip__title {
	margin: 0;
	font-size: 1.125em;
}

.ewcl-trip--receipt .ewcl-trip__title {
	margin-bottom: 0.75em;
}

.ewcl-trip__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	align-items: baseline;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
}

.ewcl-trip__summary::-webkit-details-marker {
	display: none;
}

/* Closed: the one-line summary and "Show". Open: the full ticket and "Hide". */
.ewcl-trip__short {
	flex: 1 1 12em;
	color: var(--ewcl-color-text);
}

.ewcl-trip[open] .ewcl-trip__short,
.ewcl-trip[open] .ewcl-trip__show,
.ewcl-trip:not([open]) .ewcl-trip__hide {
	display: none;
}

.ewcl-trip__toggle {
	margin-left: auto;
	color: var(--ewcl-color-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ewcl-trip[open] > .ewcl-trip__summary {
	margin-bottom: 0.75em;
}

/* The route: stops on a line. Pick-up points are open rings, the terminal a filled stop. */
.ewcl-route {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ewcl-route__stop {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 1.1em 1.75em;
}

.ewcl-route__stop:last-child {
	padding-bottom: 0;
}

/* The line between stops. */
.ewcl-route__stop:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.1em;
	bottom: -0.2em;
	left: calc(0.5em - 1.5px);
	/* design-pass-ignore-next-line side-stripe -- the drawn route between stops, not a card stripe */
	border-left: 3px solid var(--ewcl-color-primary);
}

.ewcl-route__stop::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 1em;
	height: 1em;
	border: 3px solid var(--ewcl-color-primary);
	border-radius: 50%;
	background: var(--ewcl-color-surface);
}

.ewcl-route__stop.is-terminal::before {
	background: var(--ewcl-color-primary);
}

.ewcl-route__name {
	font-weight: 700;
	line-height: 1.35;
}

.ewcl-route__meta {
	font-size: 0.9375em;
}

.ewcl-route__meta.ewcl-hint {
	font-size: 0.875em;
}

/* The tear: a dashed line across the full width, with a notch cut into each edge. */
.ewcl-trip__tear {
	position: relative;
	height: 0;
	margin: 1.5em -1.5em;
	border-top: 2px dashed var(--ewcl-color-text-muted);
	border-top: 2px dashed color-mix(in srgb, var(--ewcl-color-text-muted) 45%, transparent);
}

.ewcl-trip__tear::before,
.ewcl-trip__tear::after {
	content: "";
	position: absolute;
	top: calc(-0.875em - 1px);
	width: 1.75em;
	height: 1.75em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: 50%;
	background: var(--ewcl-color-bg);
}

.ewcl-trip__tear::before {
	left: calc(-0.875em - 1px);
	clip-path: inset(0 0 0 50%);
}

.ewcl-trip__tear::after {
	right: calc(-0.875em - 1px);
	clip-path: inset(0 50% 0 0);
}

.ewcl-trip__stub {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 2em;
	margin: 0;
}

.ewcl-trip__stub > div:last-child {
	text-align: right;
}

.ewcl-trip__stub dt {
	color: var(--ewcl-color-text-muted);
	font-size: 0.875em;
}

.ewcl-trip__stub dd {
	margin: 0;
}

.ewcl-trip__figure {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.ewcl-trip__each {
	color: var(--ewcl-color-text-muted);
	font-size: 0.875em;
}

.ewcl-trip__change {
	margin: 0.5em 0 0;
}

/* Reassurance under the fare, ticked: what the customer can count on before paying. */
.ewcl-trip__assure {
	margin: 1.25em 0 0;
	padding: 1em 0 0;
	border-top: 1px solid var(--ewcl-color-border);
	list-style: none;
}

.ewcl-trip__assure li {
	position: relative;
	margin: 0 0 0.35em;
	padding-left: 1.75em;
	font-size: 0.9375em;
}

.ewcl-trip__assure li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 1.25em;
	height: 1.25em;
	background: var(--ewcl-color-success);
	-webkit-mask: var(--ewcl-icon-success) center / contain no-repeat;
	mask: var(--ewcl-icon-success) center / contain no-repeat;
}

/* Text links that are controls: a full-size tap area without changing how they look. */
.ewcl-trip__change a,
.ewcl-review__head a,
.ewcl-paystep__total a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.ewcl-trip__change {
	margin: 0;
}

/* ---------- Step header: back link, progress, page heading ----------
 * Room above (the frame's own padding), a stepper with connecting lines that reads at a
 * glance, a rule, then the heading with clear space before the step's content.
 */
.ewcl-step,
.ewcl-search {
	padding-block: var(--ewcl-space-l);
}

.ewcl-stephead {
	margin-bottom: var(--ewcl-space-l);
}

.ewcl-back {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-underline-offset: 0.15em;
}

.ewcl-back::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-bottom: 2px solid currentColor;
	/* design-pass-ignore-next-line side-stripe -- two borders rotated into a back chevron */
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}

.ewcl-stephead > .ewcl-back {
	margin-bottom: var(--ewcl-space-s);
}

.ewcl-progress {
	/* Steps share the width equally; the track runs through the stop centres and fills in
	   the brand colour up to the current step, like the route line in the trip ticket. */
	--ewcl-marker: 2.5em;
	--ewcl-track: color-mix(in srgb, var(--ewcl-color-text-muted) 30%, transparent);
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--ewcl-steps, 4), minmax(0, 1fr));
	margin: 0 0 var(--ewcl-space-m);
	padding: 0 0 var(--ewcl-space-m);
	border-bottom: 1px solid var(--ewcl-color-border);
	list-style: none;
	color: var(--ewcl-color-text-muted);
}

.ewcl-progress::before,
.ewcl-progress::after {
	content: "";
	position: absolute;
	top: calc(var(--ewcl-marker) / 2 - 2px);
	left: calc(50% / var(--ewcl-steps, 4));
	height: 4px;
	border-radius: 2px;
}

.ewcl-progress::before {
	right: calc(50% / var(--ewcl-steps, 4));
	background: var(--ewcl-color-border);
	background: var(--ewcl-track);
}

.ewcl-progress::after {
	width: calc((100% - 100% / var(--ewcl-steps, 4)) * (var(--ewcl-step, 1) - 1) / (var(--ewcl-steps, 4) - 1));
	background: var(--ewcl-color-primary);
}

.ewcl-progress__step {
	position: relative;
	z-index: 1;
	margin: 0;
	min-width: 0;
	text-align: center;
}

.ewcl-progress__step,
.ewcl-progress__link {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	align-items: center;
}

.ewcl-progress__link {
	color: inherit;
	text-decoration: none;
}

.ewcl-progress__link:hover .ewcl-progress__label,
.ewcl-progress__link:focus-visible .ewcl-progress__label {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ewcl-progress__marker {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--ewcl-marker);
	height: var(--ewcl-marker);
	border: 2px solid var(--ewcl-color-border);
	border: 2px solid var(--ewcl-track);
	border-radius: 50%;
	background: var(--ewcl-color-bg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ewcl-progress__label {
	font-size: 0.9375em;
	line-height: 1.3;
	text-wrap: balance;
}

/* Phones get one-word labels ("Details", not "Your details") so each fits on one line at a
   readable size; the other is display:none, so screen readers hear one. */
.ewcl-progress__short {
	display: none;
}

/* Current: filled, with a halo. Done: filled, with a tick. */
.ewcl-progress__step.is-current,
.ewcl-progress__step.is-done {
	color: var(--ewcl-color-text);
}

.ewcl-progress__step.is-current .ewcl-progress__label {
	font-weight: 700;
}

.ewcl-progress__step.is-current .ewcl-progress__marker,
.ewcl-progress__step.is-done .ewcl-progress__marker {
	border-color: var(--ewcl-color-primary);
	background: var(--ewcl-color-primary);
	color: var(--ewcl-color-on-primary);
}

.ewcl-progress__step.is-current .ewcl-progress__marker {
	box-shadow: 0 0 0 5px var(--ewcl-color-primary-tint);
}

/* Icons (Settings > Branding > Step markers), and the tick on finished steps. */
.ewcl-progress {
	--ewcl-icon-step-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='13' rx='2.5'/%3E%3Cpath d='M3.5 11h17M7.5 17v2.5M16.5 17v2.5M7.5 14h.01M16.5 14h.01M9 7.5h6'/%3E%3C/svg%3E");
	--ewcl-icon-step-details: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.75'/%3E%3Cpath d='M4.75 20a7.25 7.25 0 0 1 14.5 0'/%3E%3C/svg%3E");
	--ewcl-icon-step-review: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='m8.75 12.25 2.25 2.25 4.25-4.5'/%3E%3C/svg%3E");
	--ewcl-icon-step-payment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.75' y='5.5' width='18.5' height='13' rx='2'/%3E%3Cpath d='M2.75 10h18.5M6.5 15h4'/%3E%3C/svg%3E");
	--ewcl-icon-step-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.25 4.25L18.5 8'/%3E%3C/svg%3E");
}

.ewcl-progress__marker::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62%;
	height: 62%;
	background: currentColor;
	-webkit-mask: var(--ewcl-marker-icon, none) center / contain no-repeat;
	mask: var(--ewcl-marker-icon, none) center / contain no-repeat;
}

.ewcl-progress--icons [data-step="search"] { --ewcl-marker-icon: var(--ewcl-icon-step-search); }
.ewcl-progress--icons [data-step="details"] { --ewcl-marker-icon: var(--ewcl-icon-step-details); }
.ewcl-progress--icons [data-step="review"] { --ewcl-marker-icon: var(--ewcl-icon-step-review); }
.ewcl-progress--icons [data-step="payment"] { --ewcl-marker-icon: var(--ewcl-icon-step-payment); }

.ewcl-progress .ewcl-progress__step.is-done {
	--ewcl-marker-icon: var(--ewcl-icon-step-done);
}

/* An icon or a tick replaces the number (screen readers have the ordered list). */
.ewcl-progress--icons .ewcl-progress__num,
.ewcl-progress__step.is-done .ewcl-progress__num {
	visibility: hidden;
}

.ewcl-progress--numbers .ewcl-progress__step:not(.is-done) .ewcl-progress__marker::before {
	display: none;
}

@media (max-width: 40em) {
	.ewcl-progress {
		--ewcl-marker: 2.25em;
	}

	.ewcl-progress__label {
		font-size: 0.875em;
		white-space: nowrap;
	}

	.ewcl-progress__full {
		display: none;
	}

	.ewcl-progress__short {
		display: inline;
	}
}

.ewcl-stephead__title {
	margin: 0;
	font-family: var(--ewcl-font-heading, inherit);
	font-size: 2em;
	line-height: 1.15;
	text-wrap: balance;
}

@media (max-width: 40em) {
	.ewcl-step,
	.ewcl-search {
		padding-block: var(--ewcl-space-m);
	}

	.ewcl-stephead {
		margin-bottom: var(--ewcl-space-m);
	}

	.ewcl-stephead__title {
		font-size: 1.625em;
	}
}

/* ---------- Step actions: Continue, and Back beside it ---------- */
.ewcl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ewcl-space-s) var(--ewcl-space-m);
	align-items: center;
	margin-top: var(--ewcl-space-l);
}

@media (max-width: 40em) {
	.ewcl-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ewcl-actions__back {
		align-self: center;
	}
}

.ewcl-trip__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35em 1.5em;
	margin: 1em 0;
}

.ewcl-trip__list dt {
	font-weight: 600;
}

.ewcl-trip__list dd {
	margin: 0;
}


.ewcl .ewcl-notice {
	margin-bottom: 1.5em;
}

.ewcl .ewcl-notice p {
	margin: 0;
}

/* ---------- Step 2: details (EW-402) ---------- */


.ewcl-heading {
	margin: var(--ewcl-space-l) 0 var(--ewcl-space-xs);
	font-family: var(--ewcl-font-heading, inherit);
	font-size: 1.35em;
}

.ewcl-grid {
	display: grid;
	gap: 1.25em;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
	margin-top: var(--ewcl-space-s);
}

.ewcl-details .ewcl-field input[type="text"],
.ewcl-details .ewcl-field input[type="email"],
.ewcl-details .ewcl-field input[type="tel"],
.ewcl-details textarea,
.ewcl-details select {
	width: 100%;
	min-height: 44px;
	height: auto;
	padding: 0.5em 0.75em;
	background: var(--ewcl-color-bg);
	color: var(--ewcl-color-text);
	font-size: 1em;
}

.ewcl-details .ewcl-field input:disabled {
	opacity: 0.5;
}

.ewcl-details [aria-invalid="true"] {
	border: 2px solid var(--ewcl-color-error);
}

.ewcl-details fieldset[aria-invalid="true"] {
	border: 0;
	border-left: 4px solid var(--ewcl-color-error);
	padding-left: 1em;
}

.ewcl-error {
	margin: 0;
}

.ewcl-error-summary {
	margin-bottom: 2em;
}

.ewcl-error-summary h2 {
	margin: 0 0 0.5em;
	font-size: 1.2em;
}

.ewcl-error-summary ul {
	margin: 0;
	padding-left: 1.2em;
}

.ewcl-error-summary a {
	color: var(--ewcl-color-error);
	font-weight: 600;
}

.ewcl-error-summary:focus {
	outline: 3px solid var(--ewcl-color-focus);
}

.ewcl-passenger {
	margin: var(--ewcl-space-m) 0 0;
	padding: 1.25em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-color-surface);
}

.ewcl-passenger > legend {
	padding: 0 0.5em;
	font-weight: 700;
	font-size: 1.1em;
}

.ewcl-check {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	min-height: 44px;
	padding-block: 0.6em;
	font-size: 1em;
	font-weight: 400 !important;
	cursor: pointer;
}

.ewcl-check input {
	margin-top: 0.15em !important;
}

.ewcl-copy-lead {
	margin-bottom: 0.5em;
}

.ewcl-extras {
	margin: 1.25em 0 0;
	padding: 0;
	border: 0;
}

.ewcl-extras > legend {
	font-weight: 600;
	padding: 0;
}

.ewcl-extras--booking {
	margin-top: 2em;
	padding: 1.25em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-card);
}

.ewcl-extras--booking > legend {
	padding: 0 0.5em;
	font-size: 1.1em;
	font-weight: 700;
}

.ewcl-extras__options {
	display: grid;
	gap: 0.5em;
	margin-top: 0.5em;
}

.ewcl-qty {
	display: flex;
	gap: 0.75em;
	align-items: center;
	font-weight: 400 !important;
}

.ewcl .ewcl-qty select {
	width: 4.5em !important;
	min-height: 40px;
	height: auto;
	padding: 0.25em 0.5em;
}

.ewcl-note {
	display: grid;
	gap: 0.25em;
	margin: 0.35em 0 0 2em;
	font-weight: 400 !important;
}

.ewcl-note input {
	min-height: 40px;
	padding: 0.4em 0.6em;
}

.ewcl-optional {
	color: var(--ewcl-color-text-muted);
	font-weight: 400;
}

.ewcl-extra__price {
	color: var(--ewcl-color-text-muted);
	white-space: nowrap;
}

.ewcl-terms {
	margin: 2em 0 1em;
}

.ewcl-input--short select,
.ewcl-input--short input {
	max-width: 12em;
}

.ewcl .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Themes often style every <form> (border, padding, background). The plugin's forms take
   their look from Settings > Branding only. */
.ewcl form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	max-width: none;
}

.ewcl .ewcl-details {
	max-width: 52em;
}

.ewcl .ewcl-search__form {
	padding: 1.5em;
	border: 1px solid var(--ewcl-color-border);
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-color-bg);
	overflow: clip;
}

/* The result is the search panel's footer: a full-width band under a rule, not a card in a
   card. Same surface as the trip ticket it turns into on the next step. */
.ewcl .ewcl-search__form .ewcl-search__result {
	margin: 1.5em -1.5em -1.5em;
	padding: 1.5em;
	border: 0;
	border-top: 1px solid var(--ewcl-color-border);
	border-radius: 0;
	background: var(--ewcl-color-surface);
}

/* ---------- Step 3: review (EW-405) ---------- */


.ewcl-review__section {
	padding: var(--ewcl-space-m) 0;
	border-bottom: 1px solid var(--ewcl-color-border);
}

.ewcl-review__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: baseline;
	justify-content: space-between;
}

.ewcl-review__section h2 {
	margin: 0 0 var(--ewcl-space-xs);
	font-size: 1.25em;
}

.ewcl-review__section:first-of-type {
	padding-top: 0;
}

.ewcl-review__section .ewcl-trip__list {
	margin: 0;
}

.ewcl-review__pax {
	margin: 0;
	padding-left: 1.25em;
}

.ewcl-review__pax > li + li {
	margin-top: 0.75em;
}

.ewcl-review__meta {
	display: block;
	color: var(--ewcl-color-text-muted);
}

.ewcl-review__extras {
	margin: 0.35em 0 0;
	padding-left: 1.25em;
	list-style: disc;
}

.ewcl-review__special {
	margin: 0.75em 0 0;
	white-space: normal;
}

.ewcl-price {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ewcl-price th,
.ewcl-price td {
	padding: 0.5em 0;
	color: var(--ewcl-color-text);
	border: 0;
	border-bottom: 1px solid var(--ewcl-color-border);
	background: none;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.ewcl-price th {
	white-space: normal;
	overflow-wrap: anywhere;
}

.ewcl-price td {
	padding-left: 1em;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ewcl-price tfoot th,
.ewcl-price tfoot td {
	border-bottom: 0;
	font-size: 1.2em;
	font-weight: 700;
}

.ewcl-review__form {
	margin-top: 0;
}

.ewcl .ewcl-notice ul {
	margin: 0.5em 0;
}

.ewcl .ewcl-notice p + p {
	margin-top: 0.5em;
}

/* ---------- Step 4: pay (EW-503), step 5: confirmation ---------- */


.ewcl-paystep__total {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: baseline;
	font-size: 1.15em;
}

.ewcl-paystep__total a {
	font-size: 0.87em;
}

.ewcl-pay__element {
	min-height: 12em;
	margin: 1.5em 0 1em;
}

.ewcl-pay #ewcl-pay-error:not([hidden]) {
	margin-bottom: 1em;
}

.ewcl-pay__secure {
	margin: 0.5em 0 0;
}

.ewcl-paystep__assure {
	margin: 1em 0 0;
	padding-left: 1.25em;
}

.ewcl-paystep__assure li + li {
	margin-top: 0.35em;
}

.ewcl-confirm__panel {
	padding: 1.5em;
	border-radius: var(--ewcl-radius-card);
	background: var(--ewcl-color-success-tint);
	color: var(--ewcl-color-success);
	text-align: center;
}

.ewcl-confirm__panel .ewcl-stephead__title {
	margin: 0 0 0.35em;
	color: inherit;
}

.ewcl-confirm--waiting .ewcl-stephead__title {
	margin-bottom: 0.5em;
}

.ewcl-confirm > p {
	margin: 1em 0 0;
}

.ewcl-confirm__ref {
	font-size: 1.5em;
	letter-spacing: 0.05em;
}

/* ---------- Step layout ----------
 * Every step shares one frame, the same outer width as the search panel: one column up to
 * --ewcl-content-width on phones and tablets; on wide screens the step in a main column and
 * the trip ticket in a side column. Widths are variables for themes to tune.
 */
.ewcl-step__body {
	display: grid;
	gap: 1.5em;
}

.ewcl-step__main,
.ewcl-step__aside {
	min-width: 0;
	max-width: var(--ewcl-content-width, 46em);
}

.ewcl-step__main > :first-child,
.ewcl-step__main .ewcl-details > .ewcl-heading:first-of-type,
.ewcl-step__main .ewcl-paystep > :first-child {
	margin-top: 0;
}

/* Side-by-side fields: hints go under the box so the boxes in a row line up. */
.ewcl-grid .ewcl-field > .ewcl-hint {
	order: 1;
}

@media (min-width: 62em) {
	.ewcl-step__body {
		grid-template-columns: minmax(0, 1fr) var(--ewcl-aside-width, 21em);
		gap: 2.5em 3em;
		align-items: start;
	}

	.ewcl-step__main {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
	}

	.ewcl-step__aside {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}
}

/* Confirmation: one centred column, the ticket as the receipt below. */
.ewcl-step--confirmation .ewcl-step__body {
	max-width: var(--ewcl-narrow-width, 40em);
	margin-inline: auto;
}

/* Review details list on narrow screens or with large text: label over value. */
@media (max-width: 24em) {
	.ewcl-review .ewcl-trip__list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ewcl-review .ewcl-trip__list dd {
		margin-bottom: 0.5em;
	}
}

/* ---------- Buttons ---------- */
.ewcl-button {
	min-height: 48px;
}

/* Phones: the step's main action spans the width, easy to reach with a thumb. */
@media (max-width: 40em) {
	.ewcl-step__main .ewcl-button,
	.ewcl-search__result .ewcl-button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ---------- Confirmation moment ----------
 * The one animation in the journey: the tick draws itself once when the booking is
 * confirmed. Still for people who prefer reduced motion.
 */
.ewcl-confirm__mark {
	display: block;
	width: 3.5em;
	height: 3.5em;
	margin: 0 auto 0.75em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ewcl-confirm__mark circle {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: ewcl-draw 0.6s ease-out forwards;
}

.ewcl-confirm__mark path {
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: ewcl-draw 0.35s ease-out 0.5s forwards;
}

@keyframes ewcl-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ewcl-confirm__mark circle,
	.ewcl-confirm__mark path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

.ewcl-trip--receipt {
	margin-top: 1.5em;
}

/* ---------- Passengers, one at a time (step 2, two or more passengers) ----------
 * The script folds each passenger to a header: status marker, name, one-line summary and
 * Change. One is open at a time; without JavaScript all stay open with their legends.
 */
.ewcl-button--outline {
	border: 2px solid var(--ewcl-color-primary);
	background: var(--ewcl-color-bg);
	color: var(--ewcl-color-primary);
}

.ewcl-button--outline:hover {
	background: var(--ewcl-color-primary-tint);
}

.ewcl-passengers__count {
	margin-top: 0.25em;
}

.ewcl-passenger.is-enhanced > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.ewcl-passenger.is-enhanced {
	padding-block: 1em;
	background: var(--ewcl-color-bg);
}

.ewcl-passenger.is-enhanced[data-state="open"] {
	padding-block: 1.25em 1.5em;
	border-color: var(--ewcl-color-primary);
	background: var(--ewcl-color-surface);
}

.ewcl-passenger.is-enhanced[data-state="error"] {
	border-color: var(--ewcl-color-error);
}

.ewcl-passenger.is-collapsed .ewcl-passenger__body {
	display: none;
}

.ewcl-passenger__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0 0.85em;
	align-items: center;
}

.ewcl-passenger[data-state="open"] .ewcl-passenger__head {
	margin-bottom: var(--ewcl-space-s);
}

.ewcl-passenger__marker {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.25em;
	height: 2.25em;
	border: 2px solid var(--ewcl-color-border);
	border-radius: 50%;
	background: var(--ewcl-color-bg);
	color: var(--ewcl-color-text-muted);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ewcl-passenger[data-state="open"] .ewcl-passenger__marker {
	border-color: var(--ewcl-color-primary);
	background: var(--ewcl-color-primary);
	color: var(--ewcl-color-on-primary);
}

/* Done: a tick. Needs attention: the warning icon. The number makes way for both. */
.ewcl-passenger[data-state="done"] .ewcl-passenger__marker,
.ewcl-passenger[data-state="error"] .ewcl-passenger__marker {
	color: transparent;
}

.ewcl-passenger[data-state="done"] .ewcl-passenger__marker {
	border-color: var(--ewcl-color-primary);
	background: var(--ewcl-color-primary);
}

.ewcl-passenger[data-state="error"] .ewcl-passenger__marker {
	border-color: var(--ewcl-color-error);
	background: var(--ewcl-color-error-tint);
}

.ewcl-passenger[data-state="done"] .ewcl-passenger__marker::before,
.ewcl-passenger[data-state="error"] .ewcl-passenger__marker::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 60%;
	height: 60%;
	background: var(--ewcl-color-on-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.25 4.25L18.5 8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.25 4.25L18.5 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ewcl-passenger[data-state="error"] .ewcl-passenger__marker::before {
	background: var(--ewcl-color-error);
	-webkit-mask-image: var(--ewcl-icon-warning);
	mask-image: var(--ewcl-icon-warning);
}

.ewcl-passenger__title {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ewcl-passenger__name {
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.ewcl-passenger__sub,
.ewcl-passenger__line {
	color: var(--ewcl-color-text-muted);
	font-size: 0.9375em;
}

.ewcl-passenger__sub:empty,
.ewcl-passenger__line:empty {
	display: none;
}

.ewcl-passenger[data-state="error"] .ewcl-passenger__line {
	color: var(--ewcl-color-error);
	font-weight: 600;
}

.ewcl-passenger__toggle {
	min-height: 44px;
	padding: 0 0.25em;
	border: 0;
	background: none;
	color: var(--ewcl-color-primary);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.ewcl-passenger__actions {
	margin-top: var(--ewcl-space-m);
}

.ewcl-passenger + .ewcl-passenger.is-enhanced {
	margin-top: var(--ewcl-space-s);
}

/* Phones: Change goes under the name so the name gets the width. */
@media (max-width: 40em) {
	.ewcl-passenger.is-enhanced {
		padding-inline: 1em;
	}

	.ewcl-passenger__head {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.ewcl-passenger__toggle {
		grid-column: 2;
		justify-self: start;
		padding: 0;
	}
}