@keyframes call-widget-pulse {
	0%,
	100% {
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: scale(1.02);
		filter: brightness(1.08);
	}
}

@keyframes call-widget-pulse-mob {
	0%,
	100% {
		transform: translateX(-50%) scale(1);
		filter: brightness(1);
	}

	50% {
		transform: translateX(-50%) scale(1.02);
		filter: brightness(1.08);
	}
}

.call-widget {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9998;
	box-sizing: border-box;
	width: 228px;
	padding: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
	background: #E1E1E166;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	animation: call-widget-pulse 2.8s ease-in-out infinite;

	transition:
		width 0.3s ease,
		transform 0.3s ease;
}

.call-widget--closing {
	animation: none;
}

.call-widget__link {
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
}

.call-widget__picture {
	display: block;
	transition:
		transform 0.3s ease;
}

.call-widget__picture--expanded {
	opacity: 1;
	transform: scale(1);
}

.call-widget__picture--collapsed {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(1);
	pointer-events: none;
}

.call-widget__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.call-widget__close {
	position: absolute;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
	line-height: 0;

	opacity: 1;
	transition: opacity 0.3s ease;
}

.call-widget__close svg {
	display: block;
}

.call-widget__close--desk {
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
}

.call-widget__close--mob {
	display: none;
	top: 5px;
	left: 5px;
	width: 16px;
	height: 16px;
	transition: none;
}

.call-widget--collapsed .call-widget__close,
.call-widget--closing .call-widget__close {
	opacity: 0;
	pointer-events: none;
}

.call-widget--collapsed .call-widget__picture--expanded,
.call-widget--closing .call-widget__picture--expanded {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.92);
	pointer-events: none;
}

.call-widget--collapsed .call-widget__picture--collapsed {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	pointer-events: auto;
}

.call-widget--collapsed {
	width: 113px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media screen and (max-width: 768px) {
	.call-widget {
		right: auto;
		left: 50%;
		bottom: 0;
		width: 100%;
		padding: 0;
		border-radius: 0;
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transform: translateX(-50%);

		animation: call-widget-pulse-mob 2.8s ease-in-out infinite;
	}

	.call-widget__close--desk {
		display: none;
	}

	.call-widget__close--mob {
		display: block;
		height: 20px;
		width: 20px;
	}

	.call-widget__close svg {
		display: block;
		width: 20px;
		height: 20px;
	}

	.call-widget--closing .call-widget__close--mob,
	.call-widget--collapsed .call-widget__close--mob {
		display: none;
	}

	.call-widget--closing,
	.call-widget--collapsed {
		right: 20px;
		left: auto;
		bottom: 20px;
		width: 78px;
		transform: none;
		transition: none;
	}

	.call-widget--collapsed {
		animation: call-widget-pulse 2.8s ease-in-out infinite;
	}

	.call-widget--closing .call-widget__picture--collapsed {
		opacity: 0;
		visibility: hidden;
	}

	.call-widget__picture--expanded .call-widget__img {
		width: 100%;
	}

	.call-widget--collapsed .call-widget__img {
		width: auto;
	}
}