/* ===== "Not-allowed" cursor sweep, every tour page =====
   A plain <img> is natively draggable, and the smallest accidental mouse
   movement while clicking one starts a native image drag - which shows the
   browser's own "not-allowed"/no-drop cursor over the rest of the page for
   as long as the drag lasts. Nothing on a tour page is meant to be dragged
   this way (MapLibre's own map is a <canvas>, not an <img>, and drags it on
   purpose - untouched by this). Several individual images already had their
   own copy of this fix (.tour_hero_box, .tour_hotel_photo,
   .caguide_itinerary_day_image, .tour_compare_image, ...); this blanket rule,
   scoped to body.has-caguide-mobile-bar (added by the body_class filter in
   custom-elementor-widgets.php for every real tour page, at every screen
   width, not just where the mobile bar itself is visible - never on the
   rest of the site), is the backstop that catches whichever image gets
   missed next, instead of finding out from another screenshot. */
body.has-caguide-mobile-bar img {
	-webkit-user-drag: none;
	user-drag: none;
}

/* ===== Sitewide <a> line-height backstop, every page =====
   A sitewide typography change collapses <a> line-height down to ~1px
   (confirmed live - see .tour_hero_cta_btn's own comment in
   tour-hero-widget.css), which showed up as shrunk buttons, a misaligned
   breadcrumb separator, and squished-to-illegible chat-bar links, patched one
   at a time as each was found. This used to be scoped to just this plugin's
   own class-name prefixes below, on the assumption the bug was limited to
   this plugin's own markup - confirmed live that it is NOT: the theme's own
   main navigation submenu (.sub-menu li a) hit the exact same 1px
   line-height, collapsing every submenu item's own <li> down to ~1px tall so
   they all but overlapped each other instead of stacking as a normal list,
   and the mobile off-canvas menu's search icon (positioned after the menu
   list) rode up on top of the second-to-last item for the same reason - a
   collapsed item contributes almost no height to the layout. Scoping this to
   "this plugin's own prefixes" was never the actual boundary of the bug, so
   this now targets every <a> on the page, full stop - current or future,
   this plugin's own or the theme's.
   :where() around the selector keeps its own specificity at zero - literally
   lower than even a bare "a" element selector - deliberately lower than any
   of this plugin's own per-widget classes (e.g. .tour_hero_cta_btn's own
   line-height: 1 !important) or any theme rule that sets a real, specific
   line-height on purpose, so those still win outright; this only fills in
   whatever nothing more specific has already decided. !important is still
   needed even at zero specificity, purely to outrank the sitewide rule this
   is fighting: an !important declaration always beats a non-!important one
   outright, regardless of specificity, which is the whole reason a
   zero-specificity selector is safe to use here at all. */
:where(a) {
	line-height: normal !important;
}

/* ===== Favorite (heart) button ===== */
.ctp_favorite_btn {
	--ctp-fav-transform: none;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transform: var(--ctp-fav-transform);
	transition: transform 200ms;
}

/* Real-hover only (see the tooltip's own identical guard below) - a tap on
   mobile sets :hover with no pointer to naturally clear it, so unguarded
   this grow-on-hover would stay stuck "grown" until the visitor taps
   elsewhere, same underlying issue as the tooltip. */
@media (hover: hover) and (pointer: fine) {
	.ctp_favorite_btn:hover {
		transform: scale(1.1);
	}
}

/* A tap also sets :focus (and often :active), and unlike :active - which
   clears the instant the finger lifts - :focus sticks around until
   something ELSE takes focus, matching "stays moved until tapping
   elsewhere". Tried gating this behind :focus:not(:focus-visible) first,
   but mobile browsers don't agree on whether a tap counts as
   :focus-visible, so that carve-out let the shift through on at least one
   real device. Unconditionally pinning every visual property here instead -
   !important because a button this generic-looking is exactly the kind of
   element a theme's own base button styles (button:active/:focus,
   translateY, a shadow) target, and those may well be more specific or load
   after this file. Only the heart icon's own fill (.is-favorited, driven by
   JS/data - never a pseudo-class) and its one-shot pulse (driven by a timer,
   not a pseudo-class either - see pulseHeart() in tour-favorites.js) are
   meant to visibly change when this button is pressed; a real keyboard
   user's own indicator is added back separately, below, as a non-moving
   outline rather than by letting :focus itself do anything. */
.ctp_favorite_btn:active,
.ctp_favorite_btn:focus {
	background-color: rgba(255, 255, 255, 0.9) !important;
	/* Restores THIS button's own resting transform (plain none for the card
	   heart, translateY(-50%) for .ctp_favorite_btn_page on mobile - see its
	   rule below) rather than forcing none outright, which previously fought
	   the page-level heart's own vertical-centering transform and knocked it
	   down by half its height on every tap. */
	transform: var(--ctp-fav-transform) !important;
	box-shadow: none !important;
	outline: none !important;
}

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

.ctp_favorite_btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #3f444b;
	stroke-width: 1.8;
	transition: fill 150ms, stroke 150ms;
}

.ctp_favorite_btn.is-favorited svg {
	fill: var(--pink-action, #e8334f);
	stroke: var(--pink-action, #e8334f);
}

/* One-shot tap feedback (see pulseHeart() in tour-favorites.js) - a quick
   bounce on the heart itself, on both adding and removing, confirming the
   tap without changing the circle behind it or getting stuck "pressed"
   the way a :hover/:active-driven effect would on mobile. */
@keyframes ctp_favorite_pulse {
	0% { transform: scale(1); }
	45% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.ctp_favorite_btn svg.ctp_favorite_pulse {
	animation: ctp_favorite_pulse 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.ctp_favorite_btn svg.ctp_favorite_pulse {
		animation: none;
	}
}

/* Hover tooltip - slides open to the left of the heart, telling the visitor what it does */
.ctp_favorite_tooltip {
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	margin-right: 0;
	max-width: 0;
	padding: 8px 0;
	overflow: hidden;
	white-space: nowrap;
	background-color: #151515;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 0;
	opacity: 0;
	pointer-events: none;
	transition: max-width 250ms ease, opacity 200ms ease, padding 250ms ease, margin-right 250ms ease;
}

/* Only devices with a real pointer that can genuinely hover (a mouse) get
   this reveal - on touch, tapping the heart both toggles it AND sets
   :hover/:focus-visible (a well-known mobile quirk: those pseudo-classes
   stick after a tap, since there's no pointer to "unhover" with), so without
   this guard the tooltip pops open and stays stuck there until the visitor
   taps elsewhere. The heart icon's own red/white fill change (not gated
   here - see .is-favorited above) already says the same thing without text,
   so touch devices lose nothing by never seeing this tooltip at all. */
@media (hover: hover) and (pointer: fine) {
	.ctp_favorite_btn:hover .ctp_favorite_tooltip,
	.ctp_favorite_btn:focus-visible .ctp_favorite_tooltip {
		max-width: 220px;
		padding: 8px 14px;
		margin-right: 8px;
		opacity: 1;
	}
}

/* Fixed, page-level heart button shown on individual tour pages - bottom-right
   of the viewport on desktop, docked just above the favorites tray (34px tall
   + a 12px gap + the tray's own ~52px height + its own 20px bottom offset). */
.ctp_favorite_btn_page {
	position: fixed;
	top: auto;
	bottom: 84px;
	right: 20px;
	z-index: 999;
	box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}

/* On mobile, a corner position sits too close to the site's mobile menu
   button - move it to the vertical middle of the screen instead, with the
   favorites tray docked just below it (see further down). */
@media only screen and (max-width: 767px) {
	.ctp_favorite_btn_page {
		top: 50%;
		bottom: auto;
		right: 15px;
		--ctp-fav-transform: translateY(-50%);
		transform: var(--ctp-fav-transform);
	}
}

/* The tour page bottom bar's own compare toggle (see
   custom-elementor-widgets.php's "has-caguide-mobile-bar" body_class filter)
   replaces this floating heart + tray entirely now, at every width - that bar
   covers desktop too these days (its own centre compare split-button), not
   just mobile, so there's no width restriction here any more either. */
body.has-caguide-mobile-bar .ctp_favorite_btn_page,
body.has-caguide-mobile-bar .tour_favorites_tray {
	display: none !important;
}

/* Every other page now has the sitewide compare bar above as a complete
   replacement (see caguide_render_compare_bar()) - no width restriction here,
   unlike the tour-page rule above, since that bar itself shows at every width. */
body.has-caguide-compare-bar .ctp_favorite_btn_page,
body.has-caguide-compare-bar .tour_favorites_tray {
	display: none !important;
}

/* ===== Tour search results / listing grid (.ctp_row) - Custom_Post_Widget's
   initial render and ajax_cat_filter()'s filtered response both fill this
   with .tour_compare_col cards (see caguide_render_sight_tour_card()). ===== */
.ctp_row {
	display: grid;
	/* Same formula as .tour_compare_grid below (see its own comment for the
	   full derivation) - this grid and the main page's are meant to read as
	   the same system, both resolving to exactly 3 columns at the site's
	   1340px content width. */
	grid-template-columns: repeat(auto-fit, minmax(340px, calc(33.333% - 13.333px)));
	gap: 20px;
	position: relative;
}

.ctp_row.ajax-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../img/loader.gif);
	background-size: 50px;
	background-position: center 50px;
	background-repeat: no-repeat;
	background-color: #ffffffe0;
	z-index: 1;
	border-radius: 0;
}

/* ===== Limit message toast ===== */
.tour_favorites_limit_msg {
	position: fixed;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%) translateY(10px);
	background-color: #151515;
	color: #fff;
	padding: 10px 20px;
	border-radius: 0;
	font-size: 14px;
	z-index: 100000;
	opacity: 0;
	transition: opacity 250ms, transform 250ms;
	max-width: 90%;
	text-align: center;
}

/* ===== Sitewide comparison bar (caguide_render_compare_bar()) - every page
   that ISN'T a priced tour page (that gets its own bar instead - see
   assets/css/tour-mobile-bar.css). Shown at EVERY width, not mobile-only -
   unlike a tour page there's no other booking bar competing for this space
   here. Replaces the old floating heart + tray on these pages entirely (see
   the "has-caguide-compare-bar" rule further down), not just under a
   breakpoint. ===== */

.tour_compare_bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	padding-bottom: calc(12px + 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;
}

.tour_compare_bar.has-items {
	display: flex;
}

/* Same chat-bar stacking as the tour page's own bar, but only where the chat
   widget actually renders as a full-width BOTTOM BAR (max-width:767px) - at
   768-819px the chat widget is its own small bottom-left bubble instead, not
   occupying this strip, so shifting up there would leave an empty gap. */
@media only screen and (max-width: 767px) {
	/* "- 1px": see the identical comment on .tour_mobile_bar in
	   tour-mobile-bar.css - turns a real-device subpixel rounding gap into a
	   harmless 1px overlap instead. */
	body.caguide-chat-active .tour_compare_bar {
		bottom: calc(var(--caguide-chat-bar-total-height, 0px) - 1px);
	}

	/* Confirmed live: on a real phone width, three flex:0 0 auto/1 1 auto
	   groups (chat button, thumbs+text, the compare button) never fit on one
	   nowrap row at all - the middle group got squeezed to near nothing while
	   the other two overflowed/overlapped it, reading as garbled stacked
	   text. Wrapping the row, and letting the info group and the compare
	   button each take their own full-width line, is the same "stack instead
	   of crush" fix every other field in this plugin's mobile layouts already
	   uses (e.g. .hero_tour_search's own stacked fields). The chat button is
	   dropped here entirely, not just restacked - .caguide_chat_bar (chat-
	   widget.css) already sits directly below this bar on every mobile page
	   with its own "Chat with us" trigger, so repeating it here was always
	   redundant, not just too wide to fit. */
	.tour_compare_bar {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.tour_compare_bar_info {
		flex: 1 1 100%;
	}

	.tour_compare_bar_open {
		flex: 1 1 100%;
	}
}

/* 200px left gap on desktop (≥768px, matching the fixed launcher's own
   visibility breakpoint - see .caguide_chat_launcher in chat-widget.css) -
   "chat never moves" per the v5 handoff's own update, so it's no longer this
   bar's own button to render/hide/reposition (see this file's "Chat with us"
   comment removed from here - that role moved to chat-widget.css entirely);
   this bar just leaves room for it to sit on top of instead. !important to
   win over the base rule's own padding shorthand regardless of source order. */
@media only screen and (min-width: 768px) {
	.tour_compare_bar {
		padding-left: 200px !important;
	}
}

.tour_compare_bar_info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.tour_compare_bar_thumbs {
	display: flex;
	flex-shrink: 0;
}

.tour_compare_bar_thumb {
	width: 32px;
	height: 32px;
	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: -10px;
}

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

.tour_compare_bar_info_text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

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

.tour_compare_bar_clear {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	/* text-transform:none !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), confirmed live as "CLEAR" instead of this
	   sentence-case text despite nothing here ever asking for uppercase. */
	text-transform: none !important;
	color: var(--muted, #6f6458);
	text-decoration: underline;
	cursor: pointer;
}

.tour_compare_bar_clear:hover,
.tour_compare_bar_clear:focus-visible {
	background: none !important;
	color: var(--ink, #2b2420) !important;
}

.tour_compare_bar_open {
	flex: 0 0 auto;
	font-family: "Noto Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	/* !important - same Astra uppercase-button fight as .tour_compare_bar_clear
	   above. */
	text-transform: none !important;
	background-color: var(--pink-action, #e8334f);
	color: #fff;
	border: none;
	padding: 13px 28px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms;
}

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

/* "Add one more tour to compare" - one tour isn't enough to compare yet, same
   rule the v3 design handoff specifies. */
.tour_compare_bar_open:disabled {
	background-color: #c9bda9;
	color: #fff;
	cursor: default;
}

@media only screen and (max-width: 600px) {
	.tour_compare_bar_thumbs {
		display: none;
	}
}

.tour_favorites_limit_msg.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ===== Floating tray, bottom-right - the heart button above is positioned
   relative to this tray's own bottom:20px + ~52px height, so the two controls
   always read as one related unit with a guaranteed gap between them. ===== */
.tour_favorites_tray {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 998;
	display: none;
	align-items: center;
	gap: 6px;
	background-color: #fff;
	border-radius: 0;
	padding: 6px 14px 6px 6px;
	box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
	cursor: pointer;
}

.tour_favorites_tray.has-items {
	display: flex;
}

.tour_favorites_tray_thumbs {
	display: flex;
}

.tour_favorites_tray_thumb {
	width: 40px;
	height: 40px;
	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: -12px;
}

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

.tour_favorites_tray_count {
	background-color: var(--pink-action, #e8334f);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

@media only screen and (max-width: 767px) {
	.tour_favorites_tray {
		right: 15px;
		top: calc(50% + 30px);
		bottom: auto;
		flex-direction: column;
		/* Matches .ctp_favorite_btn_page's own 34px width exactly, so the tray
		   lines up with the heart button above it instead of being wider. */
		width: 34px;
		padding: 4px 0;
		box-sizing: border-box;
	}
	/* Thumbnails stack top-to-bottom instead of side-by-side on mobile - takes
	   up far less of the narrow screen width than a horizontal row would. */
	.tour_favorites_tray_thumbs {
		flex-direction: column;
	}
	.tour_favorites_tray_thumb {
		width: 34px;
		height: 34px;
		margin-left: 0;
		margin-top: -12px;
	}
	.tour_favorites_tray_thumb:first-child {
		margin-top: 0;
	}
}

/* ===== Comparison overlay =====
   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. */
/* Full-screen dialog (COMPARISON_WINDOW.md §4/§5) - replaces the old
   docked-corner card popup entirely. One shell for both desktop (1a, the
   table) and mobile (1e, two-at-a-time); which inner view is visible is
   purely CSS (.tour_compare_table_wrap / .tour_compare_mobile_wrap below),
   so no JS branches on viewport width. */
.tour_compare_overlay {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	background-color: #f3efe8;
	z-index: 99999;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms ease, visibility 0s linear 150ms;
}

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

/* Locks page scroll behind the dialog while it's open - set/removed by the
   'cag-compare-open' class toggled in tour-favorites.js alongside .show. */
body.cag-compare-open {
	overflow: hidden;
}

.tour_compare_overlay_inner {
	display: flex;
	flex-direction: column;
	background-color: #f3efe8;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tour_compare_overlay,
	.tour_compare_overlay_inner,
	.tour_compare_col {
		transition-duration: 0ms;
	}
}

/* Top bar (COMPARISON_WINDOW.md §4) - title/count on the left, every control
   (stepper, hotel switch, single room, currency, show-only-differences,
   share, close) in one wrapping row on the right. */
.tour_compare_topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
	flex-shrink: 0;
	background-color: #fff;
	border-bottom: 1px solid #e6ddd0;
	padding: 18px 32px;
}

.tour_compare_topbar_title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
}

.tour_compare_dialog_title {
	margin: 0;
	font-size: 24px;
}

.tour_compare_count {
	font-size: 13px;
	color: #7a7a7a;
}

.tour_compare_controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	row-gap: 10px;
}

.tour_compare_controls_label {
	font-size: 12px;
	font-weight: 600;
	color: #7a7a7a;
	text-transform: none;
}

.tour_compare_diff_label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13px;
	color: #3f444b;
	cursor: pointer;
}

.tour_compare_diff_switch {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--pink-action, #e8334f);
}

.tour_compare_share_btn {
	font-size: 12px;
	font-weight: 600;
	color: var(--pink-action, #e8334f);
	background: none;
	border: 1px solid var(--pink-action, #e8334f);
	border-radius: 0;
	padding: 7px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms, color 200ms;
}

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

.tour_compare_shared_banner {
	background-color: #fdeef1;
	color: #7a2338;
	border-radius: 0;
	padding: 10px 14px;
	font-size: 13px;
	margin: 0 0 18px 0;
}

.tour_compare_close {
	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;
}

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

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

.tour_compare_currency_selector {
	border: 1px solid #dcdcde;
	border-radius: 0;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #3f444b;
	background-color: #fff;
	cursor: pointer;
}

.tour_compare_currency_note {
	font-size: 12px;
	color: #7a7a7a;
	margin-bottom: 4px;
}

.tour_compare_supplement_label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13px;
	color: #3f444b;
	cursor: pointer;
}

.tour_compare_supplement_checkbox {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--pink-action, #e8334f);
}

/* Traveller stepper (COMPARISON_WINDOW.md §4, "34px −/label/+") - replaces
   the old 10-dot picker; still ".tour_compare_pax_selector[data-value]", so
   nothing else reading that attribute needed to change. */
.tour_compare_pax_selector {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid #d6ccbd;
	height: 34px;
}

.tour_compare_pax_minus,
.tour_compare_pax_plus {
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	color: #3f444b;
	cursor: pointer;
}

.tour_compare_pax_minus:disabled,
.tour_compare_pax_plus:disabled {
	color: #c9bda9;
	cursor: not-allowed;
}

.tour_compare_pax_value {
	min-width: 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #3f444b;
}

/* Hotel-level switch (COMPARISON_WINDOW.md §4, "3★ hotels | 4★ hotels") -
   replaces the old 1-5 star radiogroup; the pricing model only ever had two
   real tiers (caguide_accommodation_options_for_variant()), so this now
   matches the data. Hidden entirely (updateStarSwitchVisibility() in
   tour-favorites.js) when no compared tour offers 4★ at all. */
.tour_compare_star_selector {
	display: flex;
	height: 34px;
	border: 1px solid #3f444b;
}

.tour_compare_star_btn {
	padding: 0 14px;
	border: none;
	border-right: 1px solid #3f444b;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: #3f444b;
	cursor: pointer;
	white-space: nowrap;
	/* !important - same Astra uppercase-<button> fight as .tour_compare_bar_open
	   above ("3★ hotels" should stay sentence case, not become "3★ HOTELS"). */
	text-transform: none !important;
}

.tour_compare_star_btn:last-child {
	border-right: none;
}

.tour_compare_star_btn.is-active {
	background-color: #3f444b;
	color: #fff;
}

.tour_compare_body {
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- Desktop: 1a full-screen table (≥ 820px) ------------------------- */

.tour_compare_table_wrap {
	flex: 1 1 auto;
	overflow: auto;
	padding: 0 32px 32px;
}

.tour_compare_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tour_compare_table thead th {
	position: sticky;
	top: 0;
	background-color: #f3efe8;
	border-bottom: 1px solid #3f444b;
	padding: 20px 10px 16px;
	text-align: left;
	vertical-align: top;
	z-index: 1;
}

.tour_compare_label_col {
	width: 200px;
	font-size: 13px;
	font-weight: 400;
	color: #7a7a7a;
}

.tour_compare_tour_col {
	position: relative;
}

.tour_compare_thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #ece4d6;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
}

.tour_compare_tour_title {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #3f444b;
	text-decoration: none !important;
	margin-bottom: 6px;
}

.tour_compare_empty_col {
	width: auto;
}

.tour_compare_add_slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 16 / 9;
	border: 1px dashed #c9bda9;
	color: #7a7a7a;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	text-align: center;
}

.tour_compare_add_plus {
	font-size: 22px;
	line-height: 1;
}

.tour_compare_group_row th {
	text-align: left;
	font-size: 22px;
	font-weight: 700;
	font-family: var(--e-global-typography-newsreader-font-family, inherit);
	padding: 28px 10px 10px;
	border-bottom: 1px solid #3f444b;
	background-color: #f3efe8;
}

.tour_compare_data_row th,
.tour_compare_data_row td {
	padding: 14px 10px;
	border-bottom: 1px solid #e3d9ca;
	vertical-align: top;
	text-align: left;
}

.tour_compare_th_label {
	font-size: 14px;
	font-weight: 400;
	color: #7a7a7a;
}

.tour_compare_data_row td {
	font-size: 14px;
	font-weight: 500;
	color: #3f444b;
}

.tour_compare_data_row td.tour_compare_price_cell {
	font-size: 18px;
	font-weight: 700;
}

.tour_compare_foot_row td {
	padding: 16px 10px 4px;
	vertical-align: top;
}

.tour_compare_foot_cell {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tour_compare_tour_col .tour_compare_remove {
	position: absolute;
	top: 8px;
	right: 8px;
}

.tour_compare_foot_cell .tour_compare_view_btn,
.tour_compare_foot_cell .tour_compare_deposit_btn,
.tour_compare_mobile_foot_col .tour_compare_view_btn,
.tour_compare_mobile_foot_col .tour_compare_deposit_btn {
	margin-top: 0;
}

.tour_compare_mobile_wrap {
	display: none;
}

/* ---- Mobile: 1e two at a time (< 820px) ------------------------------ */

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

	.tour_compare_mobile_wrap {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		overflow: hidden;
		min-height: 0;
	}

	.tour_compare_mobile_selects {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 16px;
		background-color: #fff;
		border-bottom: 1px solid #e6ddd0;
		flex-shrink: 0;
	}

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

	.tour_compare_mobile_image {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		background-color: #ece4d6;
		background-size: cover;
		background-position: center;
	}

	.tour_compare_mobile_select {
		width: 100%;
		height: 40px;
		border: 1px solid #3f444b;
		background-color: #fff;
		font-size: 13px;
		font-weight: 600;
		color: #3f444b;
		padding: 0 8px;
	}

	.tour_compare_mobile_rows {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0 16px 16px;
	}

	.tour_compare_mobile_group_heading {
		font-size: 19px;
		font-weight: 700;
		font-family: var(--e-global-typography-newsreader-font-family, inherit);
		border-bottom: 1px solid #3f444b;
		padding: 16px 0 8px;
		margin: 0;
	}

	.tour_compare_mobile_row {
		border-bottom: 1px solid #e3d9ca;
		padding: 10px 0;
	}

	.tour_compare_mobile_row_label {
		font-size: 12px;
		color: #7a7a7a;
		margin-bottom: 4px;
	}

	.tour_compare_mobile_row_values {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.tour_compare_mobile_row_value {
		font-size: 13px;
		font-weight: 500;
		color: #3f444b;
		overflow-wrap: break-word;
	}

	.tour_compare_data_row td.tour_compare_price_cell,
	.tour_compare_mobile_row_value.tour_compare_price_cell {
		font-size: 16px;
		font-weight: 700;
	}

	.tour_compare_mobile_footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		flex-shrink: 0;
		background-color: #fff;
		border-top: 1px solid #e6ddd0;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

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

	.tour_compare_topbar {
		padding: 16px;
	}

	.tour_compare_dialog_title {
		font-size: 24px;
	}
}

.tour_compare_chat_footer {
	flex-shrink: 0;
	text-align: center;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	background-color: #fff;
	border-top: 1px solid #e6ddd0;
}

.tour_compare_chat_link {
	font-size: 13px;
	font-weight: 600;
	color: var(--pink-action, #e8334f);
	text-decoration: underline;
}

/* NOT dead code, despite the name - the v1 comparison overlay this class used
   to also serve is gone, but the Sight Tours widget (widgets/sight-tours-widget.php,
   <div class="tour_compare_grid">, every country/tour page's own curated tour
   grid) has rendered its card grid under this exact class the whole time and
   still does. Restored after the comparison-tool rewrite accidentally dropped
   it as if it were overlay-only, which broke every Sight Tours grid sitewide
   (cards fell back to plain block stacking, full page width each) - confirmed
   live. See .ctp_row above for the identical formula's own derivation. */
.tour_compare_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, calc(33.333% - 13.333px)));
	gap: 20px;
}

/* minmax(0, 1fr), not a bare 1fr - a plain '1fr' track still carries an
   implicit 'auto' minimum, and 'auto' here means the browser won't shrink the
   track below its item's own content-driven minimum width (the card's <img> -
   see its width/height attributes in caguide_render_sight_tour_card() -
   contributes a large one). That forced this single column, and the whole
   page along with it, open past the actual viewport width on mobile -
   confirmed live as this exact grid's own cause of a horizontal scroll. */
@media only screen and (max-width: 767px) {
	.tour_compare_grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tour_compare_col {
	/* Darker than the old #eeeeee - that was barely visible against the page's
	   own white/near-white background, so a plain (non-Featured/non-Sale) card
	   read as edgeless. Still light/neutral so it doesn't compete with the
	   Featured (pink) and Sale (amber) rings below. */
	background-color: #fff;
	border: 1px solid #d6d6d6;
	/* Square, not the old 10px radius - see TOUR_CARD.md's "Border radius 0,
	   no shadows" rule. Applies everywhere .tour_compare_col is used,
	   including the Compare overlay's own JS-built cards
	   (renderComparisonGrid() in tour-favorites.js) - deliberate, per the
	   sitewide square/editorial pass this card started. */
	border-radius: 0;
	/* Still needed here (not just on the new .tour_compare_body) - the Compare
	   overlay's own JS-built cards (renderComparisonGrid() in
	   tour-favorites.js) are ALSO a bare .tour_compare_col with no separate
	   padded wrapper of their own, so this is the only padding they get. The
	   redesigned grid card's own full-bleed image pulls itself back out past
	   this via a negative margin instead of this being conditional - see
	   .tour_compare_media below. */
	padding: 12px;
	position: relative;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 120ms;
}

/* The whole card is clickable (see .tour_compare_link's ::after below) - a
   plain border-colour darken is the only hover cue now (was a lift + shadow)
   - TOUR_CARD.md calls for "hover changes colour only, no lift/scale", and
   this is what's left of that cue once we chose to keep the whole card
   (not just the title/button) clickable. :focus-within matches so keyboard
   users get the same cue when they tab to the card's link. */
.tour_compare_col:hover,
.tour_compare_col:focus-within {
	border-color: #b0b0b0;
}

/* Featured tour (see the "Featured tour" checkbox in the Tour Pricing
   metabox) - a solid border, not the old soft shadow glow (no shadows, per
   the square/editorial design). Kept even though only one badge now shows on
   the card itself (see .tour_compare_badge below) - a tour that's both
   Featured and on Sale still gets this border, so that fact isn't lost just
   because the Sale badge alone won the single top-right slot. */
.tour_compare_col_featured {
	border-color: var(--pink-action, #e8334f);
	border-width: 2px;
}

/* On sale (a tier has a valid 'sale_price_no_options' - see
   caguide_get_lowest_tier_info()) - same solid-border treatment as Featured,
   but in amber so the two stay visually distinct from each other. */
.tour_compare_col_sale {
	border-color: #e8590c;
	border-width: 2px;
}

/* Both at once - Sale wins the border colour (matches .tour_compare_badge's
   own Sale > Featured priority - see caguide_get_card_badge()), so the two
   signals never contradict each other on the same card. */
.tour_compare_col_featured.tour_compare_col_sale {
	border-color: #e8590c;
	border-width: 2px;
}

/* The image, duration pill, one badge and country flags all sit on top of
   each other here (see caguide_render_sight_tour_card()) - this is their
   shared positioning context, sized to the image's own 3:2 box rather than
   the whole (much taller) card, so top-left/top-right/bottom-left land on
   the photo itself. */
.tour_compare_media {
	position: relative;
	/* Pulls the image back out to the card's true edges past its parent's own
	   12px padding (see .tour_compare_col) - .tour_compare_col's own
	   overflow:hidden + border-radius then clips its top corners to match,
	   so the photo reads as full-bleed without this card needing its own,
	   separate no-padding variant. */
	margin: -12px -12px 12px;
}

/* A real <img> now (get_the_post_thumbnail(), see caguide_render_sight_tour_card())
   rather than a background-image span - object-fit does the same "fill the
   box, cropping as needed" job background-size: cover used to.
   Scoped under .tour_compare_col (not just ".tour_compare_image" alone) on
   purpose: Elementor's own frontend.css ships a plain ".elementor img" reset
   (height: auto, border-radius: 0, ...), and since every widget's markup
   sits inside an ".elementor" ancestor, that rule now reaches this image
   too - it never did back when this was a <span> with a background-image,
   not a real <img>. ".elementor img" is one class + one element
   (specificity 0,0,1,1); a bare ".tour_compare_image" is one class alone
   (0,0,1,0) and loses that fight. Two classes (0,0,2,0) beats it outright,
   regardless of which stylesheet happens to load second. */
.tour_compare_col .tour_compare_image {
	display: block;
	width: 100%;
	/* A fixed 3:2 ratio (see TOUR_CARD.md) rather than a fixed pixel height -
	   every card crops to the same shape regardless of its own width, so the
	   4-up and 2-up ("Cards Per Row") layouts need no separate height override
	   the way the old fixed-height rule did. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	object-position: center;
	background-color: #eee;
	cursor: pointer;
	/* object-fit/object-position above only affect a real <img> (the search-
	   grid cards) - the comparison overlay's own cards (renderComparisonGrid()
	   in tour-favorites.js) still build this as an <a> with a CSS
	   background-image instead, which these three properties actually
	   control. Without an explicit no-repeat, a small fallback logo (see
	   .tour_compare_image_fallback below) tiles across the whole box instead
	   of showing once - background-size/position are harmless no-ops on the
	   real <img> case, so this is safe to set unconditionally here. */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/* Same reasoning as .tour_overview_flag_icon in tour-info-widgets.css - a
	   plain <img> is natively draggable, and the smallest accidental mouse
	   movement while clicking a card starts a native image drag, showing the
	   browser's own "not-allowed" cursor over the rest of the page. Nothing
	   here is meant to be dragged. */
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

/* Tours with no featured image fall back to the site logo - show it uncropped
   (contain, not cover) so the whole logo stays visible, same treatment as the
   search-result cards' .ctp_image_fallback. */
.tour_compare_col .tour_compare_image.tour_compare_image_fallback {
	object-fit: contain;
	background-size: contain;
	background-color: #ffffff;
}

/* Duration pill - top-left of the image, same dark-glass treatment on every
   card regardless of what's behind it, so it stays readable over any photo. */
.tour_compare_duration {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: rgba(12, 9, 6, 0.75);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	/* !important - same sitewide line-height shrink fight as .tour_hero_cta_btn
	   (tour-hero-widget.css), here hitting a plain <span> pill rather than a
	   link/button, so it's the site's inherited text line-height generally,
	   not just an <a> typography setting. */
	line-height: 1 !important;
	letter-spacing: 0.02em;
	padding: 5px 9px;
}

/* The single top-right badge (see caguide_get_card_badge() - Sale beats
   Featured beats an editor's own custom text, only one shows at a time).
   Colour comes from the modifier class next to it. */
.tour_compare_badge {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	/* !important - same sitewide line-height shrink fight as
	   .tour_compare_duration above. */
	line-height: 1 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 9px;
}

.tour_compare_badge--featured {
	background-color: var(--pink-action, #e8334f);
}

.tour_compare_badge--sale {
	background-color: #e8590c;
}

/* Editor-set label (e.g. "Most Sold", "Popular", "Festival") - the logo gold
   keeps it readable without needing to compete with Featured/Sale's own
   colours, since it only ever shows when neither of those applies. Dark text
   since white-on-gold reads too low-contrast at this size. */
.tour_compare_badge--custom {
	background-color: var(--e-global-color-64e3e7df, #F9B007);
	color: #262626;
}

/* Country flags - bottom-left of the image, in itinerary/taxonomy order (see
   caguide_render_sight_tour_card()). A plain text fallback (no flagcdn.com
   code for that country name) gets the same pill treatment as the duration
   tag above it, rather than looking like stray unstyled text over a photo. */
.tour_compare_flags {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Scoped to .tour_compare_flags (this new wrapper), not .tour_compare_col -
   the Compare overlay's own cards (renderComparisonGrid() in
   tour-favorites.js) are ALSO .tour_compare_col and ALSO use
   .tour_compare_flag_icon, in its older 18x14/no-ring shape (that context is
   a plain text row, not an image overlay) - a selector any broader than this
   would restyle those too. */
.tour_compare_flags .tour_compare_flag_icon {
	display: block;
	width: 20px;
	height: 15px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

.tour_compare_flag_text {
	display: block;
	background-color: rgba(12, 9, 6, 0.75);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_compare_duration above. */
	line-height: 1 !important;
	padding: 3px 7px;
}

/* The image, its overlays and the title share one link (better for SEO/
   accessibility than two separate links to the same page) - .tour_compare_link
   is that wrapper. Its ::after is a "stretched link": positioned absolute
   with inset:0, it escapes this element's own box and covers the entire card
   (the nearest positioned ancestor is .tour_compare_col), so clicking
   anywhere on the card - the description, the tags, the price - follows this
   one real, crawlable <a>. The comparison checkbox and CTA button stay
   clickable above it via their own higher z-index. */
.tour_compare_link {
	display: block;
	color: inherit;
	/* !important - same sitewide "underline links" fight as .tour_hero_cta_btn
	   (tour-hero-widget.css); this <a> wraps the card's image/title, so an
	   unwanted underline here was showing under the tour name text. */
	text-decoration: none !important;
	/* A real <a href> is natively draggable in every browser, same as an
	   <img> - the smallest accidental mouse movement while clicking this
	   (the whole card's own link, so the single most-clicked element on the
	   site) starts a native link drag, showing the browser's own
	   "not-allowed" cursor over the rest of the page until it's released.
	   Doesn't affect normal click-to-navigate at all. */
	-webkit-user-drag: none;
	user-drag: none;
}

.tour_compare_link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tour_compare_remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #3f444b;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 200ms, color 200ms;
}

.tour_compare_remove svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	display: block;
}

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

/* A real heading now (was a plain link) - margin is reset on all sides, not
   just bottom, since <h3> carries its own top/bottom margin in the browser's
   default stylesheet that would otherwise still apply. */
.tour_compare_title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: #3f444b;
	/* !important - same sitewide "underline links" fight as
	   .tour_compare_link above. */
	text-decoration: none !important;
	margin: 0 0 8px;
	/* This class is also used as a real <a> in the Compare overlay (see
	   renderComparisonGrid() in tour-favorites.js) - same native-link-drag
	   fix as .tour_compare_link above; a no-op here on the static card,
	   where this is a plain <h3> instead. */
	-webkit-user-drag: none;
	user-drag: none;
	/* Always reserve 2 lines, even for short titles, so cards in the same row
	   don't end up different heights depending on how long each tour's name is. */
	min-height: calc(1.35em * 2);
}

/* Everything below the title - the description, tags, meta line and price
   foot. Its own flex column (not just relying on .tour_compare_col's) so the
   price foot's margin-top:auto pushes down against THIS box's bottom, i.e.
   the card's own edge, regardless of where the title/media end. */
.tour_compare_body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* caguide_get_card_description() - up to 120 characters, always rendered
   (even empty - see caguide_render_sight_tour_card()) so a tour without one
   doesn't leave its card shorter than its row-mates. line-clamp is a safety
   net against a stray long unbroken word, not the primary length control -
   that's the 120-character cap itself. Clamped to 2 lines (was 3) per the
   new design. */
.tour_compare_description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.4;
	color: #7a7a7a;
	margin: 0 0 10px;
	min-height: calc(1.4em * 2);
}

/* Tour type chips - at most 3 (the last one a "+N" overflow - see
   caguide_render_sight_tour_card()) instead of the old single comma-joined
   icon row. */
.tour_compare_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.tour_compare_tags li {
	/* Tan/sand, not the old pink tint - matches the border hairline color
	   already used throughout this plugin (see itinerary-map.css/
	   tour-info-widgets.css's own #e3d9ca) instead of a one-off pink that
	   read as an alert/sale color next to the actual pink CTA below it. */
	background-color: #e3d9ca;
	color: #3f444b;
	font-size: 11px;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_compare_duration above. */
	line-height: 1 !important;
	letter-spacing: 0.02em;
	padding: 4px 9px;
}

/* Starting point / next departure (or a date-search result's own fit line) -
   plain text lines, not the old per-taxonomy icon rows, since duration and
   tour type both moved elsewhere on the card (the image pill, the tag chips)
   and Private/Group is now implied by the price basis line below instead of
   needing its own row. */
.tour_compare_meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: #7a7a7a;
	margin: 0 0 12px;
}

.tour_compare_meta .tour_compare_date_fit {
	color: var(--pink-action, #e8334f);
	font-weight: 600;
}

/* The price (or "On request") on the left, the CTA button on the right,
   bottom-aligned - margin-top:auto (on a .tour_compare_body that's itself a
   flex column filling the card, see above) is what keeps this row flush with
   the card's own bottom edge across a row of cards regardless of how much
   title/description/tag text came before it. */
.tour_compare_foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #eeeeee;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.tour_compare_price_label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #7a7a7a;
	margin-bottom: 2px;
}

.tour_compare_foot .tour_compare_price_row {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.tour_compare_price_was {
	font-size: 13px;
	color: #9a9a9a;
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}

.tour_compare_price_amount {
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #3f444b;
	font-variant-numeric: tabular-nums;
}

.tour_compare_col_sale .tour_compare_price_amount {
	color: #d63031;
}

.tour_compare_price_amount--request {
	font-size: 16px;
	color: #3f444b;
}

.tour_compare_price_basis {
	font-size: 11px;
	color: #7a7a7a;
	margin-top: 3px;
}

/* Compact variant of the dual (Group/Private) price block used elsewhere on
   this card via caguide_format_price_amount_html() - unchanged content,
   just enough spacing/size here to sit correctly in the new price-foot. */
.tour_compare_price_dual {
	font-size: 12px;
}

/* !important on color/background - confirmed live (same fight as
   .tour_hero_cta_btn etc. - see tour-hero-widget.css) that the theme's own
   global link-color rule was beating this plain version on the <a> variant
   ("View tour"), leaving near-black text on a pink background. */
.tour_compare_cta {
	flex: 0 0 auto;
	/* !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;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	transition: background-color 150ms;
	/* Sits above the card's own stretched link (.tour_compare_link::after,
	   z-index: 1) so it stays independently clickable instead of triggering
	   that instead. */
	position: relative;
	z-index: 2;
	/* "Get a quote" (see caguide_render_sight_tour_card()) is a <button> - it
	   opens the Contact Us overlay via JS rather than navigating anywhere,
	   unlike "View tour"'s plain <a> - these reset the browser's own default
	   button chrome so it matches the link variant exactly regardless of
	   which element it's on. */
	border: none;
	font-family: inherit;
	cursor: pointer;
}

.tour_compare_cta:hover {
	background-color: #e8334fd9 !important;
	color: #fff !important;
}

/* "Add to comparison" - a small checkbox at the very bottom instead of the
   heart-icon button this replaced (see caguide_render_sight_tour_card()) -
   still the exact same underlying favorites/compare feature (tour-favorites.js
   listens for this same .ctp_favorite_btn class regardless of which markup
   it's attached to), just a plain, low-emphasis control instead of one that
   used to dominate the card visually. Only rendered at all when this
   placement's "Show Add to Comparison Checkbox" setting is on. */
.tour_compare_compare {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #eeeeee;
	font-size: 12px;
	color: #7a7a7a;
	cursor: pointer;
	/* Same reasoning as .tour_compare_cta above - stays clickable above the
	   card's own stretched link instead of navigating away. */
	position: relative;
	z-index: 2;
}

.tour_compare_compare input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--pink-action, #e8334f);
	cursor: pointer;
}

/* Single line per row (icon or "Label:" + value, side by side) instead of a
   label line stacked above a value line - see caguide_render_sight_tour_card()
   for why: cards were carrying up to five of these, each two lines tall. */
.tour_compare_row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	margin-bottom: 6px;
	line-height: 1.4;
}

.tour_compare_row_label {
	flex: 0 0 auto;
	font-weight: 600;
	color: #7a7a7a;
}

.tour_compare_row_value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The calendar / map-pin / tag / people icons standing in for a text label -
   sized to sit on the same line as the label they replace, same muted grey. */
.tour_compare_row_icon {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: #7a7a7a;
}

.tour_compare_row_icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tour_compare_row_flags {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	overflow: hidden;
}

/* Scoped under .tour_compare_col, same reason as .tour_compare_image above -
   beats Elementor's own ".elementor img" reset on specificity, not by luck
   of stylesheet order. */
.tour_compare_col .tour_compare_flag_icon {
	width: 18px;
	height: 14px;
	object-fit: cover;
	border-radius: 0;
	flex: 0 0 auto;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
}

/* Visually hidden but still announced by a screen reader - carries the text
   a row's label used to show, for the rows that now show only an icon. */
.tour_compare_sr_only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tour_compare_price {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #eeeeee;
	font-size: 12px;
}

/* Sale pricing inside .tour_compare_price (see caguide_get_lowest_price_html())
   - original price struck through and muted, sale price bold and red. */
.tour_compare_price_original {
	color: #9a9a9a;
	text-decoration: line-through;
	margin-right: 4px;
}

.tour_compare_price_sale {
	color: #d63031;
	font-weight: 700;
}

.tour_compare_price strong {
	display: block;
	margin-bottom: 4px;
}

/* A tour priced as both a group departure and a private tour (see
   caguide_get_group_price_info()/caguide_get_private_price_info()) shows one
   row per price instead of the usual single line. The "Group"/"Private"
   label needs to stay inline next to its price rather than the block/margin
   treatment the bare ".tour_compare_price strong" rule above gives every
   other <strong> in this block - scoped with an extra class so it wins on
   specificity regardless of source order. */
.tour_compare_price_dual .tour_compare_price_row {
	margin-bottom: 4px;
}

.tour_compare_price_dual .tour_compare_price_row:last-child {
	margin-bottom: 0;
}

.tour_compare_price_dual .tour_compare_price_row strong {
	display: inline;
	margin-bottom: 0;
	margin-right: 3px;
}

.tour_compare_group_price {
	margin-top: 4px;
	color: #7a7a7a;
}

/* caguide_get_tour_cost_per_day()'s client-side equivalent (see perDayText()
   in tour-favorites.js) - a quieter sub-line under whichever price(s) this
   card is showing. */
.tour_compare_per_day {
	margin-top: 2px;
	color: #9a9a9a;
	font-size: 11px;
}

.tour_compare_empty {
	display: block;
	color: #7a7a7a;
	font-size: 14px;
	padding: 40px 16px;
	text-align: center;
}

/* Either "View tour" (no price to act on yet) or "Book Now"/"Book & Pay
   Deposit" (a price exists) - never both, mirroring the main grid card's own
   View Tour/Book Now split (see caguide_render_sight_tour_card() and
   renderComparisonGrid()'s hasPrice check in tour-favorites.js). Same solid
   treatment for both, since only one of them is ever shown at a time. */
/* !important on color/background - the <a> variant (.tour_compare_view_btn)
   was losing to the theme's own global link-color rule, same fight as
   .tour_hero_cta_btn (see tour-hero-widget.css). */
.tour_compare_view_btn,
.tour_compare_deposit_btn {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	margin-top: 12px;
	padding: 8px 10px;
	/* !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;
	border: 1px solid var(--pink-action, #e8334f);
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	border-radius: 0;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 200ms;
	/* A real <a href> is natively draggable in every browser - see
	   .tour_compare_link above for the full reasoning. */
	-webkit-user-drag: none;
	user-drag: none;
}

.tour_compare_view_btn:hover,
.tour_compare_deposit_btn:hover {
	background-color: #e8334fd9 !important;
	color: #fff !important;
}

/* Outline, not solid - COMPARISON_WINDOW.md §4 shows both a pink "Choose
   dates" (.tour_compare_deposit_btn, solid) and an outline "View tour" side
   by side in the same footer cell now, instead of the old either/or. */
.tour_compare_view_btn {
	background-color: transparent !important;
	color: var(--pink-action, #e8334f) !important;
	border-color: var(--pink-action, #e8334f);
	margin-top: 0;
}

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

.tour_compare_deposit_btn:disabled {
	background-color: #d8d8d8;
	border-color: #d8d8d8;
	color: #7a7a7a;
	cursor: not-allowed;
}

/* The full-screen dialog shell (.tour_compare_overlay/.tour_compare_overlay_inner)
   and the desktop/mobile layout switch now live further up this file -
   see the "Full-screen dialog" and "1a full-screen table" / "1e two at a
   time" comments. */