/* Premium Frontend Button Styles */

:root {
	--wpscr-color-wa: #25d366;
	--wpscr-color-hover: #1EBE5D; /* slightly darker for smoother hover */
	--wpscr-color-text: #ffffff;
	--wpscr-shadow-sm: 0 4px 6px -1px rgba(37, 211, 102, 0.4), 0 2px 4px -2px rgba(37, 211, 102, 0.3);
	--wpscr-shadow-md: 0 10px 15px -3px rgba(37, 211, 102, 0.5), 0 4px 6px -4px rgba(37, 211, 102, 0.3);
	--wpscr-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Inline Shortcode Button */
.wpscr-inline-container {
	margin: 20px 0;
	display: inline-block;
}

.wpscr-inline-btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 28px;
	background-color: var(--wpscr-color-wa);
	color: var(--wpscr-color-text) !important;
	border-radius: 50px;
	font-weight: 600;
	font-family: system-ui, -apple-system, sans-serif;
	letter-spacing: 0.3px;
	text-decoration: none !important;
	transition: all 0.35s var(--wpscr-ease-out);
	box-shadow: var(--wpscr-shadow-sm);
	position: relative;
	overflow: hidden;
}

/* Subtle inner glow for depth */
.wpscr-inline-btn::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
	pointer-events: none;
	border-radius: 50px;
}

.wpscr-inline-btn:hover {
	background-color: var(--wpscr-color-hover);
	transform: translateY(-4px);
	box-shadow: var(--wpscr-shadow-md);
}

.wpscr-inline-btn .wpscr-icon {
	width: 26px;
	height: 26px;
	margin-right: 12px;
	vertical-align: middle;
	filter: brightness(0) invert(1);
}

.wpscr-inline-btn .wpscr-label {
	line-height: 1.2;
}

/* 2. Floating Button */
.wpscr-float-btn {
	position: fixed;
	bottom: 30px;
	display: flex;
	align-items: center;
	z-index: 999999;
	text-decoration: none !important;
	/* Ensures interaction box matches visual bounding */
	cursor: pointer;
}

.wpscr-pos-right { right: 30px; }
.wpscr-pos-left { left: 30px; flex-direction: row-reverse; }

.wpscr-floating-label {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #1e293b;
	padding: 10px 18px;
	border-radius: 12px;
	font-weight: 600;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 14px;
	letter-spacing: 0.2px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
	border: 1px solid rgba(255,255,255,0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px) scale(0.95);
	transition: all 0.4s var(--wpscr-ease-out);
	white-space: nowrap;
	pointer-events: none; /* Let hover rely solely on the main container */
}

.wpscr-pos-right .wpscr-floating-label { margin-right: 20px; }
.wpscr-pos-left .wpscr-floating-label { margin-left: 20px; transform: translateX(-10px) scale(0.95); }

.wpscr-floating-icon {
	width: 64px;
	height: 64px;
	background-color: var(--wpscr-color-wa);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: var(--wpscr-shadow-sm);
	position: relative;
	transition: all 0.4s var(--wpscr-ease-out);
	/* Elegant Pulse Animation */
	animation: wpscr-pulse 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

/* Subtle inner glow for depth */
.wpscr-floating-icon::after {
	content: '';
	position: absolute;
	top: 1px; left: 1px; right: 1px; bottom: 1px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	pointer-events: none;
}

.wpscr-floating-icon img {
	width: 36px;
	height: 36px;
	filter: brightness(0) invert(1);
	transition: transform 0.4s var(--wpscr-ease-out);
}

/* Hover States */
.wpscr-float-btn:hover .wpscr-floating-icon {
	transform: scale(1.08) translateY(-4px);
	box-shadow: var(--wpscr-shadow-md);
	background-color: var(--wpscr-color-hover);
	animation-play-state: paused;
}
.wpscr-float-btn:hover .wpscr-floating-icon img {
	transform: scale(1.1);
}
.wpscr-float-btn:hover .wpscr-floating-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(0) scale(1);
}

/* Animations */
@keyframes wpscr-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
	}
	50% {
		box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* Responsive Overrides */
@media (max-width: 768px) {
	.wpscr-hide-mobile { display: none !important; }
	.wpscr-float-btn { bottom: 20px; }
	.wpscr-pos-right { right: 20px; }
	.wpscr-pos-left { left: 20px; }
	.wpscr-floating-icon { width: 50px; height: 50px; }
	.wpscr-floating-icon img { width: 28px; height: 28px; }
	/* Hide tooltip on mobile to save space */
	.wpscr-floating-label { display: none !important; }
}

@media (min-width: 769px) {
	.wpscr-hide-desktop { display: none !important; }
}