/*
 * Transit & Flow floating controls: SameDay chat launcher and panel.
 * The accessibility launcher lives in Ally's shadow DOM, so its rules are in
 * tffc-ally.css and are injected into that shadow root by tffc.js.
 *
 * Why !important: SameDay sets every launcher and panel property as an inline
 * style (element.style, no priority). A stylesheet rule only beats an inline
 * style when it is marked !important. Every rule below is scoped to the two
 * SameDay ids, so nothing else on the site is affected.
 *
 * Z-index hierarchy (low to high)
 *   Elementor popups ............................ 9998   (existing)
 *   Sticky Call / Book bar ...................... 99990  (existing)
 *   Chat panel .................................. 99994
 *   Chat launcher ............................... 99995
 *   Booking pop-up (tf-booking) ................. 2147483000 (existing, hides the chat while open)
 *   Accessibility launcher and panel (Ally) ..... provider value, kept on top on purpose
 *                                                 so accessibility tools stay reachable from any dialog
 */

:root {
	--tffc-navy: #02264A;          /* site token: Book Service, headings */
	--tffc-cyan: #0092CD;          /* site token: Call 24/7, primary buttons */
	--tffc-cyan-hover: #007FB3;
	--tffc-navy-hover: #0A3561;
	--tffc-shadow: 0 1px 2px rgba(2, 38, 74, .18), 0 4px 12px rgba(2, 38, 74, .16);
	--tffc-shadow-hover: 0 2px 4px rgba(2, 38, 74, .2), 0 8px 18px rgba(2, 38, 74, .2);
	--tffc-focus: 0 0 0 2px #fff, 0 0 0 4px var(--tffc-navy);

	--tffc-edge: 20px;             /* left/right edge: clears the 70px content gutter at 1440px */
	--tffc-gap: 24px;              /* distance from the bottom when no sticky bar is showing */
	--tffc-clear: 12px;            /* clearance above the sticky bar */
	--tffc-chat: 52px;             /* chat launcher diameter */
	--tffc-a11y: 48px;             /* accessibility launcher diameter */
	--tffc-bottom: calc(var(--tffc-gap) + env(safe-area-inset-bottom, 0px));
}

/* Phones and small tablets show the sticky bar (site rule: max-width 768px).
   Until the script measures the real bar this fallback matches its rendered
   height, so there is no jump on load. */
@media (max-width: 768px) {
	:root {
		--tffc-edge: 16px;
		--tffc-gap: 16px;
		--tffc-chat: 48px;
		--tffc-a11y: 48px;
		--tffc-bottom: calc(61px + env(safe-area-inset-bottom, 0px) + var(--tffc-clear));
	}
}
/* The script measures the bar's top edge (its height already includes the
   safe-area padding), so the inset is never applied twice. */
html.tffc-has-bar {
	--tffc-bottom: calc(var(--tffc-bar-h) + var(--tffc-clear));
}
html.tffc-no-bar {
	--tffc-bottom: calc(var(--tffc-gap) + env(safe-area-inset-bottom, 0px));
}
/* Keep the last lines of the page clear of the sticky bar on devices with a
   home indicator (the theme reserved a fixed 72px). */
html.tffc-has-bar body {
	padding-bottom: var(--tffc-bar-h) !important;
}

/* ---------- Chat launcher ---------- */
#sameday-chat-button {
	position: fixed !important;
	right: var(--tffc-edge) !important;
	left: auto !important;
	bottom: var(--tffc-bottom) !important;
	top: auto !important;
	z-index: 99995 !important;
	box-sizing: border-box !important;
	width: var(--tffc-chat) !important;
	height: var(--tffc-chat) !important;
	min-width: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--tffc-cyan) !important;
	color: #fff !important;
	box-shadow: var(--tffc-shadow) !important;
	overflow: visible !important;
	transform: none !important;
	transition: background-color .15s ease, box-shadow .15s ease !important;
	-webkit-tap-highlight-color: transparent;
}
#sameday-chat-button:hover {
	background: var(--tffc-cyan-hover) !important;
	box-shadow: var(--tffc-shadow-hover) !important;
}
#sameday-chat-button:focus { outline: none !important; }
#sameday-chat-button:focus-visible { box-shadow: var(--tffc-focus), var(--tffc-shadow) !important; }

/* The permanent "Need help?" label is the main source of bulk. The button keeps
   its accessible name (aria-label "Open chat" / "Close chat"). */
#sameday-chat-button > span { display: none !important; }
#sameday-chat-button > img { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
#sameday-chat-button > svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px !important;
}

/* Open state: the launcher becomes the close control. */
#sameday-chat-button::before {
	content: "";
	display: none;
	width: 18px;
	height: 18px;
	background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
html.tffc-chat-open #sameday-chat-button > svg { display: none !important; }
html.tffc-chat-open #sameday-chat-button::before { display: block; }
html.tffc-chat-open #sameday-chat-button {
	background: var(--tffc-navy) !important;
	border: 1px solid rgba(255, 255, 255, .38) !important;
}

/* Tooltip on devices with a real pointer only. */
@media (hover: hover) and (pointer: fine) {
	#sameday-chat-button::after {
		content: "Chat with us";
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%);
		padding: 7px 10px;
		border-radius: 6px;
		background: var(--tffc-navy);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 4px 12px rgba(2, 38, 74, .2);
		color: #fff;
		font: 600 13px/1 Inter, -apple-system, "Segoe UI", sans-serif;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s ease;
	}
	#sameday-chat-button:hover::after,
	#sameday-chat-button:focus-visible::after { opacity: 1; }
	html.tffc-chat-open #sameday-chat-button::after { content: none; }
}

/* ---------- Chat panel (SameDay iframe; its contents are cross-origin) ---------- */
#sameday-chat-iframe {
	--tffc-panel-bottom: calc(var(--tffc-bottom) + var(--tffc-chat) + 12px);
	position: fixed !important;
	right: var(--tffc-edge) !important;
	left: auto !important;
	top: auto !important;
	bottom: var(--tffc-panel-bottom) !important;
	width: min(380px, calc(100vw - 2 * var(--tffc-edge))) !important;
	height: min(600px, calc(100vh - var(--tffc-panel-bottom) - 16px)) !important;
	height: min(600px, calc(100dvh - var(--tffc-panel-bottom) - 16px)) !important;
	max-height: none !important;
	z-index: 99994 !important;
	border-radius: 16px !important;
	box-shadow: 0 12px 32px rgba(2, 38, 74, .18), 0 2px 6px rgba(2, 38, 74, .08) !important;
}
/* Mobile keyboard open: fit the panel to the visible area so the composer and
   close control stay on screen. */
html.tffc-kb #sameday-chat-iframe {
	top: calc(var(--tffc-vv-top, 0px) + 8px) !important;
	bottom: auto !important;
	height: calc(var(--tffc-vv-h, 100dvh) - 16px) !important;
}
html.tffc-kb #sameday-chat-button { visibility: hidden !important; }

/* Booking pop-up open on a phone: the accessibility launcher docks in the
   pop-up footer, left of the main action button (see tffc.js). */
html.tffc-in-booking #tfb-root .tfb-foot {
	padding-left: calc(var(--tffc-edge) + var(--tffc-a11y) + 12px) !important;
}

@media (prefers-reduced-motion: reduce) {
	#sameday-chat-button,
	#sameday-chat-button::after { transition: none !important; }
}