/* ==========================================================================
   TransferRide search widget
   Ported from the "TransferRide Search - Redesign" design project.

   Production adaptations vs. the design file:
   - Every selector is nested under .tr-search so nothing leaks into Elementor.
   - Tokens are prefixed --tr-* and remapped onto the site brand blue (#046095)
     instead of the design's #1470a8.
   - The Manrope declaration is dropped; the widget inherits the site font and
     keeps only the design's size / weight / tracking scale.
   - Element resets use real specificity (not :where) so they beat theme styles.
   - "mobile" is a runtime variant set by JS at <=768px, plus a CSS-only
     fallback below for the pre-hydration / no-JS case.
   ========================================================================== */

/* Doubled class (0,2,0) for the same reason as the resets below: `position:
   relative` here is what makes the widget the containing block for .tr-pop, and
   what place() measures field offsets against. At a plain .tr-search (0,1,0) any
   theme rule like `.some-wrapper div { position: static }` outranks it and the
   panels anchor to some ancestor far up the page. */
.tr-search.tr-search {
	/* brand-remapped from the design's blue ramp */
	--tr-blue-900: #072131;
	--tr-blue-800: #0b5179;
	--tr-blue-700: #046095;
	--tr-blue-600: #0879ba;
	--tr-blue-050: #eaf3f9;

	--tr-ink: #0f2733;
	--tr-ink-2: #3a5464;
	--tr-muted: #6b8493;
	--tr-line: #dde5ea;
	--tr-line-2: #eef2f5;
	--tr-surface: #fff;
	--tr-focus: #046095;
	/* #ff6060 (the existing --transfer-ride-error) is ~3.1:1 on white and
	   fails AA for text, so error copy uses a darker red. */
	--tr-error: #c92a2a;
	--tr-error-soft: #fdecec;

	--tr-r-lg: 18px;
	--tr-r-md: 12px;
	--tr-r-sm: 9px;

	--tr-sh-1: 0 1px 2px rgba(4, 96, 149, .06), 0 6px 18px rgba(4, 96, 149, .08);
	--tr-sh-2: 0 12px 40px rgba(4, 96, 149, .18), 0 2px 6px rgba(4, 96, 149, .08);

	position: relative;
	background: var(--tr-surface);
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-sh-2);
	isolation: isolate;
	color: var(--tr-ink);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

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

/* ---------- element resets ----------
   These have to out-rank two things without resorting to !important:

     svg { width:100%; height:100% }                       (0,0,1)  theme
     .elementor-kit-15 button, … { background-color; …
       border-radius:100px; padding:15px 35px }            (0,1,1)  Elementor kit

   `.tr-search.tr-search :where(el)` scores (0,2,0): the doubled class beats
   both, while :where() keeps the element part weightless so the component
   rules further down this file (also (0,2,0), but declared later) still win.
   Do not "simplify" the doubled class away — Elementor's kit would take over
   every button in the widget. */
.tr-search.tr-search :where(button) {
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
}

/* Elementor's kit styles interactive states too, e.g. `.elementor-kit-15
   button:focus` at (0,2,1) — which outranks a plain `.tr-search .tr-tsel`
   (0,2,0) and repaints the control with the theme's primary colour. That is the
   blue slab left on the time selector after picking a time, because the widget
   focuses it to keep the keyboard position.

   Neutralise the states at (0,3,0). Components that must keep a fill when
   focused (.tr-go, .tr-btn-solid) restate it further down at the same weight,
   and win on source order. */
.tr-search.tr-search :where(button):hover,
.tr-search.tr-search :where(button):focus,
.tr-search.tr-search :where(button):focus-visible,
.tr-search.tr-search :where(button):active {
	background-color: transparent;
	background-image: none;
	color: inherit;
	box-shadow: none;
}

/* Same story as the :focus rule below, but for the idle state: the kit's
     .elementor-kit-15 input:not([type="button"]):not([type="submit"])
       { padding: 15px; border: 2px solid; border-radius: 15px; … }   (0,3,1)

   outranks a `:where(input)` reset (0,2,0) — `:where()` zeroes the element, so
   this landed at two classes and every input in the widget kept the theme's
   padding, 2px border and 15px radius. Mirror their shape to land at (0,4,1).
   Anything that needs to override this reset must clear (0,4,1) too — see
   .tr-ac-input input. */
.tr-search.tr-search input:not([type="button"]):not([type="submit"]) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	outline: none;
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	line-height: normal;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.tr-search input::placeholder {
	color: var(--tr-muted);
	opacity: 1;
}

/* Elementor's kit repaints focused inputs:

     .elementor-kit-15 input:focus:not([type="button"]):not([type="submit"])
       { color; background-color; border: 2px solid … }          (0,4,1)

   That is far heavier than the reset above (0,2,0), so the moment the search
   box takes focus it grows a 2px primary-coloured border and swaps its
   background. Note the obvious-looking fix,
   `.tr-search.tr-search .tr-ac-input input:focus`, only *ties* at (0,4,1) and
   would be decided by whichever stylesheet loads last — so mirror Elementor's
   own shape and add the doubled root class to land at (0,5,1).

   No ring here. The only input in the widget is the autocomplete's search box,
   which lives at the top of an already-bordered popover the user just opened —
   a second box drawn around it reads as a stray artefact, and a text input
   still shows focus through its caret. Outline is cleared explicitly rather
   than left unset so this beats both Elementor's (0,4,1) and the generic
   `.tr-search :focus-visible` ring below. */
.tr-search.tr-search input:focus:not([type="button"]):not([type="submit"]),
.tr-search.tr-search input:focus-visible:not([type="button"]):not([type="submit"]) {
	color: inherit;
	background: none;
	background-color: transparent;
	border: 0;
	border-width: 0;
	box-shadow: none;
	outline: none;
	outline-offset: 0;
}

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

/* The theme declares a global `svg { width:100%; height:100% }`, which stretches
   every inline icon to fill its box. Re-assert real sizes: one default, resized
   per context by setting --tr-icon on the parent (a custom property, so there is
   no specificity contest with this rule). */
.tr-search.tr-search :where(svg) {
	width: var(--tr-icon, 18px);
	height: var(--tr-icon, 18px);
	min-width: var(--tr-icon, 18px);
	min-height: var(--tr-icon, 18px);
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
	display: block;
}

/* Per-context icon sizes, matching the design's geometry rules. */
.tr-search .tr-clr,
.tr-search .tr-sheet-h .tr-x {
	--tr-icon: 12px;
}

.tr-search .tr-swap,
.tr-search .cal-nav,
.tr-search .tr-step button,
.tr-search .tr-tsel .tr-cv {
	--tr-icon: 16px;
}

.tr-search .tr-lug li {
	--tr-icon: 19px;
}

.tr-search.is-open {
	z-index: 60;
}

/* Hidden inputs carrying the values the rest of the app reads. */
.tr-hidden {
	display: none;
}

/* ---------- shell ---------- */
.tr-search .tr-veil {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(9, 34, 48, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s;
	z-index: 55;
}

.tr-search[data-variant="mobile"] .tr-veil {
	display: block;
}

.tr-search[data-variant="mobile"].is-open .tr-veil {
	opacity: 1;
	pointer-events: auto;
}

.tr-search .tr-fields {
	display: grid;
	position: relative;
}

.tr-search[data-variant="inline"] .tr-fields {
	grid-template-columns: 1.25fr 1.25fr 1fr .85fr auto;
	align-items: stretch;
	padding: 6px;
}

.tr-search[data-variant="stack"] .tr-fields,
.tr-search[data-variant="mobile"] .tr-fields {
	grid-template-columns: 1fr;
	padding: 6px;
	gap: 2px;
}

/* single: one location field + CTA (day-trip city search) */
.tr-search[data-variant="single"] .tr-fields {
	grid-template-columns: 1fr auto;
	align-items: stretch;
	padding: 6px;
}

/* pair: two location fields, no CTA (checkout pickup / drop-off) */
.tr-search[data-variant="pair"] .tr-fields {
	grid-template-columns: 1fr;
	padding: 6px;
	gap: 2px;
}

/* edit: date + passengers, no CTA (checkout sidebar, day-trip booking box) */
.tr-search[data-variant="edit"] .tr-fields {
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 6px;
}

/* field */
.tr-search .tr-field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--tr-r-md);
	text-align: left;
	min-height: 60px;
	transition: background .15s, box-shadow .15s;
	cursor: pointer;
	/* No double-tap-to-zoom wait before the click lands. */
	touch-action: manipulation;
}

/* ---------- hover affordances ----------
   iOS Safari emulates hover: the first tap on a non-native control sends
   mouseover, and if that repaints the element it *withholds the click* — the
   panel only opens on the second tap. .tr-field is a div[role=button], and its
   hover state also fades in the clear button, which is exactly the kind of
   change Safari treats as "the page reacted to a hover, stop here".

   So every hover style on the fields lives behind a real-pointer query. Touch
   gets the same information from the active / focus states, which are driven by
   JS and unaffected. Do not move a :hover rule back out of this block. */
@media (hover: hover) and (pointer: fine) {
	.tr-search .tr-field:hover {
		background: var(--tr-blue-050);
	}

	.tr-search[data-variant="inline"] .tr-field:hover::before,
	.tr-search[data-variant="edit"] .tr-field:hover::before {
		opacity: 0;
	}
}

.tr-search .tr-field.is-active {
	background: #fff;
	box-shadow: 0 0 0 2px var(--tr-focus) inset;
}

.tr-search .tr-field:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--tr-focus) inset;
}

.tr-search .tr-field .tr-ic {
	flex: 0 0 20px;
	color: var(--tr-blue-700);
	display: grid;
	place-items: center;
}

.tr-search .tr-field .tr-txt {
	min-width: 0;
	flex: 1;
}

.tr-search .tr-lab {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tr-muted);
	margin-bottom: 3px;
	line-height: 1.2;
}

.tr-search .tr-val {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tr-search .tr-val.is-empty {
	color: #93a8b4;
	font-weight: 500;
}

.tr-search .tr-sub {
	display: block;
	font-size: 12.5px;
	color: var(--tr-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.25;
}

.tr-search .tr-sub[hidden] {
	display: none;
}

.tr-search[data-variant="inline"] .tr-field + .tr-field::before,
.tr-search[data-variant="edit"] .tr-field + .tr-field::before,
.tr-search[data-variant="single"] .tr-field + .tr-field::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--tr-line);
}

.tr-search[data-variant="inline"] .tr-field.is-active::before,
.tr-search[data-variant="edit"] .tr-field.is-active::before {
	opacity: 0;
}

.tr-search[data-variant="stack"] .tr-field + .tr-field::after,
.tr-search[data-variant="pair"] .tr-field + .tr-field::after,
.tr-search[data-variant="mobile"] .tr-field + .tr-field::after {
	content: "";
	position: absolute;
	left: 46px;
	right: 14px;
	top: -1px;
	height: 1px;
	background: var(--tr-line-2);
}

.tr-search .tr-field.has-clear .tr-clr {
	opacity: 0;
	/* Invisible must also mean untappable: at opacity 0 this still occupied the
	   right end of the field, so a touch that landed near that edge cleared the
	   value instead of opening the panel — and read as "the first tap did
	   nothing". Every rule that fades it in gives the taps back. */
	pointer-events: none;
	flex: 0 0 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--tr-muted);
	background: #eef2f5;
	transition: opacity .12s;
}

/* .has-clear on the focus selector is not decoration: without it that branch
   scores under the base rule above and a tabbed-to clear button stays invisible
   while it holds the focus ring. */
.tr-search .tr-field.is-active .tr-clr,
.tr-search .tr-field.has-clear .tr-clr:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Both of these have to stay *after* the base rule above: the hover reveal ties
   with it on specificity and would lose on source order if it moved up into the
   pointer:fine block near .tr-field. */
@media (hover: hover) and (pointer: fine) {
	.tr-search .tr-field:hover .tr-clr {
		opacity: 1;
		pointer-events: auto;
	}

	.tr-search .tr-clr:hover {
		background: #dde5ea;
		color: var(--tr-ink);
	}
}

/* Touch has no hover to reveal it with, so show it on any field that carries a
   value. :has() is unsupported on old engines, which drop the rule and land on
   the same hidden-but-inert button they have today. */
@media (hover: none) {
	.tr-search .tr-field.has-clear:not(:has(.tr-val.is-empty)) .tr-clr {
		opacity: 1;
		pointer-events: auto;
	}
}

.tr-search[data-variant="inline"] [data-f="from"] .tr-clr {
	margin-right: 16px;
}

/* validation */
.tr-search .tr-field.has-error {
	box-shadow: 0 0 0 2px var(--tr-error) inset;
	background: var(--tr-error-soft);
}

.tr-search .tr-err {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tr-error);
	margin-top: 2px;
	line-height: 1.25;
}

/* route rail + swap */
.tr-search .tr-rail {
	position: absolute;
	left: 28px;
	top: 58px;
	bottom: auto;
	height: 24px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--tr-line) 0 3px, transparent 3px 6px);
	pointer-events: none;
}

.tr-search[data-variant="inline"] .tr-rail,
.tr-search[data-variant="single"] .tr-rail,
.tr-search[data-variant="edit"] .tr-rail {
	display: none;
}

.tr-search .tr-swap {
	position: absolute;
	z-index: 3;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--tr-line);
	color: var(--tr-blue-700);
	display: grid;
	place-items: center;
	box-shadow: var(--tr-sh-1);
	transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), border-color .15s;
}

.tr-search .tr-swap:hover {
	border-color: var(--tr-blue-600);
	background: var(--tr-blue-050);
}

.tr-search .tr-swap.spin {
	transform: rotate(180deg);
}

.tr-search[data-variant="inline"] .tr-swap {
	top: 50%;
	margin-top: -17px;
}

.tr-search[data-variant="inline"] .tr-swap svg {
	transform: rotate(90deg);
}

.tr-search[data-variant="stack"] .tr-swap,
.tr-search[data-variant="pair"] .tr-swap,
.tr-search[data-variant="mobile"] .tr-swap {
	right: 14px;
	top: 50px;
}

/* CTA */
.tr-search .tr-go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--tr-blue-700);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .01em;
	border-radius: var(--tr-r-md);
	padding: 0 30px;
	min-height: 60px;
	box-shadow: 0 6px 16px rgba(4, 96, 149, .28);
	transition: background .15s, transform .06s, box-shadow .15s;
}

.tr-search .tr-go:hover {
	background: var(--tr-blue-800);
	box-shadow: 0 8px 22px rgba(4, 96, 149, .34);
}

.tr-search .tr-go:active {
	transform: translateY(1px);
}

.tr-search .tr-go .tr-sp {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	animation: tr-spin .7s linear infinite;
	display: none;
}

.tr-search .tr-go.busy .tr-sp {
	display: block;
}

.tr-search .tr-go.busy .tr-lbl {
	opacity: .85;
}

@keyframes tr-spin {
	to {
		transform: rotate(360deg);
	}
}

.tr-search[data-variant="stack"] .tr-go,
.tr-search[data-variant="mobile"] .tr-go {
	width: calc(100% - 12px);
	margin: 4px 6px 6px;
}

.tr-search[data-variant="inline"] .tr-go,
.tr-search[data-variant="single"] .tr-go {
	margin: 0;
}

/* ---------- popovers ---------- */
.tr-search .tr-pop {
	position: absolute;
	top: calc(100% + 8px);
	z-index: 60;
	background: #fff;
	border-radius: var(--tr-r-lg);
	box-shadow: var(--tr-sh-2);
	border: 1px solid var(--tr-line-2);
	opacity: 0;
	transform: translateY(-6px) scale(.99);
	pointer-events: none;
	transition: opacity .16s, transform .16s;
	transform-origin: top left;
}

.tr-search .tr-pop.open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* The autocomplete spans the full width of the widget rather than anchoring
   under its field — long place names need the room, and it keeps the panel from
   being clipped near the right edge. place() skips anchoring for this one. */
.tr-search .tr-pop.p-ac {
	left: 0;
	right: 0;
	width: auto;
	/* No top padding: the search row is flush with the top of the card and
	   carries its own. The 6px sides are what the result rows' hover highlight
	   sits in, and what .tr-ac-input cancels out to go full-bleed. */
	padding: 0 6px 6px;
	max-height: 340px;
	overflow: auto;
}

.tr-search .tr-pop.p-cal {
	width: 326px;
	padding: 16px;
}

.tr-search .tr-pop.p-pax {
	width: 340px;
	padding: 6px;
}

/* In the stacked layouts the card is the width of one field, so a fixed 326px
   calendar reads as a narrow box floating inside a wider card. Let every panel
   span the card there; only the inline bar keeps fixed-width panels anchored
   under their field. place() skips horizontal anchoring to match. */
.tr-search:not([data-variant="inline"]) .tr-pop {
	left: 0;
	right: 0;
	width: auto;
}

.tr-search:not([data-variant="inline"]) .tr-pop.p-cal {
	min-width: 0;
}

/* autocomplete */
/* Search row at the top of the autocomplete.

   This used to be a .tr-field — a bordered, ring-focused box nested inside the
   popover, which is itself a bordered, shadowed card. Two frames around one
   input, ~64px of height, and the icon sitting in its own flex slot pushing the
   text sideways. It is now a single flat row: the icon is positioned inside the
   input's own box (the input just reserves room for it via padding-left), and
   one full-bleed hairline separates it from the results. Sticky so it stays put
   while the list scrolls. */
.tr-search .tr-ac-input {
	position: sticky;
	top: 0;
	z-index: 2;
	display: block;
	margin: 0 -6px 4px;
	padding: 12px 14px;
	background: #fff;
	border-bottom: 1px solid var(--tr-line-2);
	border-radius: var(--tr-r-lg) var(--tr-r-lg) 0 0;
}

.tr-search .tr-ac-input .tr-ic {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tr-blue-700);
	pointer-events: none;
	display: grid;
	place-items: center;
}

/* Carries the doubled root class and the kit's :not() pair for the same reason
   the reset up top does — this has to clear both Elementor's (0,3,1) and our
   own hardened reset's (0,4,1), or the icon's 28px gutter collapses. */
.tr-search.tr-search .tr-ac-input input:not([type="button"]):not([type="submit"]) {
	padding-left: 28px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}

.tr-search .tr-ac-input input::placeholder {
	font-size: 15.5px;
	font-weight: 500;
	color: #93a8b4;
}

.tr-search .tr-cal-body {
	padding: 0;
}

.tr-search[data-variant="mobile"] .tr-cal-body {
	padding: 4px 4px 0;
}

.tr-search .ac-h {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tr-muted);
	padding: 10px 12px 6px;
}

.tr-search .ac-i {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--tr-r-sm);
	text-align: left;
}

.tr-search .ac-i:hover,
.tr-search .ac-i.cur {
	background: var(--tr-blue-050);
}

.tr-search .ac-i .tr-ic {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 9px;
	background: #f2f5f7;
	display: grid;
	place-items: center;
	color: var(--tr-blue-700);
}

.tr-search .ac-i.cur .tr-ic {
	background: #fff;
}

.tr-search .ac-i > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tr-search .ac-n {
	display: block;
	font-weight: 700;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tr-search .ac-n b {
	background: #fff2c2;
	border-radius: 3px;
	padding: 0 1px;
}

.tr-search .ac-s {
	display: block;
	font-size: 12.5px;
	color: var(--tr-muted);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tr-search .ac-t {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--tr-blue-700);
	background: var(--tr-blue-050);
	border-radius: 99px;
	padding: 3px 8px;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.tr-search .ac-empty {
	padding: 22px 14px;
	text-align: center;
}

.tr-search .ac-empty p {
	margin: 0 0 12px;
	color: var(--tr-muted);
	font-size: 14px;
}

.tr-search .ac-foot {
	border-top: 1px solid var(--tr-line-2);
	margin-top: 6px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
	color: var(--tr-muted);
}

.tr-search .ac-foot a {
	color: var(--tr-blue-700);
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.tr-search .ac-foot a:hover {
	text-decoration: underline;
}

/* autocomplete: loading + error states (not in the design file) */
.tr-search .ac-sk {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

.tr-search .ac-sk i {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 9px;
}

.tr-search .ac-sk span {
	display: block;
	height: 11px;
	border-radius: 4px;
}

.tr-search .ac-sk span:first-of-type {
	width: 46%;
	margin-bottom: 6px;
}

.tr-search .ac-sk span:last-of-type {
	width: 68%;
	height: 9px;
}

.tr-search .ac-sk i,
.tr-search .ac-sk span {
	background: linear-gradient(90deg, #eef2f5 0%, #f7f9fb 50%, #eef2f5 100%);
	background-size: 200% 100%;
	animation: tr-sk 1.1s ease-in-out infinite;
}

.tr-search .ac-sk > div {
	flex: 1;
	min-width: 0;
}

@keyframes tr-sk {
	to {
		background-position: -200% 0;
	}
}

.tr-search .ac-err {
	padding: 22px 14px;
	text-align: center;
}

.tr-search .ac-err p {
	margin: 0 0 12px;
	color: var(--tr-error);
	font-size: 14px;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

	.tr-search .ac-sk i,
	.tr-search .ac-sk span,
	.tr-search .tr-go .tr-sp {
		animation: none;
	}

	.tr-search .tr-pop,
	.tr-search .tr-swap,
	.tr-search .tr-field {
		transition: none;
	}
}

/* calendar */
.tr-search .cal-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.tr-search .cal-top b {
	font-size: 15.5px;
	font-weight: 800;
}

.tr-search .cal-nav {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--tr-line);
	display: grid;
	place-items: center;
	color: var(--tr-blue-700);
}

.tr-search .cal-nav:hover {
	background: var(--tr-blue-050);
	border-color: var(--tr-blue-600);
}

.tr-search .cal-nav[disabled] {
	opacity: .35;
	pointer-events: none;
}

.tr-search .cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.tr-search .cal-dow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-muted);
	text-align: center;
	padding-bottom: 6px;
}

.tr-search .cal-d {
	height: 40px;
	border-radius: var(--tr-r-sm);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tr-ink-2);
	display: grid;
	place-items: center;
	position: relative;
}

.tr-search .cal-d:hover:not([disabled]):not(.sel) {
	background: var(--tr-blue-050);
	color: var(--tr-blue-800);
}

.tr-search .cal-d[disabled] {
	color: #c2cdd4;
	pointer-events: none;
	font-weight: 500;
}

.tr-search .cal-d.today::after {
	content: "";
	position: absolute;
	bottom: 6px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--tr-blue-600);
}

.tr-search .cal-d.sel {
	background: var(--tr-blue-700);
	color: #fff;
	font-weight: 800;
}

.tr-search .cal-d.sel::after {
	background: #fff;
}

.tr-search .cal-time {
	border-top: 1px solid var(--tr-line-2);
	margin-top: 12px;
	padding-top: 12px;
	min-width: 0;
	position: relative;
}

.tr-search .cal-time .tr-cal-lab {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tr-muted);
	margin-bottom: 8px;
	display: block;
}

/* time dropdown */
.tr-search .tr-tsel {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-r-md);
	background: #fff;
	text-align: left;
}

.tr-search .tr-tsel:hover {
	border-color: var(--tr-blue-600);
	background: var(--tr-blue-050);
}

.tr-search .tr-tsel.on {
	border-color: var(--tr-blue-700);
	box-shadow: 0 0 0 1px var(--tr-blue-700);
}

.tr-search .tr-tsel .tr-ic {
	color: var(--tr-blue-700);
	display: grid;
	place-items: center;
}

.tr-search .tr-tsel .tr-tval {
	font-size: 15.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tr-search .tr-tsel .tr-thint {
	font-size: 12.5px;
	color: var(--tr-muted);
	font-weight: 600;
}

.tr-search .tr-tsel .tr-cv {
	margin-left: auto;
	color: var(--tr-muted);
	transition: transform .18s;
	display: grid;
	place-items: center;
}

.tr-search .tr-tsel.on .tr-cv {
	transform: rotate(180deg);
	color: var(--tr-blue-700);
}

.tr-search .tr-tlist {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 4px);
	z-index: 5;
	background: #fff;
	border: 1px solid var(--tr-line-2);
	border-radius: var(--tr-r-md);
	box-shadow: var(--tr-sh-2);
	max-height: 236px;
	overflow: auto;
	padding: 6px;
	display: none;
	overscroll-behavior: contain;
}

.tr-search .tr-tlist.open {
	display: block;
}

.tr-search .tr-tlist .tr-tgroup {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tr-muted);
	padding: 9px 10px 5px;
}

.tr-search .tr-topt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border-radius: var(--tr-r-sm);
	font-size: 14.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.tr-search .tr-topt:hover,
.tr-search .tr-topt.cur {
	background: var(--tr-blue-050);
}

.tr-search .tr-topt.on {
	background: var(--tr-blue-700);
	color: #fff;
	font-weight: 800;
}

.tr-search .tr-topt .tr-tk {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--tr-muted);
}

.tr-search .tr-topt.on .tr-tk {
	color: rgba(255, 255, 255, .8);
}

.tr-search .tr-chip {
	flex: 0 0 auto;
	padding: 8px 13px;
	border-radius: 99px;
	border: 1px solid var(--tr-line);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tr-ink-2);
	background: #fff;
}

.tr-search .tr-chip:hover {
	border-color: var(--tr-blue-600);
	color: var(--tr-blue-800);
}

.tr-search .tr-chip.on {
	background: var(--tr-blue-700);
	border-color: var(--tr-blue-700);
	color: #fff;
}

.tr-search .cal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.tr-search .cal-note {
	font-size: 12.5px;
	color: var(--tr-muted);
}

.tr-search .tr-btn-solid {
	display: inline-block;
	background: var(--tr-blue-700);
	color: #fff;
	font-weight: 800;
	font-size: 14.5px;
	border-radius: var(--tr-r-sm);
	padding: 11px 20px;
	text-decoration: none;
	line-height: 1.2;
}

.tr-search .tr-btn-solid:hover {
	background: var(--tr-blue-800);
	color: #fff;
	text-decoration: none;
}

.tr-search .tr-btn-ghost {
	font-weight: 800;
	font-size: 14.5px;
	color: var(--tr-blue-700);
	padding: 11px 4px;
}

.tr-search .tr-btn-ghost:hover {
	text-decoration: underline;
}

/* passengers */
.tr-search .pax-r {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
}

.tr-search .pax-r + .pax-r {
	border-top: 1px solid var(--tr-line-2);
}

.tr-search .pax-t {
	flex: 1;
}

.tr-search .pax-t b {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.tr-search .pax-t span {
	display: block;
	font-size: 12.5px;
	color: var(--tr-muted);
	margin-top: 1px;
}

.tr-search .tr-step {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tr-search .tr-step button {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--tr-blue-700);
	color: var(--tr-blue-700);
	display: grid;
	place-items: center;
	background: #fff;
	transition: background .12s;
}

.tr-search .tr-step button:hover:not([disabled]) {
	background: var(--tr-blue-700);
	color: #fff;
}

.tr-search .tr-step button[disabled] {
	border-color: var(--tr-line);
	color: #c2cdd4;
	pointer-events: none;
}

.tr-search .tr-step .tr-num {
	min-width: 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.tr-search .tr-lug {
	background: #f7f9fb;
	border-radius: var(--tr-r-md);
	margin: 4px 6px 6px;
	padding: 12px 14px;
}

.tr-search .tr-lug .tr-lug-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-muted);
	margin-bottom: 8px;
}

.tr-search .tr-lug ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.tr-search .tr-lug li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tr-ink-2);
	margin: 0;
	list-style: none;
}

.tr-search .tr-lug li .tr-dim {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--tr-muted);
	font-size: 12.5px;
	background: #fff;
	border: 1px solid var(--tr-line);
	border-radius: 99px;
	padding: 3px 9px;
	white-space: nowrap;
}

.tr-search .pax-foot {
	display: flex;
	justify-content: flex-end;
	padding: 0 6px 6px;
}

/* screen-reader-only live region */
.tr-search .tr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- mobile sheets ----------
   The sheet is anchored to the bottom of the screen, so a content-sized panel
   parks its search input a couple of hundred pixels off the bottom edge —
   exactly where the on-screen keyboard lands. The traveller then has to scroll
   a freshly opened sheet to see what they are typing.

   So every sheet claims ~80% of the viewport whatever it holds: the input sits
   near the top, clear of any keyboard, and the list below it is worth
   scrolling. `min-height`, not `height`, so a long list can still take the
   extra room up to the max. dvh with a vh fallback — mobile browser chrome
   makes 100vh taller than what is actually on screen, and the keyboard does
   not shrink either unit, which is what keeps the input where it was put. */
.tr-search[data-variant="mobile"] .tr-pop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: auto !important;
	border-radius: 20px 20px 0 0;
	transform: translateY(16px);
	display: flex;
	flex-direction: column;
	min-height: 80vh;
	min-height: 80dvh;
	max-height: 88vh;
	max-height: calc(100dvh - 24px);
	overflow: auto;
	/* Scrolling past the end of a sheet must not carry on into the page behind
	   it once a touch scroll is already in flight. */
	overscroll-behavior: contain;
	box-shadow: 0 -10px 40px rgba(11, 39, 51, .22);
}

/* Flex items shrink by default; the grab handle, header and search row keep
   their height no matter how long the body under them gets. */
.tr-search[data-variant="mobile"] .tr-grab,
.tr-search[data-variant="mobile"] .tr-sheet-h,
.tr-search[data-variant="mobile"] .tr-ac-input,
.tr-search[data-variant="mobile"] .ac-foot {
	flex: 0 0 auto;
}

/* The body of each sheet takes the slack the extra height creates, so the
   footers sit at the bottom of the sheet instead of floating halfway up it.
   The results list and the calendar body have no background of their own, so
   growing them is invisible; the passenger sheet has nothing stretchable in it
   and pushes its footer down instead. */
.tr-search[data-variant="mobile"] .tr-pop > [data-list],
.tr-search[data-variant="mobile"] .tr-cal-body {
	flex: 1 1 auto;
}

.tr-search[data-variant="mobile"] .tr-cal-body {
	display: flex;
	flex-direction: column;
}

.tr-search[data-variant="mobile"] .cal-foot,
.tr-search[data-variant="mobile"] .pax-foot {
	margin-top: auto;
}

.tr-search[data-variant="mobile"] .tr-pop.open {
	transform: none;
}

.tr-search .tr-sheet-h {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 10px;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
}

.tr-search[data-variant="mobile"] .tr-sheet-h {
	display: flex;
}

.tr-search .tr-sheet-h b {
	font-size: 17px;
	font-weight: 800;
}

.tr-search .tr-sheet-h .tr-x {
	margin-left: auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f2f5f7;
	display: grid;
	place-items: center;
	color: var(--tr-ink-2);
}

.tr-search .tr-grab {
	width: 38px;
	height: 4px;
	border-radius: 99px;
	background: var(--tr-line);
	margin: 8px auto 0;
}

.tr-search[data-variant="mobile"] .p-cal {
	width: auto !important;
	padding: 0 12px 12px;
}

/* The sheet header is already sticky at top:0; a second sticky row would
   overlap it, so the search row scrolls with the list on mobile. `relative`,
   not `static` — the row is the containing block for its own absolutely
   positioned .tr-ic, and going static would hand the icon to the sheet
   (position:fixed) and park it in the sheet's top-left corner. */
.tr-search[data-variant="mobile"] .tr-ac-input {
	position: relative;
	border-radius: 0;
}

.tr-search[data-variant="mobile"] .tr-tlist {
	max-height: 200px;
}

.tr-search[data-variant="mobile"] .tr-topt {
	padding: 13px 12px;
}

.tr-search[data-variant="mobile"] .cal-grid {
	grid-template-columns: repeat(7, 1fr);
}

/* CSS-only fallback for the window between paint and hydration, and for
   no-JS: collapse the horizontal variants to one column on small screens. */
@media (max-width: 768px) {

	.tr-search[data-variant="inline"] .tr-fields,
	.tr-search[data-variant="single"] .tr-fields,
	.tr-search[data-variant="edit"] .tr-fields {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.tr-search[data-variant="inline"] .tr-field + .tr-field::before,
	.tr-search[data-variant="single"] .tr-field + .tr-field::before,
	.tr-search[data-variant="edit"] .tr-field + .tr-field::before {
		display: none;
	}

	.tr-search[data-variant="inline"] .tr-go,
	.tr-search[data-variant="single"] .tr-go {
		width: calc(100% - 12px);
		margin: 4px 6px 6px;
	}

	.tr-search[data-variant="inline"] .tr-swap {
		top: auto;
		margin-top: 0;
		right: 14px;
	}

	.tr-search[data-variant="inline"] .tr-swap svg {
		transform: none;
	}
}

/* ---------- focus / active restoration ----------
   The reset near the top strips background and colour on :hover/:focus/:active
   at (0,3,0) so Elementor's kit cannot repaint controls. Everything that is
   supposed to keep a fill or a tinted glyph while focused restates it here, at
   the same or higher weight and later in the file. */
.tr-search .tr-go:focus,
.tr-search .tr-go:focus-visible,
.tr-search .tr-go:active {
	background-color: var(--tr-blue-700);
	color: #fff;
}

.tr-search .tr-go:hover:focus {
	background-color: var(--tr-blue-800);
}

.tr-search .tr-btn-solid:focus,
.tr-search .tr-btn-solid:active {
	background-color: var(--tr-blue-700);
	color: #fff;
}

.tr-search .tr-btn-ghost:focus,
.tr-search .tr-swap:focus,
.tr-search .cal-nav:focus,
.tr-search .tr-step button:focus {
	color: var(--tr-blue-700);
}

.tr-search .tr-step button:hover:focus:not([disabled]) {
	background-color: var(--tr-blue-700);
	color: #fff;
}

.tr-search .cal-d:focus {
	color: var(--tr-ink-2);
}

.tr-search .cal-d.sel,
.tr-search .cal-d.sel:focus,
.tr-search .tr-topt.on:focus {
	background-color: var(--tr-blue-700);
	color: #fff;
}

.tr-search .ac-i:focus,
.tr-search .ac-i.cur {
	background-color: var(--tr-blue-050);
}

/* ---------- embedded mode ----------
   On checkout and the day-trip booking box the widget sits inside a .tr-card
   that already supplies the frame. Without this it renders a second rounded,
   shadowed card inside the first one. */
.tr-search.is-bare {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	/* The frame is four properties, not three. Zeroing background, shadow and
	   radius but leaving the border draws a square outline around the widget
	   inside the card that was supposed to be its only frame. */
	border: 0;
}

.tr-search.is-bare .tr-fields {
	padding: 0;
}

/* Elementor / theme guards: these containers routinely re-style descendants. */
.elementor-widget-container .tr-search .tr-lug ul,
.elementor-widget-container .tr-search .tr-lug li {
	list-style: none;
}