/**
 * The booking forms, second generation (inc/bform.php, assets/js/bform.js, 2026-09-28).
 * One look, coloured by the page it sits on: gold by default, the page's own colour on a themed page
 * (blue port day, terracotta, darkroom, road trip, zellige, souk, keswa, airmail). Big targets for thumbs,
 * 16 px fields so phones do not zoom, and everything readable without the script.
 */

.tgt-bf {
	--bf-accent: #c8a44a;
	--bf-on: #0e1620;
	--bf-accent-ink: #8a7449;
	/* The strong fills: light on the gold form (Fadi 2026-09-28: "the yellow is hard, make it light and simple"),
	   solid in a page's own colour on the coloured pages (below). */
	--bf-plus-bg: #fff;
	--bf-plus-ink: #1b1b1b;
	--bf-pick-bg: #fbf5e6;
	--bf-pick-ink: #1b1b1b;
	--bf-pick-line: #d9bf7c;
	--bf-now-bg: #1b2230;
	--bf-now-ink: #fff;
	--bf-now-ring: #eeebe4;
	--bf-day-bg: #1b2230;
	--bf-day-ink: #fff;
	--bf-soft: #faf3df;
	--bf-soft2: #fcfaf5;
	--bf-ring: rgba(200, 164, 74, .32);
	--bf-shadow: rgba(200, 164, 74, .28);
	--bf-ink: #1b1b1b;
	--bf-mute: #6b6558;
	--bf-line: #e3dccd;
	--bf-field: #fbfaf7;
	--bf-card: #fff;
	--bf-link: #1a6e8a;
	--bf-bad: #b3261e;
	--bf-bad-soft: #fdecea;
	position: relative;
	container: bf / inline-size;
	color: var(--bf-ink);
	font-family: "Trebuchet MS", Tahoma, "Segoe UI", system-ui, sans-serif;
}
.tgt-bf [hidden],
.tgt-bf .tgt-bf__f.is-auto { display: none !important; }
.tgt-bf fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tgt-bf button { font: inherit; }
:where(.tgt-bf) p { margin: 0; }

/* Page colours: solid fills in the page's own colour. */
.tgc--blue .tgt-bf, .tgc--terracotta .tgt-bf, .tgc--zellige .tgt-bf, .tgc--souk .tgt-bf,
.tgc--keswa .tgt-bf, .tgc--airmail .tgt-bf, .tgc--darkroom .tgt-bf {
	--bf-plus-bg: var(--bf-accent); --bf-plus-ink: var(--bf-on);
	--bf-pick-bg: var(--bf-accent); --bf-pick-ink: var(--bf-on); --bf-pick-line: var(--bf-accent);
	--bf-now-bg: var(--bf-accent); --bf-now-ink: var(--bf-on); --bf-now-ring: var(--bf-soft);
	--bf-day-bg: var(--bf-accent); --bf-day-ink: var(--bf-on);
}
.tgc--blue .tgt-bf { --bf-accent: #1a6e8a; --bf-on: #fff; --bf-accent-ink: #1a6e8a; --bf-soft: #e8f2f6; --bf-soft2: #f5f9fb; --bf-ring: rgba(26, 110, 138, .28); --bf-shadow: rgba(26, 110, 138, .26); --bf-line: #d7e3e8; --bf-field: #f7fafb; }
.tgc--terracotta .tgt-bf { --bf-accent: #b4532a; --bf-on: #fff; --bf-accent-ink: #b4532a; --bf-soft: #f9ebe3; --bf-soft2: #fcf7f3; --bf-ring: rgba(180, 83, 42, .28); --bf-shadow: rgba(180, 83, 42, .26); --bf-link: #b4532a; }
/* The multi-day tours: light sand gold, the colour of the page's own "Get my quote" buttons (Fadi 2026-09-28:
   "all the colours light, not dark"). */
.tgc--roadtrip .tgt-bf {
	--bf-accent: #e8bd78; --bf-on: #141b2f; --bf-accent-ink: #a8621a; --bf-soft: #f8eedd; --bf-soft2: #fbf7f1;
	--bf-ring: rgba(232, 189, 120, .38); --bf-shadow: rgba(232, 189, 120, .32); --bf-link: #2c2f6b;
	--bf-plus-bg: #fff; --bf-plus-ink: #1b2033;
	--bf-pick-bg: #fbf1e0; --bf-pick-ink: #1b2033; --bf-pick-line: #e8bd78;
	--bf-now-bg: #e8bd78; --bf-now-ink: #141b2f; --bf-now-ring: #f8eedd;
	--bf-day-bg: #e8bd78; --bf-day-ink: #141b2f;
}
.tgc--zellige .tgt-bf { --bf-accent: #0d6b56; --bf-on: #fff; --bf-accent-ink: #0d6b56; --bf-soft: #e2f1ec; --bf-soft2: #f4f9f7; --bf-ring: rgba(13, 107, 86, .28); --bf-shadow: rgba(13, 107, 86, .24); --bf-link: #0d6b56; }
.tgc--souk .tgt-bf { --bf-accent: #127a74; --bf-on: #fff; --bf-accent-ink: #127a74; --bf-soft: #e1f1ef; --bf-soft2: #f4f9f8; --bf-ring: rgba(18, 122, 116, .28); --bf-shadow: rgba(18, 122, 116, .24); --bf-link: #5b2a4e; }
.tgc--keswa .tgt-bf { --bf-accent: #2e2248; --bf-on: #fbf8f1; --bf-accent-ink: #4b2f73; --bf-soft: #efeaf5; --bf-soft2: #fbf9fd; --bf-ring: rgba(75, 47, 115, .26); --bf-shadow: rgba(31, 23, 51, .22); --bf-line: #e6dccb; --bf-field: #fdfbf6; --bf-link: #4b2f73; }
.tgc--airmail .tgt-bf { --bf-accent: #1f3f8f; --bf-on: #fff; --bf-accent-ink: #1f3f8f; --bf-soft: #e9eefa; --bf-soft2: #f7f9fe; --bf-ring: rgba(31, 63, 143, .26); --bf-shadow: rgba(31, 63, 143, .24); --bf-line: #d6deed; --bf-field: #f8faff; --bf-link: #1f3f8f; }
.tgc--darkroom .tgt-bf { --bf-accent: #e0482f; --bf-on: #fff; --bf-accent-ink: #ff7a63; --bf-soft: rgba(224, 72, 47, .16); --bf-soft2: #1b1d21; --bf-ring: rgba(224, 72, 47, .4); --bf-shadow: rgba(224, 72, 47, .24); --bf-ink: #ece6da; --bf-mute: #a39c90; --bf-line: #33363b; --bf-field: #0f1012; --bf-card: #16181b; --bf-link: #ff8a75; --bf-bad: #ff8a80; --bf-bad-soft: rgba(255, 138, 128, .12); }

/* The card the form sits in on a content page (the tour page's own card holds it there). */
.tgc-booking__form .tgt-bf {
	padding: 30px 32px 24px;
	border: 1px solid var(--bf-line);
	border-radius: 20px;
	background: var(--bf-card);
	box-shadow: 0 12px 32px rgba(14, 22, 32, .06);
}
.tgc--darkroom .tgc-booking__form .tgt-bf { box-shadow: none; }

/* ---------------------------------------------------------------- progress */

.tgt-bf__progress {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.tgt-bf__progress::before,
.tgt-bf__progress::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 17px;
	height: 2px;
	border-radius: 2px;
}
.tgt-bf__progress::before { right: 17px; background: var(--bf-line); }
.tgt-bf__progress::after {
	width: calc((100% - 34px) * var(--bf-at, 0) / max(1, calc(var(--bf-steps, 3) - 1)));
	background: var(--bf-accent);
	transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.tgt-bf__dot { position: relative; z-index: 1; display: flex; flex: 1; justify-content: center; }
.tgt-bf__dot:first-child { justify-content: flex-start; }
.tgt-bf__dot:last-child { justify-content: flex-end; }
.tgt-bf__dotbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bf-mute);
	cursor: default;
}
.tgt-bf__dot:first-child .tgt-bf__dotbtn { align-items: flex-start; }
.tgt-bf__dot:last-child .tgt-bf__dotbtn { align-items: flex-end; }
.tgt-bf__dotno {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--bf-line);
	border-radius: 50%;
	background: var(--bf-card);
	font-size: 14px;
	font-weight: 700;
	transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.tgt-bf__dotlabel { font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
/* Small phones: a step name may take two lines. In French ("Prise en charge") the three names on one line
   were wider than the form and pushed the page 19 px wider at 360 px. */
@media (max-width: 420px) {
	.tgt-bf__dotlabel { white-space: normal; text-align: center; }
	.tgt-bf__dot:first-child .tgt-bf__dotlabel { text-align: left; }
	.tgt-bf__dot:last-child .tgt-bf__dotlabel { text-align: right; }
}
.tgt-bf__dot.is-now .tgt-bf__dotno { border-color: var(--bf-now-bg); background: var(--bf-now-bg); color: var(--bf-now-ink); box-shadow: 0 0 0 5px var(--bf-now-ring); }
.tgt-bf__dot.is-now .tgt-bf__dotlabel { color: var(--bf-ink); }
.tgt-bf__dot.is-done .tgt-bf__dotno { border-color: var(--bf-accent); color: var(--bf-accent-ink); }
.tgt-bf__dot.is-done .tgt-bf__dotbtn { cursor: pointer; }
.tgt-bf__dot.is-done .tgt-bf__dotbtn:hover .tgt-bf__dotno { background: var(--bf-soft); }

/* Without the script: every step shows, each under its own title. */
.tgt-bf:not(.is-js) .tgt-bf__progress,
.tgt-bf:not(.is-js) .tgt-bf__next,
.tgt-bf:not(.is-js) .tgt-bf__back,
.tgt-bf:not(.is-js) .tgt-bf__minus,
.tgt-bf:not(.is-js) .tgt-bf__plus,
.tgt-bf:not(.is-js) .tgt-bf__f--plan { display: none; }
.tgt-bf__legend { display: block; width: 100%; margin: 0 0 14px; padding: 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; color: var(--bf-ink); }
.tgt-bf__legendno { display: block; margin-bottom: 2px; font-family: "Trebuchet MS", Tahoma, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bf-accent-ink); }
.tgt-bf:not(.is-js) .tgt-bf__step + .tgt-bf__step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--bf-line); }
.tgt-bf.is-js .tgt-bf__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.tgt-bf.is-js:not(.is-ready) .tgt-bf__step ~ .tgt-bf__step { display: none; }
.tgt-bf.is-js.is-first .tgt-bf__back,
.tgt-bf.is-js:not(.is-last) .tgt-bf__send,
.tgt-bf.is-js.is-last .tgt-bf__next { display: none; }

/* ---------------------------------------------------------------- steps and questions */

.tgt-bf__step.is-fwd { animation: tgt-bf-fwd .38s cubic-bezier(.2, .7, .2, 1) both; }
.tgt-bf__step.is-bwd { animation: tgt-bf-bwd .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tgt-bf-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes tgt-bf-bwd { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.tgt-bf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.tgt-bf__f { grid-column: auto; min-width: 0; }
.tgt-bf__f.is-wide,
.tgt-bf__portnote { grid-column: 1 / -1; }
.tgt-bf__f.is-new { animation: tgt-bf-rise .32s ease both; }
@keyframes tgt-bf-rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.tgt-bf__lab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin: 0 0 8px;
	padding: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--bf-ink);
}
.tgt-bf__req { color: var(--bf-bad); }
.tgt-bf__req--if { display: none; }
.tgt-bf__f.is-required .tgt-bf__req--if { display: inline; }
.tgt-bf__sub { flex-basis: 100%; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--bf-mute); }
.tgt-bf__hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bf-mute); }
legend + .tgt-bf__hint { margin: -2px 0 10px; }
.tgt-bf__err { margin: 7px 0 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--bf-bad); }
.tgt-bf__f.is-shake { animation: tgt-bf-shake .36s ease; }
@keyframes tgt-bf-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.tgt-bf .tgt-bf__in {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid var(--bf-line);
	border-radius: 12px;
	background: var(--bf-field);
	color: var(--bf-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.35;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tgt-bf .tgt-bf__in::placeholder { color: var(--bf-mute); opacity: .75; }
.tgt-bf .tgt-bf__in:focus { border-color: var(--bf-accent); outline: 0; background: var(--bf-card); box-shadow: 0 0 0 4px var(--bf-ring); }
.tgt-bf textarea.tgt-bf__in { min-height: 104px; resize: vertical; }
.tgt-bf input[type="time"].tgt-bf__in { max-width: 220px; }
.tgt-bf__f.is-bad .tgt-bf__in,
.tgt-bf__f.is-bad .tgt-bf__datebtn,
.tgt-bf__f.is-bad .tgt-bf__stepper,
.tgt-bf__f.is-bad .tgt-bf__chipin { border-color: var(--bf-bad); }
.tgc--darkroom .tgt-bf input[type="time"].tgt-bf__in,
.tgc--darkroom .tgt-bf input[type="date"].tgt-bf__in { color-scheme: dark; }

/* ---------------------------------------------------------------- the date */

.tgt-bf .tgt-bf__datebtn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1.5px solid var(--bf-line);
	border-radius: 12px;
	background: var(--bf-field);
	color: var(--bf-ink);
	font-size: 16px;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.tgt-bf .tgt-bf__datebtn:hover { border-color: var(--bf-accent); }
.tgt-bf .tgt-bf__datebtn:focus-visible { border-color: var(--bf-accent); outline: 0; box-shadow: 0 0 0 4px var(--bf-ring); }
.tgt-bf__datebtn > svg { flex: none; color: var(--bf-accent-ink); }
.tgt-bf__dateval { flex: 1; min-width: 0; font-weight: 700; }
.tgt-bf__datebtn.is-empty .tgt-bf__dateval { font-weight: 400; color: var(--bf-mute); }
.tgt-bf__datechev { display: grid; flex: none; color: var(--bf-mute); transform: rotate(90deg); transition: transform .25s ease; }
.tgt-bf__f.is-open .tgt-bf__datechev { transform: rotate(-90deg); }
.tgt-bf__f.is-open .tgt-bf__datebtn { border-color: var(--bf-accent); }

.tgt-bf__cal {
	max-width: 380px;
	margin-top: 8px;
	padding: 14px 14px 10px;
	border: 1px solid var(--bf-line);
	border-radius: 16px;
	background: var(--bf-card);
	box-shadow: 0 16px 36px rgba(14, 22, 32, .13);
	animation: tgt-bf-drop .24s ease both;
}
@keyframes tgt-bf-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.tgt-bf__calhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tgt-bf__calmonth { font-family: Georgia, "Times New Roman", serif; font-size: 17px; color: var(--bf-ink); }
.tgt-bf .tgt-bf__calnav {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--bf-line);
	border-radius: 50%;
	background: var(--bf-card);
	color: var(--bf-ink);
	cursor: pointer;
}
.tgt-bf .tgt-bf__calnav:hover:not(:disabled) { border-color: var(--bf-accent); color: var(--bf-accent-ink); }
.tgt-bf .tgt-bf__calnav:disabled { opacity: .3; cursor: default; }
.tgt-bf__calgrid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tgt-bf__calgrid th { padding: 4px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; color: var(--bf-mute); }
.tgt-bf__calgrid td { padding: 2px; text-align: center; }
.tgt-bf .tgt-bf__day {
	display: inline-grid;
	place-items: center;
	width: 100%;
	max-width: 42px;
	aspect-ratio: 1;
	min-height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bf-ink);
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.tgt-bf .tgt-bf__day:hover:not(:disabled) { background: var(--bf-soft); }
.tgt-bf .tgt-bf__day:disabled { opacity: .3; cursor: default; }
.tgt-bf .tgt-bf__day.is-today { box-shadow: inset 0 0 0 1.5px var(--bf-accent); font-weight: 700; }
.tgt-bf .tgt-bf__day.is-picked { background: var(--bf-day-bg); color: var(--bf-day-ink); font-weight: 700; }
.tgt-bf .tgt-bf__day:focus-visible { outline: 3px solid var(--bf-ring); outline-offset: 1px; }

/* ---------------------------------------------------------------- counters */

.tgt-bf__stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border: 1.5px solid var(--bf-line);
	border-radius: 999px;
	background: var(--bf-field);
}
.tgt-bf .tgt-bf__minus,
.tgt-bf .tgt-bf__plus {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bf-card);
	color: var(--bf-ink);
	font-size: 21px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(14, 22, 32, .14);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tgt-bf .tgt-bf__plus { background: var(--bf-plus-bg); color: var(--bf-plus-ink); }
.tgt-bf .tgt-bf__minus:active:not(:disabled),
.tgt-bf .tgt-bf__plus:active:not(:disabled) { transform: scale(.92); }
.tgt-bf .tgt-bf__minus:disabled,
.tgt-bf .tgt-bf__plus:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tgt-bf .tgt-bf__stepper .tgt-bf__in {
	width: 50px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.tgt-bf .tgt-bf__stepper .tgt-bf__in::-webkit-outer-spin-button,
.tgt-bf .tgt-bf__stepper .tgt-bf__in::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.tgt-bf .tgt-bf__stepper:focus-within { border-color: var(--bf-accent); box-shadow: 0 0 0 4px var(--bf-ring); }
.tgt-bf__in.is-bump { animation: tgt-bf-bump .28s ease; }
@keyframes tgt-bf-bump { 40% { transform: scale(1.22); } }

/* ---------------------------------------------------------------- chips and cards */

.tgt-bf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tgt-bf__chip { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
.tgt-bf__chip input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tgt-bf__chipin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1.5px solid var(--bf-line);
	border-radius: 999px;
	background: var(--bf-field);
	color: var(--bf-ink);
	font-size: 14.5px;
	line-height: 1.25;
	transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tgt-bf__chipicon { display: grid; flex: none; color: var(--bf-accent-ink); }
.tgt-bf__chipicon .tgc-ico { width: 18px; height: 18px; }
.tgt-bf__chip:hover .tgt-bf__chipin { border-color: var(--bf-accent); }
.tgt-bf__chip input:focus-visible + .tgt-bf__chipin { box-shadow: 0 0 0 4px var(--bf-ring); }
.tgt-bf__chips .tgt-bf__chip input:checked + .tgt-bf__chipin { border-color: var(--bf-pick-line); background: var(--bf-pick-bg); color: var(--bf-pick-ink); box-shadow: inset 0 0 0 1px var(--bf-pick-line); }
.tgt-bf__chips .tgt-bf__chip input:checked + .tgt-bf__chipin .tgt-bf__chipicon { color: inherit; }
.tgt-bf__chips .tgt-bf__chip input[type="checkbox"] + .tgt-bf__chipin::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--bf-soft);
	color: var(--bf-accent-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}
.tgt-bf__chips .tgt-bf__chip input[type="checkbox"]:checked + .tgt-bf__chipin::before { content: "\2713"; background: rgba(255, 255, 255, .25); color: inherit; font-size: 11px; }
.tgt-bf__chip input:checked + .tgt-bf__chipin { animation: tgt-bf-pop .26s ease; }
@keyframes tgt-bf-pop { 50% { transform: scale(1.04); } }

.tgt-bf__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tgt-bf__cards .tgt-bf__chip { display: flex; }
.tgt-bf__cards .tgt-bf__chipin {
	position: relative;
	display: grid;
	flex: 1;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	align-items: center;
	gap: 3px 12px;
	min-height: 64px;
	padding: 13px 40px 13px 14px;
	border-radius: 14px;
	text-align: left;
}
.tgt-bf__chipbody { display: contents; }
.tgt-bf__cards .tgt-bf__chipbody { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.tgt-bf__cards .tgt-bf__chiptext { flex-basis: 100%; }
.tgt-bf__cards .tgt-bf__chipin:not(:has(.tgt-bf__chipicon)) { grid-template-columns: minmax(0, 1fr); }
.tgt-bf__cards .tgt-bf__chipicon {
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--bf-soft);
}
.tgt-bf__cards .tgt-bf__chiptext { font-size: 15px; font-weight: 700; line-height: 1.3; }
.tgt-bf__chipmeta { font-size: 12.5px; color: var(--bf-mute); }
.tgt-bf__chipmeta:empty { display: none; }
.tgt-bf__cards .tgt-bf__chipin::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 1.5px solid var(--bf-line);
	border-radius: 50%;
	background: var(--bf-card);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tgt-bf__cards .tgt-bf__chip input:checked + .tgt-bf__chipin { border-color: var(--bf-accent); background: var(--bf-soft); box-shadow: inset 0 0 0 1px var(--bf-accent); }
.tgt-bf__cards .tgt-bf__chip input:checked + .tgt-bf__chipin::after { border: 5px solid var(--bf-accent); background: var(--bf-card); }
.tgt-bf__cards .tgt-bf__chip.is-no .tgt-bf__chipin { opacity: .72; }

.tgt-bf__fit {
	justify-self: start;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
}
.tgt-bf__fit.is-fits { background: #e3f3ea; color: #1b6b43; }
.tgt-bf__fit.is-tight { background: #fdf0d5; color: #7d5300; }
.tgt-bf__fit.is-no { background: #eeeae2; color: #5f5a50; }
.tgc--darkroom .tgt-bf__fit.is-fits { background: rgba(80, 200, 140, .16); color: #8fe0b5; }
.tgc--darkroom .tgt-bf__fit.is-tight { background: rgba(240, 190, 90, .16); color: #f4cf86; }
.tgc--darkroom .tgt-bf__fit.is-no { background: rgba(255, 255, 255, .08); color: #b8b1a5; }

/* The excursion booked from its own page */
.tgt-bf__f--fixed {
	display: grid;
	gap: 3px;
	padding: 16px 18px;
	border: 1.5px solid var(--bf-accent);
	border-radius: 14px;
	background: var(--bf-soft);
}
.tgt-bf__fixedk { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bf-accent-ink); }
.tgt-bf__fixedname { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; color: var(--bf-ink); }
.tgt-bf__fixedsub { font-size: 13px; color: var(--bf-mute); }

/* ---------------------------------------------------------------- the ship */

.tgt-bf__combo { position: relative; display: block; }
.tgt-bf__shiplist {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 320px;
	margin: 0;
	padding: 6px;
	overflow: auto;
	border: 1px solid var(--bf-line);
	border-radius: 14px;
	background: var(--bf-card);
	box-shadow: 0 18px 40px rgba(14, 22, 32, .18);
	list-style: none;
}
.tgt-bf__shipopt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.tgt-bf__shipopt strong { font-size: 15px; color: var(--bf-ink); }
.tgt-bf__shipopt span { font-size: 12.5px; color: var(--bf-mute); }
.tgt-bf__shipopt:hover,
.tgt-bf__shipopt[aria-selected="true"] { background: var(--bf-soft); }
.tgt-bf__shipnone { padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--bf-mute); }
.tgt-bf__calls { margin-top: 14px; }
.tgt-bf__callshead { margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-mute); }
.tgt-bf__callrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tgt-bf .tgt-bf__call {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 14px;
	border: 1.5px solid var(--bf-line);
	border-radius: 12px;
	background: var(--bf-field);
	color: var(--bf-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.tgt-bf__call strong { font-size: 14.5px; }
.tgt-bf__call span { font-size: 12.5px; color: var(--bf-mute); }
.tgt-bf .tgt-bf__call:hover { border-color: var(--bf-accent); }
.tgt-bf .tgt-bf__call[aria-pressed="true"] { border-color: var(--bf-accent); background: var(--bf-soft); box-shadow: inset 0 0 0 1px var(--bf-accent); }
.tgt-bf__port,
.tgt-bf__portnote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--bf-soft);
	color: var(--bf-ink);
	animation: tgt-bf-rise .3s ease both;
}
.tgt-bf__portnote { justify-content: flex-start; margin-top: -4px; font-size: 14px; font-weight: 700; }
.tgt-bf__porttext { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; }
.tgt-bf__port svg,
.tgt-bf__portnote svg { flex: none; color: var(--bf-accent-ink); }
.tgt-bf .tgt-bf__portchange,
.tgt-bf .tgt-bf__rchange {
	flex: none;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--bf-link);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------------------------------------------------------------- a plan made on the page */

.tgt-bf__f--plan { padding: 14px 16px; border: 1.5px dashed var(--bf-line); border-radius: 14px; background: var(--bf-soft2); }
.tgt-bf__f--plan .tgt-bf__lab { margin-bottom: 6px; }
.tgt-bf__planlist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tgt-bf__planlist li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.tgt-bf__planlist li::before { content: ""; position: absolute; top: .55em; left: 2px; width: 7px; height: 7px; border-radius: 2px; background: var(--bf-accent); transform: rotate(45deg); }
.tgt-bf__planempty { font-size: 14px; line-height: 1.5; color: var(--bf-mute); }
.tgt-bf__planempty a { color: var(--bf-link); font-weight: 700; }

/* ---------------------------------------------------------------- the review */

.tgt-bf__review {
	margin: 0 0 20px;
	padding: 14px 16px 6px;
	border: 1.5px dashed var(--bf-line);
	border-radius: 14px;
	background: var(--bf-soft2);
	animation: tgt-bf-rise .32s ease both;
}
.tgt-bf__reviewtitle { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.tgt-bf__reviewk { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bf-accent-ink); }
.tgt-bf__reviewtour { font-family: Georgia, "Times New Roman", serif; font-size: 16px; color: var(--bf-ink); }
.tgt-bf__reviewlist { margin: 0; }
.tgt-bf__rrow { padding: 9px 0; border-top: 1px solid var(--bf-line); }
.tgt-bf__rrow dt { font-size: 11.5px; letter-spacing: .04em; color: var(--bf-mute); }
.tgt-bf__rrow dd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 2px 0 0; }
.tgt-bf__rval { font-size: 14.5px; font-weight: 700; line-height: 1.45; }

/* ---------------------------------------------------------------- buttons, WhatsApp, promise */

.tgt-bf__nav { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.tgt-bf .tgt-bf__next,
.tgt-bf .tgt-bf__send {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--bf-accent);
	color: var(--bf-on);
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 12px 26px var(--bf-shadow);
	cursor: pointer;
	transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.tgt-bf .tgt-bf__next:hover,
.tgt-bf .tgt-bf__send:hover { filter: brightness(1.06); transform: translateY(-2px); }
.tgt-bf .tgt-bf__next .tgc-ico,
.tgt-bf .tgt-bf__send .tgc-ico { width: 18px; height: 18px; transition: transform .2s ease; }
.tgt-bf .tgt-bf__next:hover .tgc-ico,
.tgt-bf .tgt-bf__send:hover .tgc-ico { transform: translateX(3px); }
.tgt-bf .tgt-bf__back {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 14px 20px;
	border: 1.5px solid var(--bf-line);
	border-radius: 999px;
	background: var(--bf-card);
	color: var(--bf-ink);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.tgt-bf .tgt-bf__back .tgc-ico { width: 17px; height: 17px; transform: rotate(180deg); }
.tgt-bf .tgt-bf__back:hover { border-color: var(--bf-accent); }
.tgt-bf.is-sending .tgt-bf__send { cursor: progress; filter: saturate(.7); transform: none; }
.tgt-bf.is-sending .tgt-bf__send .tgc-ico { animation: tgt-bf-go 1s ease-in-out infinite; }
@keyframes tgt-bf-go { 50% { transform: translateX(5px); } }
.tgt-bf:not(.is-js) .tgt-bf__nav { margin-top: 26px; }

.tgt-bf__alt { margin-top: 24px; text-align: center; }
.tgt-bf__wa { display: inline-flex; align-items: center; gap: 8px; color: #0f7a3d; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.tgt-bf__wa:hover { color: #0b5f2f; text-decoration: underline; text-underline-offset: 3px; }
.tgt-bf__wa svg { width: 18px; height: 18px; fill: currentColor; }
.tgc--darkroom .tgt-bf__wa { color: #5ee08f; }
.tgt-bf__promise { margin-top: 10px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--bf-mute); }

.tgt-bf__errors { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: var(--bf-bad-soft); color: var(--bf-bad); font-size: 14.5px; font-weight: 700; }
.tgt-bf__errors p + p { margin-top: 4px; }

/* ---------------------------------------------------------------- the tour page's card */

.tgt-tp-card .tgt-bf .tgt-bf__next,
.tgt-tp-card .tgt-bf .tgt-bf__send { background: linear-gradient(135deg, #e0c475 0%, #c8a44a 60%, #b8963b 100%); color: #0e1620; box-shadow: 0 8px 20px rgba(200, 164, 74, .32); }
.tgt-tp-card .tgt-bf__progress { margin-bottom: 20px; }
.tgt-tp-card .tgt-bf__promise { color: #8a8375; }
@media (min-width: 1025px) {
	/* The card is pinned and scrolls inside itself: its buttons stay in view at its foot. */
	.tgt-tp-card .tgt-bf__nav {
		position: sticky;
		bottom: -26px;
		z-index: 3;
		margin: 18px -26px 0;
		padding: 12px 26px 18px;
		background: #fff;
		box-shadow: 0 -12px 14px -12px rgba(14, 22, 32, .14);
	}
}

/* ---------------------------------------------------------------- narrow: the tour card, phones */

@container bf (max-width: 440px) {
	.tgt-bf__grid { gap: 16px 12px; }
	.tgt-bf__f:not(.tgt-bf__f--count):not(.tgt-bf__f--time) { grid-column: 1 / -1; }
	.tgt-bf__cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.tgt-bf__cards .tgt-bf__chipin { min-height: 56px; }
	.tgt-bf__cards .tgt-bf__chipin:not(:has(.tgt-bf__chipicon)) { min-height: 50px; padding-top: 11px; padding-bottom: 11px; }
	.tgt-bf__cards .tgt-bf__chipin:not(:has(.tgt-bf__chipicon)) .tgt-bf__chiptext { font-size: 14.5px; }
	.tgt-bf__stepper { gap: 2px; padding: 4px; }
	.tgt-bf .tgt-bf__minus,
	.tgt-bf .tgt-bf__plus { width: 38px; height: 38px; }
	.tgt-bf .tgt-bf__stepper .tgt-bf__in { width: 40px; }
	.tgt-bf .tgt-bf__back { justify-content: center; width: 56px; height: 56px; padding: 0; }
	.tgt-bf .tgt-bf__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.tgt-bf .tgt-bf__next,
	.tgt-bf .tgt-bf__send { min-width: 0; padding: 14px 16px; font-size: 15px; line-height: 1.25; }
	.tgt-bf.is-js:not(.is-first) .tgt-bf__send .tgc-ico { display: none; }
	.tgt-bf__cal { max-width: none; padding: 12px 8px 8px; }
	.tgt-bf__chipin { padding: 9px 14px; font-size: 14px; }
}
@container bf (max-width: 360px) {
	.tgt-bf__dot:not(.is-now) .tgt-bf__dotlabel { visibility: hidden; }
}

@media (max-width: 760px) {
	.tgc-booking__form .tgt-bf { padding: 22px 18px 20px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.tgt-bf *,
	.tgt-bf *::before,
	.tgt-bf *::after { animation: none !important; transition: none !important; }
}