/* RocketX WhatsApp Chat bubble
   Offsets and size arrive as inline CSS custom properties on the element:
   --rx-wa-x (edge inset, horizontal), --rx-wa-y (edge inset, vertical), --rx-wa-size. */

.rx-wa-bubble {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--rx-wa-size, 56px);
	height: var(--rx-wa-size, 56px);
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	/* High above page content, but below Tawk.to (which uses the max 32-bit
	   z-index) so an opened Tawk chat window still covers the bubble. */
	z-index: 999999;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.rx-wa-bubble:hover,
.rx-wa-bubble:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.rx-wa-bubble:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.rx-wa-bubble svg {
	width: 58%;
	height: 58%;
	fill: #fff;
	display: block;
}

/* Corner placement */
.rx-wa-bubble--bottom-right { right: var(--rx-wa-x, 20px); bottom: var(--rx-wa-y, 96px); }
.rx-wa-bubble--bottom-left  { left:  var(--rx-wa-x, 20px); bottom: var(--rx-wa-y, 96px); }
.rx-wa-bubble--top-right    { right: var(--rx-wa-x, 20px); top:    var(--rx-wa-y, 96px); }
.rx-wa-bubble--top-left     { left:  var(--rx-wa-x, 20px); top:    var(--rx-wa-y, 96px); }

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

@media (prefers-reduced-motion: reduce) {
	.rx-wa-bubble { transition: none; }
	.rx-wa-bubble:hover,
	.rx-wa-bubble:focus-visible { transform: none; }
}