/* ===== Tour Pricing / Tour Dates / Tour Overview widgets - shared styling.
   Palette: the site's existing accent (#e8334f, "pink-action" - used on the
   CTA button, sale badges, focus states elsewhere in this plugin), the deep
   crimson and warm gold pulled directly from the Central Asia Guide logo
   (#ba152e "crimson-text", #F9B007 "logo-gold"), and the muted grey already
   used everywhere for secondary text (#7a7a7a) - no new colors invented,
   just the site's own palette put to more use. All four (plus sand/ink/
   body/muted/border/card/background) are Elementor global colors now - see
   each rule's own var(--x, #hex) below, not a literal hex here. ===== */

.tour_info_box {
	font-family: "Noto Sans", sans-serif;
	background-color: var(--card, #ffffff);
	border: 1px solid var(--border, #e6ddd0);
	border-radius: 0;
	padding: 24px;
	margin: 20px 0;
	box-sizing: border-box;
	color: var(--body, #3d352e);
}

.tour_info_box_editor_placeholder {
	font-family: "Noto Sans", sans-serif;
	color: #7a7a7a;
	font-size: 13px;
	font-style: italic;
	padding: 16px;
	border: 1px dashed #ddd;
	border-radius: 0;
	margin: 12px 0;
}

/* ===== Tour Pricing (v3) - "fewer boxes": sits directly on the page
   background instead of a bordered card, a 1px ink rule on top and hairline
   dividers instead of boxed table chrome/zebra striping, same treatment as
   .tour_dates_box below. Overrides (rather than removes) the shared
   .tour_info_box styling other, not-yet-v3 widgets still use - scoped to
   .tour_pricing_box specifically so nothing else is affected. ===== */

.tour_pricing_box.tour_pricing_box {
	background-color: transparent;
	border: none;
	border-top: 1px solid var(--ink, #2b2420);
	padding: 24px 0 0;
	margin: 40px 0;
}

/* Each priced itinerary variant, only actually rendered as an accordion item
   when there's more than one (see caguide_render_tour_pricing_box()'s
   $show_variant_headings) - a single-variant tour's Group/Private sections
   sit directly in the page, no wrapper, nothing to click. */
.tour_pricing_variant + .tour_pricing_variant {
	margin-top: 20px;
}

/* Wraps .tour_pricing_variant_header (a real H3 now, see
   custom-elementor-widgets.php's own comment) without changing anything
   visually - all of the variant row's actual look already lives on the
   button/label/chevron inside, untouched. text-transform/letter-spacing
   reset too - the theme (Astra) applies its own uppercase heading style to
   every h1-h6, and text-transform:uppercase directly to every <button> by
   tag selector on top of that - left alone, both would turn each variant's
   own label into upper case. Same fix as
   .caguide_itinerary_day_heading/.caguide_itinerary_day_header in
   itinerary-map.css. */
.tour_pricing_variant_heading {
	margin: 0;
	font: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.tour_pricing_variant_header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 0 0 10px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--ink, #2b2420);
	cursor: pointer;
	text-align: left;
	font: inherit;
	/* This <button> gets its own direct text-transform:uppercase from the
	   theme (Astra applies it to every <button> by tag selector, not just
	   inherited from a heading ancestor) - .tour_pricing_variant_heading's
	   own reset above doesn't reach this on its own. */
	text-transform: none;
	letter-spacing: normal;
}

/* The theme styles every <button> on hover/focus/press - pin this one to its
   own look, same fight as every other custom button in this plugin (see
   .tour_hero_cta_btn's own comment in tour-hero-widget.css). */
.tour_pricing_variant_header,
.tour_pricing_variant_header:hover,
.tour_pricing_variant_header:focus,
.tour_pricing_variant_header:active {
	background: transparent !important;
	color: inherit !important;
	border-bottom: 1px solid var(--ink, #2b2420) !important;
	box-shadow: none !important;
}

.tour_pricing_variant_header:focus-visible {
	outline: 2px solid var(--pink-action, #e8334f);
	outline-offset: 2px;
}

.tour_pricing_variant_label {
	font-family: "Newsreader", serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	color: var(--ink, #2b2420);
}

/* A plain "+" that rotates into a "x" when open - matches the itinerary
   widget's own day-accordion chevron exactly (.caguide_itinerary_day_chevron). */
.tour_pricing_variant_chevron {
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--ink, #2b2420);
	transition: transform 0.3s ease;
}

.tour_pricing_variant.is-open .tour_pricing_variant_chevron {
	transform: rotate(45deg);
}

.tour_pricing_variant_body {
	display: none;
	padding-top: 20px;
}

.tour_pricing_variant.is-open .tour_pricing_variant_body {
	display: block;
}

.tour_pricing_section + .tour_pricing_section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #e3d9ca;
}

/* The widget's own real H2 - "Tour Price" - same level as "Guaranteed
   departures"/"What's included" on the other v3 widgets. Below it: each
   accordion variant's own label is its own H3 (.tour_pricing_variant_heading/
   _header/_label above), and "Group"/"Private" (h4, below) sit one level
   under THAT - Tour Price > 15 days > Group, not three headings all
   competing at the same level. Inherits the site's real H2 font/casing
   (Global Fonts) rather than forcing its own. */
.tour_pricing_main_heading {
	margin: 0 0 20px;
	color: var(--ink, #2b2420);
}

/* h4, under each variant's own h3 (.tour_pricing_variant_heading above) -
   same treatment as .tour_dates_year_heading (Newsreader serif, hairline
   rule underneath), just one level deeper in this widget's own hierarchy. */
.tour_pricing_heading {
	font-family: "Newsreader", serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ink, #2b2420);
	color: var(--ink, #2b2420);
}

.tour_pricing_amount {
	font-size: 26px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	line-height: 1.2;
}

/* Only shown when the visitor's chosen currency isn't offered for this
   specific tour and the prices below fell back to whichever one it does
   offer - see caguide_render_tour_pricing_box()'s $currency_fallback_note. */
.tour_pricing_currency_note {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--muted, #6f6458);
	font-style: italic;
}

.tour_pricing_per {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted, #6f6458);
	margin-left: 2px;
}

.tour_pricing_original {
	color: var(--muted, #6f6458);
	opacity: 0.7;
	text-decoration: line-through;
	font-weight: 500;
	font-size: 18px;
	margin-right: 8px;
}

.tour_pricing_sale {
	color: var(--pink-action, #e8334f);
	font-weight: 700;
}

.tour_pricing_note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--muted, #6f6458);
}

.tour_pricing_table_wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 4px;
}

/* The theme applies its own default border to every <td>/<th> in any table -
   same reset every other table in this plugin needs (see .tour_dates_table's
   identical comment) before the single hairline below can show cleanly. */
.tour_pricing_table,
.tour_pricing_table th,
.tour_pricing_table td {
	border: none;
}

.tour_pricing_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 320px;
}

/* Visible here, unlike .tour_dates_table thead just below - that table's
   own columns (a date range, a weekday, a price) are already self-evident
   from the data's own shape/format, so hiding its header cost nothing. This
   table's columns are two plain dollar amounts on the same row that look
   identical without a label - confirmed live a visitor had no way to tell
   what the second price column even meant once the old v2 header bar was
   hidden the same way. Kept minimal (small muted text, hairline rule under
   it) rather than bringing back v2's own boxed/uppercase sand bar. */
.tour_pricing_table thead th {
	padding: 0 12px 8px 0;
	border-bottom: 1px solid #e3d9ca;
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted, #6f6458);
	text-align: left;
	white-space: nowrap;
}

/* "Group Size" itself stays screen-reader-only - each row's own label
   ("1 traveler", "2-3 travelers"...) already says what that column is
   without it, the same reasoning .tour_dates_table's whole header relies
   on below. Still an empty, unlabeled cell here (not display:none) so its
   border-bottom lines up with the two star-rating headers beside it. */
.tour_pricing_table thead th:first-child {
	position: relative;
}

.tour_pricing_table thead th:first-child span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tour_pricing_table tbody tr {
	border-bottom: 1px solid #e3d9ca;
}

.tour_pricing_table tbody tr:last-child {
	border-bottom: none;
}

.tour_pricing_table td {
	padding: 14px 12px 14px 0;
	white-space: nowrap;
	color: var(--ink, #2b2420);
}

.tour_pricing_table td:first-child {
	color: var(--muted, #6f6458);
	font-size: 13px;
	padding-left: 0;
}

/* ===== Tour Dates (v3) - sits directly on the page background, no card box,
   a 1px ink rule on top and hairline dividers between rows instead - see
   "Fewer boxes" in the v3 design handoff README. Overrides (rather than
   removes) the shared .tour_info_box styling other widgets still use -
   scoped to .tour_dates_box specifically so nothing else is affected. ===== */

.tour_dates_box.tour_dates_box {
	background-color: transparent;
	border: none;
	border-top: 1px solid var(--ink, #2b2420);
	padding: 24px 0 0;
	margin: 40px 0;
}

.tour_dates_section + .tour_dates_section {
	margin-top: 32px;
}

/* Matches the site's own H2 format rather than a small eyebrow label, now
   that this is a real <h2> - just in the plugin's ink instead of a forced
   color, so it follows whatever heading font/casing the site's Global Fonts
   are set to instead of fighting it. */
.tour_dates_heading {
	margin: 0 0 10px;
	color: var(--ink, #2b2420);
}

.tour_dates_intro {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px 24px;
	margin-bottom: 28px;
}

.tour_dates_subtitle {
	margin: 0;
	font-size: 15px;
	color: var(--muted, #6f6458);
}

.tour_dates_private_prompt {
	margin: 0;
	font-size: 14px;
	color: var(--body, #3d352e);
	white-space: nowrap;
}

.tour_dates_private_link {
	background: none;
	border: none;
	padding: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	border-bottom: 1px solid var(--ink, #2b2420);
	cursor: pointer;
}

.tour_dates_private_link:hover,
.tour_dates_private_link:focus-visible {
	background: none !important;
	color: var(--pink-action, #e8334f) !important;
	border-color: var(--pink-action, #e8334f);
}

.tour_dates_year_heading {
	font-family: "Newsreader", serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ink, #2b2420);
	color: var(--ink, #2b2420);
}

/* Stands in for a real year's table when that year's dates genuinely aren't
   published yet - see caguide_render_tour_dates_box(). Same margin/font as
   .tour_dates_subtitle right above the first year, so an empty year section
   reads as "nothing here yet" rather than looking like a layout gap. */
.tour_dates_not_published {
	margin: 18px 0 0;
	font-size: 15px;
	color: var(--muted, #6f6458);
}

/* The theme applies its own default border to every <td>/<th> in any table
   (confirmed the same recurring theme-default fight as this plugin's
   buttons/links elsewhere) - without resetting it explicitly here, that
   shows as a full grid of unwanted lines between every cell, not just the
   single hairline this file adds itself between rows below. */
.tour_dates_table,
.tour_dates_table th,
.tour_dates_table td {
	border: none;
}

.tour_dates_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.tour_dates_table thead {
	/* Visually hidden, not display:none - v2's uppercase sand header bar is
	   gone (no boxed table chrome in v3), but the column labels still exist
	   for screen readers/semantics. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tour_dates_row {
	border-bottom: 1px solid #e3d9ca;
}

.tour_dates_row:last-child {
	border-bottom: none;
}

.tour_dates_table td {
	padding: 18px 12px 18px 0;
	vertical-align: middle;
}

.tour_dates_col_weekday {
	width: 90px;
	text-align: center;
	color: var(--muted, #6f6458);
	font-size: 13px;
}

.tour_dates_col_range {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tour_dates_range_text {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink, #2b2420);
}

.tour_dates_status_label {
	font-size: 13px;
	font-weight: 600;
}

.tour_dates_status_available {
	color: var(--muted, #6f6458);
}

.tour_dates_status_few_left {
	color: var(--e-global-color-e352649, #ca2c45);
}

.tour_dates_status_sold_out {
	color: var(--muted, #6f6458);
}

.tour_dates_col_price {
	width: 110px;
	font-size: 16px;
	color: var(--ink, #2b2420);
}

.tour_dates_col_actions {
	width: 1%;
	text-align: right;
}

/* Holds Book + Contact Us side by side when there's room for both - wraps to
   stacked instead of overflowing on a narrow phone width. */
.tour_dates_actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

/* Outline in ink, fills ink solid on hover - pink stays reserved for the
   page's one primary action (the hero/sticky-nav/mobile-bar CTA), not
   repeated on every row of this table. See "Pink is for primary actions
   only" in the v3 design handoff README. */
.tour_dates_book_btn {
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_hero_cta_btn (tour-hero-widget.css); confirmed this is a real
	   <button> but still inherits the site's typography line-height like any
	   other element unless explicitly reset. */
	line-height: 1 !important;
	background-color: transparent;
	color: var(--ink, #2b2420);
	border: 1.5px solid var(--ink, #2b2420);
	padding: 8px 18px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms, color 150ms;
}

/* border-color explicitly reset too, not just background/color - confirmed
   live that the theme's own global button:hover rule sets
   border-color: rgb(201,40,63) (a crimson/red, close to --pink-action but
   NOT --ink), which otherwise won through since this rule only overrode
   background-color/color. Left alone, that painted a jarring red border
   around what's supposed to be a solid ink-filled button on hover - same
   fight as every other custom button in this plugin (see .tour_hero_cta_btn's
   own comment in tour-hero-widget.css), just one this rule had missed. */
.tour_dates_book_btn:hover,
.tour_dates_book_btn:focus-visible {
	background-color: var(--ink, #2b2420) !important;
	border-color: var(--ink, #2b2420) !important;
	color: #fff !important;
}

.tour_dates_book_btn:disabled {
	border-color: #d9d0c3;
	color: #b3a996;
	cursor: default;
}

.tour_dates_contact_btn {
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_dates_book_btn above, so this stays aligned with it in the same row. */
	line-height: 1 !important;
	background-color: transparent;
	color: var(--muted, #6f6458);
	border: none;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
	padding: 8px 4px;
}

/* background: none !important - the theme applies its own default hover
   background to every <button> (same fight as every other custom button in
   this plugin - see .tour_hero_cta_btn's own comment in tour-hero-widget.css),
   which without this paints a solid crimson block behind this plain
   underlined-text link on hover. */
.tour_dates_contact_btn:hover,
.tour_dates_contact_btn:focus-visible {
	background: none !important;
	color: var(--ink, #2b2420);
}

@media only screen and (max-width: 767px) {
	.tour_dates_col_weekday,
	.tour_dates_col_price {
		display: none;
	}

	.tour_dates_table td {
		padding: 14px 0;
	}

	.tour_dates_actions {
		justify-content: flex-start;
	}
}

/* ===== Tour Overview ===== */

/* Tighter than .tour_info_box's shared 24px - scoped to this combination
   (both classes are always on the same element - see
   caguide_render_tour_overview_box()) rather than lowering the shared
   default, since the Pricing/Dates widgets' own padding wasn't asked to
   shrink too. */
.tour_info_box.tour_overview_box {
	padding: 18px 24px;
}

.tour_overview_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 14px 20px;
}

.tour_overview_item {
	display: flex;
	/* flex-start, not center - .tour_overview_value can now wrap to a second
	   line (see that rule), so the icon needs to anchor to the top of the
	   label rather than float toward the middle of a now-variable-height
	   label+value block. */
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.tour_overview_icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--e-global-color-64e3e7df, #F9B007), var(--pink-action, #e8334f));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.tour_overview_icon svg {
	width: 16px;
	height: 16px;
}

/* The label+value pair as ONE flex item (sized to fill the space next to the
   icon, and free to shrink so .tour_overview_value's ellipsis can work) -
   without this wrapper, label and value would each be direct flex items of
   .tour_overview_item and sit side by side instead of stacked, and every
   row's value would start at a different position depending on how long
   that row's own label happened to be. */
.tour_overview_text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.tour_overview_label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #7a7a7a;
	margin-bottom: 0;
}

.tour_overview_value {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	color: #262626;
	/* Wraps to a second line instead of the ellipsis-truncating this used to
	   do - a long Tour Type/Tour Style list (or anything else that doesn't
	   fit the column) stays fully readable rather than getting cut off. */
	overflow-wrap: break-word;
}

.tour_overview_item_price .tour_overview_value {
	color: var(--pink-action, #e8334f);
}

.tour_overview_flags {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	white-space: normal;
}

/* Scoped under .tour_overview_box, not just ".tour_overview_flag_icon" alone -
   beats Elementor's own ".elementor img" reset (height: auto, border-radius:
   0, ...) on specificity (two classes vs. one class + one element), since
   every widget's markup sits inside an ".elementor" ancestor. */
.tour_overview_box .tour_overview_flag_icon {
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 0;
	flex: 0 0 auto;
	/* A plain <img> is natively draggable in every browser - the smallest
	   accidental mouse movement while clicking near one of these (easy to do
	   with several sitting right next to each other) starts a native image
	   drag, which shows the browser's own "not-allowed"/no-drop cursor over
	   anywhere that isn't a valid drop target, i.e. the rest of the page.
	   Nothing here is meant to be dragged, so turn that affordance off. */
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

/* ===== Tour Contact overlay (Tour Dates widget's "Contact Us" button) =====
   Same fixed/backdrop/show-class pattern as .tour_compare_overlay in
   tour-favorites.css, but centered rather than bottom-right - a single form
   reads better centered than anchored to a corner the way a growing
   comparison list does. */

/* pointer-events - see the identical comment on .book_tour_overlay in
   book-tour-widget.css: a closed overlay's opacity/visibility isn't
   guaranteed to reach every descendant (a library widget can reassert its
   own visibility), so this is the harder stop that keeps a closed overlay
   fully un-clickable regardless. */
.tour_contact_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;
	pointer-events: none;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.tour_contact_overlay.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 200ms ease, visibility 0s linear 0s;
}

.tour_contact_overlay_inner {
	font-family: "Noto Sans", sans-serif;
	background-color: var(--card, #ffffff);
	border: 1px solid var(--border, #e6ddd0);
	border-radius: 0;
	padding: 24px;
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	box-sizing: border-box;
	color: var(--body, #3d352e);
	transform: translateY(10px) scale(0.97);
	transition: transform 200ms ease;
}

.tour_contact_overlay.show .tour_contact_overlay_inner {
	transform: translateY(0) scale(1);
}

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

.tour_contact_header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 6px;
}

.tour_contact_header .tour_contact_title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
}

.tour_contact_close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #f1f1f1;
	color: #3f444b;
	cursor: pointer;
	transition: background-color 200ms, color 200ms;
}

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

.tour_contact_close:hover,
.tour_contact_close:focus-visible {
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
}

.tour_contact_date_display {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #7a7a7a;
}

.tour_contact_date_display strong {
	color: #262626;
}

.tour_contact_form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tour_contact_field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #262626;
}

.tour_contact_input {
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	padding: 9px 12px;
	border: 1px solid #ddd;
	border-radius: 0;
	color: #262626;
	background-color: #fff;
	box-sizing: border-box;
	width: 100%;
}

.tour_contact_input:focus-visible {
	outline: 2px solid var(--pink-action, #e8334f);
	outline-offset: 1px;
}

textarea.tour_contact_input {
	resize: vertical;
	font-family: inherit;
}

.tour_contact_terms_row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	color: #7a7a7a;
	font-weight: 400;
}

.tour_contact_terms_row input {
	margin-top: 3px;
	flex-shrink: 0;
}

.tour_contact_terms_row a {
	color: var(--e-global-color-d979145, #ba152e);
}

.tour_contact_error {
	margin: 0;
	font-size: 13px;
	color: #d63031;
}

.tour_contact_success {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #1a7a3c;
}

.tour_contact_actions {
	display: flex;
	justify-content: flex-end;
}

.tour_contact_submit_btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 22px;
	border: none;
	border-radius: 0;
	background-color: var(--pink-action, #e8334f);
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms;
}

.tour_contact_submit_btn:hover,
.tour_contact_submit_btn:focus-visible {
	background-color: var(--e-global-color-e352649, #ca2c45) !important;
}

.tour_contact_submit_btn:disabled {
	background-color: #ececec;
	color: #7a7a7a;
	cursor: default;
}

@media only screen and (max-width: 767px) {
	.tour_info_box {
		padding: 18px;
	}
	.tour_info_box.tour_overview_box {
		padding: 14px 18px;
	}
	.tour_pricing_amount {
		font-size: 24px;
	}
	.tour_overview_box {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		gap: 12px;
	}
	.tour_overview_icon {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}
	.tour_overview_icon svg {
		width: 14px;
		height: 14px;
	}
	.tour_contact_overlay {
		padding: 12px;
	}
	.tour_contact_overlay_inner {
		padding: 18px;
		max-height: 90vh;
	}
}

/* ===== Included / Not Included, Accommodation & Vehicles widgets ===== */

/* Not yet converted to v3 (.tour_dates_heading / .tour_pricing_heading above
   inherit the site's real H2 now) - this older widget still forces its own
   size/weight rather than the site's Global Fonts H2. */
.tour_info_heading {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 700;
	color: var(--ink, #2b2420);
}

/* v3: sits directly on the page background (no box), one real H2 for the
   whole section, each column its own small-label h3 with a top rule - see
   caguide's "fewer boxes" convention already used for Tour Dates/Itinerary. */
.tour_inclusions_heading {
	margin: 0 0 32px;
	color: var(--ink, #2b2420);
}

/* Auto-fit, not a fixed 2-column split - with only one of the two lists
   filled in it simply takes the full width, same as before. */
.tour_inclusions_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px 64px;
}

.tour_inclusions_column {
	border-top: 1px solid var(--ink, #2b2420);
	padding-top: 18px;
}

/* v3 type scale: "Small h3/h2 labels (Included, Not included, Download,
   Visa): Noto Sans 700 15px." - not the big serif section heading. */
.tour_inclusions_column_heading {
	margin: 0 0 16px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--ink, #2b2420);
}

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

.tour_inclusions_list li {
	display: flex;
	gap: 14px;
	font-size: 15px;
	line-height: 1.6;
	padding: 10px 0;
	border-bottom: 1px solid #e3d9ca;
}

.tour_inclusions_marker {
	flex: 0 0 14px;
}

.tour_inclusions_included .tour_inclusions_list li {
	color: var(--body, #3d352e);
}

.tour_inclusions_included .tour_inclusions_marker {
	color: var(--ink, #2b2420);
}

.tour_inclusions_excluded .tour_inclusions_list li {
	color: var(--muted, #6f6458);
}

/* Accommodation & Vehicles box: kept tight - a tighter box, smaller headings, and ONE line
   per stay / vehicle leg on a wide screen (a two-line row on a phone). */
.tour_stays_box {
	padding: 16px 22px;
}

.tour_stays_box .tour_info_heading {
	margin: 0 0 4px;
	font-size: 19px;
}

.tour_stays_section + .tour_stays_section {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
}

.tour_stay_list,
.tour_vehicle_list,
.tour_experience_day_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Wide screen columns: a small label ("Nights 3-5", "Day 4"), the main text, the details. */
.tour_stay,
.tour_vehicle {
	display: grid;
	grid-template-columns: 92px minmax(0, 1.2fr) minmax(0, 1.5fr);
	gap: 1px 14px;
	align-items: baseline;
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid #f3f3f3;
	font-size: 14px;
	line-height: 1.4;
}

.tour_stay:first-child,
.tour_vehicle:first-child {
	border-top: 0;
}

.tour_stay_nights,
.tour_vehicle_day {
	font-size: 13px;
	font-weight: 700;
	color: var(--pink-action, #e8334f);
}

.tour_stay_main,
.tour_vehicle_route {
	min-width: 0;
}

.tour_stay_title,
.tour_vehicle_route {
	font-weight: 600;
	color: #262626;
}

.tour_stay_title a {
	color: inherit;
	text-decoration: none;
}

.tour_stay_title a:hover {
	color: var(--pink-action, #e8334f);
}

/* The place and the accommodation type, on the same line as the name. */
.tour_stay_sub {
	margin-left: 6px;
	font-size: 13px;
	color: #6b6b6b;
}

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

.tour_vehicle_info {
	min-width: 0;
	color: #444;
}

.tour_vehicle_type {
	font-weight: 600;
	color: #6b6b6b;
}

.tour_vehicle_type + .tour_vehicle_note::before {
	content: ' \00b7  ';
	color: #9a9a9a;
}

/* Shower / toilet / internet as one line of plain text with dots between (it wraps like a
   sentence on a narrow screen), not one pill or one line each. */
.tour_stay_facilities {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #555;
}

.tour_stay_facilities li {
	display: inline;
	margin: 0;
	padding: 0;
}

.tour_stay_facilities li:not(:last-child)::after {
	content: '\00a0\00b7\00a0';
	color: #9a9a9a;
}

.tour_stay_facility_label {
	font-weight: 600;
}

/* The Tour Experiences widget's rows (it shares the list reset above). */
.tour_experience_day {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid #f3f3f3;
}

.tour_experience_day:first-child {
	border-top: 0;
	padding-top: 0;
}

.tour_experience_day:last-child {
	padding-bottom: 0;
}

.tour_experience_day_label {
	flex: 0 0 96px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pink-action, #e8334f);
	line-height: 1.6;
}

.tour_experience_day_main {
	flex: 1;
	min-width: 0;
}

@media only screen and (max-width: 767px) {
	.tour_info_heading {
		font-size: 19px;
	}
	.tour_stays_box {
		padding: 14px 16px;
	}
	.tour_stays_box .tour_info_heading {
		font-size: 17px;
	}
	.tour_inclusions_box {
		gap: 22px;
	}
	/* Phone: the label on the left, the text beside it, and the details on a line of their own. */
	.tour_stay {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 0 10px;
	}
	.tour_vehicle {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 0 10px;
	}
	/* The dotted facilities line gets the full width; the vehicle text sits under the route. */
	.tour_stay_facilities {
		grid-column: 1 / -1;
		margin-top: 1px;
	}
	.tour_vehicle_info {
		grid-column: 2;
	}
	.tour_experience_day {
		flex-direction: column;
		gap: 2px;
	}
	.tour_experience_day_label {
		flex: none;
	}
}

/* Tour Experiences widget - same "Day N on the left, details on the right" rows as
   Accommodation & Vehicles above (the shared list reset there); these are the
   experience entries themselves. */
.tour_experience_day_headline {
	margin-bottom: 6px;
	font-size: 14px;
	color: #6b6b6b;
}

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

.tour_experience {
	margin: 0 0 10px;
	padding: 0;
}

.tour_experience:last-child {
	margin-bottom: 0;
}

.tour_experience_name {
	display: block;
	font-weight: 600;
	color: #262626;
}

.tour_experience_text {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: #444;
	line-height: 1.5;
}

.tour_experience_link {
	display: inline-block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pink-action, #e8334f);
	text-decoration: none;
}

.tour_experience_link:hover {
	text-decoration: underline;
}