// ====
// Cards
// ====

.ht-card{
	display: block; 
	background-color: #fff;
	border-radius: 6px;
}

.single-property-card{
	position: relative;
	display: block;
	margin: 0 0 12px;
	border-radius: 6px;
	&.has-border{
		border: 1px solid #eee;
	}
	.card-header{
		position: relative;
		z-index: 200;
		.property__badges{
			position: absolute;
			top: 6px; left: 6px;
			max-width: calc(100% - 36px);
		}
		.property__prices{
			position: absolute;
			bottom: 12px; right: 12px;
		}
	}
	.card-content{
		position: relative;
		z-index: 200;
		padding: 12px;
	}
	.property__photo{
		@include transition(opacity .1s ease-in-out);
		.ht-inner{
			border-radius: 6px 6px 0 0;
		}
		.ht-inner{
			overflow: hidden;
		}
		img{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			@include transition(transform .2s ease-in-out);
		}
	}
	.property__badges{
		font-size: 0;
		.single-badge{
			display: inline-block;
			vertical-align: top;
			line-height: 18px;
			font-size: 12px;
			font-weight: 500;
			padding: 1px 5px 1px;
			font-size: 0;
			border-radius: 4px;
			margin: 0 8px 0 0;
			&:last-child{
				margin: 0;
			}
			.single-badge__icon{
				display: inline-block;
				vertical-align: top;
				line-height: 18px;
				font-size: 13px;
			}
			.single-badge__text{
				display: inline-block;
				vertical-align: top;
				margin: 0 0 0 5px;
				line-height: 18px;
				font-size: 11px;
			}
			&.single-badge--verified{
				background-color: rgba(#fff,.8);
				.single-badge__icon{
					color: $color-primary;
				}
				.single-badge__text{
					color: $grey800;
				}
			}
			&.single-badge--featured{
				background-color: rgba($color-primary,.9);
				.single-badge__icon{
					color: #fff;
				}
				.single-badge__text{
					color: #fff;
				}
			}
		}
	}
	.property__prices{
		padding: 4px 8px 3px;
		font-size: 0;
		color: #fff;
		background-color: $color-primary;
		border-radius: 4px;
		& > div{
			display: inline-block;
			font-size: 14px;
		}
		.single-price{
			display: inline-block;
			vertical-align: top;
			font-size: 0;
			line-height: 24px;
			span{
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
			}
			.single-price__number{
				line-height: 24px;
				font-size: 16px;
				font-weight: 500;
				letter-spacing: -.4px;
			}
			.single-price__currency{
				line-height: 20px;
				font-size: 12px;
				font-weight: 400;
				&.on-right{
					margin-left: 3px;
				}
				&.on-left{
					margin-left: 3px;
				}
			}
		}
		.divider{
			display: inline-block;
			vertical-align: top;
			padding: 0 5px;
			line-height: 24px;
			font-size: 15px;
			font-weight: 500;
		}
	}
	.property__intro{
		height: 21px * 1 + 5px + 18px * 2;
	}
	.property__title{
		margin: 0;
		line-height: 21px;
		font-size: 16px;
		color: $grey900;
		@include multiLineEllipsis(21px, 2);
	}
	.property__address{
		margin: 5px 0 0;
		line-height: 18px;
		font-size: 13px;
		color: $grey700;
		@extend .ht-oneline;
	}
	.property__infos{
		margin-top: 12px;
		padding-top: 12px;
		font-size: 0;
		display: flex;
		align-items: center;
		border-top: 1px solid #eaeaea;
		.single-info{
			flex: 1 1 auto;
			margin: 0 8px 0 0;
			font-size: 0;
			line-height: 18px;
			white-space: nowrap;
			span{
				display: inline-block;
				vertical-align: top;
				font-size: 14px;
				line-height: 18px;
			}
			.single-info__icon{
				img{
					display: block;
					width: 16px;
					height: 16px;
					object-fit: contain;
				}
			}
			.single-info__data{
				margin: 0 0 0 4px;
				font-size: 13px;
				line-height: 18px;
				font-weight: 500;
			}
		}
	}
	.property__quickview{
		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: 250;
		background-color: rgba(#000,.6);
		opacity: 0;
		border-radius: 6px 6px 0 0;
		@include transition(opacity .1s ease-in-out);
		.actions-wrapper{
			position: absolute;
			top: 50%; left: 0; right: 0;
			margin-top: -16px;
			text-align: center;
			font-size: 0;
			.single-action{
				display: inline-block;
				padding: 0;
				margin: 0 4px;
				color: #fff;
				width: 32px;
				height: 32px;
				line-height: 30px;
				font-size: 22px;
				text-align: center;
				color: #fff;
				border: 1px solid #fff;
				border-radius: 4px;
				@include transition(background-color .1s ease-in-out, color .1s ease-in-out);
				&:hover{
					background-color: #fff;
					color: $color-primary_text;
				}
				i{
					display: inline-block;
					&.rotate45{
						@include rotate(45deg);
					}
				}
			}
		}
	}
	// .property__features{
	// 	z-index: 220;
	// 	padding: 2px 12px;
	// 	max-height: 30px;
	// 	overflow: hidden;
	// 	color: $grey800;
	// 	background-color: $grey200;
	// 	border-radius: 0 0 12px 12px;
	// 	@include transition(max-height .3s ease-in-out);
	// 	.single-feature{
	// 		display: inline-block;
	// 		margin: 2px 10px 2px 0;
	// 		font-size: 0;
	// 		line-height: 18px;
	// 		white-space: nowrap;
	// 		span{
	// 			display: inline-block;
	// 			vertical-align: top;
	// 			font-size: 13px;
	// 			line-height: 18px;
	// 		}
	// 		.single-feature__icon{
	// 			margin-top: 3px;
	// 			width: 12px;
	// 			height: 12px;
	// 			img{
	// 				display: block;
	// 				width: 16px;
	// 				height: 16px;
	// 				object-fit: contain;
	// 			}
	// 		}
	// 		.single-feature__text{
	// 			margin: 0 0 0 4px;
	// 			font-size: 12px;
	// 			font-weight: 400;
	// 		}
	// 	}
	// 	&.expanded{
	// 		max-height: 168px;
	// 	}
	// }
	.property__actions{
		position: absolute;
		top: 4px; right: 4px;
		z-index: 280;
		.single-action{
			display: inline-block;
			vertical-align: top;
			&.single-action--like{
				width: 28px;
				height: 28px;
				text-align: center;
				line-height: 28px;
				font-size: 24px;
				color: $grey200;
				&:hover{
					color: material-color('deep-orange','300');
				}
				&.active{
					color: $color-primary;
					i{
						&:before{
							content: "\f388";
						}
					}
				}
			}
		}
		.tooltip{
			.tooltip-inner{
				white-space: nowrap;
				font-size: 11px;
			}
		}
	}
	// &.single-property--size-lg{
	// 	//
	// }
	&,a{
		&:hover, &:active, &:focus{
			text-decoration: none;
		}
	}
		
	&:hover{
		// background-color: $grey50;
		.property__quickview{
			opacity: 1;
		}
		.property__photo{
			img{
				@include scale(1.05);
			}
		}
		.property__features{
			display: block;
		}
	}


	&--loading{
		.property{
			&__title{
				height: 42px;
				span{
					display: block;
					height: 15px;
					margin: 3px 0;
					&:last-child{
						width: 60%;
					}
				}
			}
			&__address{
				height: 18px;
				span{
					display: block;
					height: 12px;
					margin: 4px 0;
					width: 80%;
				}
			}
			&__infos{
				.single-info{
					&__data{
						width: 75%;
						height: 14px;
					}
				}
			}
		}
	}
	.bg-gradient-animated{
		background-image: linear-gradient(90deg, $grey400, $grey200, $grey300, $grey200);
		background-size: 400% 100%;
		@include animation(bg-gradient 4s ease infinite);
	}


}
@include keyframes(bg-gradient){
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

.list-property-cards{
	&.has-max-width-on-md{
		@media (max-width: $screen-md-max){
			max-width: 400px;
		}
	}
	.list-row{
		display: flex;
		align-items: top;
		flex-wrap: wrap;
		margin: 0 -12px;
		.list-col{
			flex: 0 0 100%;
			min-width: 0;
			padding: 0 12px;
			@media (min-width: $screen-sm){
				flex: 0 0 50%;
			}
			@media (min-width: $screen-md){
				flex: 0 0 33.33%;
			}
			@media (min-width: $screen-lg){
				flex: 0 0 25%;
			}
			@media (min-width: $screen-xl){
				flex: 0 0 20%;
			}
		}
		.single-property-card{
			margin: 0 0 24px;
		}
	}
		
}

.user-profile-card{
	margin: 0 0 12px;
	@media (max-width: $screen-sm-max){
		display: flex;
	}
	@media (min-width: $screen-md-min){
		margin: 0 0 24px;
	}
	.card-header{
		//
	}
	.card-content{
		padding: 12px;
		@media (min-width: $screen-md-min){
			text-align: center;
		}
	}
	.user-photo{
		width: 96px;
		@media (min-width: $screen-sm-min){
			width: 144px;
		}
		@media (min-width: $screen-md-min){
			width: 100%;
		}
	}
	.user-title{
		margin: 0;
		line-height: 24px;
		font-size: 18px;
		font-weight: 500;
		color: $grey900;
		@media (min-width: $screen-sm-min){
			line-height: 26px;
			font-size: 20px;
		}
		@media (min-width: $screen-md-min){
			line-height: 28px;
			font-size: 22px;
		}
	}
	.user-status{
		margin: 8px 0 0;
		line-height: 18px;
		font-size: 13px;
		color: $grey600;
	}
}
.user-data-card{
	margin: 0 0 12px;
	// @media (min-width: $screen-md-min){
	// 	margin: 0 0 24px;
	// }
	& > .card-header{
		padding: 12px;
		// background: $grey50;
		border-bottom: 1px solid #eee;
		.card-header__title{
			margin: 0;
			line-height: 24px;
			font-size: 18px;
			font-weight: 500;
			margin: 0 12px 0 0;
		}
	}
	& > .card-content{
		padding: 12px;
	}
	.single-user-info{
		margin: 0 0 12px;
		.info__icon{
			min-width: 24px;
			margin: 0 4px 0 0;
			font-size: 18px;
			color: $color-primary;
		}
		.info__data{
			.info__data__main{
				color: $grey900;
			}
			.info__data__status{
				margin: 2px 0 0;
				line-height: 18px;
				font-size: 13px;
				color: $grey600;
			}
		}
	}
	.social-connect-title{
		@media (max-width: $screen-xs-max){
			margin: 0 0 5px;
		}
	}
}
.user-profile-section{
	margin: 12px 0;
	// @media (max-width: $screen-sm-max){
		// & > .row{
		// 	& > [class^="col"]{
		// 		margin-bottom: 12px;
		// 	}
		// }
	// }
	// @media (min-width: $screen-md-min){
	// 	margin: 24px 0;
	// 	padding: 0 12px;
	// 	& > .row{
	// 		margin: 0 -24px;
	// 		& > [class^="col"]{
	// 			padding: 0 12px; 
	// 		}
	// 	}
	// }
}