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

.ht-card{
	display: block; 
}

.single-property-card{
	position: relative;
	display: block;
	margin: 0 0 12px;
	&.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{
			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: 2px 5px 1px;
			font-size: 0;
			border-radius: 2px;
			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: 2px;
		& > div{
			display: inline-block;
			font-size: 15px;
		}
		.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;
		@extend .ht-oneline;
	}
	.property__address{
		margin: 5px 0 0;
		line-height: 18px;
		font-size: 13px;
		color: $grey700;
		@include multiLineEllipsis(18px, 2);
	}
	.property__infos{
		margin-top: 12px;
		padding-top: 12px;
		font-size: 0;
		border-top: 1px solid #eaeaea;
		.single-info{
			display: inline-block;
			display: table-cell;
			width: 1%;
			vertical-align: top;
			font-size: 0;
			line-height: 20px;
			white-space: nowrap;
			span{
				display: inline-block;
				vertical-align: top;
				font-size: 18px;
				line-height: 20px;
			}
			.single-info__icon{
				img{
					display: block;
					width: 20px;
					height: 20px;
					object-fit: contain;
				}
			}
			.single-info__data{
				margin: 0 0 0 8px;
				font-size: 15px;
				font-weight: 500;
			}
		}
	}
	.property__quickview{

		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: 250;
		background-color: rgba(#000,.6);
		// @include translateX(-99999px);
		opacity: 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: 18px;
				text-align: center;
				color: #fff;
				border: 1px solid #fff;
				@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: 2px;
		@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{
			// @include translateX(0);
			opacity: 1;
		}
		.property__photo{
			img{
				@include scale(1.05);
			}
		}
		.property__features{
			display: block;
		}
	}
}
.list-property-cards{
	&:not(.pd-default){
		padding: 0 12px;
		& > .row{
			@media (min-width: $screen-sm-min){
				margin: 0 -24px;
			}
			& > [class^="col"]{
				padding: 0 12px; 
			}
		}
		.single-property-card{
			margin: 0 0 24px;
		}
	}
	&.has-max-width-on-md{
		@media (max-width: $screen-md-max){
			max-width: 400px;
		}
	}
		
}

.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; 
	// 		}
	// 	}
	// }
}