//Styling for Property Filter
.itre-property-filter {
	position: relative;
	background-color: var(--accent);
	border-radius: var(--border-radius);
	padding: 1.25rem;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);

	body.page-template-template-property-listings & {
		margin-top: -3.5rem;
	}

	@media (min-width: 48rem) {
		margin-left: auto;
		margin-right: auto;
	}

	select, input, button {
		height: 100%;
		width: 100%;
		border: 0;
		border-radius: 0.25rem;
	}
	select {
		background-color: white;
	}
	@media (max-width: 48rem) {
		button {
			margin-top: 4px;
		}
	}
	.form-control-wrapper {
		padding-top: 0.3125rem;
		padding-bottom: 0.3125rem;
	}
}

.itre-for-tag {
	color: white;
	line-height: 1;
	padding: 0.5rem 0.5rem 0.25rem;
	text-transform: uppercase;
	border-radius: 3px;
	font-size: 0.875rem;

	&.sale {
		background-color: rgba(121,217,18,0.8);
	}

	&.rent {
		background-color: rgba(229,209,23,0.8);
	}

	&.sold {
		background-color: rgba(41,162,204,0.8);
	}

	&.coming-soon {
		background-color: rgba(92,21,119,0.8);
	}

	&.active {
		background-color: rgba(162,54,198, 0.8);
	}
}

.itre-property-listing {
	margin-top: 2rem;
	display: grid;
	gap: 1.5rem;

	@media (min-width: 48rem) {
		grid-template-columns: 1fr 1fr;
	}

	@media (min-width: 64rem) {
		grid-template-columns: repeat(3, 1fr);
	}
}

body:not(.single-property) article.type-property {

	.itre_address {
		color: #999999;
		font-size: 1rem;
		line-height: 1.375rem;
		white-space: pre-wrap;
		margin-top: 0.625rem;
	}
	.itre_features {
		margin-top: auto;
		border-top: solid 1px #eeeeee;
		padding-top: 0.625rem;
		padding-bottom: 0.75rem;
		font-size: 0.875rem;

		i {
			color: var(--accent);
		}

		svg {
			vertical-align: baseline;

			> * {
			   fill: var(--accent);
		   }
		}

		> span {
			margin-right: 0.625rem;

			span {
				margin: auto 0.25rem;
			}
		}
	}

	.itre-for-tag {
		position: absolute;
		left: 0.625rem;
		top: 0.625rem;
	}

	&.grid {
		margin-bottom: 1.5rem;

		.listing-wrapper {
			display: flex;
			flex-direction: column;
			height: 100%;
			border-radius: var(--border-radius);
			box-shadow: $shadow1;
			background-color: rgba(255,255,255,0.1);
			overflow: hidden;

			.itre-prop-thumb {
				position: relative;

				figure {
					position: relative;
					width: 100%;
					padding-bottom: 65%;
					margin-bottom: 0;
				}

				img {
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.prop-price {
					position: absolute;
					bottom: 0;
					left: 0;
					color: white;
					background-color: var(--accent);
					font-weight: var(--bold);
					font-size: 1.25rem;
					padding: 0.4375rem 0.75rem 0.375rem;
					opacity: 0.85;
				}
			}
			> *:not(.itre-prop-thumb) {
				padding: 0 1rem;
				line-height: 1.2;
			}

			> *:nth-last-child(2) {
				margin-bottom: 2.5rem;
			}
			
			h2 {
				margin: 0.875rem auto 0.25rem;
				font-size: 1.75rem;
				line-height: 2rem;
			    @extend %regular;
			}
			a {
				color: black;
			}
			.itre_features {
				border-top: solid 1px rgba(0,0,0,0.1);
				padding-top: 0.625rem;
				padding-bottom: 0.75rem;
				i {
					color: var(--accent);
				}
				> span {
					margin-right: 0.625rem;
					span {
						margin: auto 0.25rem;
					}
				}
			}
		}
		&.property-tab {
			.entry-header {
				position: absolute;
				bottom: 0;
				width: 100%;
				padding-top: 25rem;
				padding-bottom: 0.75rem;
			}
			.listing-wrapper {
				position: relative;
				height: auto;
			}
			.itre-for-tag {
				left: unset;
				right: 0.625rem;
			}
			.prop-price {
				bottom: unset !important;
				top: 0;
			}
			h2 {
				color: white;
			}
		}
	}
}

.spinner {
	width: 100%;
	min-height: 12.5rem;
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
		width: 5rem;
		height: 5rem;
		animation: svgRotate 1000ms linear infinite;
	}
}

@keyframes svgRotate {
    0% {
        @include transform(rotate(0deg));
    }

    100% {
        @include transform(rotate(360deg));
    }
}