/**
 * VEJ Charter Quote — front-end styles.
 *
 * Mobile-first. Fields stack on phones, share rows on tablets, and collapse
 * into a single horizontal bar once the column is wide enough for one.
 *
 * Every colour is a custom property. The plugin writes the configured brand
 * values onto :root as an inline block, and the fallbacks below keep the form
 * looking right even if that block is missing.
 *
 * Two rules shape everything else here:
 *
 * 1. Every field is the same block. Airport, date, time and passengers all
 *    render as one white card of identical height with the label pinned to
 *    the top, so a row of them lines up without any per-field fiddling.
 *
 * 2. Controls are reset before they are styled. Themes ship resets such as
 *    `input[type="number"] { padding: 8px 16px }` and `button { color: … }`
 *    that outrank a single class, and on the client's own theme they were
 *    making the passenger stepper taller than its neighbours and painting
 *    the CTA text in the theme's link colour. Every control rule is therefore
 *    scoped as `.vejq .vejq-thing`, which beats any element-based reset
 *    without resorting to !important.
 */

/* Sampled from the Vegas Express Jet logo: a pure black wordmark with a
   #C60C0D red accent. White on that red is 5.89:1 and passes AA; the same red
   on black is only 3.40:1, so anything sitting on the dark bar uses the
   lighter --vejq-accent tint (6.9:1 on black) instead. */

:root {
	--vejq-bg: #000000;
	--vejq-cta-start: #e01417;
	--vejq-cta-end: #c60c0d;
	--vejq-cta-text: #ffffff;
	--vejq-accent: #ff5c5c;
	--vejq-field-bg: #ffffff;
	--vejq-text: #000000;
}

.vejq {
	--vejq-muted: #5f6b7a;
	--vejq-border: #d9dee4;
	--vejq-border-hover: #aeb8c3;
	--vejq-error: #c0392b;
	--vejq-focus: #2f6fdb;
	--vejq-focus-ring: rgba(47, 111, 219, 0.28);
	--vejq-radius: 8px;
	--vejq-radius-sm: 6px;
	--vejq-gap: 10px;
	--vejq-touch: 44px;
	--vejq-field-h: 60px;
	--vejq-field-x: 14px;
	--vejq-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 24px -14px rgba(0, 0, 0, 0.5);
	--vejq-cta-shadow: 0 8px 20px -8px rgba(198, 12, 13, 0.7);

	background: var(--vejq-bg);
	box-sizing: border-box;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	padding: 16px;
	text-align: left;
	-webkit-font-smoothing: antialiased;

	/* The breakpoints below are container queries, not media queries. What
	   decides whether the bar fits is the width of the column the form is
	   dropped into — a 1280px viewport can still hand this block only 645px of
	   theme content width, and a viewport query would lay out a bar that then
	   overflows. Where container queries are unsupported the form simply stays
	   in its stacked layout, which is fully usable. */
	container-type: inline-size;
}

.vejq *,
.vejq *::before,
.vejq *::after {
	box-sizing: inherit;
}

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   author `display` rule beats it. Several elements here are flex or grid AND
   toggled with `hidden` — the return date, the remove button, the contact
   panel — so the attribute has to be made authoritative. */

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

/* Control reset ---------------------------------------------------------- */

/* Strip whatever the theme put on form controls before any of it is styled.
   `font: inherit` clears family, size, weight and line-height in one go;
   the components below then set the ones they care about. Focus outlines are
   deliberately not touched here. */

.vejq .vejq-input,
.vejq .vejq-textarea,
.vejq .vejq-native-select,
.vejq .vejq-select__button,
.vejq .vejq-stepper__btn,
.vejq .vejq-stepper__input,
.vejq .vejq-swap,
.vejq .vejq-button,
.vejq .vejq-addleg,
.vejq .vejq-leg__remove,
.vejq .vejq-estimate__edit {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	height: auto;
	letter-spacing: normal;
	margin: 0;
	max-width: none;
	min-height: 0;
	padding: 0;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	transition: none;
	vertical-align: middle;
	width: auto;
}

/* Native date inputs keep their appearance: removing it on iOS collapses the
   value area to nothing. Buttons and selects lose theirs. */

.vejq .vejq-native-select,
.vejq .vejq-select__button,
.vejq .vejq-stepper__btn,
.vejq .vejq-swap,
.vejq .vejq-button,
.vejq .vejq-addleg,
.vejq .vejq-leg__remove,
.vejq .vejq-estimate__edit {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

/* Layout ----------------------------------------------------------------- */

.vejq-main,
.vejq-legs,
.vejq-leg__fields,
.vejq-route {
	display: flex;
	flex-direction: column;
	gap: var(--vejq-gap);

	/* Flex items default to min-width:auto, which refuses to shrink below the
	   intrinsic width of their content. On a row of eight fields that is the
	   difference between a bar that fits and one that runs off the page. */
	min-width: 0;
}

.vejq-route {
	position: relative;
}

.vejq-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vejq-leg {
	display: block;
	min-width: 0;
}

.vejq-leg + .vejq-leg {
	margin-top: 18px;
}

.vejq-leg__title {
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.vejq-actions {
	min-width: 0;
}

/* The wrapper around the return-time select exists only so the markup can
   hide both return fields with one attribute. In a row it would be a plain
   block sitting between the flex items, so it steps out of the way and lets
   the field inside it take its place in the row. */

.vejq-leg__fields > div[data-vejq-return]:not(.vejq-field) {
	display: contents;
}

/* Labels ----------------------------------------------------------------- */

.vejq-label {
	color: var(--vejq-muted);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 12px;
	margin: 0;
	text-transform: uppercase;
}

.vejq-required {
	color: var(--vejq-error);
	margin-left: 1px;
}

/* Field cards ------------------------------------------------------------ */

/* One white card for every field type. The label sits in the top-left, the
   control fills the rest, and a fixed minimum height means a row of mixed
   fields lines up to the pixel.

   The padding lives on the children rather than on the card, so the whole
   card responds to a tap: the label focuses the input through its `for`, and
   the control's own box covers the rest. Padding on the card would leave a
   dead border that looks tappable but is not. */

.vejq-field--airport,
.vejq-field--date,
.vejq-field--pax,
.vejq-field--select {
	background: var(--vejq-field-bg);
	border: 1px solid var(--vejq-border);
	border-radius: var(--vejq-radius);
	box-shadow: var(--vejq-card-shadow);
	min-height: var(--vejq-field-h);
	padding: 0;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.vejq-field--airport:hover,
.vejq-field--date:hover,
.vejq-field--pax:hover,
.vejq-field--select:hover {
	border-color: var(--vejq-border-hover);
}

/* The card carries the focus ring, so the ring wraps the label too and the
   inner control can drop its own outline without losing the indicator. */

.vejq-field--airport:focus-within,
.vejq-field--date:focus-within,
.vejq-field--pax:focus-within,
.vejq-field--select:focus-within {
	border-color: var(--vejq-focus);
	box-shadow: 0 0 0 3px var(--vejq-focus-ring);
}

.vejq-field.has-error,
.vejq-field.has-error:hover {
	border-color: var(--vejq-error);
}

.vejq-field.has-error:focus-within {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25);
}

.vejq-field--airport .vejq-label,
.vejq-field--date .vejq-label,
.vejq-field--pax .vejq-label,
.vejq-field--select .vejq-label {
	cursor: text;
	padding: 9px var(--vejq-field-x) 0;
}

/* The control area: whatever is left of the card below the label. */

.vejq-field--airport .vejq-combobox,
.vejq-field--select .vejq-select,
.vejq-field--pax .vejq-stepper {
	display: flex;
	flex: 1 1 auto;
	min-height: 32px;
}

.vejq .vejq-field--airport .vejq-input,
.vejq .vejq-field--date .vejq-input,
.vejq .vejq-field--select .vejq-select__button {
	color: var(--vejq-text);
	flex: 1 1 auto;
	font-size: 16px; /* 16px stops iOS Safari zooming on focus. */
	font-weight: 600;
	line-height: 24px;
	min-height: 32px;
	min-width: 0;
	padding: 0 var(--vejq-field-x) 7px;
	width: 100%;
}

.vejq .vejq-field--airport .vejq-input:focus,
.vejq .vejq-field--date .vejq-input:focus,
.vejq .vejq-field--select .vejq-select__button:focus,
.vejq .vejq-field--pax .vejq-stepper__input:focus {
	outline: none;
}

.vejq .vejq-input::placeholder {
	color: var(--vejq-muted);
	font-weight: 500;
	opacity: 1;
}

.vejq-field--airport .vejq-error,
.vejq-field--date .vejq-error {
	margin: -3px 0 0;
	padding: 0 var(--vejq-field-x) 9px;
}

/* Standalone inputs (the contact step) --------------------------------- */

.vejq .vejq-input,
.vejq .vejq-textarea,
.vejq .vejq-native-select {
	background: var(--vejq-field-bg);
	border: 1px solid var(--vejq-border);
	border-radius: var(--vejq-radius);
	color: var(--vejq-text);
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	min-height: 48px;
	padding: 11px var(--vejq-field-x);
	width: 100%;
}

.vejq .vejq-input:focus-visible,
.vejq .vejq-textarea:focus-visible,
.vejq .vejq-native-select:focus-visible,
.vejq .vejq-swap:focus-visible,
.vejq .vejq-stepper__btn:focus-visible,
.vejq .vejq-button:focus-visible,
.vejq .vejq-addleg:focus-visible,
.vejq .vejq-leg__remove:focus-visible,
.vejq .vejq-estimate__edit:focus-visible,
.vejq .vejq-consent input:focus-visible,
.vejq .vejq-radio input:focus-visible {
	outline: 2px solid var(--vejq-focus);
	outline-offset: 2px;
}

.vejq .vejq-field--airport .vejq-input,
.vejq .vejq-field--date .vejq-input {
	background: none;
	border: 0;
	border-radius: 0;
	display: block;
}

.vejq-combobox {
	position: relative;
}

/* Select-only combobox --------------------------------------------------- */

.vejq-select {
	position: relative;
}

.vejq .vejq-select__button {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	text-align: left;
}

.vejq-select__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vejq-select__caret {
	color: var(--vejq-muted);
	flex: 0 0 auto;
	height: 8px;
	transition: transform 120ms ease;
	width: 12px;
}

.vejq .vejq-select__button[aria-expanded="true"] .vejq-select__caret {
	transform: rotate(180deg);
}

/* Swap button ------------------------------------------------------------ */

/* Sits astride the gap between From and To. Stacked, it points up and down
   and nests between the two cards; in a row it turns sideways and straddles
   the gutter, reading as one control that belongs to both fields. */

.vejq .vejq-swap {
	align-items: center;
	align-self: center;
	background: var(--vejq-field-bg);
	border: 1px solid var(--vejq-border);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	color: var(--vejq-text);
	display: flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	margin: -13px auto;
	position: relative;
	transform: rotate(90deg); /* Arrows point up/down while fields stack. */
	transition: background-color 120ms ease, border-color 120ms ease;
	width: 40px;
	z-index: 2;
}

.vejq .vejq-swap:hover {
	background: #f3f5f7;
	border-color: var(--vejq-border-hover);
}

.vejq .vejq-swap:active {
	background: #e9edf1;
}

.vejq-swap svg {
	height: 20px;
	width: 20px;
}

/* Passenger stepper ------------------------------------------------------ */

.vejq-field--pax .vejq-stepper {
	align-items: center;
	gap: 2px;
	padding: 0 8px 6px;
}

.vejq .vejq-stepper__btn {
	align-items: center;
	background: #f1f4f8;
	border-radius: 50%;
	color: var(--vejq-text);
	display: flex;
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 500;
	height: 30px;
	justify-content: center;
	line-height: 1;
	transition: background-color 120ms ease;
	width: 30px;
}

.vejq .vejq-stepper__btn:hover {
	background: #e3e8ee;
}

.vejq .vejq-stepper__btn:active {
	background: #d6dde5;
}

.vejq .vejq-stepper__input {
	-moz-appearance: textfield;
	appearance: textfield;
	color: var(--vejq-text);
	flex: 1 1 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	min-width: 0;
	text-align: center;
	width: 100%;
}

.vejq .vejq-stepper__input::-webkit-outer-spin-button,
.vejq .vejq-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Leg controls ----------------------------------------------------------- */

.vejq .vejq-leg__remove {
	align-items: center;
	align-self: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	transition: background-color 120ms ease, border-color 120ms ease;
	width: 32px;
}

.vejq .vejq-leg__remove:hover {
	background: var(--vejq-error);
	border-color: var(--vejq-error);
}

.vejq-leg__remove svg {
	height: 14px;
	width: 14px;
}

.vejq-legs-controls {
	margin-top: 12px;
}

.vejq .vejq-addleg {
	align-items: center;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	border-radius: var(--vejq-radius);
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	min-height: var(--vejq-touch);
	padding: 0 18px 0 14px;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.vejq .vejq-addleg:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
}

.vejq .vejq-addleg[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
}

.vejq-addleg__icon {
	align-items: center;
	background: var(--vejq-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	line-height: 1;
	width: 22px;
}

/* Buttons ---------------------------------------------------------------- */

.vejq .vejq-button {
	align-items: center;
	background: linear-gradient(135deg, var(--vejq-cta-start), var(--vejq-cta-end));
	border-radius: var(--vejq-radius);
	box-shadow: var(--vejq-cta-shadow);
	color: var(--vejq-cta-text);
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	min-height: 52px;
	padding: 0 26px;
	text-align: center;
	text-transform: uppercase;
	transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
	white-space: nowrap;
	width: 100%;
}

.vejq .vejq-button:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.vejq .vejq-button:active {
	filter: brightness(0.97);
	transform: translateY(0);
}

.vejq .vejq-button[disabled] {
	box-shadow: none;
	cursor: wait;
	filter: none;
	opacity: 0.7;
	transform: none;
}

/* Contact step ----------------------------------------------------------- */

.vejq-contact {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 20px;
	padding-top: 20px;
}

.vejq-contact__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 14px;
}

.vejq-contact__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.vejq-contact .vejq-label {
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 6px;
}

.vejq .vejq-textarea {
	min-height: 96px;
	resize: vertical;
}

.vejq .vejq-native-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--vejq-muted) 50%), linear-gradient(135deg, var(--vejq-muted) 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 38px;
}

.vejq-fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.vejq-radios {
	display: flex;
	gap: 8px;
}

.vejq-radio {
	align-items: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--vejq-radius);
	cursor: pointer;
	display: inline-flex;
	flex: 1 1 0;
	gap: 8px;
	min-height: 48px;
	padding: 8px 14px;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.vejq-radio:hover {
	border-color: rgba(255, 255, 255, 0.45);
}

.vejq-radio:has(input:checked) {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.7);
}

.vejq-radio input {
	accent-color: var(--vejq-cta-end);
	flex: 0 0 auto;
	height: 18px;
	margin: 0;
	width: 18px;
}

.vejq-hint {
	color: rgba(255, 255, 255, 0.65);
	font-size: 12px;
	line-height: 1.4;
	margin: 6px 0 0;
}

.vejq-consent {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 10px;
	line-height: 1.45;
	padding: 4px 0;
}

.vejq-consent input {
	accent-color: var(--vejq-cta-end);
	flex: 0 0 auto;
	height: 20px;
	margin: 1px 0 0;
	width: 20px;
}

.vejq-consent a {
	color: var(--vejq-accent);
}

.vejq-field--consent {
	margin-top: 14px;
}

/* Cloudflare renders a fixed-size iframe here, so this only needs to give it
   room and stop it stretching the flex row it sits above. */

.vejq-turnstile {
	margin-top: 16px;
	min-height: 65px;
}

.vejq-submit {
	margin-top: 16px;
}

.vejq-reassurance {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1.4;
	margin: 10px 0 0;
	text-align: center;
}

.vejq-result {
	border-radius: var(--vejq-radius);
	font-size: 15px;
	line-height: 1.5;
	margin-top: 14px;
	padding: 14px 16px;
}

.vejq-result[hidden] {
	display: none;
}

.vejq-result:focus-visible {
	outline: 2px solid var(--vejq-focus);
	outline-offset: 2px;
}

.vejq-result--success {
	background: rgba(255, 255, 255, 0.08);
	border-left: 4px solid var(--vejq-accent);
}

.vejq-result--error {
	background: rgba(255, 92, 92, 0.12);
	border-left: 4px solid var(--vejq-accent);
	color: #ffd9d3;
}

.vejq-result a {
	color: var(--vejq-accent);
}

/* Once the request is in, the fields have nothing left to say. */

.vejq.is-submitted .vejq-main,
.vejq.is-submitted .vejq-legs-controls,
.vejq.is-submitted .vejq-contact {
	display: none;
}

/* Estimate panel --------------------------------------------------------- */

/* Filled in by the script once the server has priced the trip. A white card
   like the fields, with the heading as a band in the CTA gradient — the
   reference site's gold band, in this brand's red. Table rules are scoped
   `.vejq .vejq-estimate__table …` for the reason given under "Control reset":
   theme resets on th and td are just as common. */

.vejq-estimate {
	background: var(--vejq-field-bg);
	border-radius: var(--vejq-radius);
	box-shadow: var(--vejq-card-shadow);
	color: var(--vejq-text);
	margin-top: 14px;
	overflow: hidden; /* Clips the band to the card's rounded corners. */
}

.vejq .vejq-estimate__title {
	background: linear-gradient(135deg, var(--vejq-cta-start), var(--vejq-cta-end));
	color: var(--vejq-cta-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	margin: 0;
	padding: 14px 16px;
	text-align: center;
	text-transform: uppercase;
}

.vejq .vejq-estimate__note {
	color: var(--vejq-muted);
	font-size: 14px;
	line-height: 1.5;
	padding: 14px 16px 4px;
}

.vejq .vejq-estimate__note p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 6px;
}

.vejq .vejq-estimate__note strong {
	color: var(--vejq-text);
}

/* Sideways scrolling is the last resort: a price range wraps at its dash
   first, and on a phone the passenger and time columns are already folded
   into the category cell (below). */

.vejq-estimate__scroll {
	overflow-x: auto;
	padding: 6px 6px 0;
	-webkit-overflow-scrolling: touch;
}

.vejq .vejq-estimate__table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	width: 100%;
}

.vejq .vejq-estimate__table th,
.vejq .vejq-estimate__table td {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--vejq-border);
	color: var(--vejq-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	padding: 12px 10px;
	text-align: left;
	vertical-align: top;
}

.vejq .vejq-estimate__table thead th {
	color: var(--vejq-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px 8px;
	text-transform: uppercase;
	vertical-align: bottom;
}

.vejq .vejq-estimate__table tbody th {
	font-weight: 600;
}

.vejq .vejq-estimate__table tbody tr:last-child th,
.vejq .vejq-estimate__table tbody tr:last-child td {
	border-bottom: 0;
}

.vejq .vejq-estimate__table .vejq-estimate__cell--total,
.vejq .vejq-estimate__table .vejq-estimate__cell--total_rt {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Phones: passengers and time become a line under the category name, leaving
   two columns (three for a one-way, with its return price) that fit without
   scrolling. */

.vejq .vejq-estimate__table .vejq-estimate__cell--pax,
.vejq .vejq-estimate__table .vejq-estimate__cell--time {
	display: none;
}

.vejq-estimate__name {
	display: block;
}

.vejq .vejq-estimate__meta {
	color: var(--vejq-muted);
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 3px;
}

.vejq-estimate__meta-item {
	white-space: nowrap;
}

/* The customer's preferred size: a tint and a bar, so it survives a glance
   and a greyscale print alike. */

.vejq .vejq-estimate__table tr.is-preferred th,
.vejq .vejq-estimate__table tr.is-preferred td {
	background: rgba(198, 12, 13, 0.06);
	background: color-mix(in srgb, var(--vejq-cta-end) 7%, transparent);
}

.vejq .vejq-estimate__table tr.is-preferred th:first-child {
	box-shadow: inset 3px 0 0 var(--vejq-cta-end);
}

.vejq .vejq-estimate__key {
	color: var(--vejq-muted);
	font-size: 12px;
	line-height: 1.4;
	margin: 0;
	padding: 10px 16px 0;
}

.vejq-estimate__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}

.vejq .vejq-estimate__edit {
	align-items: center;
	color: var(--vejq-text);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	min-height: var(--vejq-touch);
	padding: 0 14px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 120ms ease;
}

.vejq .vejq-estimate__edit:hover {
	text-decoration-color: currentColor;
}

/* Once the call is booked the button is inert, not busy. */

.vejq .vejq-estimate__cta.is-sent[disabled] {
	cursor: default;
}

.vejq .vejq-estimate__status {
	color: var(--vejq-muted);
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	padding: 0 16px 14px;
}

.vejq .vejq-estimate__status:empty {
	padding: 0;
}

.vejq .vejq-estimate__status.is-error {
	color: var(--vejq-error);
}

@container (min-width: 640px) {
	.vejq .vejq-estimate__table .vejq-estimate__cell--pax,
	.vejq .vejq-estimate__table .vejq-estimate__cell--time {
		display: table-cell;
		text-align: right;
		white-space: nowrap;
	}

	.vejq .vejq-estimate__meta {
		display: none;
	}

	.vejq-estimate__actions {
		align-items: center;
		flex-direction: row;
		gap: 8px;
	}

	.vejq .vejq-estimate__actions .vejq-button {
		width: auto;
	}
}

/* Honeypot: off-screen rather than display:none, which the cheaper bots skip. */

.vejq-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* Errors and status ------------------------------------------------------ */

/* Field errors sit inside the white card, so they need a dark red — #c0392b
   on white is 5.4:1, past the 4.5:1 AA threshold. The --on-dark modifier is
   for errors placed directly on the bar. */

.vejq-error {
	color: var(--vejq-error);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	margin: 4px 0 0;
	min-height: 0;
}

.vejq-error--on-dark {
	color: #ffb4a8;
}

.vejq-error:empty {
	display: none;
}

.vejq-noscript {
	background: var(--vejq-field-bg);
	border-radius: var(--vejq-radius);
	color: var(--vejq-text);
	margin: 0;
	padding: 12px 14px;
}

.vejq-notice {
	background: #fff8e1;
	border-left: 4px solid var(--vejq-cta-end);
	color: var(--vejq-text);
	margin: 0;
	padding: 12px 14px;
}

.vejq-sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Listbox ---------------------------------------------------------------- */

/* Every token here carries a fallback because an open list is lifted out of
   the form to <body> (see .vejq-listbox--floating), where the values set on
   .vejq are out of reach. */

.vejq-listbox {
	background: #fff;
	border: 1px solid var(--vejq-border, #d9dee4);
	border-radius: var(--vejq-radius, 8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
	color: var(--vejq-text, #000000);
	font-size: 16px;
	left: 0;
	line-height: 1.4;
	list-style: none;
	margin: 6px 0 0;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 0;
	position: absolute;
	right: 0;
	text-align: left;
	top: 100%;
	z-index: 100;
	-webkit-overflow-scrolling: touch;
}

.vejq-listbox *,
.vejq-listbox *::before,
.vejq-listbox *::after {
	box-sizing: border-box;
}

.vejq-listbox[hidden] {
	display: none;
}

/* While open, the script moves the list to <body> and pins it under its
   field, so an ancestor with overflow: hidden — an Elementor section, a
   block group — cannot cut it off. Position comes from the script. */

.vejq-listbox--floating {
	margin: 4px 0 0;
	position: fixed;
	right: auto;
	z-index: 99999;
}

.vejq-listbox--select {
	min-width: 100%;
	width: max-content;
}

.vejq-option {
	color: var(--vejq-text, #000000);
	cursor: pointer;
	display: block;
	line-height: 1.35;
	margin: 0;
	min-height: var(--vejq-touch, 44px);
	padding: 9px 14px;
}

.vejq-option--plain {
	align-items: center;
	display: flex;
	font-size: 15px;
	min-height: 40px;
}

.vejq-option:hover,
.vejq-option.is-active {
	background: #f1f4f8;
}

.vejq-option.is-active {
	box-shadow: inset 3px 0 0 var(--vejq-cta-end, #c60c0d);
}

.vejq-option[aria-selected="true"].vejq-option--plain {
	font-weight: 700;
}

.vejq-option__primary {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.vejq-option__secondary {
	color: var(--vejq-muted, #5f6b7a);
	display: block;
	font-size: 12.5px;
}

/* Tablet width: the route takes a row of its own, the rest share one. ---- */

@container (min-width: 640px) {
	.vejq-field--trip-type {
		max-width: 220px;
	}

	.vejq-route {
		align-items: flex-start;
		flex: 1 1 100%;
		flex-direction: row;
	}

	.vejq-route .vejq-field {
		flex: 1 1 0;
	}

	.vejq .vejq-swap {
		/* Straddle the gutter between the two fields so it reads as one
		   control spanning both, as it does on the reference bar. */
		margin: 10px -15px 0;
		transform: none;
	}

	.vejq-leg__fields {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Bases rather than fixed widths: on a row of three they grow to share
	   it, and the passenger stepper is capped so that when it wraps alone it
	   does not stretch across the whole bar. */
	.vejq-field--date {
		flex: 1 1 160px;
	}

	.vejq-field--time {
		flex: 1 1 120px;
	}

	.vejq-field--pax {
		flex: 1 1 140px;
		max-width: 260px;
	}

	.vejq-contact__grid {
		gap: 12px 14px;
		grid-template-columns: repeat(2, 1fr);
	}

	.vejq-field--full {
		grid-column: 1 / -1;
	}

	.vejq-submit {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.vejq-submit .vejq-button {
		align-self: flex-end;
		width: auto;
	}
}

/* Wide container: One Way and Round Trip collapse into a single bar. ----- */

/* One Way needs six slots and fits from 1100px. Round Trip carries two more
   fields and is held back to 1360px: forcing it into a bar any earlier wraps
   the trip type and the button onto a second line, which looks broken rather
   than responsive. */

@container (min-width: 1100px) {
	.vejq--one_way .vejq-main {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.vejq--one_way .vejq-legs {
		flex: 1 1 auto;
	}

	.vejq--one_way .vejq-field--trip-type {
		flex: 0 0 150px;
		max-width: none;
	}

	.vejq--one_way .vejq-leg__fields {
		flex-wrap: nowrap;
	}

	.vejq--one_way .vejq-route {
		flex: 1 1 360px;
	}

	.vejq--one_way .vejq-field--date {
		flex: 0 1 165px;
	}

	.vejq--one_way .vejq-field--time {
		flex: 0 1 130px;
	}

	.vejq--one_way .vejq-field--pax {
		flex: 0 1 150px;
	}

	.vejq--one_way .vejq-actions {
		flex: 0 0 auto;
	}

	.vejq--one_way .vejq-button {
		min-height: var(--vejq-field-h);
		width: auto;
	}

	/* Multi Leg keeps the trip type on its own row and stacks the legs. */
	.vejq--multi_leg .vejq-field--trip-type {
		align-self: flex-start;
		max-width: 220px;
	}

	.vejq--multi_leg .vejq-leg__fields {
		flex-wrap: nowrap;
	}

	.vejq--multi_leg .vejq-route {
		flex: 1 1 360px;
	}

	.vejq--multi_leg .vejq-field--date {
		flex: 0 1 165px;
	}

	.vejq--multi_leg .vejq-field--time {
		flex: 0 1 130px;
	}

	.vejq--multi_leg .vejq-field--pax {
		flex: 0 1 150px;
	}

	.vejq-contact__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@container (min-width: 1360px) {
	.vejq--round_trip .vejq-main {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.vejq--round_trip .vejq-legs {
		flex: 1 1 auto;
	}

	.vejq--round_trip .vejq-field--trip-type {
		flex: 0 0 150px;
		max-width: none;
	}

	.vejq--round_trip .vejq-leg__fields {
		flex-wrap: nowrap;
	}

	.vejq--round_trip .vejq-route {
		flex: 1 1 340px;
	}

	.vejq--round_trip .vejq-field--date {
		flex: 0 1 165px;
	}

	.vejq--round_trip .vejq-field--time {
		flex: 0 1 130px;
	}

	.vejq--round_trip .vejq-field--pax {
		flex: 0 1 150px;
		max-width: none;
	}

	.vejq--round_trip .vejq-actions {
		flex: 0 0 auto;
	}

	.vejq--round_trip .vejq-button {
		min-height: var(--vejq-field-h);
		width: auto;
	}
}

/* The stacked layout never becomes a bar. */

.vejq--stacked .vejq-main {
	align-items: stretch;
	flex-direction: column !important;
}

/*
 * The wide-container rules above hand each field a flex-basis so the bar can
 * share its width between them. Forced back into a column, that basis is read
 * as a height instead, which stretched the trip type card to 150px on any
 * stacked form in a column wider than 1100px. Sizing goes back to the content.
 */

.vejq--stacked .vejq-main > * {
	flex: 0 0 auto;
}

.vejq--stacked .vejq-field--trip-type {
	max-width: 220px;
}

/* Full form layout -------------------------------------------------------- */

/*
 * The bar is a dark strip meant to sit over a hero image. The full form is a
 * standalone light card on an ordinary page, so it re-colours the shell rather
 * than inheriting it. Everything inside a field card already renders dark on
 * white, so only the chrome around the cards needs restating.
 */

.vejq--panel {
	--vejq-panel-head: #c8a464;
	--vejq-panel-ink: #1d2733;
	--vejq-panel-line: #e6e9ed;

	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 40px -28px rgba(0, 0, 0, 0.55);
	color: var(--vejq-panel-ink);
	overflow: hidden;
	padding: 0;
}

.vejq--panel .vejq-panel__head {
	background: var(--vejq-panel-head);
	padding: 18px 24px;
	text-align: center;
}

.vejq--panel .vejq-panel__title {
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin: 0;
}

.vejq--panel .vejq-main,
.vejq--panel .vejq-contact {
	padding: 20px 24px 24px;
}

/*
 * Grid rather than the bar's flex row: the wide-container rules hand each
 * field a flex-basis so the bar can divide its width, which is meaningless
 * once the fields wrap into labelled sections.
 */

.vejq--panel .vejq-main {
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.vejq--panel .vejq-section__title {
	border-bottom: 1px solid var(--vejq-panel-line);
	color: var(--vejq-panel-ink);
	font-size: 15px;
	font-weight: 600;
	grid-column: 1 / -1;
	margin: 4px 0 2px;
	padding-bottom: 8px;
}

.vejq--panel .vejq-legs,
.vejq--panel .vejq-legs-controls {
	grid-column: 1 / -1;
}

.vejq--panel .vejq-contact {
	border-top: 1px solid var(--vejq-panel-line);
	margin-top: 0;
}

.vejq--panel .vejq-contact__title {
	color: var(--vejq-panel-ink);
	font-size: 15px;
	font-weight: 600;
}

/* Text living outside a field card, which would otherwise still be white. */

.vejq--panel .vejq-contact .vejq-label,
.vejq--panel .vejq-hint,
.vejq--panel .vejq-check,
.vejq--panel .vejq-radio,
.vejq--panel .vejq-consent,
.vejq--panel .vejq-reassurance,
.vejq--panel .vejq-submit__aside,
.vejq--panel .vejq-fieldset .vejq-label {
	color: var(--vejq-panel-ink);
}

.vejq--panel .vejq-hint,
.vejq--panel .vejq-reassurance,
.vejq--panel .vejq-submit__aside {
	color: var(--vejq-muted);
}

.vejq--panel .vejq-error--on-dark {
	color: var(--vejq-error);
}

/*
 * In the bar, the contact step is a plain stack of labelled inputs on a dark
 * background. In the full form it sits among the trip fields, so it takes the
 * same card treatment — label inside the box, input unstyled within it — or
 * the two halves of one form would look like two different forms.
 *
 * Checkbox rows and the yes/no fieldsets are excluded: they are not data entry
 * boxes and a border around them reads as a disabled input.
 */

.vejq--panel .vejq-contact .vejq-field:not(.vejq-field--inline):not(.vejq-fieldset):not(.vejq-field--consent) {
	background: #fff;
	border: 1px solid var(--vejq-border);
	border-radius: var(--vejq-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--vejq-field-h);
	padding: 8px var(--vejq-field-x);
}

.vejq--panel .vejq-contact .vejq-field:has(textarea) {
	justify-content: flex-start;
}

.vejq--panel .vejq-contact .vejq-field:not(.vejq-field--inline):not(.vejq-fieldset):not(.vejq-field--consent) .vejq-label {
	color: var(--vejq-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 2px;
	text-transform: uppercase;
}

.vejq--panel .vejq-contact .vejq-field .vejq-input {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 15px;
	min-height: 0;
	padding: 0;
}

.vejq--panel .vejq-contact .vejq-field .vejq-native-select {
	background-position: calc(100% - 5px) 50%, calc(100% - 0px) 50%;
	padding-right: 20px;
}

.vejq--panel .vejq-contact .vejq-textarea {
	min-height: 72px;
}

.vejq--panel .vejq-contact .vejq-hint,
.vejq--panel .vejq-contact .vejq-error {
	font-size: 12px;
	margin: 2px 0 0;
}

/* A preference checkbox is not a data entry box, so it gets no card. */

.vejq--panel .vejq-field--check {
	background: none;
	border: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	min-height: var(--vejq-field-h);
	padding: 0;
}

.vejq--panel .vejq-field--check .vejq-label {
	color: var(--vejq-muted);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vejq--panel .vejq-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 8px;
}

.vejq--panel .vejq-field--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.vejq--panel .vejq-hint--consultant {
	margin: 0;
}

/*
 * The 640px container rule stacks this column with the button pinned right.
 * The full form has room to put the phone number opposite the button instead,
 * so the direction is restored to a row.
 */

.vejq--panel .vejq-submit {
	align-items: center;
	border-top: 1px solid var(--vejq-panel-line);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 18px;
	padding-top: 18px;
}

.vejq--panel .vejq-submit__aside {
	margin: 0;
}

.vejq--panel .vejq-reassurance {
	flex-basis: 100%;
	margin: 0;
}

/* Country-flag phone field ------------------------------------------------ */

/*
 * intl-tel-input wraps the input in its own markup, so the wrapper has to take
 * over the box the bare input used to fill. Everything here is scoped to .vejq
 * so the library's own styling is untouched anywhere else on the site.
 */

.vejq .iti {
	display: block;
	width: 100%;
}

/*
 * The input keeps its own box. The country button is absolutely positioned
 * over it and the library reserves room with a left padding, so the flag sits
 * inside the field rather than beside it. Stripping the box here would work
 * for the full form — where the card draws it — but would leave the phone the
 * only field on the dark bar without a white box behind it.
 */

.vejq .iti__tel-input {
	width: 100%;
}

/*
 * The country button is chrome, not a control, so it loses its own box. It
 * has to be laid out explicitly: the dial code is a block-level sibling of
 * the flag inside the button, so without this it drops onto a second line
 * and pushes itself outside the field.
 */

/*
 * The colour is set rather than inherited. This is a <button>, so a theme that
 * colours buttons — Hello Elementor paints them its link pink — bleeds into
 * the dial code and it stops matching the number beside it.
 */

.vejq .iti__selected-country {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--vejq-text, #111);
	display: flex;
	gap: 4px;
	height: 100%;
	padding: 0 6px 0 0;
}

.vejq .iti__selected-country-primary {
	align-items: center;
	background: none;
	border: 0;
	display: flex;
	height: auto;
	padding: 0;
}

.vejq .iti__selected-dial-code {
	color: inherit;
	display: inline;
	font: inherit;
	white-space: nowrap;
}

.vejq .iti__arrow {
	border-top-color: var(--vejq-muted);
	margin-left: 2px;
}

.vejq .iti__selected-country:hover,
.vejq .iti__selected-country:focus-visible {
	background: rgba(0, 0, 0, 0.04);
	border-radius: var(--vejq-radius-sm);
}

/*
 * The dropdown carries its own light palette. It is a floating panel rather
 * than part of the field, so it stays light even on the dark bar, where
 * inheriting white-on-white would make it unreadable.
 */

.vejq .iti__dropdown-content {
	background: #fff;
	border: 1px solid var(--vejq-border);
	border-radius: var(--vejq-radius);
	box-shadow: var(--vejq-card-shadow);
	color: #111;
	font-size: 15px;
}

.vejq .iti__search-input {
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--vejq-border);
	color: #111;
	font: inherit;
	padding: 10px 12px;
	width: 100%;
}

.vejq .iti__country {
	padding: 8px 12px;
}

.vejq .iti__country-name {
	color: #111;
}

.vejq .iti__dial-code {
	color: var(--vejq-muted);
}

.vejq .iti__country.iti__highlight,
.vejq .iti__country[aria-selected="true"] {
	background: rgba(0, 0, 0, 0.06);
}

/*
 * The country list has to clear the field cards, which sit above the map and
 * the estimate panel. Below the airport listbox, which the script lifts to
 * <body> and which must stay on top of everything.
 */

.vejq .iti__dropdown-content {
	z-index: 90;
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vejq .vejq-swap,
	.vejq .vejq-button,
	.vejq .vejq-stepper__btn,
	.vejq .vejq-addleg,
	.vejq .vejq-leg__remove,
	.vejq .vejq-estimate__edit,
	.vejq-field--airport,
	.vejq-field--date,
	.vejq-field--pax,
	.vejq-field--select,
	.vejq-select__caret,
	.vejq-radio {
		transition: none;
	}

	.vejq .vejq-button:hover {
		transform: none;
	}
}

/* Forced colours: keep the highlight perceivable without relying on colour. */

@media (forced-colors: active) {
	.vejq-option.is-active {
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	/* Shadows are dropped, so the card gets an edge and the preferred row's
	   accent bar becomes a border. The row rules are already 1px borders,
	   which forced colours keep visible on their own. */
	.vejq-estimate {
		border: 1px solid CanvasText;
	}

	.vejq .vejq-estimate__table tr.is-preferred th:first-child {
		border-left: 3px solid Highlight;
	}
}

/* Route map --------------------------------------------------------------- */

/* Two themes. Light is the default: it reads as a familiar road map and
   separates cleanly from the dark bar above it, where the dark theme merged
   into it and looked like a flat silhouette. Every colour is a token so a
   child theme can retune either one. */

.vejq-map {
	margin: 16px 0 0;
}

.vejq-map[hidden] {
	display: none;
}

.vejq-map--light {
	--map-water: #e6edf5;
	--map-land: #fbfcfd;
	--map-coast: #c3ceda;
	--map-border: #a9b7c6;
	--map-state: #d4dce5;
	--map-label: #14202c;
	--map-halo: #ffffff;
	--map-frame: rgba(255, 255, 255, 0.18);
}

.vejq-map--dark {
	--map-water: #0b0f14;
	--map-land: #1b2129;
	--map-coast: #2b3540;
	--map-border: #3b4854;
	--map-state: #2b3540;
	--map-label: #ffffff;
	--map-halo: #0b0f14;
	--map-frame: rgba(255, 255, 255, 0.12);
}

.vejq-map__canvas {
	/* A wide, shallow frame suits a route far better than a square: almost
	   every charter leg is longer east-west than north-south. */
	aspect-ratio: 5 / 2;
	background: var(--map-water);
	border: 1px solid var(--map-frame);
	border-radius: var(--vejq-radius);
	max-height: 420px;
	overflow: hidden;
	width: 100%;
}

.vejq-map__svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* Strokes use non-scaling-stroke throughout so line weights stay constant on
   screen however far the viewBox is zoomed. Without it, coastlines vanish on a
   transatlantic route and turn into slabs on a short hop. */

.vejq-map__land {
	fill: var(--map-land);
	stroke: var(--map-coast);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.vejq-map__borders {
	fill: none;
	stroke: var(--map-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.vejq-map__states {
	fill: none;
	stroke: var(--map-state);
	stroke-width: 0.75;
	vector-effect: non-scaling-stroke;
}

.vejq-map__arc {
	fill: none;
	stroke: var(--vejq-cta-end);
	stroke-linecap: round;
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.vejq-map__dot {
	fill: var(--vejq-cta-end);
	stroke: var(--map-halo);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.vejq-map__code {
	fill: var(--map-label);
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	/* paint-order draws the halo behind the glyph rather than through it, so
	   a code stays readable wherever it lands on the map. */
	paint-order: stroke;
	stroke: var(--map-halo);
	stroke-linejoin: round;
	stroke-width: 4;
	text-anchor: middle;
	vector-effect: non-scaling-stroke;
}

.vejq-map__caption {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	margin: 8px 0 0;
	text-align: center;
}

/* Google Maps takes over the same container when it is the selected provider.
   Its own controls and tiles supply the background, so the built-in frame
   colours would only show through at the corners during load. */

.vejq-map__canvas--google {
	background: var(--map-water);
}

.vejq-map__canvas--google .gm-style {
	border-radius: var(--vejq-radius);
}