/**
==================================================
IMPERIA CONTACTS
==================================================
*/


.imperia-floating-contacts
{
	position: fixed;

	right: 15px;
	bottom: 77px;

	z-index: 9999;

	display: flex;
	flex-direction: column;
	align-items: center;
}



/**
==================================================
CONTACT LIST
==================================================
*/

.imperia-contact-list
{
	display: flex;

	flex-direction: column;

	gap: 12px;

	margin-bottom: 12px;
}



/**
==================================================
BUTTONS
==================================================
*/

.imperia-contact-button,
.imperia-contact-item
{
	width: 60px;

	height: 60px;

	border: none;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	text-decoration: none;

	cursor: pointer;

	box-shadow:
		0 4px 12px rgba(
			0,
			0,
			0,
			0.18
		);

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}



.imperia-contact-button:hover,
.imperia-contact-item:hover
{
	transform: translateY(-4px);

	box-shadow:
		0 8px 18px rgba(
			0,
			0,
			0,
			0.22
		);
}



/**
==================================================
MAIN BUTTON
==================================================
*/

.imperia-contact-button
{
	background: #04f153;

	color: #ffffff;
}



/**
==================================================
CONTACT COLORS
==================================================
*/

.imperia-contact-phone
{
	background: #27ae60;
	color: #ffffff;
}



.imperia-contact-telegram
{
	background: #229ed9;
	color: #ffffff;
}



.imperia-contact-max
{
	background: #7c3aed;
	color: #ffffff;
}



/**
==================================================
SVG
==================================================
*/

.imperia-contact-button svg,
.imperia-contact-item svg
{
	width: 28px;

	height: 28px;

	fill: currentColor;

	display: block;
}



/**
==================================================
TOGGLE ICONS
==================================================
*/

.icon-contact,
.icon-arrow
{
	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;
}



.icon-arrow
{
	display: none;
}



/**
==================================================
OPEN STATE
==================================================
*/

.imperia-floating-contacts.open
.icon-contact
{
	display: none;
}



.imperia-floating-contacts.open
.icon-arrow
{
	display: flex;
}



/**
==================================================
ARROW ROTATION
==================================================
*/

.icon-arrow svg
{
	transition: transform .25s ease;
}



.imperia-floating-contacts.open
.icon-arrow svg
{
	transform: rotate(0deg);
}



/**
==================================================
CONTACT ANIMATION
==================================================
*/

.imperia-contact-item
{
	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transform: translateY(20px);

	transition:
		opacity .3s ease,
		transform .3s ease,
		visibility .3s ease;
}



.imperia-floating-contacts.open
.imperia-contact-item
{
	opacity: 1;

	visibility: visible;

	pointer-events: auto;

	transform: translateY(0);
}



/**
==================================================
STAGGER EFFECT
==================================================
*/

.imperia-contact-item:nth-child(1)
{
	transition-delay: 0s;
}

.imperia-contact-item:nth-child(2)
{
	transition-delay: .05s;
}

.imperia-contact-item:nth-child(3)
{
	transition-delay: .10s;
}

.imperia-contact-item:nth-child(4)
{
	transition-delay: .15s;
}

.imperia-contact-item:nth-child(5)
{
	transition-delay: .20s;
}



/**
==================================================
MOBILE
==================================================
*/

@media (max-width: 768px)
{
	.imperia-floating-contacts
	{
		/* right: 16px; */
		bottom: 16px;
	}

	.imperia-contact-button,
	.imperia-contact-item
	{
		width: 56px;

		height: 56px;
	}

	.imperia-contact-button svg,
	.imperia-contact-item svg
	{
		width: 26px;

		height: 26px;
	}
}