/*
 * Booking panel.
 *
 * Rewritten for the Travel Hub palette and a layout that reads as one column of
 * decisions. What was wrong before:
 *
 *   - a three-column grid where only two fields ever sat side by side, so every
 *     row left a dead third column and the controls looked squeezed against it;
 *   - `select` had no rule at all outside the extras block, so the start-time
 *     control rendered as a raw browser dropdown next to styled inputs;
 *   - the total block shouted a placeholder sentence at 24px, making "Select a
 *     date to see the price" the loudest thing in the panel;
 *   - teal and amber that belong to no other surface on the site.
 *
 * Colours here are the site's own brand values, restated locally because the
 * plugin cannot depend on the theme's tokens being present.
 */
.thtour-booking {
	--thtour-navy: #083f78;
	--thtour-deep: #051c33;
	--thtour-gold: #f6a800;
	--thtour-teal: #13a589;
	--thtour-ink: #14283c;
	--thtour-muted: #5f7080;
	--thtour-line: #dce6ed;
	--thtour-field: #f7fafc;
	background: #fff;
	border: 1px solid var(--thtour-line);
	border-radius: 14px;
	box-shadow: 0 24px 64px rgb(5 28 51 / .12);
	color: var(--thtour-ink);
	font-family: Cairo, "Nunito Sans", Arial, sans-serif;
	overflow: hidden;
}

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

.thtour-booking__head {
	background: linear-gradient(160deg, var(--thtour-navy), var(--thtour-deep));
	color: #fff;
	padding: 22px 22px 24px;
}

.thtour-booking__head h2 {
	color: inherit;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 6px 0 8px;
}

.thtour-booking__head p {
	color: rgb(255 255 255 / .82);
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

.thtour-booking__eyebrow {
	color: var(--thtour-gold);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: .09em;
	margin: 0;
	text-transform: uppercase;
}

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

.thtour-booking__form {
	display: grid;
	gap: 16px;
	/* Two columns, so a pair of short fields fills the row instead of leaving
	   a permanently empty third track. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 22px;
}

.thtour-field {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.thtour-field--wide,
.thtour-extras,
.thtour-quote,
.thtour-button,
.thtour-booking__trust,
.thtour-booking__refused,
.thtour-qms-options {
	grid-column: 1 / -1;
}

.thtour-field > span,
.thtour-extras legend {
	color: var(--thtour-muted);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* One rule for every control, which is what the start-time select was missing. */
.thtour-field input,
.thtour-field select,
.thtour-extras select {
	appearance: none;
	background: var(--thtour-field);
	border: 1px solid var(--thtour-line);
	border-radius: 10px;
	box-sizing: border-box;
	color: var(--thtour-ink);
	font: inherit;
	font-size: 0.97rem;
	min-height: 50px;
	padding: 11px 13px;
	width: 100%;
}

/* The arrow the appearance reset removed. Inlined because the CSP on this
   site blocks external images, and a data URI keeps it self-contained. */
.thtour-field select,
.thtour-extras select {
	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='%235f7080' 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-field select,
[dir="rtl"] .thtour-extras select {
	background-position: left 14px center;
}

.thtour-field input:focus-visible,
.thtour-field select:focus-visible,
.thtour-extras select:focus-visible,
.thtour-button:focus-visible {
	border-color: var(--thtour-navy);
	outline: 3px solid rgb(8 63 120 / .28);
	outline-offset: 1px;
}

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

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

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

.thtour-extras .thtour-field {
	display: grid;
	gap: 7px;
}

.thtour-required {
	color: var(--thtour-teal);
	font-style: normal;
	font-size: 0.72rem;
	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(3, minmax(0, 1fr));
	padding: 12px;
}

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

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

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

.thtour-quote {
	align-items: baseline;
	background: var(--thtour-field);
	border: 1px solid var(--thtour-line);
	border-radius: 12px;
	column-gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 16px 18px;
	row-gap: 4px;
}

.thtour-quote__label {
	color: var(--thtour-muted);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * A real price is the headline. A placeholder is not: it sets its own smaller,
 * quieter size so an empty state stops competing with the tour itself.
 */
.thtour-quote__total {
	color: var(--thtour-navy);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: end;
}

.thtour-quote__total[data-thtour-placeholder] {
	color: var(--thtour-muted);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	max-width: 60%;
}

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

.thtour-button {
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	min-height: 52px;
	padding: 12px 18px;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.thtour-button--quote {
	background: #fff;
	border-color: var(--thtour-navy);
	color: var(--thtour-navy);
}

.thtour-button--quote:hover:not(:disabled) {
	background: #eef4fb;
}

.thtour-button--book {
	background: var(--thtour-gold);
	color: #3a2600;
}

.thtour-button--book:hover:not(:disabled) {
	background: #e39a00;
}

.thtour-button:active:not(:disabled) {
	transform: translateY(1px);
}

/*
 * A disabled button must look unavailable rather than merely faded - the gold
 * button at 50% opacity still read 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;
}

.thtour-booking__trust {
	color: var(--thtour-muted);
	font-size: 0.78rem;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* A refused checkout, stated where the button was pressed. */
.thtour-booking__refused {
	background: #fdf0f0;
	border-inline-start: 4px solid #b32d2e;
	border-radius: 10px;
	color: #7a1d1e;
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 22px 22px 0;
	padding: 13px 15px;
}

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

@media (max-width: 560px) {
	.thtour-booking__form {
		grid-template-columns: 1fr;
	}

	.thtour-field,
	.thtour-field--wide {
		grid-column: 1;
	}

	.thtour-extra-guests {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The declared rate, shown before anything is asked of the visitor. */
.thtour-booking__from {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 10px 0 6px;
}

.thtour-booking__from strong {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
}

.thtour-booking__from span {
	color: rgb(255 255 255 / .82);
	font-size: 0.86rem;
}

/* Reassurance, as three short facts rather than one sentence naming software. */
ul.thtour-booking__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	justify-content: center;
	list-style: none;
	margin: 2px 0 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-teal);
	content: "\2713";
	font-weight: 800;
	inset-inline-start: 0;
	position: absolute;
}

/* What a visitor asks before picking a date: how long, and how many of us. */
.thtour-booking__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.thtour-booking__facts li {
	color: rgb(255 255 255 / .88);
	font-size: 0.86rem;
	line-height: 1.5;
	padding-inline-start: 15px;
	position: relative;
}

.thtour-booking__facts li::before {
	background: var(--thtour-gold);
	border-radius: 50%;
	content: "";
	height: 5px;
	inset-block-start: .55em;
	inset-inline-start: 0;
	position: absolute;
	width: 5px;
}

/* ---------------------------------------------------------------- the brand
 *
 * The panel was navy and gold, which is the palette, but nothing about it said
 * whose site it was. The logo is a ring of coloured dots, and the home rails
 * already use that same sequence for their indicators - so the panel picks it
 * up too. It is one line of colour, not decoration for its own sake: a booking
 * box that looks like every other booking box gives a visitor no reason to
 * believe they are dealing with a named local operator rather than a reseller.
 */
.thtour-booking__head {
	position: relative;
}

.thtour-booking__head::after {
	background: linear-gradient(
		90deg,
		#f0a800 0 25%,
		#0084cc 25% 50%,
		#0c9c84 50% 75%,
		#e46c18 75% 100%
	);
	bottom: 0;
	content: "";
	height: 4px;
	inset-inline: 0;
	position: absolute;
}

/* Tightened for the shorter copy: with the repeated subtitle gone the header
   was carrying empty space where a paragraph used to be. */
.thtour-booking__head {
	padding: 20px 22px 22px;
}

.thtour-booking__head h2 {
	font-size: 1.25rem;
	margin: 4px 0 10px;
}

.thtour-booking__from {
	margin: 0 0 8px;
}

.thtour-booking__facts {
	margin-bottom: 0;
}