/*
 * Commusoft advanced booking form.
 *
 * Loaded up front on pages with the embed pasted in (so its button is styled from first paint), and
 * by commusoft-booking.js on pages that open the form from #book-online links (where the embed is
 * hidden and only the chat rule at the end matters).
 *
 * Commusoft renders <button class="book_button"> inside #cs-app-c92971f7 and styles it from an
 * Angular-injected <style> tag using `.book_button[_ngcontent-…]` (specificity 0,2,0). Prefixing
 * the wrapper ID lifts these rules to 1,1,0 or higher, so they win without !important and
 * regardless of load order. Do not target the _ngcontent-* attribute: Commusoft regenerates it
 * on every build.
 *
 * Values mirror the site's Thrive primary buttons (e.g. "Call Now" on the home page).
 * The booking modal renders in .cdk-overlay-container on <body>, outside the wrapper, so nothing
 * here reaches it.
 */

#cs-app-c92971f7 .book_button {
	display: inline-block; /* not flex: ::first-letter below only works on a block container */
	box-sizing: border-box;
	height: auto;
	min-width: 200px;
	padding: 12px 18px;
	border: 1px solid #1d3e95;
	border-radius: 8px;
	background: #1d3e95;
	color: #fff;
	font-family: Inter, "Fira Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: normal;
	text-align: center;
	/* Commusoft hard-codes "BOOK ONLINE"; with ::first-letter this reads "Book online". */
	text-transform: lowercase;
	transition: background-color .2s ease, border-color .2s ease;
}

#cs-app-c92971f7 .book_button::first-letter {
	text-transform: uppercase;
}

/* Thrive's "hang" hover: the site's buttons dip and bob rather than change colour. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	#cs-app-c92971f7 .book_button:hover {
		animation: lacey-cs-hang-sink .3s ease-out forwards, lacey-cs-hang 1s ease-in-out .3s infinite alternate;
	}
}

/* Without motion, give hover a colour change instead so it still responds. */
@media (prefers-reduced-motion: reduce) {
	#cs-app-c92971f7 .book_button:hover {
		background: #18337a;
		border-color: #18337a;
	}
}

#cs-app-c92971f7 .book_button:active {
	background: #18337a;
	border-color: #18337a;
}

/* Commusoft sets `outline: 0` on :focus; restore a clear ring for keyboard users. */
#cs-app-c92971f7 .book_button:focus-visible {
	outline: 3px solid #1d3e95;
	outline-offset: 3px;
}

/* Thrive buttons go full width with even padding below 768px. */
@media (max-width: 767px) {
	/* Commusoft shrink-wraps the wrapper and the button's parent with inline-block. */
	#cs-app-c92971f7,
	#cs-app-c92971f7 .body {
		display: block;
	}

	#cs-app-c92971f7 .book_button {
		width: 100%;
		padding: 12px;
	}
}

/*
 * The LeadConnector chat widget sits at z-index 99999999 and its greeting covers the dialog's Next
 * button. Hide it only while the booking dialog is open. This is the one rule outside the wrapper;
 * it still only loads on pages with the embed.
 */
body:has(.cs-app-dialog) chat-widget {
	display: none;
}

@keyframes lacey-cs-hang-sink {
	100% { transform: translateY(8px); }
}

@keyframes lacey-cs-hang {
	0%   { transform: translateY(8px); }
	50%  { transform: translateY(4px); }
	100% { transform: translateY(8px); }
}