/* Moonshine WhatsApp Button — frontend styles */

.mwb-btn {
	position: fixed;
	z-index: 999999;
	width: var(--mwb-size, 56px);
	height: var(--mwb-size, 56px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	--mwb-count: 1;
}

.mwb-btn *,
.mwb-btn *::before,
.mwb-btn *::after {
	box-sizing: border-box;
}

/* --- Corner positions (offsets via --mwb-x / --mwb-y, set inline by PHP) --- */

.mwb-pos-bottom-right { right: var(--mwb-x, 20px); bottom: var(--mwb-y, 20px); }
.mwb-pos-bottom-left  { left: var(--mwb-x, 20px);  bottom: var(--mwb-y, 20px); }
.mwb-pos-top-right    { right: var(--mwb-x, 20px); top: var(--mwb-y, 20px); }
.mwb-pos-top-left     { left: var(--mwb-x, 20px);  top: var(--mwb-y, 20px); }

/* --- Icon styles --- */

.mwb-icon-filled {
	background: var(--mwb-bg, #25d366);
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.mwb-icon-outline {
	background: #fff;
	color: var(--mwb-bg, #25d366);
	border: 2px solid var(--mwb-bg, #25d366);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.mwb-icon-bubble {
	background: var(--mwb-bg, #25d366);
	color: #fff;
	border-radius: 28%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.mwb-svg {
	width: 56%;
	height: 56%;
	fill: currentColor;
	display: block;
}

.mwb-btn:hover { filter: brightness(1.06); }

.mwb-btn:focus-visible {
	outline: 3px solid #128c7e;
	outline-offset: 3px;
}

/* --- Tooltip --- */

.mwb-tip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(.95);
	background: #111;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font: 13px/1.3 -apple-system, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.mwb-tip-left  { right: calc(100% + 10px); }
.mwb-tip-right { left: calc(100% + 10px); }

.mwb-btn:hover .mwb-tip,
.mwb-btn:focus-visible .mwb-tip {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

/* --- Animations (once / loop modes use mwb-k-* keyframes) --- */

.mwb-anim-pulse         { animation: mwb-k-pulse 1.6s ease-in-out var(--mwb-count); }
.mwb-anim-bounce        { animation: mwb-k-bounce 1.1s ease-in-out var(--mwb-count); }
.mwb-anim-shake         { animation: mwb-k-shake .7s ease-in-out var(--mwb-count); }
.mwb-anim-slide-in-up   { animation: mwb-k-slide-in-up .9s cubic-bezier(.21, 1.02, .73, 1) var(--mwb-count); }
.mwb-anim-slide-in-down { animation: mwb-k-slide-in-down .9s cubic-bezier(.21, 1.02, .73, 1) var(--mwb-count); }
.mwb-anim-heartbeat     { animation: mwb-k-heartbeat 1.3s ease-in-out var(--mwb-count); }
.mwb-anim-tada          { animation: mwb-k-tada 1.2s ease-in-out var(--mwb-count); }
.mwb-anim-rotate-in     { animation: mwb-k-rotate-in 1s cubic-bezier(.21, 1.02, .73, 1) var(--mwb-count); }

/* --- Play modes --- */

.mwb-mode-loop     { --mwb-count: infinite; }

/* Interval mode swaps to the PHP-generated mwb-cycle keyframes, whose
   duration equals the configured interval. */
.mwb-mode-interval {
	--mwb-count: infinite;
	animation-name: mwb-cycle;
	animation-duration: var(--mwb-int, 6s);
	animation-timing-function: ease-in-out;
}

/* --- Keyframes --- */

@keyframes mwb-k-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

@keyframes mwb-k-bounce {
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-16%); }
	55%      { transform: translateY(0); }
	75%      { transform: translateY(-7%); }
}

@keyframes mwb-k-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-9%); }
	40%      { transform: translateX(9%); }
	60%      { transform: translateX(-6%); }
	80%      { transform: translateX(6%); }
}

@keyframes mwb-k-slide-in-up {
	0%   { transform: translateY(140%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes mwb-k-slide-in-down {
	0%   { transform: translateY(-140%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes mwb-k-heartbeat {
	0%, 100% { transform: scale(1); }
	20%      { transform: scale(1.16); }
	35%      { transform: scale(1); }
	55%      { transform: scale(1.12); }
	75%      { transform: scale(1); }
}

@keyframes mwb-k-tada {
	0%   { transform: scale(1) rotate(0); }
	15%  { transform: scale(.92) rotate(-4deg); }
	30%  { transform: scale(1.04) rotate(4deg); }
	45%  { transform: scale(.98) rotate(-3deg); }
	60%  { transform: scale(1.03) rotate(3deg); }
	75%  { transform: scale(1) rotate(-1deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes mwb-k-rotate-in {
	0%   { transform: rotate(-200deg) scale(.3); opacity: 0; }
	100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* --- Respect users who prefer less motion --- */

@media (prefers-reduced-motion: reduce) {
	.mwb-btn { animation: none !important; }
	.mwb-tip { transition: none; }
}