/* Tador WhatsApp Button — floating action button */

.twa-btn {
	position: fixed !important;
	bottom: 22px;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	direction: rtl;
	-webkit-tap-highlight-color: transparent;
}
.twa-btn.twa-right { right: 22px; flex-direction: row; }
.twa-btn.twa-left  { left: 22px;  flex-direction: row-reverse; }

.twa-circle {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
	transition: transform .18s ease, box-shadow .18s ease;
	flex: 0 0 auto;
}
.twa-circle svg {
	width: 34px;
	height: 34px;
	fill: #fff;
	display: block;
}
.twa-btn:hover .twa-circle {
	transform: scale(1.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
}

/* --- Themes --- */
.twa-theme-green .twa-circle { background: #25D366; }
.twa-theme-green .twa-label  { color: #128C7E; }

.twa-theme-red   .twa-circle { background: #E8001C; }
.twa-theme-red   .twa-label  { color: #E8001C; }

/* --- Optional label bubble --- */
.twa-label {
	background: #fff;
	padding: 9px 14px;
	border-radius: 24px;
	font-family: 'Heebo', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	line-height: 1;
}

/* --- Pulse ring --- */
.twa-pulse .twa-circle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: -1;
	animation: twa-pulse 2s infinite;
}
.twa-theme-green.twa-pulse .twa-circle::before { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
.twa-theme-red.twa-pulse   .twa-circle::before { box-shadow: 0 0 0 0 rgba(232, 0, 28, .5); }

@keyframes twa-pulse {
	0%   { box-shadow: 0 0 0 0 currentColor; opacity: .7; }
	70%  { box-shadow: 0 0 0 18px transparent; opacity: 0; }
	100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}
/* Bind the pulse color to the theme via the ::before element's box-shadow above.
   currentColor fallback kept subtle; explicit theme shadows drive the visible ring. */
.twa-theme-green.twa-pulse .twa-circle::before { animation-name: twa-pulse-green; }
.twa-theme-red.twa-pulse   .twa-circle::before { animation-name: twa-pulse-red; }

@keyframes twa-pulse-green {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
	70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes twa-pulse-red {
	0%   { box-shadow: 0 0 0 0 rgba(232, 0, 28, .5); }
	70%  { box-shadow: 0 0 0 18px rgba(232, 0, 28, 0); }
	100% { box-shadow: 0 0 0 0 rgba(232, 0, 28, 0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.twa-pulse .twa-circle::before { animation: none; }
}

/* Mobile: slightly smaller, hide the label to keep it clean */
@media (max-width: 600px) {
	.twa-btn { bottom: 16px; }
	.twa-btn.twa-right { right: 16px; }
	.twa-btn.twa-left  { left: 16px; }
	.twa-circle { width: 54px; height: 54px; }
	.twa-circle svg { width: 30px; height: 30px; }
	.twa-label { display: none; }
}