/* Frontend styles (scoped) */
.wpfwa-wrap{
	position: fixed;
	z-index: 999999;
}

.wpfwa-btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

.wpfwa-icon{
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wpfwa-icon-color);
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	transition: transform .15s ease, background .15s ease;
}

.wpfwa-icon svg{
	width: 28px;
	height: 28px;
	display: block;
}

.wpfwa-icon svg *{
	fill: #fff;
}

.wpfwa-btn:hover .wpfwa-icon{
	background: var(--wpfwa-hover-color);
	transform: translateY(-1px);
}

.wpfwa-cta{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #111;
	background: #fff;
	border-radius: 999px;
	padding: 10px 14px;
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	white-space: nowrap;
	transition: opacity .15s ease, transform .15s ease;
}

/* CTA modes */
.wpfwa-cta-hidden .wpfwa-cta{
	display:none;
}

.wpfwa-cta-always .wpfwa-cta{
	display:inline-flex;
}

.wpfwa-cta-hover .wpfwa-cta{
	display:inline-flex;
	opacity: 0;
	transform: translateX(6px);
}

/* Only reveal on devices that support hover */
@media (hover: hover) and (pointer: fine){
	.wpfwa-cta-hover .wpfwa-btn:hover .wpfwa-cta{
		opacity: 1;
		transform: translateX(0);
	}
}

/* Visibility breakpoints */
@media (max-width: 767px){
	.wpfwa-hide-mobile{ display:none !important; }
}
@media (min-width: 768px) and (max-width: 1024px){
	.wpfwa-hide-tablet{ display:none !important; }
}
@media (min-width: 1025px){
	.wpfwa-hide-desktop{ display:none !important; }
}