/* ===== Sitewide chat widget (includes/caguide-chat-widget.php) - replaces
   the Chaty plugin. Colors read Elementor's own global color variables
   (var(--x, #hex)), same convention as every other widget CSS in this
   plugin. z-index 9000: above normal page content, below the Book Tour
   overlay/comparison overlay (both 99999) so those still sit on top of it. ===== */

.caguide_chat_bar,
.caguide_chat_launcher {
	position: fixed;
	z-index: 9000;
}

/* Read by the tour-page mobile booking bar (assets/css/tour-mobile-bar.css) to
   stack itself above this bar instead of the two overlapping - only actually
   meaningful when body.caguide-chat-active is present (see the body_class
   filter in includes/caguide-chat-widget.php), which is exactly when this
   variable's value is real screen space, not wasted margin on a page/device
   where the chat bar never renders (desktop, or the widget disabled). */
:root {
	--caguide-chat-bar-total-height: calc(45px + env(safe-area-inset-bottom, 0px));
}

/* ----- Mobile: thin bar fixed at the very bottom of the screen ----- */

.caguide_chat_bar {
	display: none;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	box-sizing: content-box;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	padding-bottom: env(safe-area-inset-bottom, 0);
	border-top: 1px solid var(--border, #e6ddd0);
	background-color: var(--card, #ffffff);
}

/* A real <button> now, not a plain <span> - see its own comment in
   caguide-chat-widget.php for why. background/border/padding reset since
   this is now a genuine <button>, and text-transform:none !important for the
   usual Astra uppercase-button fight (see .tour_hero_cta_btn's own comment in
   tour-hero-widget.css). */
.caguide_chat_bar_label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: none !important;
	color: var(--ink, #2b2420);
	white-space: nowrap;
	cursor: pointer;
}

.caguide_chat_dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2bb673;
	flex-shrink: 0;
}

.caguide_chat_bar_links {
	display: flex;
	align-items: center;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.caguide_chat_bar_links::-webkit-scrollbar {
	display: none;
}

.caguide_chat_bar_links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	/* Per explicit request - was underlined, but that line was only ever
	   legible once the line-height fix below stopped squishing the text down
	   to a barely-visible sliver, at which point it read as new/unwanted
	   rather than as the plain "WhatsApp"/"Telegram" links this bar always
	   meant to show. !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	white-space: nowrap;
	/* !important - same sitewide line-height shrink fight as .tour_hero_cta_btn
	   (tour-hero-widget.css); left unset here, these links' text was
	   collapsing down to a barely-visible dashed sliver instead of readable
	   "WhatsApp"/"Telegram" text. */
	line-height: 1 !important;
}

/* ----- Desktop: "chat never moves" - per the v5 bottom-bar handoff's own
   update, this is ONE fixed element, always at the same spot (left:24px,
   vertically centred in the 64px bar), on every page and in every state. It
   is NOT part of either bottom bar's own content any more (that was the
   previous design - a chat button baked into each bar, hidden/shown and
   repositioned depending on bar state, which is exactly the complexity this
   replaces); both bars just leave a 200px left gap for it to sit on top of
   (see their own "padding-left: 200px" rules in tour-mobile-bar.css/
   tour-favorites.css). Left, not right - explicit request, reverting the
   previous "right, since the old favorites tray moved out of that corner"
   reasoning now that the spec calls out a single fixed position regardless. ----- */

/* Ink, not pink - pink is reserved for this site's one primary action per
   page (Choose dates / Book / Search), not a secondary channel like chat (see
   "Pink is for primary actions only" in the v3 design handoff README).
   !important throughout - the theme's own generic <button> styling (padding,
   border-radius, uppercase) otherwise wins on several of these, same fight as
   every other custom button in this plugin (see .tour_hero_cta_btn's own
   comment in tour-hero-widget.css). */
.caguide_chat_launcher {
	display: flex !important;
	align-items: center;
	gap: 10px;
	left: 24px;
	right: auto;
	bottom: 11px;
	height: 42px !important;
	padding: 0 20px !important;
	margin: 0;
	border: none !important;
	border-radius: 0 !important;
	background-color: var(--ink, #2b2420);
	color: #fff;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(43, 36, 32, 0.2);
	transition: background-color 150ms ease;
}

.caguide_chat_launcher svg {
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
}

.caguide_chat_launcher:hover {
	background-color: #3d352e !important;
}

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

	/* On mobile, chat is always the bottom row of the bar (.caguide_chat_bar
	   above) instead - same "never moves" rule, just a different fixed spot. */
	.caguide_chat_launcher {
		display: none !important;
	}
}

/* ----- Chat sheet (§7 of the v5 bottom-bar design handoff) - one dialog,
   every ".cag_bar_chat_trigger" across the site opens it (chat-widget.js).
   Desktop: a floating panel anchored where the launcher sits. Mobile: a
   full-width sheet from the bottom, sitting above whichever row(s) the tour
   page/sitewide bottom bar or the mobile chat bar itself contribute - see the
   bottom-offset rules further down. ----- */

.caguide_chat_sheet_overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(20, 14, 10, 0.45);
	z-index: 9090;
}

.caguide_chat_sheet_overlay.is-open {
	display: block;
}

/* Always left:24px/bottom:76px now, in every state - matches the launcher's
   own "never moves" rule above (76px clears its 11px gap + 42px height + a
   small clearance), so there's no more per-page-state math to keep in sync. */
.caguide_chat_sheet {
	display: none;
	position: fixed;
	z-index: 9091;
	left: 24px;
	right: auto;
	bottom: 76px;
	width: 380px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background-color: var(--card, #ffffff);
	border: 1px solid var(--border, #e6ddd0);
	box-shadow: 0 20px 50px rgba(20, 14, 10, 0.18);
	box-sizing: border-box;
}

.caguide_chat_sheet.is-open {
	display: block;
}

.caguide_chat_sheet_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px 12px;
}

.caguide_chat_sheet_header h2 {
	margin: 0;
	font-family: "Newsreader", serif;
	font-weight: 500;
	font-size: 24px;
	color: var(--ink, #2b2420);
}

.caguide_chat_sheet_close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: #f3efe8;
	color: var(--ink, #2b2420);
	cursor: pointer;
}

.caguide_chat_sheet_close:hover {
	background-color: #e6ddd0;
}

.caguide_chat_sheet_text {
	margin: 0;
	padding: 0 20px 16px;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	color: var(--muted, #6f6458);
}

.caguide_chat_sheet_rows {
	display: flex;
	flex-direction: column;
}

.caguide_chat_sheet_row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 20px;
	border-top: 1px solid var(--border, #e6ddd0);
	font-family: "Noto Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	text-decoration: none !important;
	line-height: 1 !important;
}

.caguide_chat_sheet_row:hover {
	background-color: #f9f6f0;
}

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

.caguide_chat_sheet_row_icon svg {
	width: 24px;
	height: 24px;
}

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

.caguide_chat_sheet_row_arrow {
	flex-shrink: 0;
	color: var(--muted, #6f6458);
}

@media only screen and (max-width: 767px) {
	/* Flush against the bottom edge, not stacked above the mobile chat bar/
	   tour bottom bar the way those two persistent bars stack above each
	   other - this is a transient modal with its own full-screen backdrop
	   (higher z-index than both bars), so it already visually sits above
	   whichever bar(s) are present without needing to match their combined
	   height here too. */
	.caguide_chat_sheet {
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		max-height: 80vh;
		border: none;
		border-top: 1px solid var(--border, #e6ddd0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.caguide_chat_sheet,
	.caguide_chat_sheet_overlay {
		transition: none;
	}
}