/* Devixus WhatsApp Floating Chat */
/* The wrapper is exactly the size of the button, so X / Y are measured
   from the screen edge to the button edge. The tooltip floats beside it. */
#dwfc-wrap {
	position: fixed;
	width: var(--dwfc-size, 60px);
	height: var(--dwfc-size, 60px);
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}

#dwfc-wrap #dwfc-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--dwfc-bg, #25D366);
	color: var(--dwfc-icon, #fff);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	text-decoration: none !important;
	border: 0;
	outline: none;
	padding: 0;
	margin: 0;
	transition: transform .2s ease, box-shadow .2s ease;
	box-sizing: border-box;
}
#dwfc-wrap #dwfc-button:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
#dwfc-wrap #dwfc-button:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--dwfc-bg, #25D366);
}
#dwfc-wrap .dwfc-icon {
	width: 56%;
	height: 56%;
	display: block;
	fill: currentColor;
	pointer-events: none;
}

/* Pulse ring */
#dwfc-wrap.dwfc-pulse #dwfc-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--dwfc-bg, #25D366);
	z-index: -1;
	animation: dwfc-pulse 2s ease-out infinite;
}
@keyframes dwfc-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Tooltip */
#dwfc-wrap .dwfc-tooltip {
	position: absolute;
	background: #fff;
	color: #1f2328;
	font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	padding: 9px 14px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
/* tooltip on the LEFT of the button */
#dwfc-wrap.dwfc-tip-left .dwfc-tooltip {
	right: calc(100% + 12px);
	top: 50%;
	transform: translate(8px, -50%);
}
/* tooltip on the RIGHT of the button */
#dwfc-wrap.dwfc-tip-right .dwfc-tooltip {
	left: calc(100% + 12px);
	top: 50%;
	transform: translate(-8px, -50%);
}
/* tooltip ABOVE the button (lined up with the screen side it sits on) */
#dwfc-wrap.dwfc-tip-top .dwfc-tooltip {
	bottom: calc(100% + 12px);
	transform: translateY(8px);
}
#dwfc-wrap.dwfc-tip-top.dwfc-pos-right .dwfc-tooltip { right: 0; }
#dwfc-wrap.dwfc-tip-top.dwfc-pos-left .dwfc-tooltip  { left: 0; }

#dwfc-wrap:hover .dwfc-tooltip,
#dwfc-wrap .dwfc-tooltip.dwfc-show,
#dwfc-wrap.dwfc-tip-always .dwfc-tooltip { opacity: 1; }
#dwfc-wrap.dwfc-tip-left:hover .dwfc-tooltip,
#dwfc-wrap.dwfc-tip-left .dwfc-tooltip.dwfc-show,
#dwfc-wrap.dwfc-tip-left.dwfc-tip-always .dwfc-tooltip,
#dwfc-wrap.dwfc-tip-right:hover .dwfc-tooltip,
#dwfc-wrap.dwfc-tip-right .dwfc-tooltip.dwfc-show,
#dwfc-wrap.dwfc-tip-right.dwfc-tip-always .dwfc-tooltip { transform: translate(0, -50%); }
#dwfc-wrap.dwfc-tip-top:hover .dwfc-tooltip,
#dwfc-wrap.dwfc-tip-top .dwfc-tooltip.dwfc-show,
#dwfc-wrap.dwfc-tip-top.dwfc-tip-always .dwfc-tooltip { transform: translateY(0); }

@media (max-width: 767px) {
	#dwfc-wrap .dwfc-tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#dwfc-wrap.dwfc-pulse #dwfc-button::before { animation: none; display: none; }
	#dwfc-wrap #dwfc-button,
	#dwfc-wrap .dwfc-tooltip { transition: none; }
}

@media print {
	#dwfc-wrap { display: none !important; }
}