/*****************************
    listing
*****************************/
.home-search {
	.form-group {
		position: relative;

		span {
			position: absolute;
			left: 0;
			background: $white;
			padding: 14px 16px;
			line-height: 22px;

			&:before {
				position: absolute;
				content: "";
				right: -10px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 0 10px 10px;
				border-color: transparent transparent transparent $white;
			}

		}

		.form-control {
			padding-left: 100px;
			background: $gray-2;

			&:focus {
				border-color: $gray-2;
			}

		}

	}

	.form-location {
		position: relative;

		.form-control {
			padding-right: 50px;
		}

		.location-icon {
			position: absolute;
			right: 0;
			top: 0;
			color: $primary;
			z-index: 1;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;

			&:hover {
				color: $primary;
			}

		}

	}

}

.home-search-02 {
	.form-group {
		position: relative;

		.form-control {
			height: 60px;
			border-radius: 0;

			&:focus {
				border-color: $border-color;
			}

		}

	}

	.select-border .select2-container--default .select2-selection--single {
		height: 60px;
		padding: 20px 20px;
	}

	.select-border .select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 22px;
	}

	.form-location {
		position: relative;

		.form-control {
			padding-right: 50px;
		}

		.location-icon {
			position: absolute;
			right: 0;
			top: 0;
			color: $primary;
			z-index: 1;
			width: 50px;
			height: 60px;
			line-height: 63px;
			text-align: center;

			&:hover {
				color: $primary;
			}

		}

	}

	.btn {
		padding: 18px 25px;
		border-radius: 0;
		line-height: 22px;
	}

}

.listing-item {
	box-shadow: 0 1px 2px rgba($black, 0.1);

	.listing-image {
		position: relative;
		overflow: hidden;

		img {
			transition: all 0.3s ease-in-out;
			min-height: 100%;
			object-fit: cover;
		}

		.listing-quick-box {
			position: absolute;
			bottom: 0;
			display: flex;
			width: 100%;
			padding: 20px;
			z-index: 2;

			.category {
				color: $white;
				font-size: 16px;

				i {
					padding-right: 5px;
				}

				&:hover {
					color: $secondary;
				}

			}

			.popup {
				margin-left: auto;
				color: $white;
				font-size: 16px;

				&:hover {
					color: $primary;
				}

			}

			.like {
				color: $white;
				margin-left: 20px;
				font-size: 16px;

				&:hover {
					color: $primary;
				}

			}

		}

	}

	.listing-details {
		background: $white;

		.listing-details-inner {
			padding: 20px;

			.listing-title {
				display: flex;
			}

			.listing-price {
				margin-left: auto;
				font-size: 18px;
				color: $gray-8;
			}

			.listing-rating-call {
				display: flex;

				.listing-rating {
					font-size: 13px;
					color: $gray-3;

					span {
						border: 1px solid $success;
						padding: 0 4px;
						line-height: 16px;
						border-radius: $border-radius;
						color: $success;
					}

					&:hover {
						color: $primary;
					}

				}

				.listing-call {
					margin-left: 20px;
					color: $gray-3;
					font-size: 13px;

					&:hover {
						color: $primary;
					}

				}

			}

			.listing-info {
				display: flex;
				margin-top: 15px;

				img {
					margin-right: 16px;
					width: 40px;
					height: 40px;
				}

				p {
					font-size: 13px;
				}

			}

		}

		.listing-bottom {
			border-top: 1px solid $border-color;
			padding: 16px 20px;
			display: flex;
			align-items: center;

			.listing-loaction {
				color: $gray-3;
				font-size: 13px;

				i {
					padding-right: 5px;
				}

				&:hover {
					color: $primary;
				}

			}

			.listing-close {
				position: relative;
				margin-left: auto;
				border: 1px solid $danger;
				color: $danger;
				font-size: 12px;
				padding: 4px 8px 2px;
				line-height: 16px;
				border-radius: $border-radius;
				background: $white;

				&:before {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					bottom: -3px;
					left: 0;
					border-radius: $border-radius;
					border-bottom: 1px solid $danger;
					z-index: 0;
				}

			}

			.listing-open {
				position: relative;
				margin-left: auto;
				border: 1px solid $gray-8;
				color: $gray-8;
				font-size: 12px;
				padding: 4px 8px 2px;
				line-height: 16px;
				border-radius: $border-radius;
				background: $white;

				&:before {
					position: absolute;
					content: "";
					width: 100%;
					height: 100%;
					bottom: -3px;
					left: 0;
					border-radius: $border-radius;
					border-bottom: 1px solid $gray-8;
					z-index: 0;
				}

			}

		}

	}

	&:hover {
		.listing-image {
			img {
				transform: scale(1.1);
			}

		}

	}

}

// Property Filter
.property-filter {
	position: relative;
	background: $white;
	box-shadow: 0 1px 2px rgba($black, 0.1);

	ul {
		li {
			padding: 0px 14px;
			display: flex;

			a {
				color: $body-color;
				font-size: 12px;

				&:hover {
					color: $primary;
				}

			}

		}

		li.active {
			a {
				span {
					background: $primary;
				}

			}

		}

		&:nth-child(2n+2) {
			li {
				&:last-child {
					border-right: none;
					padding-left: 0;
				}

			}

		}

	}

	.property-short {
		.select2-container {
			min-width: 130px;
			margin-left: 10px;
		}

	}

	.property-view-list {
		margin-left: auto;
		align-items: center;
	}

	.property-list-icon {
		display: block;
		background: rgba($primary, 0.1);
		padding: 10px 10px 8px;
		border-radius: $border-radius;

		span {
			margin: 0 auto;
			background: $primary;
			height: 2px;
			width: 10px;
			border-radius: 3px;
			margin-bottom: 2px;
			display: block;

			&:nth-child(2) {
				width: 16px;
			}

		}

		&:hover,
		.active {
			background: $primary;

			span {
				background: $white;
			}

		}

	}

	.property-list-icon.active {
		background: $primary;

		span {
			background: $white;
		}

	}

	.property-grid-icon {
		display: flex;
		background: rgba($primary, 0.1);
		color: $primary;
		padding: 10px 10px 8px;
		border-radius: $border-radius;

		span {
			background: $primary;
			width: 2px;
			height: 10px;
			border-radius: 3px;
			margin: 0 1px;
			display: inline-block;

			&:nth-child(2) {
				height: 16px;
				margin-top: -3px;
			}

		}

		&:hover {
			background: $primary;

			span {
				background: $white;
			}

		}

	}

	.property-grid-icon.active {
		background: $primary;

		span {
			background: $white;
		}

	}

}

.sidebar {
	margin-bottom: 20px;

	.widget {
		margin-bottom: 20px;
		background: $white;
		box-shadow: 0 1px 2px rgba($black, 0.1);

		.form-group {
			.btn {
				padding: 12px 19px;
			}

		}

	}

	.widget-title {
		padding: 14px 20px;

		i {
			padding-right: 8px;
		}

	}

	.widget-content {
		background: $white;
		padding: 20px;

		.collapse-title {
			font-size: 16px;
			font-weight: 500;
			color: $gray-8;
			margin-bottom: 10px;
			display: flex;

			i {
				margin-left: auto;
				color: $gray-2;
			}

		}

		.collapse-title-icon-left {
			color: $gray-8;
			display: block;

			i {
				margin-left: inherit;
				padding-right: 6px;
			}

		}

	}

	.widget-car-body {
		ul {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 0;

			li {
				flex: 2;
				min-width: 50%;
				margin-bottom: 10px;

				a {
					color: $gray-3;

					span {
						margin-top: 4px;
						display: block;
					}

					&:hover {
						color: $primary;
					}

				}

			}

		}

	}

	.widget-contact {
		ul {
			margin-top: 20px;

			li {
				margin-bottom: 10px;

				i {
					color: $primary;
					width: 20px;
					margin-right: 10px;
				}

			}

		}

	}

}

.widget-content {
	.recent-list-item {
		img {
			height: 100%;
		}

	}

}

.form-icon {
	position: relative;

	input {
		padding-right: 50px;
	}

	i {
		position: absolute;
		top: 18px;
		right: 24px;
	}

}

.listing-map .map-canvas {
	height: 500px;
}

.listing-map.listing-map-banner .map-canvas {
	height: 600px;
}

.listing-item-map {
	position: relative;
	max-height: inherit;
	padding: 164px 0px 0px 0px;
	box-shadow: 0 4px 16px rgba(black, 0.1);
	overflow: auto;
	z-index: 2;

	.listing-rating-call {
		display: flex;

		.listing-rating {
			font-size: 13px;
			color: $gray-3;

			span {
				border: 1px solid $success;
				padding: 0 4px;
				line-height: 16px;
				border-radius: $border-radius;
				color: $success;
			}

			&:hover {
				color: $primary;
			}

		}

		.listing-call {
			margin-left: 20px;
			color: $gray-3;
			font-size: 13px;

			&:hover {
				color: $primary;
			}

		}

	}

}

.si-pointer-bg-top {
	box-shadow: 0 4px 16px rgba(black, 0.1);
}

.listing-item-map-img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 180px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 1;
}

.listing-item-map-title {
	margin-top: 12px;
}

.listing-item-map-price {
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.listing-item-map-content {
	p {
		margin: 0;
	}

	* {
		+ {
			p {
				margin-top: 1em;
			}

		}

	}

	a {
		color: $gray-3;

		&:hover {
			color: $primary;
		}

		&:focus {
			color: $primary;
		}

		&:active {
			color: $primary;
		}

	}

}

.custom-close {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 9;
	width: 24px;
	padding: 0 8px;
	height: 24px;
	border-radius: 0;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	border: 0;
	background-color: $secondary;
	color: $white;
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.custom-close:hover {
	background-color: #001935;
}

.custom-close:focus {
	background-color: #001935;
}

.custom-close:active {
	background-color: #001935;
}

// car-detail-page

.listing-detail-page {
	.listing-detail-box {
		padding: 20px;
		background: $white;
		box-shadow: 0 1px 2px rgba($black, 0.1);
	}

	.detail-title {
		padding: 0px 0 10px;
		border-bottom: 1px solid $border-color;
		margin-bottom: 20px;
	}

}

.slider-nav {
	.slick-slide {
		padding: 10px 10px 0 0;
	}

}

.listing-detail-meta {
	display: flex;
	flex-wrap: wrap;

	li {
		margin-right: 10px;
		margin-bottom: 5px;

		> a {
			font-size: 14px;
			color: $gray-7;
			padding: 10px 20px;
			box-shadow: 0 1px 2px rgba($black, 0.1);
			display: block;
			background: $white;

			i {
				padding-right: 4px;
				color: $gray-3;
				transition: all 0.3s ease-in-out;
			}

			&:hover {
				background: $primary;
				color: $white;

				i {
					color: $secondary;
				}

			}

		}

	}

}

.social-box {
	background: $white;
	box-shadow: 0 4px 8px rgba($black, 0.1);
	padding: 14px;
	position: absolute;
	width: 260px;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	z-index: 9;
	margin-top: 6px;

	ul {
		display: flex;
		flex-wrap: wrap;

		li {
			flex: 0 0 50%;
			max-width: 50%;
			margin-right: 0;
			margin-bottom: 2px;

			a {
				font-size: 14px;
				padding: 10px;
				margin-bottom: 4px;

				i {
					width: 22px;
				}

			}

			a.facebook {
				i {
					color: #3b5998;
				}

			}

			a.twitter {
				i {
					color: #1da1f2;
				}

			}

			a.linkedin {
				i {
					color: #0077B5;
				}

			}

			a.instagram {
				i {
					color: #e4405f;
				}

			}

			a {
				&:hover {
					i {
						color: $white;
					}

				}

			}

		}

	}

}

.social-share:hover .social-box {
	opacity: 1;
	visibility: visible;
	margin-top: 0;
}

.ratings {
	border: none;
	float: left;
}

.ratings > input {
	display: none;
}

.ratings > label:before {
	margin: 5px;
	font-size: 1.25em;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	content: "\f005";
	font-weight: 900;
}

.ratings > .half:before {
	content: "\f089";
	position: absolute;
}

.ratings > label {
	color: #ddd;
	float: right;
}

.ratings > input:checked ~ label,
.ratings:not(:checked) > label:hover,
.ratings:not(:checked) > label:hover ~ label {
	color: #FFD700;
}

.ratings > input:checked + label:hover,
.ratings > input:checked ~ label:hover,
.ratings > label:hover ~ input:checked ~ label,
.ratings > input:checked ~ label:hover ~ label {
	color: #FFED85;
}

@media (max-width:1200px) {
	.sidebar .widget .form-group .btn {
		padding: 12px 10px;
	}

}

@media (max-width:991px) {
	.slider-slick .slider-nav .slick-next,
	.slider-slick .slider-nav .slick-prev {
		display: none !important;
	}

	.listing-item .listing-image img {
		width: 100%;
	}

	.scrollbar.scroll_dark.h-100vh {
		height: 100% !important;
	}

	.social-box {
		width: 120px;
	}

	.social-box ul li {
		flex: inherit;
		max-width: inherit;
	}

	.social-box ul li a {
		padding: 0px;
		box-shadow: none;
	}

}

@media (max-width:575px) {
	.property-filter {
		.select2-container--default {
			.select2-selection--single {
				padding-left: 0px;
			}
		}
		.property-short {
			.select2-container {
				margin-left: 0;
			}
		}
	}
	.listing-item {
		.listing-details {
			.listing-details-inner {
				.listing-title {
					display: inherit;
				}
				.listing-rating-call {
					margin-top: 15px;
				}
			}
		}
	}
}
