/* ===== Tour page mobile bottom bar (caguide_render_tour_mobile_bar() in
   custom-elementor-widgets.php) - price, the comparison add/remove toggle
   (replaces the floating heart button on mobile), and "Check dates", fixed
   at the bottom on narrow screens. 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 .tour_mobile_bar {
	bottom: var(--caguide-chat-bar-total-height, 0px);
}

.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);
}

/* "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;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	padding: 15px 24px;
	text-decoration: none;
	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;
	}
}

@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;
	}
}