/*
 * Transfers page: [ftt_transfers] search, results and booking step (issue #34).
 * Uses the site's colour and font variables, with fallbacks so the block reads correctly on its own.
 */

.ftt-trf {
	--trf-navy: var(--dark-back, #0f2238);
	--trf-gold: var(--btn-experiences, #f5c55a);
	--trf-ink: var(--dark-text, #14202e);
	--trf-line: #14202e1f;
	--trf-soft: #f6f3ee;
	max-width: 1200px;
	margin: 0 auto;
	color: var(--trf-ink);
	scroll-margin-top: 120px;
}
.ftt-trf *, .ftt-trf *::before, .ftt-trf *::after { box-sizing: border-box; }

.ftt-trf__kicker {
	margin: 0 0 12px;
	font-family: var(--font-nav, inherit);
	font-size: .8rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--icon-why, #9a7b3c);
}

/* Search */
.ftt-trf__search {
	padding: 28px;
	background: var(--trf-navy);
	color: #fff;
	border-radius: 0;
}
.ftt-trf__search .ftt-trf__kicker { color: var(--trf-gold); }
.ftt-trf__form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .6fr) auto;
	gap: 16px;
	align-items: end;
}
.ftt-trf__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: .9rem; }
.ftt-trf__field > span { opacity: .85; }
.ftt-trf__field select,
.ftt-trf__field input,
.ftt-trf__field textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	color: var(--trf-ink);
	background: #fff;
	border: 1px solid var(--trf-line);
	border-radius: 0;
}
.ftt-trf__field textarea { min-height: 72px; resize: vertical; }
.ftt-trf__field select:focus-visible,
.ftt-trf__field input:focus-visible,
.ftt-trf__field textarea:focus-visible,
.ftt-trf a:focus-visible,
.ftt-trf button:focus-visible { outline: 2px solid var(--trf-gold); outline-offset: 2px; }

.ftt-trf__go {
	min-height: 48px;
	padding: 0 26px;
	font-family: var(--font-nav, inherit);
	font-size: 1.05rem;
	color: var(--trf-ink);
	background: var(--trf-gold);
	border: 1px solid var(--trf-gold);
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .3s, transform .3s;
}
.ftt-trf__go:hover { background: #ffd582; transform: translateY(-2px); }

/* Results */
.ftt-trf__results { margin-top: 36px; }
.ftt-trf__leg + .ftt-trf__leg { margin-top: 40px; }
.ftt-trf__legh {
	margin: 0 0 18px;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.3;
}
.ftt-trf__legh span { font-style: italic; }
.ftt-trf__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ftt-trf__card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--trf-line);
	border-radius: 0;
}
.ftt-trf__route { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.ftt-trf__route--lg { font-size: 1.5rem; }
.ftt-trf__arrow { padding: 0 2px; color: var(--icon-why, #9a7b3c); }
.ftt-trf__basis { margin: 0 0 12px; font-size: .85rem; opacity: .75; }
.ftt-trf__vehicles { margin: auto 0 0; padding: 0; list-style: none; }
.ftt-trf__vehicle {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--trf-line);
}
.ftt-trf__vname small { display: block; font-size: .8rem; opacity: .7; }
.ftt-trf__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftt-trf__select {
	padding: 8px 14px;
	font-size: .9rem;
	color: var(--trf-navy);
	border: 1px solid var(--trf-navy);
	border-radius: 0;
	text-decoration: none;
	transition: background-color .3s, color .3s;
}
.ftt-trf__select:hover { color: #fff; background: var(--trf-navy); }

.ftt-trf__total,
.ftt-trf__none,
.ftt-trf__hint {
	margin: 24px 0 0;
	padding: 16px 20px;
	background: var(--trf-soft);
	border-left: 3px solid var(--trf-gold);
}
.ftt-trf__quote { white-space: nowrap; color: inherit; font-weight: 600; }
.ftt-trf__small { margin: 28px 0 0; font-size: .85rem; opacity: .8; }

/* Booking step */
.ftt-trf__book {
	margin-bottom: 32px;
	padding: 28px;
	background: var(--trf-soft);
	border: 1px solid var(--trf-line);
	border-radius: 0;
}
.ftt-trf__bookprice { margin: 0 0 18px; font-size: 1.4rem; }
.ftt-trf__bookform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ftt-trf__field--wide, .ftt-trf__bookform .ftt-trf__small, .ftt-trf__bookact { grid-column: 1 / -1; }
.ftt-trf__bookform .ftt-trf__small { margin: 0; }
.ftt-trf__bookact { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.ftt-trf__back { color: inherit; }
.ftt-trf__field abbr { text-decoration: none; }

@media (max-width: 1024px) {
	.ftt-trf__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ftt-trf__go { width: 100%; }
}
@media (max-width: 640px) {
	.ftt-trf__search, .ftt-trf__book { padding: 20px 16px; }
	.ftt-trf__form, .ftt-trf__bookform { grid-template-columns: minmax(0, 1fr); }
	.ftt-trf__grid { grid-template-columns: minmax(0, 1fr); }
	.ftt-trf__route--lg { font-size: 1.25rem; }
}

/* Live search: soften the results while new ones load. */
.ftt-trf__results { transition: opacity .2s; }
.ftt-trf.is-loading .ftt-trf__results { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ftt-trf__results { transition: none; } }

/* Journey form (review round 2): one form for every leg, one Add to cart. */
.ftt-trf__check { display: flex; gap: 8px; align-items: center; min-height: 48px; font-size: .9rem; cursor: pointer; }
.ftt-trf__check input { width: 18px; height: 18px; accent-color: var(--trf-gold); }
.ftt-trf__form { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .6fr) auto auto; }
.ftt-trf__jleg {
	margin: 0 0 20px;
	padding: 20px;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--trf-line);
	border-radius: 0;
}
.ftt-trf__jleg .ftt-trf__legh { float: left; width: 100%; margin-bottom: 14px; padding: 0; }
.ftt-trf__jleg .ftt-trf__legh ~ * { clear: both; } /* ~ not +: hidden inputs follow the legend */
.ftt-trf__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ftt-trf__opt {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--trf-line);
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.ftt-trf__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--trf-navy); }
.ftt-trf__opt:has(input:checked) { border-color: var(--trf-navy); background: var(--trf-soft); }
.ftt-trf__opt:focus-within { outline: 2px solid var(--trf-gold); outline-offset: 2px; }
.ftt-trf__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ftt-trf__details .ftt-trf__field > span { opacity: .8; }
.ftt-trf__checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: flex-end;
	padding: 16px 20px;
	background: var(--trf-navy);
	color: #fff;
}
.ftt-trf__sum { margin: 0; font-size: 1.1rem; }
.ftt-trf__sum b { font-weight: 600; }
.ftt-trf__notices:empty { display: none; }
.ftt-trf__notices { margin-bottom: 20px; }

@media (max-width: 1024px) {
	.ftt-trf__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ftt-trf__form, .ftt-trf__details { grid-template-columns: minmax(0, 1fr); }
	.ftt-trf__jleg { padding: 16px; }
	/* Total and Add to cart stay in reach while filling in the legs. */
	.ftt-trf__checkout { position: sticky; bottom: 0; z-index: 5; justify-content: space-between; padding: 12px 16px; }
	.ftt-trf__checkout .ftt-trf__go { width: auto; }
}

/* Rate tables (review round 4): one row per destination, a price per vehicle; the price is the Book link. */
.ftt-trf__rates { scroll-margin-top: 120px; }
.ftt-trf__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--trf-line); background: #fff; }
.ftt-trf__table { width: 100%; margin: 0; border-collapse: collapse; font-size: .95rem; }
.ftt-trf__table th, .ftt-trf__table td { padding: 0; border: 0; border-bottom: 1px solid var(--trf-line); text-align: left; vertical-align: middle; background: none; }
.ftt-trf__table tbody tr:last-child > * { border-bottom: 0; }
.ftt-trf__table thead th { padding: 12px 16px; font-weight: 400; font-size: .85rem; letter-spacing: .3px; color: #fff; background: var(--trf-navy); }
.ftt-trf__table thead th small { display: block; font-size: .75rem; opacity: .75; }
.ftt-trf__table tbody th { padding: 8px 16px; font-weight: 400; line-height: 1.3; }
.ftt-trf__table td { line-height: 1.3; }
.ftt-trf__table tbody tr:hover { background: var(--trf-soft); }
.ftt-trf__table td { width: 19%; }
.ftt-trf__cell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 16px;
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ftt-trf__book {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 14px;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1;
	color: var(--trf-ink);
	background: var(--trf-gold);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s, transform .2s;
}
/* Hover (review round 6): a soft gold edge, and the price keeps the site's ink colour (the theme's link hover was green). */
.ftt-trf__cell:hover, .ftt-trf__cell:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px var(--trf-gold); }
.ftt-trf__table a.ftt-trf__cell:hover,
.ftt-trf__table a.ftt-trf__cell:focus-visible,
.ftt-trf__table a.ftt-trf__cell:hover *,
.ftt-trf__table a.ftt-trf__cell:focus-visible * { color: var(--trf-ink); }
.ftt-trf__price { line-height: 1.2; }
.ftt-trf__cell:hover .ftt-trf__book, .ftt-trf__cell:focus-visible .ftt-trf__book { opacity: 1; transform: none; }
.ftt-trf__na { display: block; padding: 12px 16px; font-size: .85rem; opacity: .6; }
/* Touch screens have no hover: show a quiet arrow so prices read as tappable. */
@media (hover: none) {
	.ftt-trf__book { display: none; }
	.ftt-trf__cell::after { content: "›"; margin-left: auto; opacity: .45; }
}
@media (max-width: 640px) {
	.ftt-trf__table { font-size: .85rem; }
	.ftt-trf__table thead th, .ftt-trf__table tbody th { padding: 10px; }
	.ftt-trf__cell { gap: 4px; padding: 10px; }
	.ftt-trf__table tbody th { min-width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .ftt-trf__book { transition: none; } }

/*
 * Transfers page top, compact (review round 5): page 6234's "Our transfers" section (5404c365) shows its
 * three cards in one row, without the theme's hover zoom (review round 6).
 * Scoped by Elementor element ID because these sections live in the page content, not in this plugin.
 */
.elementor-element.elementor-element-5404c365 { padding-top: 56px; padding-bottom: 40px; gap: 28px; }
.elementor-element-5404c365 .section-intro { padding: 0; }
.elementor-element.elementor-element-2eca6a0f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.elementor-element-2eca6a0f .elementor-element.index-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 0 20px;
	border-top: 0;
	border-bottom: 1px solid #14202e1f;
}
.elementor-element-2eca6a0f .index-row .index-media { order: -1; width: 100%; height: 150px; overflow: hidden; }
.elementor-element-2eca6a0f .index-row .index-media img { width: 100%; height: 100%; object-fit: cover; }
.elementor-element-2eca6a0f .index-row .index-number { margin: 0; font-size: 1.4rem; line-height: 1; }
.elementor-element-2eca6a0f .index-row .index-stack { width: 100%; gap: 10px; }
.elementor-element-2eca6a0f .index-row h3 { font-size: 1.2rem; line-height: 1.25; }
.elementor-element-2eca6a0f .index-row .tag-list { gap: 6px; }
.elementor-element-2eca6a0f .index-row .tag { padding: 4px 8px; font-size: .68rem; }
.elementor-element-2eca6a0f .index-row .link-cta { padding: 6px 0; }
.elementor-element-2eca6a0f .media-zoom,
.elementor-element-2eca6a0f .media-zoom img,
.elementor-element-2eca6a0f .index-row:hover .media-zoom img { transition: none; transform: none !important; }
@media (max-width: 900px) {
	.elementor-element.elementor-element-5404c365 { padding-top: 40px; padding-bottom: 24px; gap: 20px; }
	.elementor-element.elementor-element-2eca6a0f { grid-template-columns: 1fr; gap: 20px; }
	.elementor-element-2eca6a0f .index-row .index-media { display: none; }
}

/* Review round 6: vehicle drawings in the rate table headers. */
.ftt-trf__vhead { display: flex; gap: 10px; align-items: center; }
.ftt-trf__vicon { flex: none; width: 30px; height: 30px; color: var(--trf-gold); }
@media (max-width: 640px) { .ftt-trf__vicon { display: none; } }

/* Review round 6: "Larger groups" link under Passengers (kept out of the grid row so the fields stay aligned). */
.ftt-trf__paxcol { position: relative; min-width: 0; }
.ftt-trf__more { position: absolute; top: 100%; left: 0; margin-top: 6px; font-size: .8rem; white-space: nowrap; color: var(--trf-gold); text-decoration: underline; text-underline-offset: 3px; }
.ftt-trf__more:hover { color: #fff; }
.ftt-trf__search { padding-bottom: 40px; }
@media (max-width: 1024px) {
	.ftt-trf__more { position: static; display: inline-block; }
	.ftt-trf__search { padding-bottom: 28px; }
}

/* Review round 6: early/late surcharge note under the pick-up time. */
.ftt-trf__night { font-size: .75rem; opacity: .75; }

/*
 * Review round 6: [ftt_transfers]…[/ftt_transfers] notes as one row under the form. Each item is a block such as
 * <div><strong>Included</strong> …</div>; a <p class="ftt-trf__fine"> (the fuel levy) spans the row underneath.
 */
.ftt-trf__info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 32px;
	padding: 16px 0;
	font-size: .85rem;
	line-height: 1.45;
}
.ftt-trf__info > * { margin: 0; }
.ftt-trf__info strong { display: block; margin-bottom: 2px; color: var(--trf-navy); }
.ftt-trf__info ul { margin: 0; padding-left: 1.1em; }
.ftt-trf__info .ftt-trf__fine { grid-column: 1 / -1; font-size: .8rem; opacity: .8; }
/* Round 6 polish on staging: three notes in three columns (auto-fit left an empty fourth), less space above the search. */
@media (min-width: 900px) { .ftt-trf__info { grid-template-columns: 1fr 1fr 1.3fr; } }
.elementor-element.elementor-element-f7a34e01 { padding-top: 24px; }
/* The Book tag shares its class with the booking step box (.ftt-trf__book above): drop that box's margin and border here. */
.ftt-trf__cell .ftt-trf__book { margin: 0; border: 0; }
/* Review round 7: child seats and luggage trailer on each leg. */
.ftt-trf__check--extra { align-self: end; }
.ftt-trf__field > span small { font-size: .75rem; opacity: .75; }
/* Review round 8: fuel levy on sand; vehicle name and passenger range sit tight under each other in the headers. */
.ftt-trf__info .ftt-trf__fine { padding: 10px 14px; color: var(--trf-ink); background: var(--sand, #f6f3ee); opacity: 1; }
.ftt-trf__vhead > span { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.ftt-trf__table thead .ftt-trf__vhead small { display: block; margin: 0; padding: 0; line-height: 1.2; }
/* Review round 8: no white hover background on the three "Our transfers" cards. */
.elementor-element-2eca6a0f .index-row:hover,
.elementor-element-2eca6a0f .index-row:focus-within { background: transparent !important; box-shadow: none !important; }
/* The site's sand token is --surface-sand (#F2EADA); --sand isn't defined on this site, so the fallback looked grey. */
.ftt-trf__info .ftt-trf__fine { background: var(--surface-sand, #F2EADA); }
/* The theme's .elementor .index-row:hover also adds 24px side padding and a maroon border: keep the cards still. */
.elementor-element-2eca6a0f .index-row:hover,
.elementor-element-2eca6a0f .index-row:focus-within { padding-inline: 0 !important; border-color: #14202e1f !important; }
/* Review round 9: "Find transfers" scrolls to the results; leave room for the sticky header. */
.ftt-trf__results, .ftt-trf__results .ftt-trf__journey, .ftt-trf__results .ftt-trf__none { scroll-margin-top: 120px; }
.ftt-trf__results:focus { outline: none; }