/* ----------------------------------------------------------------
	Custom CSS - GAMA Automation
	Site-specific styles. Loaded after the theme so it can override.
-----------------------------------------------------------------*/


/* WhatsApp Contact Button
============================================= */

.whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 399;
	display: block;
	width: 56px;
	height: 56px;
	padding: 12px;
	border-radius: 50%;
	background-color: #25D366;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
	background-color: #1DA851;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3);
	transform: translateY(-2px);
}

.whatsapp-float svg {
	display: block;
	width: 32px;
	height: 32px;
	fill: #FFFFFF;
}

/* The theme's back-to-top button sits at the same corner and would overlap the
   WhatsApp button, so lift it clear on the pages that use it. The .stretched
   variant is matched too - the theme sets it there and it wins on specificity. */
#gotoTop,
.stretched #gotoTop { bottom: 90px; }

@media (max-width: 767px) {

	.whatsapp-float {
		right: 15px;
		bottom: 15px;
		width: 52px;
		height: 52px;
		padding: 11px;
	}

	.whatsapp-float svg {
		width: 30px;
		height: 30px;
	}

}

@media (prefers-reduced-motion: reduce) {

	.whatsapp-float { transition: none; }

	.whatsapp-float:hover,
	.whatsapp-float:focus { transform: none; }

}

/* WhatsApp Enquiry Button (product pages)
   The theme's accent rule in colors.css is `.button` plus seventeen chained
   :not() hooks, so it outranks any sane selector. `button-green` is one of
   those hooks - adding it opts the button out, letting this rule apply. */

.button.button-whatsapp {
	background-color: #25D366;
}

.button.button-whatsapp:hover,
.button.button-whatsapp:focus {
	background-color: #1DA851;
}