/* The widget itself is just a positioning wrapper for the launch button - the
   actual booking panel renders in .book_tour_overlay, fixed on top of the
   whole page, not inline wherever this widget sits in its Elementor container. */
.book_tour_widget {
	display: inline-block;
}

/* ===== Launch button - the only thing shown inline on the page ===== */
.book_tour_launch_btn {
	display: inline-block;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	background-color: #fb2056;
	color: #fff;
	border: none;
	padding: 14px 36px;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 200ms;
}

.book_tour_launch_btn:hover {
	background-color: #fb2056d9;
}

/* ===== Overlay - fixed on top of the page, same fade/scale entrance pattern
   as the comparison view's .tour_compare_overlay, for a consistent feel. ===== */
.book_tour_overlay {
	display: flex;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.35);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.book_tour_overlay.show {
	opacity: 1;
	visibility: visible;
	transition: opacity 200ms ease, visibility 0s linear 0s;
}

body.book_tour_overlay_open {
	overflow: hidden;
}

.book_tour_overlay_inner {
	position: relative;
	background-color: #fff;
	border-radius: 16px;
	padding: 28px;
	width: 100%;
	max-width: 960px;
	max-height: 88vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
	box-sizing: border-box;
	transform: scale(0.97);
	transition: transform 200ms ease;
}

.book_tour_overlay.show .book_tour_overlay_inner {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.book_tour_overlay,
	.book_tour_overlay_inner {
		transition-duration: 0ms;
	}
}

.book_tour_close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #f1f1f1;
	color: #3f444b;
	cursor: pointer;
	transition: background-color 200ms, color 200ms;
}

.book_tour_close svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

.book_tour_close:hover {
	background-color: #fb2056;
	color: #fff;
}

/* ===== Header - the tour name and step tabs, banner-style over the tour's
   featured image when it has one (bleeds to the edges of the overlay card).
   Falls back to a plain white banner with dark text when the tour has no
   featured image. ===== */
.book_tour_header {
	position: relative;
	margin: -28px -28px 22px;
	padding: 40px 60px 20px 28px;
	border-radius: 16px 16px 0 0;
	background-color: #fff;
	background-size: cover;
	background-position: center;
}

.book_tour_header_has_image {
	background-color: #2b2b2b;
}

.book_tour_header_has_image::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.book_tour_header > * {
	position: relative;
	z-index: 1;
}

.book_tour_heading {
	margin: 0 0 16px;
	font-size: 20px;
	color: #151515;
}

.book_tour_header_has_image .book_tour_heading {
	color: #fff;
}

.book_tour_subheading {
	margin: 0 0 10px;
	font-size: 15px;
}

/* ===== Step indicator ===== */
.book_tour_steps {
	display: flex;
	gap: 8px;
}

.book_tour_step_indicator {
	flex: 1;
	text-align: center;
	padding: 8px 6px;
	border-radius: 20px;
	background-color: #f1f1f1;
	color: #7a7a7a;
	font-size: 12px;
	font-weight: 600;
	transition: background-color 150ms, color 150ms;
}

.book_tour_step_indicator_reachable {
	cursor: pointer;
}

.book_tour_step_indicator_reachable:hover:not(.book_tour_step_indicator_active) {
	background-color: #e9e9e9;
	color: #3f444b;
}

.book_tour_step_indicator_active {
	background-color: #fdeaef;
	color: #fb2056;
}

.book_tour_panel {
	display: none;
}

.book_tour_panel_active {
	display: block;
}

/* ===== Layout: wizard on the left, a persistent running-total sidebar on the
   right (desktop) - moves below the wizard on narrow screens, see the media
   query at the bottom of this file. ===== */
.book_tour_layout {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.book_tour_main {
	flex: 1 1 560px;
	min-width: 0;
}

.book_tour_sidebar {
	flex: 0 0 260px;
	background-color: #f7f6f4;
	border-radius: 12px;
	padding: 18px;
	box-sizing: border-box;
	position: sticky;
	top: 0;
}

.book_tour_sidebar_heading {
	margin: 0 0 14px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #3f444b;
}

.book_tour_sidebar_row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 12.5px;
	color: #7a7a7a;
}

.book_tour_sidebar_date {
	font-weight: 600;
	color: #3f444b;
	text-align: right;
}

.book_tour_sidebar_lines {
	margin-bottom: 4px;
	border-bottom: 1px solid #e6e4e0;
}

.book_tour_sidebar .book_tour_summary {
	margin-bottom: 0;
}

.book_tour_sidebar .book_tour_summary_row {
	border-bottom-color: #e6e4e0;
}

/* ===== Step 1: package + calendar ===== */
.book_tour_controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 32px;
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid #eeeeee;
}

.book_tour_control_group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.book_tour_label {
	font-weight: 600;
	font-size: 13px;
	color: #3f444b;
}

.book_tour_label strong {
	color: #fb2056;
}

.book_tour_package_hint {
	margin: 0;
	font-size: 11.5px;
	color: #7a7a7a;
}

/* Accommodation toggle - only rendered at all when a tour has 2 options to
   choose between (see caguide_get_accommodation_options()); labels are
   whatever the admin set them to (star grade, "Guesthouse", "Yurt camp", ...),
   so this is a plain pill toggle rather than a star-rating widget. */
.book_tour_accommodation_selector,
.book_tour_payment_type_selector {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.book_tour_accommodation_option,
.book_tour_payment_type_option {
	padding: 7px 16px;
	border: 1px solid #c1c1c1;
	border-radius: 20px;
	background-color: #fff;
	color: #3f444b;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms, color 150ms;
}

.book_tour_accommodation_option.active,
.book_tour_payment_type_option.active {
	background-color: #fb2056;
	border-color: #fb2056;
	color: #fff;
}

.book_tour_accommodation_option:hover:not(.active),
.book_tour_payment_type_option:hover:not(.active):not(:disabled) {
	border-color: #fb99b3;
}

.book_tour_payment_type_option:disabled {
	background-color: #f1f1f1;
	border-color: #e0e0e0;
	color: #b7b7b7;
	cursor: not-allowed;
}

.book_tour_double_twin_selector,
.book_tour_single_selector {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.book_tour_double_twin_dot,
.book_tour_single_dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 2px solid #d8d8d8;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms;
}

.book_tour_double_twin_dot.filled,
.book_tour_single_dot.filled {
	background-color: #fb2056;
	border-color: #fb2056;
}

.book_tour_double_twin_dot:hover,
.book_tour_single_dot:hover {
	border-color: #fb99b3;
}

.book_tour_calendar_wrap {
	margin-bottom: 22px;
}

.book_tour_calendar {
	display: flex;
	justify-content: center;
}

/* flatpickr's own inline calendar loses its usual drop shadow/border when
   embedded inline like this - give it a light frame so it doesn't look like
   it's floating loose in the page. */
.book_tour_widget .flatpickr-calendar {
	box-shadow: none;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	width: 100%;
	max-width: 600px;
}

/* The departure date itself and every day the tour actually runs (start date
   plus its full duration, day 1 included) are marked identically - the same
   solid brand colour used for the site's own buttons, so the whole span reads
   as one clearly-marked block rather than singling out just the start date. */
.book_tour_widget .flatpickr-day.selected,
.book_tour_widget .flatpickr-day.book_tour_duration_day {
	background: #fb2056;
	border-color: #fb2056;
	color: #fff;
}

.book_tour_widget .flatpickr-day.selected:hover,
.book_tour_widget .flatpickr-day.book_tour_duration_day:hover {
	background: #fb2056d9;
	border-color: #fb2056d9;
}

.book_tour_calendar_hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #7a7a7a;
	text-align: center;
}

.book_tour_summary {
	margin-bottom: 18px;
}

.book_tour_summary_row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f1f1;
	font-size: 13px;
	color: #7a7a7a;
}

.book_tour_summary_row strong {
	font-variant-numeric: tabular-nums;
	color: #3f444b;
}

.book_tour_summary_deposit {
	font-weight: 600;
	color: #3f444b;
}

.book_tour_summary_deposit strong {
	font-size: 16px;
	color: #fb2056;
}

/* ===== Buttons (shared primary look) ===== */
.book_tour_next_btn,
.book_tour_participants_next_btn,
.book_tour_additions_next_btn,
.book_tour_pay_btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	background-color: #fb2056;
	border: none;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: 24px;
	cursor: pointer;
	transition: background-color 200ms;
}

.book_tour_next_btn:hover:not(:disabled),
.book_tour_participants_next_btn:hover:not(:disabled),
.book_tour_additions_next_btn:hover:not(:disabled),
.book_tour_pay_btn:hover:not(:disabled) {
	background-color: #fb2056d9;
}

.book_tour_next_btn:disabled,
.book_tour_pay_btn:disabled {
	background-color: #d8d8d8;
	color: #7a7a7a;
	cursor: not-allowed;
}

/* ===== Step 2: participant info ===== */
.book_tour_buyer_block {
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid #eeeeee;
}

.book_tour_notes_block {
	margin: 22px 0;
}

.book_tour_traveler {
	border: 1px solid #eeeeee;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.book_tour_traveler_heading {
	margin: 0 0 14px;
	font-size: 14px;
}

.book_tour_traveler_package {
	font-weight: 400;
	color: #7a7a7a;
}

.book_tour_traveler_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}

.book_tour_field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: #3f444b;
}

.book_tour_field_wide {
	grid-column: 1 / -1;
}

.book_tour_input {
	box-sizing: border-box;
	height: 38px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	padding: 7px 10px;
	border: 1px solid #c1c1c1;
	border-radius: 6px;
	color: #151515;
	background-color: #fff;
}

.book_tour_input:focus {
	outline: none;
	border-color: #fb2056;
}

.book_tour_input_error {
	border-color: #d32f2f;
	background-color: #fdeded;
}

textarea.book_tour_input {
	height: auto;
	resize: vertical;
	font-family: inherit;
}

.book_tour_field_bed {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	grid-column: 1 / -1;
}

.book_tour_field_bed > span {
	width: 100%;
}

.book_tour_radio {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 400;
	cursor: pointer;
}

.book_tour_radio input {
	accent-color: #fb2056;
	cursor: pointer;
}

.book_tour_file {
	font-size: 12px;
}

.book_tour_submit_error {
	margin: 0 0 14px;
	padding: 10px 14px;
	background-color: #fdeded;
	border-radius: 8px;
	color: #b32d2e;
	font-size: 13px;
}

/* ===== Step 4: accepted payment methods (visual reassurance before the
   redirect to Stripe Checkout - simplified, stylised marks rather than exact
   brand logos, since which additional methods are enabled is Stripe-account
   config this plugin can't read). ===== */
.book_tour_payment_methods {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 18px;
}

.book_tour_payment_method_icon {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 42px;
	height: 27px;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.book_tour_payment_method_visa {
	color: #1a1f71;
	font-style: italic;
}

.book_tour_payment_method_amex {
	color: #016fd0;
}

.book_tour_payment_method_mastercard i {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
}

.book_tour_payment_method_mastercard i:first-child {
	background-color: #eb001b;
	margin-right: -6px;
}

.book_tour_payment_method_mastercard i:last-child {
	background-color: #f79e1b;
	mix-blend-mode: multiply;
}

.book_tour_payment_methods_note {
	font-size: 11.5px;
	color: #7a7a7a;
}

/* ===== Step 4: Terms and Conditions confirmation ===== */
.book_tour_terms_row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0;
	font-size: 13px;
	color: #3f444b;
	cursor: pointer;
}

.book_tour_terms_row input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: #fb2056;
	cursor: pointer;
}

.book_tour_terms_row a {
	color: #fb2056;
	text-decoration: underline;
}

.book_tour_participant_actions {
	display: flex;
	gap: 10px;
}

.book_tour_back_btn {
	flex: 0 0 auto;
	padding: 12px 18px;
	background: none;
	border: 1px solid #c1c1c1;
	color: #3f444b;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: 24px;
	cursor: pointer;
	transition: background-color 200ms;
}

.book_tour_back_btn:hover {
	background-color: #f1f1f1;
}

.book_tour_participant_actions .book_tour_pay_btn,
.book_tour_participant_actions .book_tour_participants_next_btn,
.book_tour_participant_actions .book_tour_additions_next_btn {
	flex: 1 1 auto;
}

/* ===== Nationality / phone country code (independent selectors) ===== */
.book_tour_phone_row {
	display: flex;
	gap: 8px;
}

.book_tour_phone_country {
	flex: 0 0 150px;
	min-width: 0;
}

.book_tour_phone_number {
	flex: 1 1 auto;
	min-width: 0;
}

select.book_tour_input {
	appearance: auto;
}

/* ===== select2 theming - searchable Nationality / phone country-code
   dropdowns. Flags are rendered as <img> (flagcdn.com), not emoji: Windows
   doesn't ship colour flag glyphs in its default emoji font, so emoji flags
   silently show as plain letter pairs there instead of an actual flag. ===== */
.book_tour_phone_row > .select2-container {
	flex: 0 0 150px;
}

.book_tour_field > .select2-container {
	width: 100% !important;
}

.book_tour_widget .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: 38px;
	border: 1px solid #c1c1c1;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding: 0 8px;
}

.book_tour_widget .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: #151515;
	font-size: 13px;
}

.book_tour_widget .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #7a7a7a;
}

.book_tour_widget .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px;
}

.book_tour_widget .select2-container--default.select2-container--focus .select2-selection--single,
.book_tour_widget .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #fb2056;
}

.book_tour_widget .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #fb2056;
}

.book_tour_widget .select2-dropdown {
	border-color: #c1c1c1;
	font-size: 13px;
	z-index: 100000;
	/* The phone country-code control is narrow by design (it only shows a
	   flag + dial code once closed), but its dropdown list shows the full
	   flag + country name + code per row - min-width (not width) keeps it
	   wide enough for that to fit on one line without fighting select2's own
	   inline width, which otherwise just matches the narrow closed control. */
	min-width: 280px;
}

.book_tour_widget .select2-search--dropdown .select2-search__field {
	border: 1px solid #c1c1c1;
	border-radius: 4px;
	padding: 4px 8px;
	font-family: inherit;
}

.book_tour_select_error .select2-selection--single {
	border-color: #d32f2f !important;
	background-color: #fdeded;
}

.book_tour_select_option {
	display: flex;
	align-items: center;
	gap: 6px;
}

.book_tour_flag_icon {
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 2px;
}

/* ===== Step 3: additions ===== */
.book_tour_additions_list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.book_tour_addition_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #eeeeee;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 150ms;
}

.book_tour_addition_row:hover {
	border-color: #fb99b3;
}

.book_tour_addition_row input[type="checkbox"] {
	accent-color: #fb2056;
	cursor: pointer;
	flex: 0 0 auto;
}

.book_tour_addition_label {
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 600;
	color: #3f444b;
}

.book_tour_addition_price {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: #fb2056;
}

@media only screen and (max-width: 544px) {
	.book_tour_overlay {
		padding: 0;
	}
	.book_tour_overlay_inner {
		max-width: 100%;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
		padding: 18px;
	}
	.book_tour_header {
		margin: -18px -18px 22px;
		padding: 30px 46px 16px 18px;
		border-radius: 0;
	}
	.book_tour_traveler_grid {
		grid-template-columns: 1fr;
	}
	.book_tour_phone_row {
		flex-direction: column;
	}
	.book_tour_phone_country {
		flex-basis: auto;
	}
	.book_tour_phone_row > .select2-container {
		flex-basis: auto;
	}
	.book_tour_layout {
		flex-direction: column;
	}
	.book_tour_sidebar {
		flex-basis: auto;
		width: 100%;
		position: static;
		order: 2;
	}
}