/* RocketX Chat — unified Tawk.to + WhatsApp launcher.
   Placement and theming arrive as inline CSS custom properties on .rx-chat:
   --rx-chat-x, --rx-chat-y (edge insets), --rx-chat-size, --rx-chat-accent.
   Visual language mirrors the theme (glass.css / tokens.css): navy glass,
   orange gradient accent, Montserrat, soft 2.5D elevation.

   !important is deliberate and required on every contested property:
   Elementor's kit prints global `.elementor-kit-N button/p/a` rules that
   outrank plain class selectors (see the project's Elementor CSS gotcha) —
   without the guards the kit's button background/padding/typography seep in. */

.rx-chat {
	--rx-chat-accent-2: #c13f1e; /* darker end of the brand gradient */
	position: fixed !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	/* High above page content, but below Tawk.to (max 32-bit z-index) so an
	   opened Tawk chat window covers the launcher. */
	z-index: 999999 !important;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-style: normal !important;
}

/* Corner placement */
.rx-chat--bottom-right { right: var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; }
.rx-chat--bottom-left  { left:  var(--rx-chat-x, 20px) !important; bottom: var(--rx-chat-y, 20px) !important; align-items: flex-start !important; }
.rx-chat--top-right    { right: var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; }
.rx-chat--top-left     { left:  var(--rx-chat-x, 20px) !important; top:    var(--rx-chat-y, 20px) !important; flex-direction: column-reverse !important; align-items: flex-start !important; }

/* Mobile placement — separate offsets on screens < 768px */
@media (max-width: 767px) {
	.rx-chat--bottom-right { right: var(--rx-chat-x-m, 20px) !important; bottom: var(--rx-chat-y-m, 20px) !important; }
	.rx-chat--bottom-left  { left:  var(--rx-chat-x-m, 20px) !important; bottom: var(--rx-chat-y-m, 20px) !important; }
	.rx-chat--top-right    { right: var(--rx-chat-x-m, 20px) !important; top:    var(--rx-chat-y-m, 20px) !important; }
	.rx-chat--top-left     { left:  var(--rx-chat-x-m, 20px) !important; top:    var(--rx-chat-y-m, 20px) !important; }
	.rx-chat .rx-chat__panel { width: min(320px, calc(100vw - 2 * var(--rx-chat-x-m, 20px))) !important; }
}

/* ── Launcher bubble ─────────────────────────────────────────────────── */

.rx-chat .rx-chat__toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: var(--rx-chat-size, 60px) !important;
	height: var(--rx-chat-size, 60px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 50% !important;
	background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
		0 12px 32px rgba(0, 0, 0, 0.35),
		0 0 32px rgba(220, 79, 44, 0.35) !important;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
	-webkit-tap-highlight-color: transparent;
}

.rx-chat .rx-chat__toggle:hover,
.rx-chat .rx-chat__toggle:focus-visible {
	background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
	color: #fff !important;
	transform: translateY(-2px) scale(1.05) !important;
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
		0 16px 40px rgba(0, 0, 0, 0.4),
		0 0 48px rgba(220, 79, 44, 0.5) !important;
}

.rx-chat .rx-chat__toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9) !important;
	outline-offset: 3px !important;
}

.rx-chat .rx-chat__toggle svg {
	width: 46% !important;
	height: 46% !important;
	display: block !important;
}

/* Launcher icon: white bubble, accent-coloured dots */
.rx-chat .rx-chat__glyph-bubble { fill: #fff !important; }
.rx-chat .rx-chat__glyph-dot { fill: var(--rx-chat-accent, #dc4f2c) !important; }

/* WhatsApp-only bubble is green, like the app people expect */
.rx-chat--single .rx-chat__toggle--wa {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 50% !important;
	background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
	color: #fff !important;
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
		0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
.rx-chat--single .rx-chat__toggle--wa svg { width: 56% !important; height: 56% !important; fill: #fff !important; }
.rx-chat--single a {
	display: block !important;
	width: var(--rx-chat-size, 60px) !important;
	height: var(--rx-chat-size, 60px) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat--single a:hover { transform: translateY(-2px) scale(1.05) !important; }

/* Toggle icon swap (chat ↔ close) */
.rx-chat .rx-chat__icon {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.rx-chat .rx-chat__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.5); }
.rx-chat .rx-chat__icon--close svg { fill: #fff !important; }
.rx-chat.rx-chat--open .rx-chat__icon--chat { opacity: 0; transform: rotate(45deg) scale(0.5); }
.rx-chat.rx-chat--open .rx-chat__icon--close { opacity: 1; transform: none; }

/* ── Choice panel — navy glass card, gradient border ─────────────────── */

.rx-chat .rx-chat__panel {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	box-sizing: border-box !important;
	width: min(320px, calc(100vw - 2 * var(--rx-chat-x, 20px))) !important;
	margin: 0 !important;
	padding: 20px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background:
		radial-gradient(circle 220px at calc(100% + 40px) -40px, rgba(220, 79, 44, 0.22) 0%, transparent 65%),
		linear-gradient(175deg, rgba(11, 16, 35, 0.92) 0%, rgba(7, 10, 24, 0.94) 100%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
		0 24px 64px rgba(0, 0, 0, 0.45) !important;
	transform-origin: bottom right;
	animation: rx-chat-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rx-chat .rx-chat__panel[hidden] { display: none !important; }

/* Gradient border (white → brand orange), same technique as .rx-glass--gradient-border */
.rx-chat .rx-chat__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(220, 79, 44, 0.45) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.rx-chat--bottom-left .rx-chat__panel { transform-origin: bottom left; }
.rx-chat--top-right .rx-chat__panel { transform-origin: top right; }
.rx-chat--top-left .rx-chat__panel { transform-origin: top left; }

@keyframes rx-chat-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.95); }
	to   { opacity: 1; transform: none; }
}

.rx-chat .rx-chat__heading {
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}

/* ── Channel options ─────────────────────────────────────────────────── */

.rx-chat .rx-chat__option {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	border-radius: 14px !important;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
	color: #fff !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease !important;
	-webkit-tap-highlight-color: transparent;
}

.rx-chat .rx-chat__option:hover,
.rx-chat .rx-chat__option:focus-visible {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
	color: #fff !important;
}

.rx-chat .rx-chat__option:focus-visible {
	outline: 2px solid var(--rx-chat-accent, #dc4f2c) !important;
	outline-offset: 2px !important;
}

.rx-chat .rx-chat__option-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 12px !important;
	color: #fff !important;
	box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22) !important;
}
.rx-chat .rx-chat__option-icon svg { width: 22px !important; height: 22px !important; fill: currentColor !important; display: block !important; }

.rx-chat .rx-chat__option--live .rx-chat__option-icon {
	background: linear-gradient(150deg, var(--rx-chat-accent, #dc4f2c) 0%, var(--rx-chat-accent-2) 100%) !important;
}
.rx-chat .rx-chat__option--wa .rx-chat__option-icon {
	background: linear-gradient(150deg, #2ce072 0%, #1faf55 100%) !important;
}

.rx-chat .rx-chat__option-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
	text-align: left !important;
}
.rx-chat .rx-chat__option-text strong {
	font-weight: 600 !important;
	font-style: normal !important;
	font-size: 14px !important;
	color: #fff !important;
	letter-spacing: 0.01em !important;
}
.rx-chat .rx-chat__option-text small {
	font-size: 12px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: rgba(255, 255, 255, 0.6) !important;
	letter-spacing: normal !important;
}

/* Device visibility */
@media (max-width: 767px) {
	.rx-chat--show-desktop { display: none !important; }
}
@media (min-width: 768px) {
	.rx-chat--show-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.rx-chat .rx-chat__toggle,
	.rx-chat .rx-chat__icon,
	.rx-chat .rx-chat__option,
	.rx-chat--single a { transition: none !important; }
	.rx-chat .rx-chat__panel { animation: none !important; }
	.rx-chat .rx-chat__toggle:hover,
	.rx-chat .rx-chat__toggle:focus-visible,
	.rx-chat--single a:hover { transform: none !important; }
}


/* Suppress Tawk.to's default bubble/window until our launcher opens it.
   Gated by html.rx-tawk-open (added on maximise, removed on minimise) so
   Tawk never flashes a cameo on load. State-based, so it holds regardless
   of Tawk's internal markup; when open, the :not() no longer matches and
   Tawk's own styles take over. */
html:not(.rx-tawk-open) iframe[title="chat widget"],
html:not(.rx-tawk-open) #tawkchat-container,
html:not(.rx-tawk-open) #tawkchat-minified-wrapper,
html:not(.rx-tawk-open) #tawkchat-minified-container,
html:not(.rx-tawk-open) .tawk-min-container {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}