.fancify-core-sp-socials {
	position: relative;
	min-width: 55px;
	min-height: 55px;

	.fancify-core-sp-social-container {

		ul {
			z-index: 2;
			background: $white-color;
			width: 80px;
			opacity: 0;
			box-shadow: 0 3px 20px rgba($black-color, 0.13);
			border-radius: 0 0 5px 5px;
			text-align: center;
			position: absolute;
			list-style: none;
			padding: 0px;
			margin: 0px;
			transition: $tr-fast;

			li {
				border-top: 1px solid rgba($black-color, 0.10);
				height: auto;
				margin-top: 2px;

				.wpl-tooltip-top {
					padding: 0px 20px;
					color: $default-purple;
					@include font-size(25);
					font-family: "fancify-fontastic";

					&:hover {
						color: $black-color;
					}
				}

				a {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					i {
						@include font-size(24);
						color: $default-purple;
					}
				}

				&:hover {
					i {
						color: $black-color;
					}
				}
			}
		}

		&:hover {
			ul {
				opacity: 1;
				transition: $transition-normal;
			}

			.fancify-core-sp-social-share {
				color: $white-color;

				&:before {
					opacity: 1;
					transition: $transition-normal;
				}
			}
		}

		.fancify-core-sp-social-share {
			cursor: pointer;
			text-align: center;
			border-radius: 5px;
			width: 82px;
			height: 95px;
			@include font-size(38);
			font-family: "fancify-fontastic";
			box-shadow: 0 3px 20px rgba($black-color, 0.13);
			position: relative;

			&:before {
				position: absolute;
				content: "";
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, $default-lblue, $default-purple);
				z-index: -1;
				transition: opacity 0.3s linear;
				opacity: 0;
				transition: $transition-normal;
				border-radius: 5px;
			}

			// &:hover {
			//     color: $white-color;

			//     &:before {
			//         opacity: 1;
			//         transition: $transition-normal;
			//     }
			// }

			i {
				@include font-size(38);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		// &.active {
		//     .fancify-core-sp-social-share {
		//         border-radius: 5px 5px 0 0;
		//         background: linear-gradient(180deg, $default-lblue, $default-purple);
		//         color: $white-color;
		//     }

		//     ul {
		//         display: block;
		//     }
		// }
	}

	&.fancify-core-modern-style {
		min-width: 3.5rem;
		min-height: 3.5rem;

		@include for-tablet {
			min-width: 3.4rem;
			min-height: 3.4rem;
		}

		.fancify-core-sp-social-container {
			border-radius: 100px;
			position: absolute;
			z-index: 2;
			background: $white-color;
			width: auto;
			transition: 300ms;

			.fancify-core-sp-social-share {
				border-radius: 100px;
				width: 3.5rem;
				height: 3.5rem;
				box-shadow: unset;
				box-shadow: 0 3px 20px rgba($black-color, 0.29) !important;

				@include for-tablet {
					width: 3.4rem;
					height: 3.4rem;
				}

				i {
					@include font-size(30);
				}

				&:before {
					background: linear-gradient(180deg, $default-green, $default-light-green);
					border-radius: 100px;
				}
			}

			ul {
				width: 3.45rem;
				position: initial;
				box-shadow: unset;
				max-height: 0;
				background: transparent;
				z-index: -1;
				display: block;
				line-height: 0;
				overflow: hidden;

				li {
					border-top: unset !important;
					border-radius: 100px;
				}

				a {
					position: relative;
					// background: $white-color;
					border-radius: 100px;
					width: 3.45rem;
					height: 3.45rem;

					&:before {
						position: absolute;
						content: "";
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background: linear-gradient(180deg, $default-green, $default-light-green);
						z-index: 0;
						transition: opacity 0.3s linear;
						opacity: 0;
						transition: $transition-normal;
						border-radius: 100px;
						box-shadow: 0 3px 20px rgba($black-color, 0.29) !important;
					}

					i {
						z-index: 1;
						color: #0B2A53;
					}

					&:hover {
						&:before {
							opacity: 1;
							transition: $transition-normal;
						}

						i {
							color: $white-color;
						}
					}
				}
			}

			&:hover {
				box-shadow: 0 3px 20px rgba($black-color, 0.29) !important;
				padding: 5px;
				margin-top: -5px;
				margin-left: -5px;

				ul {
					max-height: 100%;
					line-height: initial;
				}
			}
		}
	}

	&.fancify-core-broker-lite-style {
		.fancify-core-sp-social-container {
			display: flex;
			flex-wrap: wrap;

			.fancify-property-share-icon a {
				box-shadow: unset;
				margin-right: 8px;
				border: 1px solid #736EFE;
				display: flex;
				border-radius: 10px;
				transition: $tr-fast;

				i {
					@include font-size(18);
					color: #736EFE;
					padding: 8px;
					transition: $tr-fast;

					&:before {
						vertical-align: initial;
					}
				}

				&:hover {
					background: #736EFE;

					i {
						color: $white-color;
					}
				}
			}
		}
	}
}

.fancify-core-sp-print,
.fancify-core-sp-compare,
.fancify-core-sp-favorite {
	cursor: pointer;
	display: block;
	text-align: center;
	border-radius: 5px;
	width: 82px;
	height: 95px;
	@include font-size(38);
	color: #464646;
	font-family: "fancify-fontastic";
	box-shadow: 0 3px 20px rgba($black-color, 0.13) !important;
	z-index: 1;
	position: relative;
	transition: $transition-normal;

	&:before {
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(180deg, $default-lblue, $default-purple);
		z-index: -1;
		transition: opacity 0.3s linear;
		opacity: 0;
		transition: $transition-normal;
		border-radius: 5px;
	}

	i {
		@include font-size(38);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&:hover {
		color: $white-color;

		&:before {
			opacity: 1;
			transition: $transition-normal;
		}
	}

	&.fancify-core-modern-style {
		border-radius: 100px;
		width: 3.5rem;
		height: 3.5rem;
		text-decoration: none;
		box-shadow: 0 3px 20px rgba($black-color, 0.29) !important;

		@include for-tablet {
			width: 3.4rem;
			height: 3.4rem;
		}

		i {
			@include font-size(25);

			&.fancify-font-plus-1 {
				@include font-size(20);
			}

			&.fancify-font-printer {
				@include font-size(30);
			}
		}

		&:before {
			border-radius: 100px;
			background: linear-gradient(180deg, $default-green, $default-light-green);
			box-shadow: 0 3px 20px rgba($default-green, 0.35);
		}
	}
}


.fancify-core-qrcode-widget {
	img {
		width: 100%;
		box-shadow: 0 3px 20px rgba($black-color, 0.09);
	}
}