/* ===== Tour page bottom bar (caguide_render_tour_mobile_bar() in
   custom-elementor-widgets.php) - price, the comparison toggle, "Chat with
   us", "Ask a question" and "Choose dates", fixed at the bottom at every
   width now (despite the class name - see that function's own docblock for
   why it's kept). Colors read Elementor's own global color variables
   (var(--x, #hex)), same convention as every other widget CSS in this
   plugin. z-index 8000: below the sitewide chat widget's own bar/bubble
   (9000) and the Book Tour/comparison overlays (99999), above normal
   content. ===== */

.tour_mobile_bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background-color: var(--card, #ffffff);
	border-top: 1px solid var(--border, #e6ddd0);
	box-shadow: 0 -6px 20px rgba(43, 36, 32, 0.06);
	box-sizing: border-box;
}

/* Stacks above the chat widget's own mobile bar instead of overlapping it -
   see --caguide-chat-bar-total-height in assets/css/chat-widget.css and the
   body_class filter in includes/caguide-chat-widget.php. "body.caguide-chat-
   active" itself carries no width restriction (the chat widget is active
   sitewide, not just on mobile), but .caguide_chat_bar - the actual strip
   this stacks above - only ever renders below 767px (chat-widget.css); this
   rule is scoped to match it, same as .tour_compare_bar's own identical rule.
   Confirmed live as a real regression once this bar started showing at every
   width instead of mobile-only: without the media query, "bottom" was always
   offset by the chat bar's height even on desktop, where .caguide_chat_bar
   never renders at all - leaving a permanent, empty 44px gap below this bar
   instead of it sitting flush with the bottom edge. The "- 1px" is
   deliberate: the chat bar's height (44px) and its own border-top (1px) are
   two separately-rendered box edges, and on a real phone's device-pixel grid
   those don't always land on the same physical pixel as this bar's own
   "bottom" offset - confirmed live as a hairline (sub-1px) gap of the page
   background showing between the two bars. Sitting 1px lower turns that
   rounding error into a 1px overlap instead, which is invisible (both bars
   have solid, opaque backgrounds) rather than a visible seam. */
@media only screen and (max-width: 767px) {
	body.caguide-chat-active .tour_mobile_bar {
		bottom: calc(var(--caguide-chat-bar-total-height, 0px) - 1px);
	}
}

.tour_mobile_bar_price {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ink, #2b2420);
}

/* The struck-through original price - its own line, above the real price
   (not inline beside it), only present at all when there's a sale. */
.tour_mobile_bar_price_original {
	display: block;
	opacity: 0.6;
	text-decoration: line-through;
	font-size: 13px;
	line-height: 1.3;
}

.tour_mobile_bar_price_row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.tour_mobile_bar_amount {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.tour_mobile_bar_per,
.tour_mobile_bar_travellers {
	font-size: 13px;
	color: var(--muted, #6f6458);
}

/* The comparison add/remove toggle - a plain underlined text link/button,
   not a styled pill, so it reads as a secondary action next to the price
   rather than competing with "Check dates". Text itself is set by
   tour-favorites.js (syncMobileBarCompareToggle()) since it depends on
   client-side state (this tour's own favorited status, and the running
   total across every tour currently in comparison). */
.tour_mobile_bar_compare_toggle {
	display: block;
	margin-top: 2px;
	background: none;
	border: none;
	padding: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	text-decoration: underline;
	cursor: pointer;
}

/* !important on background - 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 would otherwise paint a solid block behind
   this plain underlined-text toggle. */
.tour_mobile_bar_compare_toggle:hover,
.tour_mobile_bar_compare_toggle:focus-visible {
	background: none !important;
	color: var(--pink-action, #e8334f) !important;
}

.tour_mobile_bar_compare_toggle.is-favorited .tour_mobile_bar_compare_label {
	color: var(--ink, #2b2420);
}

/* The desktop split-button fills solid ink when favorited (not just the
   label text, like the mobile version above) - this label's own color needs
   to flip to white there instead, or the text would be unreadable against
   its own now-ink background. !important to beat the rule above on a
   specificity tie (both are 3 classes deep). */
.tour_bottom_bar_compare_toggle.is-favorited .tour_mobile_bar_compare_label {
	color: #fff !important;
}

/* "View" inside the "✓ Comparing 3 · View" label - a real nested link so it
   can open the comparison overlay without the whole line acting as one
   giant remove-from-comparison target. */
.tour_mobile_bar_compare_view {
	text-decoration: underline;
}

/* !important on color/background - see the identical comment on
   .tour_hero_cta_btn in tour-hero-widget.css for why. */
.tour_mobile_bar_cta {
	flex: 0 0 auto;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	/* !important - same sitewide line-height shrink fight as .tour_hero_cta_btn
	   (tour-hero-widget.css). */
	line-height: 1 !important;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	padding: 15px 24px;
	/* !important - same sitewide "underline links" fight as .tour_hero_cta_btn
	   (tour-hero-widget.css). */
	text-decoration: none !important;
	white-space: nowrap;
	align-self: center;
	transition: background-color 150ms;
}

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

@media only screen and (max-width: 819px) {
	.tour_mobile_bar {
		display: flex;
	}
}

/* ===== Desktop additions (≥820px) - compare split-button, "Ask a question".
   See caguide_render_tour_mobile_bar()'s own docblock: this bar used to be
   mobile-only, with the sticky nav carrying its own separate price/CTA for
   desktop; that's now gone, so this one bar covers both. Chat is NOT one of
   these additions - it's a fixed element outside every bar's own content now
   (.caguide_chat_launcher, chat-widget.css), not rendered here. ===== */

.tour_bottom_bar_center {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.tour_bottom_bar_compare {
	display: flex;
	align-items: stretch;
	height: 42px;
	border: 1px solid var(--ink, #2b2420);
}

/* The split-button's left half - reuses .tour_mobile_bar_compare_toggle's own
   add/remove click handling and .is-favorited state (tour-favorites.js), just
   styled as a bordered split-button half instead of mobile's plain
   underlined text link. */
.tour_bottom_bar_compare_toggle.tour_mobile_bar_compare_toggle {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0 16px;
	background-color: #fff;
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	/* !important - the theme applies uppercase to every <button> by tag
	   selector (same fight as every other custom button in this plugin, see
	   .tour_hero_cta_btn's own comment in tour-hero-widget.css). */
	text-transform: none !important;
	color: var(--ink, #2b2420);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}

.tour_bottom_bar_compare_toggle.tour_mobile_bar_compare_toggle:hover {
	background-color: #f3efe8 !important;
	color: var(--ink, #2b2420) !important;
}

.tour_bottom_bar_compare_toggle.tour_mobile_bar_compare_toggle.is-favorited {
	background-color: var(--ink, #2b2420);
	color: #fff;
}

/* The split-button's right half - thumbnails + running total + chevron,
   opens the full comparison overlay (tour-favorites.js). Only shown once the
   list has at least one tour (toggled via the "hidden" attribute) - the
   [hidden] rule is needed because the plain class rule below would otherwise
   win over the browser's own default [hidden]{display:none} (author styles
   always outrank the user-agent stylesheet, regardless of specificity). */
.tour_bottom_bar_compare_expand {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	margin: 0;
	padding: 0 14px;
	background-color: #fff;
	border: none;
	border-left: 1px solid var(--ink, #2b2420);
	font-family: "Noto Sans", sans-serif;
	/* !important - same Astra uppercase-button fight as
	   .tour_bottom_bar_compare_toggle above. */
	text-transform: none !important;
	color: var(--ink, #2b2420);
	cursor: pointer;
}

.tour_bottom_bar_compare_expand[hidden] {
	display: none;
}

.tour_bottom_bar_compare_thumbs {
	display: flex;
}

.tour_bottom_bar_compare_thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #eee;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #e0e0e0;
	margin-left: -8px;
}

.tour_bottom_bar_compare_thumb:first-child {
	margin-left: 0;
}

.tour_bottom_bar_compare_count {
	font-size: 14px;
	font-weight: 700;
}

/* Always a flex container, even on mobile (where it holds only the visible
   .tour_mobile_bar_cta "Choose dates" button - .tour_bottom_bar_ask is itself
   hidden there) - display:none here would also hide that nested CTA, which
   has to keep showing on mobile the same as it always has. */
.tour_bottom_bar_actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.tour_bottom_bar_ask {
	display: none;
	height: 42px;
	padding: 0 20px;
	background-color: transparent;
	border: 1px solid var(--ink, #2b2420);
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	/* !important - same Astra uppercase-button fight as
	   .tour_bottom_bar_compare_toggle above. */
	text-transform: none !important;
	color: var(--ink, #2b2420);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms, color 150ms;
}

.tour_bottom_bar_ask:hover {
	background-color: var(--ink, #2b2420) !important;
	color: #fff !important;
}

@media only screen and (min-width: 820px) {
	.tour_mobile_bar {
		display: flex;
		min-height: 64px;
		padding: 10px 32px;
	}

	.tour_mobile_bar_price {
		flex: 0 0 auto;
	}

	/* Desktop uses the richer split-button in .tour_bottom_bar_center instead
	   of this plain mobile toggle. */
	.tour_mobile_bar_price > .tour_mobile_bar_compare_toggle {
		display: none;
	}

	.tour_bottom_bar_center {
		display: flex;
	}

	.tour_bottom_bar_ask {
		display: inline-flex;
	}

	.tour_mobile_bar_cta {
		height: 44px;
		padding: 0 24px;
	}
}

/* 200px left gap, not the 820px breakpoint's own 32px - clears the fixed
   "chat never moves" launcher (.caguide_chat_launcher, chat-widget.css),
   which starts showing at 768px, 52px narrower than this bar's own desktop
   content breakpoint above. A separate rule (rather than folding this into
   the min-width:820px block) is what actually covers that in-between
   768-819px range too - this bar already shows its content at every width,
   so without this the price text would start running under the launcher
   there. !important to win regardless of which of the two padding rules
   above happens to apply at a given width. */
@media only screen and (min-width: 768px) {
	.tour_mobile_bar {
		padding-left: 200px !important;
	}
}

@media only screen and (max-width: 359px) {
	/* Drop the "/ person" unit before the button has to shrink to fit. */
	.tour_mobile_bar_per {
		display: none;
	}
}