/*
 * Booking panel.
 *
 * WHY THIS WAS REWRITTEN AGAIN. The panel carried its own complete design
 * system - navy gradient header, gold buttons, Cairo, a four-colour brand
 * stripe - and the tour page it sits inside carries a different one: warm
 * paper, teal, sand, Georgia headings. Both were fine alone; stacked, the
 * booking box read as an advert pasted into someone else's page, which is
 * exactly the thing a traveller is right not to trust.
 *
 * So the panel no longer declares a palette. It declares the ROLES it needs -
 * accent, ink, line, field - and fills each from the host's token if the host
 * has one, falling back to a value of its own if it does not. A V3 tour page
 * hands it teal and sand; a V2 page, a bare page, or a shortcode dropped in a
 * post hands it nothing and it looks like itself. `var(--x, fallback)` does
 * this natively, so the plugin still depends on no theme.
 *
 * LOGICAL PROPERTIES ONLY. Arabic is a first-class language on this site, and
 * every physical `left`/`right` in here was a bug waiting for an Arabic reader.
 */
.thtour-booking {
	/* roles, resolved from the host's design tokens where they exist */
	--thtour-accent: var(--thv3-teal, #0e7a6c);
	--thtour-accent-dark: var(--thv3-teal-dark, #0a5f54);
	--thtour-accent-soft: color-mix(in srgb, var(--thtour-accent) 8%, #fff);
	--thtour-ink: var(--thv3-ink, #14202b);
	--thtour-muted: var(--thv3-muted, #5b6771);
	--thtour-line: var(--thv3-line, #e2ddd4);
	--thtour-focus: var(--thv3-sand, #e8c87e);
	--thtour-ok: var(--thv3-ok, #1a7a4a);
	--thtour-warn: var(--thv3-coral, #c24e42);
	--thtour-card: var(--thv3-card, #fff);
	--thtour-field: color-mix(in srgb, var(--thtour-line) 22%, #fff);
	--thtour-radius: var(--thv3-radius, 14px);
	--thtour-display: var(--thv3-display, Georgia, "Times New Roman", serif);

	background: var(--thtour-card);
	border: 1px solid var(--thtour-line);
	border-radius: var(--thtour-radius);
	box-shadow: var(--thv3-shadow, 0 10px 30px rgb(20 32 43 / .08));
	box-sizing: border-box;
	color: var(--thtour-ink);
	display: block;
	max-inline-size: 100%;
	padding: 22px;
}

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

/*
 * color-mix is not everywhere yet, and a browser that drops the declaration
 * would leave those two roles unset and inherit something arbitrary. Named
 * again as plain colours first, so the cascade always has an answer.
 */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.thtour-booking {
		--thtour-accent-soft: #eef5f3;
		--thtour-field: #f8f7f4;
	}
}

/* ------------------------------------------------------------------ header */

.thtour-booking__head {
	margin-block-end: 18px;
}

/*
 * The price leads, because it is the one thing every visitor is looking for
 * and the only thing here that is already known. It is set in the host's
 * display face so it reads as part of the page rather than as a plugin's idea
 * of a price tag.
 */
.thtour-booking__from {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 6px;
}

.thtour-booking__from-lead,
.thtour-booking__basis {
	color: var(--thtour-muted);
	font-size: 0.85rem;
}

.thtour-booking__amount {
	/* An amount is a number: it stays left-to-right inside Arabic text, and
	   isolated so the currency symbol cannot be reordered around it. */
	direction: ltr;
	font-family: var(--thtour-display);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.1;
	unicode-bidi: isolate;
}

.thtour-booking__title {
	color: inherit;
	font-family: var(--thtour-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0;
	text-transform: none;
}

.thtour-booking__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.thtour-booking__facts li {
	background: var(--thtour-accent-soft);
	border-radius: 999px;
	color: var(--thtour-ink);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 5px 12px;
}

/* ------------------------------------------------------------------ fields */

.thtour-booking__form,
.thtour-booking__fields {
	display: grid;
	gap: 14px;
}

.thtour-field {
	display: grid;
	gap: 6px;
	min-inline-size: 0;
}

.thtour-field > span,
.thtour-party > legend,
.thtour-extras legend {
	color: var(--thtour-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .03em;
}

/* One rule for every control, which is what the start-time select once missed. */
.thtour-booking input[type="date"],
.thtour-booking input[type="number"],
.thtour-booking input[type="text"],
.thtour-booking select {
	appearance: none;
	background: var(--thtour-field);
	border: 1.5px solid var(--thtour-line);
	border-radius: 10px;
	color: var(--thtour-ink);
	font: inherit;
	font-size: 1rem;
	inline-size: 100%;
	/* 48px: comfortably past the 44px floor even with a host that shrinks the
	   font, and large enough that a thumb on a phone never misses. */
	min-block-size: 48px;
	padding: 12px 13px;
}

.thtour-booking input[type="number"] {
	/* A party size is a number and reads left-to-right in every language. */
	direction: ltr;
	text-align: start;
}

.thtour-booking select {
	/* The arrow the appearance reset removed. Inlined because the CSP on this
	   site blocks external images, and a data URI keeps it self-contained. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6771' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 11px 7px;
	padding-inline-end: 36px;
}

[dir="rtl"] .thtour-booking select {
	background-position: left 14px center;
}

.thtour-booking input:hover,
.thtour-booking select:hover {
	border-color: color-mix(in srgb, var(--thtour-accent) 40%, var(--thtour-line));
}

/*
 * The focus ring must be VISIBLE, which means it must pass contrast, which the
 * inherited sand did not: #e8c87e on the card's white is 1.61:1 against a 3:1
 * requirement. It reads as decoration on a light card and disappears entirely
 * for anyone who needs it most.
 *
 * Two rings instead of one: a dark inner edge that carries the contrast, and
 * the host's sand outside it so the indicator still looks like this page's.
 * The doubled class raises specificity over the theme's own `.thv3
 * :focus-visible`, which would otherwise win purely on load order.
 */
.thtour-booking.thtour-booking :focus-visible {
	outline: 2px solid var(--thtour-accent-dark);
	outline-offset: 1px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--thtour-focus) 70%, transparent);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.thtour-booking.thtour-booking :focus-visible {
		box-shadow: 0 0 0 5px var(--thtour-focus);
	}
}

/* --------------------------------------------------------------- the party */

/*
 * A fieldset, because adults + children + infants are one answer to one
 * question and the server bounds them as one. Reset hard: a browser's default
 * fieldset border and legend positioning would put a box inside the card for
 * no reason a visitor could name.
 */
.thtour-party {
	border: 0;
	display: grid;
	gap: 8px;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.thtour-party > legend {
	display: block;
	float: none;
	inline-size: 100%;
	margin: 0;
	padding: 0;
}

.thtour-party__grid {
	display: grid;
	gap: 10px;
	/* auto-fit with a floor, so one, two or three bands each fill the row and
	   none of them is ever narrower than a thumb. */
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.thtour-field__note {
	color: var(--thtour-muted);
	font-size: 0.8rem;
	line-height: 1.5;
	margin: 0;
}

/* --------------------------------------------------------------- QMS extras */

.thtour-extras {
	border: 0;
	display: grid;
	gap: 10px;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.thtour-extra-group {
	display: grid;
	gap: 10px;
}

.thtour-required {
	color: var(--thtour-accent);
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 700;
	margin-inline-start: 6px;
	text-transform: uppercase;
}

.thtour-extra-guests {
	background: var(--thtour-field);
	border: 1px solid var(--thtour-line);
	border-radius: 10px;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	padding: 12px;
}

.thtour-extra-guests[hidden] {
	display: none;
}

.thtour-qms-options:empty {
	display: none;
}

.thtour-options__heading {
	color: var(--thtour-muted);
	font-size: 0.78rem;
	font-weight: 700;
	margin: 0 0 6px;
}

.thtour-options__addon {
	align-items: center;
	background: var(--thtour-field);
	border: 1px solid var(--thtour-line);
	border-radius: 10px;
	display: flex;
	font-size: 0.92rem;
	gap: 10px;
	margin-block-end: 6px;
	min-block-size: 44px;
	padding: 10px 12px;
}

.thtour-options__addon input {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
}

/* ---------------------------------------------------------------- the total */

.thtour-quote {
	background: var(--thtour-field);
	border: 1px solid var(--thtour-line);
	border-radius: 12px;
	display: grid;
	gap: 4px;
	padding: 14px 16px;
}

.thtour-quote__row {
	align-items: baseline;
	column-gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 2px;
}

.thtour-quote__label {
	color: var(--thtour-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .03em;
}

/*
 * A real price is the headline. A sentence standing in for one is not: the
 * placeholder sets its own quieter size, so an empty panel stops shouting
 * "Select a date" louder than the tour itself.
 */
.thtour-quote__total {
	color: var(--thtour-ink);
	direction: ltr;
	font-family: var(--thtour-display);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: end;
	unicode-bidi: isolate;
}

.thtour-quote__total[data-thtour-placeholder] {
	color: var(--thtour-muted);
	direction: inherit;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.45;
	max-inline-size: 60%;
	text-align: end;
	unicode-bidi: normal;
}

.thtour-quote__note {
	color: var(--thtour-muted);
	font-size: 0.82rem;
	line-height: 1.5;
	margin: 0;
}

/* ------------------------------------------------------------- the states
 *
 * One attribute on the root, written by booking.js, decides how the panel
 * looks. The script sets display state and nothing else: no amount, no
 * capacity and no party rule is decided here or there.
 */

/* Checking. A steady pulse on the total, not a spinner that moves the layout. */
.thtour-booking[data-thtour-state="loading"] .thtour-quote__total {
	animation: thtour-pulse 1.1s ease-in-out infinite;
}

@keyframes thtour-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

/* Priced. The one state where the total is the loudest thing in the card. */
.thtour-booking[data-thtour-state="priced"] .thtour-quote {
	background: var(--thtour-accent-soft);
	border-color: color-mix(in srgb, var(--thtour-accent) 32%, var(--thtour-line));
}

.thtour-booking[data-thtour-state="priced"] .thtour-quote__total {
	color: var(--thtour-accent-dark);
	font-size: 2rem;
}

.thtour-booking[data-thtour-state="priced"] .thtour-quote__note {
	color: var(--thtour-ok);
	font-weight: 600;
}

/* Refused: honest, quiet, and never dressed up as a failure of the visitor's. */
.thtour-booking[data-thtour-state="refused"] .thtour-quote {
	border-color: color-mix(in srgb, var(--thtour-warn) 28%, var(--thtour-line));
}

/*
 * Honestly unavailable. Distinct from BOTH neighbours on purpose:
 *
 *   - not the accent of a price, because there is nothing to buy;
 *   - not the warning edge of a broken service, because nothing is broken
 *     and the visitor has done nothing wrong.
 *
 * A calm, factual panel. The date is gone; the tour is fine; pick another.
 */
.thtour-booking[data-thtour-state="soldout"] .thtour-quote {
	background: var(--thtour-field);
	border-color: var(--thtour-muted);
}

.thtour-booking[data-thtour-state="soldout"] .thtour-quote__total {
	color: var(--thtour-ink);
	font-size: 1.05rem;
	font-weight: 700;
}

.thtour-booking[data-thtour-state="soldout"] .thtour-quote__note {
	color: var(--thtour-ink);
}

/* Broken service. Amber-edged and explicit; this is the state that must never
   be mistaken for "sold out", so it gets its own look and its own escape. */
.thtour-booking[data-thtour-state="error"] .thtour-quote {
	background: color-mix(in srgb, var(--thtour-warn) 6%, #fff);
	border-color: color-mix(in srgb, var(--thtour-warn) 38%, var(--thtour-line));
}

.thtour-booking__escape {
	background: color-mix(in srgb, var(--thtour-warn) 6%, #fff);
	border-radius: 10px;
	border-inline-start: 4px solid var(--thtour-warn);
	color: var(--thtour-ink);
	display: grid;
	font-size: 0.86rem;
	gap: 8px;
	justify-items: start;
	line-height: 1.55;
	margin: 0;
	padding: 12px 14px;
}

.thtour-booking__escape[hidden] {
	display: none;
}

.thtour-booking__escape-link {
	color: var(--thtour-accent-dark);
	font-weight: 700;
	min-block-size: 44px;
	align-content: center;
	display: grid;
}

/* --------------------------------------------------------------- the buttons */

.thtour-booking__actions {
	display: grid;
	gap: 10px;
}

.thtour-button {
	align-items: center;
	border: 1.5px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	inline-size: 100%;
	justify-content: center;
	min-block-size: 50px;
	padding: 13px 18px;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.thtour-button[hidden] {
	display: none;
}

/*
 * The check is the primary action, because checking is what the panel is for
 * and what its heading promises. It is the only button on screen until there
 * is a price, at which point it steps back and Book now takes the accent.
 */
.thtour-button--quote {
	background: var(--thtour-accent);
	border-color: var(--thtour-accent);
	color: #fff;
}

.thtour-button--quote:hover:not(:disabled) {
	background: var(--thtour-accent-dark);
	border-color: var(--thtour-accent-dark);
	color: #fff;
}

.thtour-booking[data-thtour-state="priced"] .thtour-button--quote {
	background: transparent;
	border-color: var(--thtour-line);
	color: var(--thtour-muted);
}

.thtour-booking[data-thtour-state="priced"] .thtour-button--quote:hover:not(:disabled) {
	background: var(--thtour-field);
	border-color: var(--thtour-accent);
	color: var(--thtour-accent-dark);
}

.thtour-button--book {
	background: var(--thtour-accent);
	border-color: var(--thtour-accent);
	color: #fff;
	order: -1; /* once it exists, it is the first thing under the total */
}

.thtour-button--book:hover:not(:disabled) {
	background: var(--thtour-accent-dark);
	border-color: var(--thtour-accent-dark);
	color: #fff;
}

.thtour-button--group {
	background: transparent;
	border-color: var(--thtour-accent);
	color: var(--thtour-accent-dark);
}

/*
 * A disabled button must look unavailable rather than merely faded: an accent
 * button at 50% opacity still reads as the thing to press, which is how a
 * visitor ends up clicking a control that cannot act yet.
 */
.thtour-button:disabled {
	background: #eef1f4;
	border-color: transparent;
	color: #93a1ac;
	cursor: not-allowed;
	opacity: 1;
}

/* ----------------------------------------------------------- reassurance */

/*
 * Three short facts rather than one sentence naming our software vendor.
 * Nothing about cancellation is claimed here: a cancellation policy belongs
 * to the tour, and the panel does not know it.
 */
ul.thtour-booking__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.thtour-booking__trust li {
	color: var(--thtour-muted);
	font-size: 0.78rem;
	line-height: 1.5;
	padding-inline-start: 16px;
	position: relative;
}

ul.thtour-booking__trust li::before {
	color: var(--thtour-accent);
	content: "\2713";
	font-weight: 800;
	inset-inline-start: 0;
	position: absolute;
}

/* A refused checkout, stated where the button was pressed. */
.thtour-booking__refused {
	background: color-mix(in srgb, var(--thtour-warn) 8%, #fff);
	border-inline-start: 4px solid var(--thtour-warn);
	border-radius: 10px;
	color: var(--thtour-ink);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0 0 16px;
	padding: 13px 15px;
}

/* ------------------------------------------------------ the larger group */

.thtour-booking__larger {
	border-block-start: 1px solid var(--thtour-line);
	display: grid;
	gap: 8px;
	justify-items: start;
	margin-block-start: 18px;
	padding-block-start: 16px;
}

.thtour-booking__larger h3 {
	color: inherit;
	font-family: var(--thtour-display);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.thtour-booking__larger p {
	color: var(--thtour-muted);
	font-size: 0.86rem;
	line-height: 1.55;
	margin: 0;
}

/* --------------------------------------------------------------- viewport */

/*
 * 375px is the contract. Nothing here has a minimum width wider than a phone,
 * the party grid collapses on its own through auto-fit, and every control is
 * already full-bleed - so the only thing the narrow case needs is a little
 * less padding, not a different layout.
 */
@media (max-width: 420px) {
	.thtour-booking {
		padding: 18px 16px;
	}

	.thtour-booking__amount {
		font-size: 1.7rem;
	}

	.thtour-quote__total[data-thtour-placeholder] {
		max-inline-size: 100%;
		text-align: start;
	}

	.thtour-quote__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.thtour-quote__total {
		text-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.thtour-button {
		transition: none;
	}

	.thtour-booking[data-thtour-state="loading"] .thtour-quote__total {
		animation: none;
		opacity: .6;
	}
}