/**
 * The booking page, where Book Now lands.
 *
 * Enqueued only on the page carrying [ct_booking_summary], so it costs nothing
 * anywhere else.
 *
 * Scoped under .ct-book. Unlike the tour page this is NOT inside .ct-itin, so it
 * cannot borrow that page's design tokens. It declares its own, using the same
 * palette values so the two pages look like one site.
 *
 * @package CustomTours
 */

/*
 * THE RESET THIS PAGE DOES NOT OTHERWISE GET.
 *
 * Elementor's is scoped to .elementor, and this is the one page rendered
 * outside it, so nothing here is border-box by default: a field at
 * width:100% with 12px of padding is 24px wider than the column holding it,
 * and enough of those push the page sideways. Individual rules were being
 * given box-sizing one at a time - see .ct-book__btn, which says so.
 *
 * SCOPED TO .ct-book RATHER THAN THE PAGE. The header and footer sit outside
 * .elementor on every page, not only this one, so they have always been
 * content-box and are built for it. Resetting them here and nowhere else
 * would make this page's header the odd one out.
 */
.ct-book,
.ct-book *,
.ct-book *::before,
.ct-book *::after {
	box-sizing: border-box;
}

.ct-book {
	--b-blue: #1689CF;
	--b-orange: #F68B2D;
	--b-dark: #1A1A1A;
	--b-muted: #6B7280;
	--b-border: #E5E8EC;
	--b-gray: #F5F7FA;
	--b-green: #1F9D55;

	max-width: 1320px;
	margin: 40px auto;
	padding: 8px 20px 40px;
	font-family: 'Inter', sans-serif;
	color: var(--b-dark);
	/* The theme sets no body line-height on this template either, so type would
	   fall back to the UA's ~1.2 and read cramped. */
	line-height: 1.6;
}

/*
 * Summary left, form right. The summary comes first in the DOM because it is what
 * the visitor needs to check before they start typing.
 *
 * The form column is given the larger share: the summary is read once, while the
 * form is worked through field by field, and its two-up name/email row needs the
 * width more than a list of dates does.
 */
.ct-book__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 28px;
	align-items: start;
}

.ct-book__summary,
.ct-book__form-wrap,
.ct-book__empty {
	/*
	 * A grid item will not shrink below its min-content width unless it is
	 * told it may. The floor on the track stops the track growing; this
	 * stops the box inside it refusing to fit.
	 */
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--b-border);
	border-radius: 14px;
	background: #fff;
	padding: 22px;
}

.ct-book__empty {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.ct-book__h {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 16px;
	color: var(--b-dark);
}

/* ---------- the tour being booked ---------- */

/*
 * A full-width picture rather than the small square thumbnail this used to have.
 * The summary column is now long, with dates, hotels, day-by-day and inclusions,
 * and it needs something at the top that says which tour this is at a glance.
 *
 * It shows for any tour with a picture anywhere. See
 * includes/tour-image-fallback.php: no tour on this site has a featured image,
 * so without that fallback this element never rendered at all.
 */
.ct-book__hero {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	background: var(--b-gray);
	margin-bottom: 14px;
}

.ct-book__title {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: anywhere;
}

.ct-book__title a {
	color: var(--b-dark);
	text-decoration: none;
}

.ct-book__title a:hover { color: var(--b-blue); }

.ct-book__dur {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--b-muted);
}

/*
 * Headings for the tour's own detail: what it includes, the days, what is in the
 * price. Quiet on purpose, so they separate the blocks without competing with the
 * tour name above or the total below.
 */
.ct-book__sub {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--b-muted);
	margin: 18px 0 4px;
	padding-top: 16px;
	border-top: 1px solid var(--b-border);
}

/* ---------- the selection ---------- */

/* A <dl>, because this is genuinely a list of term/value pairs. */
.ct-book__rows {
	margin: 4px 0 0;
	padding: 0;
}

.ct-book__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--b-border);
}

.ct-book__row:last-of-type { border-bottom: 0; }

.ct-book__row dt {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13px;
	color: var(--b-muted);
}

.ct-book__row dd {
	/* min-width:0 keeps a long pickup sentence inside the card. */
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

/* ---------- day by day, and what is included ---------- */

.ct-book__days {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-book__days li {
	display: flex;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--b-border);
	font-size: 13.5px;
	line-height: 1.45;
}

.ct-book__days li:last-child { border-bottom: 0; }

.ct-book__daynum {
	/* Fixed rail so the titles line up however many digits the day number has. */
	flex: 0 0 auto;
	min-width: 48px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--b-blue);
	line-height: 1.55;
}

.ct-book__daytitle {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ct-book__incl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-book__incl li {
	padding: 5px 0;
	font-size: 13.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* ---------- money ---------- */

/* Set apart from the tour detail above it: this is the part being agreed to. */
.ct-book__money {
	margin-top: 18px;
	padding-top: 6px;
	border-top: 2px solid var(--b-border);
}

/*
 * A referral discount.
 *
 * Green, and the only negative number on the page, because a discount that is
 * styled like every other row is one the customer scrolls past and then writes in
 * to ask about. The minus sign is in the markup rather than drawn here: it is part
 * of the figure, and a screen reader should read it.
 */
.ct-book__row.is-discount dt,
.ct-book__row.is-discount dd {
	color: var(--b-green);
	font-weight: 700;
}

.ct-book__row.is-total {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--b-border);
	border-bottom: 0;
}

.ct-book__row.is-total dt {
	font-size: 14px;
	font-weight: 600;
	color: var(--b-dark);
}

.ct-book__row.is-total dd {
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--b-orange);
}

/*
 * The deposit, when there is one. Blue rather than orange: it is the figure the
 * blue Make Payment button is about to charge, and matching them says so without
 * a sentence.
 */
.ct-book__row.is-due {
	padding-top: 6px;
	border-bottom: 0;
}

.ct-book__row.is-due dt {
	font-size: 13px;
	font-weight: 600;
	color: var(--b-dark);
}

.ct-book__row.is-due dd {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--b-blue);
}

.ct-book__note {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--b-gray);
	font-size: 12px;
	line-height: 1.5;
	color: var(--b-muted);
}

/*
 * Quoted in one currency, charged in another.
 *
 * Deliberately louder than the grey .ct-book__note it sits above: every other
 * note on this page is background detail, while this one changes the number that
 * leaves somebody's account. It appears twice on purpose, once on the summary
 * and again on the payment screen, because the second is the last moment before
 * the money moves.
 *
 * See includes/payment-currency.php for when it is shown at all.
 */
.ct-book__convnote {
	margin: 16px 0 0;
	padding: 11px 14px;
	border: 1px solid var(--b-blue);
	border-radius: 10px;
	background: #EEF7FD;
	color: #0F5C8C;
	font-size: 12.5px;
	line-height: 1.55;
	font-weight: 600;
	text-align: left;
}

/* Which referral code was applied. Green to tie it to the discount row above,
   and quieter than the currency note because it costs the customer nothing. */
.ct-book__refnote {
	margin: 12px 0 0;
	padding: 11px 14px;
	border: 1px solid var(--b-green);
	border-radius: 10px;
	background: #EEF9F2;
	color: #14713C;
	font-size: 12.5px;
	line-height: 1.55;
	font-weight: 600;
	text-align: left;
}

.ct-book__back {
	margin: 14px 0 0;
	font-size: 13.5px;
}

.ct-book__back a {
	color: var(--b-blue);
	text-decoration: none;
	font-weight: 600;
}

.ct-book__back a:hover { text-decoration: underline; }

/* ==========================================================================
   Referral code
   ==========================================================================
 * At the top of the form column, above Your details, because applying a code
 * RELOADS the page: anything typed into the form below would be lost, so the
 * box has to be somewhere the visitor deals with before they start typing.
 *
 * A tinted strip rather than a card, so it does not read as a second form
 * competing with the real one.
 */

.ct-book__ref {
	margin: -4px 0 18px;
	padding: 12px 14px;
	border: 1px dashed var(--b-border);
	border-radius: 10px;
	background: var(--b-gray);
}

.ct-book__reflabel,
.ct-book__refform label {
	display: block;
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--b-muted);
}

/* Field and button on one line. The field takes whatever is left, so the button
   never shrinks below its own text. */
.ct-book__refrow {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.ct-book__refrow input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--b-border);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	/* Codes are printed in capitals everywhere else, so accept either and show
	   what the link would have shown. The value posted is normalised in PHP. */
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--b-dark);
	background: #fff;
}

.ct-book__refrow input:focus-visible {
	outline: 2px solid var(--b-blue);
	outline-offset: 1px;
	border-color: var(--b-blue);
}

.ct-book__refbtn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 8px;
	padding: 0 18px;
	background: var(--b-dark);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.ct-book__refbtn:hover { background: #000; }

.ct-book__refbtn:focus-visible {
	outline: 2px solid var(--b-blue);
	outline-offset: 2px;
}

/* ---- a code already held ---- */

.ct-book__refon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.ct-book__refon code {
	padding: 5px 10px;
	border: 1px solid var(--b-border);
	border-radius: 6px;
	background: #fff;
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--b-dark);
}

/*
 * Three states, three colours, because they mean three different things and the
 * visitor's next action differs in each. Green: nothing to do. Blue: sign in.
 * Grey: nothing you can do, and importantly NOT an error, since the commonest
 * reason is simply that the one friend discount has already been used.
 */
.ct-book__refyes,
.ct-book__refwait,
.ct-book__refno {
	font-size: 12.5px;
	font-weight: 700;
}

.ct-book__refyes { color: var(--b-green); }
.ct-book__refwait { color: var(--b-blue); }
.ct-book__refno { color: var(--b-muted); }

/*
 * Remove.
 *
 * Pushed to the far end of the row so it is never mistaken for part of the code
 * or its state, and styled as a quiet link rather than a button: it undoes
 * something, and undo should be findable without being inviting.
 *
 * A held code otherwise lasts thirty days across visits, which is right for a
 * referral and wrong for somebody who pasted the wrong one.
 */
.ct-book__refoff {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--b-muted);
	text-decoration: underline;
}

.ct-book__refoff:hover { color: #C0392B; }

.ct-book__refoff:focus-visible {
	outline: 2px solid var(--b-blue);
	outline-offset: 2px;
}

/* ---------- the form ---------- */

.ct-book__field { margin: 0 0 14px; }

.ct-book__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--b-muted);
}

/* Red, and paired with a visible label. Never the only signal that a field is
   required, since the inputs also carry the required attribute. */
.ct-book__req { color: #C0392B; }

.ct-book__field input,
.ct-book__field select,
.ct-book__field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--b-border);
	border-radius: 8px;
	padding: 11px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--b-dark);
	background: #fff;
}

.ct-book__field input:focus-visible,
.ct-book__field select:focus-visible,
.ct-book__field textarea:focus-visible {
	outline: 2px solid var(--b-blue);
	outline-offset: 1px;
	border-color: var(--b-blue);
}

.ct-book__field textarea { resize: vertical; }

/* Name and email share a row. Both are short, and pairing them shortens the
   form by one step without crowding either. */
.ct-book__two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.ct-book__two .ct-book__field { min-width: 0; }

/* ==========================================================================
   My Travellers
   ==========================================================================
 * THE BOOKING FORM NO LONGER RENDERS THESE FIELDS. For a party of four they
 * were twelve inputs on a form somebody is one press from paying, and a rooming
 * list is far cheaper to collect afterwards than an abandoned booking is to win
 * back. See the note in CT_Booking::render().
 *
 * The rules are kept rather than deleted because the markup is one block in that
 * template, and reinstating it should not also mean rewriting this file. They
 * match nothing on the page today and cost nothing.
 */

.ct-book__travellers {
	/* A fieldset carries browser defaults that fight the rest of the form. */
	margin: 4px 0 18px;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* The section heading reuses .ct-book__sub, whose top rule separates it from the
   fields above without another divider. */
.ct-book__travellers .ct-book__sub { margin: 0 0 6px; }

.ct-book__travnote {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--b-muted);
}

.ct-book__trav {
	margin-bottom: 12px;
	padding: 12px 14px 0;
	border: 1px solid var(--b-border);
	border-radius: 10px;
	background: var(--b-gray);
}

.ct-book__trav:last-child { margin-bottom: 0; }

.ct-book__travhead {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--b-blue);
}

/*
 * Name takes the width; gender and age share what is left, with age fixed at the
 * three characters it will ever need. An equal split would waste on age exactly
 * the room the name is short of.
 */
.ct-book__travgrid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 84px;
	gap: 0 12px;
}

.ct-book__travgrid .ct-book__field {
	min-width: 0;
	margin-bottom: 12px;
}

/*
 * The honeypot. Taken out of the layout without display:none, because some bots
 * skip fields that are display:none, and a few screen readers announce them
 * anyway, which is why it also carries aria-hidden and tabindex="-1" in the
 * markup.
 */
.ct-book__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ct-book__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Required, not cosmetic. width:100% is a CONTENT width by default, so the
	 * 22px of padding below is added on top of it and the button ends up wider
	 * than the card holding it — off the right edge of a phone. Nothing on this
	 * page sets box-sizing globally: .ct-book is outside .elementor, which is
	 * where the only broad reset lives.
	 */
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	padding: 0 22px;
	border: 0;
	border-radius: 25px;
	background: var(--b-orange);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(246, 139, 45, .35);
}

.ct-book__btn:hover {
	background: #E57E1F;
	color: #fff;
	box-shadow: 0 6px 20px rgba(246, 139, 45, .45);
}

.ct-book__btn:focus-visible {
	outline: 2px solid var(--b-dark);
	outline-offset: 2px;
}

/*
 * Make Payment is blue, not orange.
 *
 * Orange is this site's "ask us" colour: it is on Book Now and on the enquiry
 * buttons, which cost nothing to press. A button that takes money should not
 * look like those, and the blue also ties it to the deposit figure in the
 * summary.
 */
.ct-book__btn--pay {
	gap: 10px;
	flex-wrap: wrap;
	background: var(--b-blue);
	box-shadow: 0 4px 14px rgba(22, 137, 207, .35);
}

.ct-book__btn--pay:hover {
	background: #0F6EA8;
	box-shadow: 0 6px 20px rgba(22, 137, 207, .45);
}

.ct-book__btnamt {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.ct-book__small {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--b-muted);
	text-align: center;
}

/* ==========================================================================
   The Razorpay handoff
   ==========================================================================
 * Shown on its own after the booking is stored, while Checkout opens over the
 * top. It is deliberately plain: the visitor should be looking at Razorpay's
 * window, not at this.
 */

.ct-book__pay {
	max-width: 520px;
	margin: 0 auto;
	padding: 30px 26px;
	border: 1px solid var(--b-border);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.ct-book__pay .ct-book__h { margin-bottom: 8px; }

.ct-book__payamt {
	font-family: 'Poppins', sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--b-blue);
	margin: 6px 0 2px;
}

.ct-book__paysub {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--b-muted);
}

/* Above the test-mode note and below the amount, which is the order somebody
   reads them in: what, then in which currency, then whether it is real. */
.ct-book__pay .ct-book__convnote { margin: 0 0 18px; }

/* Said on the screen, not only in the admin. Somebody handed a test checkout
   would otherwise believe they had paid. */
.ct-book__testnote {
	margin: 0 0 18px;
	padding: 9px 13px;
	border: 1px solid #C08B2F;
	border-radius: 8px;
	background: #FFF8E5;
	color: #7A5200;
	font-size: 12.5px;
	font-weight: 700;
}

/* A visible fallback, because Checkout is opened by script: a blocked or slow
   script would otherwise leave a page with nothing on it to press. */
.ct-book__paybtn { margin-top: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/*
 * One column below 860px. The summary stays first, so a phone visitor still
 * confirms what they are booking before the form asks for anything.
 */
@media (max-width: 860px) {

	/*
	 * minmax(0, 1fr), NOT 1fr - and the difference is the bug this rule had.
	 * Plain 1fr is minmax(auto, 1fr), and auto as a minimum is the item's
	 * min-content width, so one wide thing inside the card grew the track
	 * past the screen and the card hung off the right edge. The desktop rule
	 * above always had the zero floor; this one did not.
	 */
	.ct-book__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 560px) {

	/*
	 * 20px, matching .ct-ft__wrap below it. It was 16, and the header above
	 * is 24, so the three blocks on a phone were each indented by a
	 * different amount and the card sat furthest out of the three.
	 */
	.ct-book {
		margin: 20px auto;
		padding: 4px 20px 32px;
	}

	.ct-book__summary,
	.ct-book__form-wrap,
	.ct-book__empty {
		padding: 18px 16px;
	}

	/*
	 * Term above value. Side by side, a wrapped pickup sentence ends up
	 * right-aligned against a left-aligned label, which reads as broken.
	 */
	.ct-book__row {
		display: block;
	}

	.ct-book__row dd {
		margin-top: 2px;
		text-align: left;
	}

	.ct-book__row.is-total dd {
		font-size: 22px;
	}

	/* Two short fields side by side become unusable at this width. */
	.ct-book__two {
		grid-template-columns: 1fr;
	}

	/*
	 * The name gets its own line, and gender and age keep sharing one. Stacking
	 * all three would make a party of four scroll for a very long way.
	 */
	.ct-book__travgrid {
		grid-template-columns: minmax(0, 1fr) 84px;
	}

	.ct-book__field--name {
		grid-column: 1 / -1;
	}
}