/* African Tourist booking widget
   Styling is scoped under .atb so Divi cannot leak in or out. The tokens sit on
   :root instead, because the cart, the checkout and any later booking plugin
   need to draw from the same set. A custom property styles nothing on its own,
   so publishing them here changes nothing on its own either. */

:root {
	--atb-ink: #0a0a0a;
	--atb-ink-hover: #262626;
	--atb-card: #ffffff;
	--atb-tab-bg: #f2f2f2;
	--atb-field-bg: #f4f4f4;
	--atb-field-hover: #ececec;
	--atb-field-focus: #ffffff;
	--atb-sel-bg: #f7f7f7;
	--atb-muted: #9a9a9a;
	--atb-body: #4a4a4a;
	--atb-line: #e4e4e4;
	--atb-rule: #b8b8b8;

	/* The one accent, used only for money coming off the fare. */
	--atb-credit: #007a5c;

	/* Field captions. Dark enough on the grey field to clear AA at 12px. */
	--atb-label: #00674f;

	--atb-radius-card: 24px;
	--atb-radius: 17px;
	--atb-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
	--atb-font: 'Poppins', Arial, Helvetica, sans-serif;
}

.atb {
	width: 100%;
	font-family: var(--atb-font);
	color: var(--atb-ink);
}

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

/* A class selector beats the browser's own [hidden] rule, so grid and flex
   elements ignore the attribute unless we force it. */
.atb [hidden] {
	display: none !important;
}

.atb__card {
	width: min(100%, 560px);
	margin: 0 auto;
	padding: 34px 32px 30px;
	overflow: hidden;
	background: var(--atb-card);
	border-radius: var(--atb-radius-card);
	box-shadow: var(--atb-shadow);
}

/* 19px at 500, matching the published spec. This was 750 with negative
   tracking, left over from the first build, which is why a widget written to
   the spec sat next to it looking like a different product. */
.atb__title {
	margin: 0 0 24px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--atb-ink);
}

/* Tabs */
.atb__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	margin: 0 0 20px;
	padding: 4px;
	background: var(--atb-tab-bg);
	border-radius: 999px;
}

.atb__tab {
	min-width: 0;
	padding: 11px 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #64646b;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	transition: background-color .2s ease, color .2s ease;
}

.atb__tab:hover {
	color: var(--atb-ink);
}

.atb__tab.is-active {
	background: var(--atb-ink);
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 5px 14px rgba(0,0,0,.16);
}

/* Trip type */
.atb__trip-wrap {
	margin: 0 0 10px;
}

.atb__trip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.atb__trip-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 46px;
	padding: 12px 8px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: var(--atb-field-bg);
	color: #6b6b6b;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.atb__trip-btn svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb__trip-btn:hover {
	background: var(--atb-field-hover);
	color: var(--atb-ink);
}

.atb__trip-btn.is-active {
	border-color: var(--atb-ink);
	background: var(--atb-ink);
	color: #ffffff;
	font-weight: 700;
}

/* Fields */
.atb__stack {
	display: grid;
	gap: 10px;
}

.atb__row {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 10px;
	margin: 0 0 10px;
}

.atb__field {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 62px;
	margin: 0 0 10px;
	padding: 11px 15px;
	background: var(--atb-field-bg);
	border: 1px solid transparent;
	border-radius: var(--atb-radius);
	cursor: text;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/* The whole box is the label, so clicking anywhere in it reaches the control. */
.atb__field--select,
.atb__field:has(input[type="date"]),
.atb__field:has(input[type="time"]) {
	cursor: pointer;
}

.atb__row .atb__field {
	margin: 0;
}

.atb__field:hover {
	background: var(--atb-field-hover);
}

.atb__field:focus-within {
	background: var(--atb-field-focus);
	border-color: var(--atb-ink);
	box-shadow: 0 0 0 4px rgba(0,0,0,.07);
}

/* Selects are the same height as every other field. They used to be shorter,
   which made a row of mixed controls look accidental. The caption is pinned to
   the top because the control below it is taken out of flow. */
.atb__field--select {
	align-items: flex-start;
	min-height: 62px;
}

/* The control is stretched across the whole box so a click anywhere opens it,
   the way the date and time pickers already work. Its background stays
   transparent, so the caption underneath still shows through.

   Scoped through .atb to outrank the shared `.atb__control select` reset, which
   sits further down the file and would otherwise flatten the padding here. */
.atb .atb__field--select select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	/* Clears the caption above and the icon to its left. */
	padding: 27px 15px 0 43px;
	background-position: right 15px center;
	border-radius: var(--atb-radius);
	cursor: pointer;
	z-index: 1;
}

/* A textarea grows downwards, so its caption belongs at the top rather than
   centred against the middle of the box. */
.atb__field--area {
	align-items: flex-start;
	min-height: 52px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.atb__field--return {
	border-color: var(--atb-ink);
	background: var(--atb-field-focus);
}

.atb__icon {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #a2a2a8;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb__icon--filled {
	stroke: var(--atb-ink);
}

/* The pickup and destination pair, joined by a line the way a route reads on
   a map: an open ring where you start, a solid square where you end. */
.atb__route {
	position: relative;
}

.atb__dot {
	/* 9px mark inside an 18px slot, so it occupies exactly the width the icon
	   used to and nothing else in the row shifts. */
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: 0 4.5px;
	border: 2px solid #a2a2a8;
	border-radius: 50%;
	box-sizing: border-box;
}

.atb__dot--end {
	border: 0;
	border-radius: 2px;
	background: var(--atb-ink);
}

/* Two segments meeting in the 10px gap between the fields. Drawn this way so
   neither field needs to know how tall the other one has grown. */
.atb__field--place::after {
	content: "";
	position: absolute;
	left: 24px;
	width: 2px;
	margin-left: -1px;
	background: var(--atb-line);
}

/* The route slots swap between an airport list and a search box, so the
   connector keys off whichever two are visible rather than off child order. */
.atb__field--place::after,
.atb__field--airport::after {
	content: "";
	position: absolute;
	left: 24px;
	width: 2px;
	margin-left: -1px;
	background: var(--atb-line);
}

.atb__route > .atb__field:not([hidden]):first-of-type::after,
.atb__route > .atb__field:not([hidden])::after {
	top: calc(50% + 9px);
	bottom: -10px;
}

/* The lower of the two visible fields draws upward to meet the one above. */
.atb__route > .atb__field:not([hidden]) ~ .atb__field:not([hidden])::after {
	top: -10px;
	bottom: calc(50% + 9px);
}

/* Chauffeur has a pickup and nothing to join it to. */
.atb__route:has(.atb__field--place[data-slot="destination-place"][hidden]):has(.atb__field--airport[data-slot="destination"][hidden]) .atb__field::after {
	display: none;
}

/* The airport list is a select, so its caption sits at the top. The dot has to
   stay vertically centred anyway, because the connector line is drawn from the
   middle of the field and would otherwise run straight through the marker. */
.atb__field--airport {
	align-items: flex-start;
}

.atb__field--select .atb__dot {
	align-self: center;
}

/* The field shows the place name. This is the full address underneath it, so
   the customer can see which branch or which airport they actually picked. */
.atb__resolved {
	display: none;
	margin: 3px 0 0;
	color: var(--atb-muted);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.atb__resolved.is-on {
	display: block;
}

/* Suggestion list. Sits above the field below it while open. */
.atb__field--place.is-searching {
	z-index: 5;
}

.atb__ac {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	display: none;
	margin-top: 6px;
	padding: 6px 0;
	background: var(--atb-card);
	border: 1px solid var(--atb-line);
	border-radius: var(--atb-radius);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
	overflow: hidden;
	cursor: default;
}

.atb__ac.is-open {
	display: block;
}

.atb__ac-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 9px 15px;
	cursor: pointer;
}

.atb__ac-item.is-active {
	background: var(--atb-sel-bg);
}

.atb__ac-mark {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	fill: none;
	stroke: #a2a2a8;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb__ac-text {
	min-width: 0;
}

.atb__ac-name {
	display: block;
	color: var(--atb-ink);
	font-size: 13.5px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.atb__ac-name b {
	font-weight: 600;
}

.atb__ac-addr {
	display: block;
	margin-top: 1px;
	color: var(--atb-muted);
	font-size: 11.5px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.atb__control {
	/* Grows to fill the box whether or not the field has an icon, so no part
	   of the field is dead space. */
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 10px;
}

.atb__label {
	display: block;
	margin: 0 0 2px;
	color: var(--atb-label);
	font-size: 12px;
	line-height: 1.2;
	font-weight: 400;
}

.atb__control input,
.atb__control select,
.atb__control textarea {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--atb-ink);
	font: inherit;
	font-size: 15.5px;
	line-height: 1.3;
	box-shadow: none;
	border-radius: 0;
}

.atb__control input::placeholder,
.atb__control textarea::placeholder {
	color: #b5b5bb;
	opacity: 1;
}

.atb__control input[type="date"],
.atb__control input[type="time"] {
	min-height: 22px;
}

/* The native picker button is stretched to cover the whole field, so a click
   anywhere in the box opens the picker instead of hitting a dead zone. It is
   invisible because the field already shows our own icon. */
.atb__control input[type="date"]::-webkit-calendar-picker-indicator,
.atb__control input[type="time"]::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.atb__control select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px;
}

.atb .atb__control textarea {
	display: block;
	width: 100%;
	resize: vertical;
	min-height: 42px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
	line-height: 1.5;
}

/* Chauffeur packages */
.atb__packages {
	margin: 0 0 10px;
}

.atb__label--block {
	margin: 0 0 8px 2px;
}

.atb__package-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.atb__package {
	position: relative;
	display: grid;
	gap: 3px;
	align-content: center;
	min-height: 71px;
	padding: 12px 8px;
	border: 1px solid transparent;
	border-radius: var(--atb-radius);
	background: var(--atb-field-bg);
	cursor: pointer;
	text-align: center;
	transition: border-color .2s ease, background-color .2s ease;
}

.atb__package:hover {
	background: var(--atb-field-hover);
}

.atb__package input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.atb__package.is-active {
	border-color: var(--atb-ink);
	background: var(--atb-ink);
}

.atb__package-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--atb-ink);
}

.atb__package-meta {
	font-size: 10px;
	line-height: 1.2;
	color: var(--atb-muted);
}

.atb__package.is-active .atb__package-name,
.atb__package.is-active .atb__package-meta {
	color: #ffffff;
}

/* Extras */
.atb__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 2px 0 12px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: var(--atb-radius);
	background: var(--atb-field-bg);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--atb-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.atb__more:hover {
	background: var(--atb-field-hover);
}

/* Open, the row joins the panel below it into one block. */
.atb__more[aria-expanded="true"] {
	margin-bottom: 0;
	border-radius: var(--atb-radius) var(--atb-radius) 0 0;
}

.atb__more-label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.atb__more-icon,
.atb__more-chevron {
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb__more-icon {
	width: 17px;
	height: 17px;
	stroke-width: 1.7;
}

.atb__more-chevron {
	width: 16px;
	height: 16px;
	stroke-width: 2;
	transition: transform .2s ease;
}

.atb__more[aria-expanded="true"] .atb__more-chevron {
	transform: rotate(180deg);
}

.atb__extras {
	padding: 4px 16px 16px;
	margin: 0 0 12px;
	background: var(--atb-field-bg);
	border-radius: 0 0 var(--atb-radius) var(--atb-radius);
}

/* Inside the panel the fields need to lift off the panel's own fill. */
.atb__extras .atb__field {
	background: #ffffff;
}

.atb__extras .atb__field:hover {
	background: #ffffff;
	border-color: var(--atb-rule);
}

.atb__extras .atb__field {
	border-radius: 14px;
}

/* Tick boxes are full boxes, so the whole thing is the target. */
.atb__check-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}

.atb__check {
	position: relative;
	flex: 1 1 calc(50% - 5px);
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	min-width: 140px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: #ffffff;
	font-size: 12.5px;
	line-height: 1.3;
	color: #6b6b6b;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.atb__check:hover {
	border-color: var(--atb-rule);
	color: var(--atb-ink);
}

.atb__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.atb__check-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border: 1.5px solid #c4c4c4;
	border-radius: 5px;
	background: #ffffff;
	transition: background-color .15s ease, border-color .15s ease;
}

.atb__check-box svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity .15s ease;
}

.atb__check.is-checked,
.atb__check:has( input:checked ) {
	border-color: var(--atb-ink);
	background: var(--atb-ink);
	color: #ffffff;
	font-weight: 600;
}

.atb__check.is-checked .atb__check-box,
.atb__check:has( input:checked ) .atb__check-box {
	border-color: #ffffff;
	background: #ffffff;
}

.atb__check.is-checked .atb__check-box svg,
.atb__check:has( input:checked ) .atb__check-box svg {
	stroke: var(--atb-ink);
	opacity: 1;
}

.atb__check input:focus-visible ~ .atb__check-box {
	outline: 3px solid rgba(0, 0, 0, .22);
	outline-offset: 2px;
}

/* Messages */
.atb__message {
	margin: 0 0 12px;
	padding: 15px 16px;
	border: 1px solid #f0cfcb;
	border-radius: 14px;
	background: #fdf3f1;
	color: #8d2f21;
	font-size: 12px;
	line-height: 1.55;
}

.atb__message a {
	color: inherit;
	font-weight: 600;
}

/* Quote ticket */
.atb__result {
	margin: 0 0 12px;
}

.atb-ticket {
	border: 1px solid var(--atb-ink);
	border-radius: 18px;
	background: var(--atb-card);
	overflow: hidden;
	animation: atbSlideIn .22s ease both;
}

.atb-ticket__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--atb-line);
}

.atb-ticket__vehicle {
	font-size: 14px;
	font-weight: 700;
	color: var(--atb-ink);
}

.atb-ticket__badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--atb-muted);
	white-space: nowrap;
}

.atb-ticket__route {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	column-gap: 12px;
	padding: 18px 18px 16px;
}

.atb-ticket__spine {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4px;
}

.atb-ticket__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--atb-ink);
	border-radius: 50%;
	background: var(--atb-card);
}

.atb-ticket__dot--end {
	background: var(--atb-ink);
}

.atb-ticket__line {
	flex: 1 1 auto;
	width: 0;
	min-height: 44px;
	margin: 3px 0;
	border-left: 1px dashed var(--atb-rule);
}

.atb-ticket__place {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--atb-ink);
}

/* The address Google resolved, kept under the name rather than instead of it. */
.atb-ticket__addr {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--atb-muted);
}

/* Everything else that was booked, so the ticket shows the whole trip. */
.atb-ticket__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.atb-ticket__chips li {
	margin: 0;
	padding: 4px 11px;
	background: var(--atb-tab-bg);
	border-radius: 20px;
	color: var(--atb-body);
	font-size: 12px;
	line-height: 1.4;
}

.atb-ticket__when {
	margin: 0 0 12px;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--atb-muted);
}

.atb-ticket__stops > .atb-ticket__when:last-child {
	margin-bottom: 0;
}

.atb-ticket__distance {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 12px;
}

.atb-ticket__distance strong {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--atb-ink);
}

.atb-ticket__distance span {
	font-size: 11px;
	color: var(--atb-body);
}

.atb-ticket__lines {
	margin: 0;
	padding: 0 18px 14px;
	list-style: none;
}

.atb-ticket__line-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 12px;
	color: var(--atb-body);
}

.atb-ticket__line-item span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.atb-ticket__line-item--credit {
	color: var(--atb-credit);
	font-weight: 500;
}

.atb-ticket__perf {
	height: 1px;
	background: repeating-linear-gradient(to right, #c4c4c4 0 5px, transparent 5px 10px);
}

.atb-ticket__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 18px 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--atb-body);
}

.atb-ticket__amount {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--atb-ink);
	font-variant-numeric: tabular-nums;
}

.atb-ticket__note {
	margin: 10px 0 0;
	padding: 0 18px 16px;
	font-size: 10px;
	line-height: 1.5;
	color: var(--atb-muted);
}

/* Save the quote */
.atb__save {
	margin: 0 0 12px;
}

.atb__save-link {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--atb-ink);
	text-decoration: underline;
	cursor: pointer;
}

.atb__save-form {
	display: flex;
	gap: 10px;
}

.atb__save-form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 15px;
	background: var(--atb-field-bg);
	font: inherit;
	font-size: 13px;
	color: var(--atb-ink);
}

.atb__save-form input:focus {
	outline: 0;
	border-color: var(--atb-ink);
	box-shadow: 0 0 0 4px rgba(0,0,0,.07);
}

.atb__save-send {
	flex: 0 0 auto;
	padding: 12px 20px;
	border: 1px solid var(--atb-ink);
	border-radius: 15px;
	background: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--atb-ink);
	cursor: pointer;
}

.atb__save-send:disabled {
	opacity: .6;
	cursor: default;
}

.atb__save-done {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--atb-ink);
}

/* Submit */
.atb__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 50px;
	margin-top: 10px;
	padding: 14px 20px;
	border: 0;
	border-radius: 15px;
	background: var(--atb-ink);
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 750;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 12px 24px rgba(0,0,0,.14);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.atb__submit:hover:not(:disabled) {
	transform: translateY(-1px);
	background: var(--atb-ink-hover);
	box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

.atb__submit:active:not(:disabled) {
	transform: translateY(0);
}

.atb__submit:disabled {
	opacity: .65;
	cursor: default;
}

.atb__submit svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb__submit.is-loading svg {
	display: none;
}

/* Keyboard focus */
.atb button:focus-visible,
.atb input:focus-visible,
.atb select:focus-visible,
.atb textarea:focus-visible {
	outline: 3px solid rgba(0,0,0,.22);
	outline-offset: 2px;
}

/* Google's autocomplete list sits above Divi's stacking contexts */
.pac-container {
	z-index: 100000 !important;
	border: 1px solid var(--atb-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
	font-family: var(--atb-font);
}

@keyframes atbSlideIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
	.atb__card {
		padding: 26px 22px 22px;
		border-radius: 20px;
	}

	.atb__title {
		margin-bottom: 20px;
	}

	.atb__tab {
		padding: 10px 5px;
		font-size: 10.5px;
	}

	.atb__row,
	.atb__package-row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atb *,
	.atb-ticket {
		transition: none !important;
		animation: none !important;
	}
}

/* An unavailable vehicle stays visible, greyed, with the reason in its label. */
.atb__control select option:disabled {
	color: #b5b5bb;
}

/* Section headings */
.atb__section {
	margin: 12px 0 10px;
}

.atb__section:first-of-type {
	margin-top: 0;
}

/* Sentence case at a readable size. Tracked 10px capitals read as decoration
   rather than as a heading anyone is meant to use. */
.atb__section-head,
.atb__packages .atb__section-head {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	color: var(--atb-ink);
}

.atb__section-desc {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--atb-muted);
}

.atb__packages .atb__section-head {
	margin-bottom: 8px;
}

.atb__trip-wrap .atb__section {
	margin-top: 0;
}

/* ---- Add a return trip ---------------------------------------------------
   A single row under the destination rather than a pair of buttons up top, so
   the first thing the customer answers is which way they are flying. */

.atb__addreturn {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 13px 15px;
	background: var(--atb-field-bg);
	border: 1px solid transparent;
	border-radius: var(--atb-radius);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}

.atb__addreturn:hover {
	background: var(--atb-field-hover);
}

.atb__addreturn input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.atb__addreturn-box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid #b4b4b4;
	border-radius: 5px;
	background: var(--atb-card);
	transition: background .15s ease, border-color .15s ease;
}

.atb__addreturn-text {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.35;
	color: var(--atb-body);
}

.atb__addreturn-save {
	flex: 0 0 auto;
	padding: 3px 10px;
	background: var(--atb-credit-bg, #e8f4f0);
	border-radius: 20px;
	color: var(--atb-credit);
	font-size: 11.5px;
	line-height: 1.4;
}

/* Checked state. The whole row reads as selected, not just the box. */
.atb__addreturn:has(input:checked) {
	background: var(--atb-field-focus);
	border-color: var(--atb-ink);
}

.atb__addreturn:has(input:checked) .atb__addreturn-text {
	color: var(--atb-ink);
}

.atb__addreturn input:checked + .atb__addreturn-box {
	background: var(--atb-ink);
	border-color: var(--atb-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
}

.atb__addreturn input:focus-visible + .atb__addreturn-box {
	outline: 2px solid var(--atb-ink);
	outline-offset: 2px;
}

/* The return leg, marked as attached to the trip above it. */
.atb__route--return {
	display: flex;
	flex-direction: column;
	margin: 0 0 12px;
	padding-left: 12px;
	border-left: 2px solid var(--atb-ink);
}

/* The two ends swap with direction, so they are ordered rather than reordered
   in the markup. The connector line is left off in here: sibling selectors
   follow the document, not the visual order, so it would join the wrong pair. */
.atb__route--return .atb__field::after {
	display: none;
}

.atb__route--return .atb__field--place {
	order: 1;
}

.atb__route--return .atb__field--airport {
	order: 2;
}

.atb__route--return.is-airport-first .atb__field--airport {
	order: 1;
}

.atb__route--return.is-airport-first .atb__field--place {
	order: 2;
}

/* Whichever end is second gets the solid square, matching the outbound pair. */
.atb__route--return .atb__field--airport .atb__dot,
.atb__route--return.is-airport-first .atb__field--place .atb__dot {
	border: 0;
	border-radius: 2px;
	background: var(--atb-ink);
}

.atb__route--return.is-airport-first .atb__field--airport .atb__dot {
	border: 2px solid #a2a2a8;
	border-radius: 50%;
	background: none;
}

/* ---- Contact block on the cart page -------------------------------------- */

.atb-pax--cart {
	max-width: 620px;
	margin: 28px 0;
	font-family: var(--atb-font);
}

.atb-pax--cart .atb-pax__row {
	margin: 0 0 10px;
}

.atb-pax--cart .atb-pax__row--split {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.atb-pax--cart .atb-pax__row--split > span {
	flex: 1 1 180px;
	min-width: 0;
}

.atb-pax--cart label {
	display: block;
	margin: 0 0 3px;
	color: var(--atb-label);
	font-size: 12px;
	line-height: 1.2;
}

.atb-pax--cart input[type="text"],
.atb-pax--cart input[type="tel"],
.atb-pax--cart input[type="email"],
.atb-pax--cart select {
	width: 100%;
	padding: 12px 15px;
	background: var(--atb-field-bg);
	border: 1px solid transparent;
	border-radius: var(--atb-radius);
	color: var(--atb-ink);
	font-family: inherit;
	font-size: 15.5px;
	line-height: 1.3;
	box-sizing: border-box;
}

.atb-pax--cart input:focus,
.atb-pax--cart select:focus {
	outline: none;
	background: var(--atb-field-focus);
	border-color: var(--atb-ink);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .07);
}

.atb-pax--cart .atb-pax__check label {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--atb-body);
	font-size: 13.5px;
}

.atb-pax--cart .atb-pax__saved {
	margin: 8px 0 0;
	color: var(--atb-credit);
	font-size: 12px;
}


/* ---- Direction ----------------------------------------------------------

   Deliberately lighter than the service tabs. Choosing a transfer or a
   chauffeur picks a product; choosing a direction only settles which end of
   that transfer is the airport. Two filled pill rows made those look like the
   same size of decision. */

.atb__dirwrap {
	margin: 0 0 18px;
}

/* The questions asked of the customer, in the label green rather than the
   muted grey. Grey on white at 12px is legible but recedes, and these are
   instructions rather than footnotes. */
.atb__dir-caption {
	margin: 0 0 7px;
	color: var(--atb-label);
	font-size: 12px;
	line-height: 1.3;
}

.atb__dir {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.atb__dir-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	background: var(--atb-card);
	border: 1px solid var(--atb-line);
	border-radius: var(--atb-radius);
	color: var(--atb-muted);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.atb__dir-btn:hover {
	border-color: var(--atb-rule);
	color: var(--atb-body);
}

.atb__dir-btn.is-active {
	border-width: 1.5px;
	border-color: var(--atb-ink);
	color: var(--atb-ink);
}

.atb__dir-btn:focus-visible {
	outline: 2px solid var(--atb-ink);
	outline-offset: 2px;
}

/* A radio mark rather than a tick, because exactly one of the two applies. */
.atb__dir-mark {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid #c4c4c4;
	border-radius: 50%;
	box-sizing: border-box;
	transition: border .18s ease;
}

.atb__dir-btn.is-active .atb__dir-mark {
	border: 4px solid var(--atb-ink);
}

.atb__dir-text {
	min-width: 0;
}

@media (max-width: 420px) {
	.atb__dir {
		grid-template-columns: 1fr;
	}
}

/* The service caption sits above the tabs, matching the direction caption
   below, so the form reads as a short sequence of questions. */
.atb__dir-caption--service {
	margin-top: -4px;
	margin-bottom: 8px;
}

/* ---- Compact mode -------------------------------------------------------

   The trip details arrive once the route is settled. The reveal is a short
   fade and rise rather than a height animation, because the block's height is
   not known ahead of time and a jumping form reads as broken. */

.atb__steps.is-revealed {
	animation: atb-reveal .28s ease-out;
}

@keyframes atb-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atb__steps.is-revealed {
		animation: none;
	}
}

/* The card clips its contents so the rounded corners hold. A suggestion list
   has to escape that: in compact mode the card ends just below the destination
   field, and the list was being cut off after two entries. Only while a list is
   open, so nothing else gains the freedom to spill. */
.atb.is-searching .atb__card {
	overflow: visible;
}

/* A long list stays inside the viewport rather than running off the bottom of
   a phone screen. */
.atb__ac {
	max-height: 292px;
	overflow-y: auto;
	overscroll-behavior: contain;
}