/* =============================================================================
   Listing Template - Variables
   ============================================================================= */

.listing,
.listing-wrapper {
	--listing-max-width: 1465px;
	--listing-width: 95.3%;
	--listing-padding-vertical: min(14.2vw, 96px);
	--card-flex-basis: 333px;
	--card-max-width: 480px;
	--card-aspect-ratio: 386 / 260;
	--card-box-shadow: 4px 4px 6px 1px rgba(74, 73, 73, 0.1);
	--card-box-shadow-hover: 6px 6px 12px 2px rgba(74, 73, 73, 0.15);
	--card-gap: 108px;
	--input-height: 48px;
	--border-standard: 1px solid var(--custom-black);
}

/* =============================================================================
   Listing Wrapper
   ============================================================================= */

.listing-wrapper {
	display: flex;
	flex-direction: column;

	.listing-filter-section {
		background-color: var(--custom-deeper-blue);
		width: 100%;
		margin: 0 auto;
		padding: 48px 24px;
	}

	.listing-results {
		background-color: var(--custom-light-blue);
	}
}

/* =============================================================================
   Listing - Base Styles
   ============================================================================= */

.listing {
	background-color: var(--custom-light-blue);
	padding-bottom: var(--listing-padding-vertical);
	padding-top: var(--listing-padding-vertical);

	.listing__container {
		display: flex;
		position: relative;
	}

	.listing__cards {
		width: var(--listing-width);
		max-width: var(--listing-max-width);
		justify-self: center;
		margin: 0 auto;
	}

	.listing__cards-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: var(--card-gap);
		margin: 0 auto;
		width: 100%;
	}

	.listing__card {
		flex: 1 1 var(--card-flex-basis);
		min-width: var(--card-flex-basis);
		max-width: var(--card-max-width);
		aspect-ratio: var(--card-aspect-ratio);
		padding: 23px 32px 0;
		/* No bottom padding to allow flush badge */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		box-shadow: var(--card-box-shadow);
		transition: box-shadow 0.3s ease;
		overflow: hidden;
		/* Ensure badge doesn't spill out */
	}

	.listing__card--lender {
		aspect-ratio: auto !important;
		min-height: 386px;
		padding: 0 !important;
		/* Total padding control for lender cards */
	}

	.listing__card--default {
		border-radius: 0;
		background-color: var(--custom-white);

		&:hover {
			box-shadow: var(--card-box-shadow-hover);
		}
	}

	/* Affordable properties cards need bottom breathing room */
	.listing__card--default:not(.listing__card--lender) {
		aspect-ratio: auto;
		min-height: 291px;
		padding-bottom: 24px;
	}

	.listing__card--placeholder {
		flex: 1 1 var(--card-flex-basis);
		min-width: var(--card-flex-basis);
		max-width: var(--card-max-width);
		aspect-ratio: var(--card-aspect-ratio);
		background-color: var(--custom-neutral-1);
		border-radius: 0 64px;
		pointer-events: none;
		box-shadow: none;
	}

	.listing__card-header {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 8px;
	}

	.listing__card-headshot-container {
		width: 73px;
		height: 73px;
		flex-shrink: 0;
		background-color: var(--custom-neutral-2);
		border-radius: 72px;
		overflow: hidden;
		display: flex;
		/* Added for fallback svg centering */
		align-items: center;
		justify-content: center;
	}

	.listing__card-headshot-container--fallback {
		background: linear-gradient(0deg, var(--custom-jade, #269A8C) 0%, var(--custom-jade, #269A8C) 100%);

		svg {
			width: 29px;
			height: 34px;
		}
	}

	.listing__card-headshot {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.listing__card-header-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.listing__card-heading {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2;
		margin: 0;
		color: var(--custom-black);
	}

	.listing__card-subtitle,
	.listing__card-nmls {
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.32px;
		color: var(--custom-black);
		margin: 0;
	}

	.listing__card-separator {
		border: 0;
		border-top: 2px solid var(--custom-sunflower);
		margin: 0 0 20px 0;
	}

	.listing__card-content {
		flex: 1;
		margin-bottom: 24px;
		color: var(--custom-text-dark);

		p {
			margin: 0 0 12px 0;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 24px;
			letter-spacing: 0.32px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		svg {
			width: 20px;
			height: 20px;
			flex-shrink: 0;

			path {
				fill: var(--custom-black);
			}
		}

		a {
			color: var(--custom-navy);
			text-decoration: none;
			word-break: break-all;

			&:hover {
				color: var(--custom-black);
				text-decoration: underline;
			}
		}
	}

	.listing__card-button-wrapper {
		margin-top: auto;
		display: flex;
		align-items: flex-end;
	}

	.listing__card-badge {
		height: 40px;
		background-color: var(--custom-jade);
		color: var(--custom-white);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		/* Spacing between icon and text */
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 24px;
		letter-spacing: 0.32px;
		margin-top: auto;
		width: 100%;
		flex-shrink: 0;

		svg {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
		}
	}

	.listing__no-cards {
		text-align: center;
		color: var(--custom-text-dark);
		padding: 48px 24px;
		font-size: 1.125rem;
	}
}

/* Lender specific internal padding */
.listing__card--lender .listing__card-header {
	padding: 32px 32px 0;
}

.listing__card--lender .listing__card-separator {
	margin: 16px 32px 20px;
}

.listing__card--lender .listing__card-content {
	padding: 0 32px 32px;
}

/* =============================================================================
   Visual Base Styles (Mobile First)
   ============================================================================= */

/* Filter Section Decorative Elements */
.listing-filter-container {
	position: relative;
	max-width: 600px;
	margin: 0 auto;

	.top-leaf {
		position: absolute;
		top: -36px;
		left: -16px;
		width: 83px;
		height: 103px;
		background-color: var(--custom-sunflower);
		border-radius: 0 36px 0 36px;
		z-index: 0;
	}

	.listing-filter-content {
		position: relative;
		background-color: var(--custom-white);
		padding: 32px 24px;

		.bottom-leaf {
			display: none;
			position: absolute;
			bottom: -36px;
			right: -36px;
			width: 124px;
			height: 123px;
			background-color: var(--custom-tangerine);
			border-radius: 36px 0 36px 0;
			z-index: 2;
		}

		.small-bottom-leaf {
			display: none;
			position: absolute;
			bottom: -36px;
			right: 68px;
			width: 47px;
			height: 46px;
			border-radius: 0 8px 0 8px;
			background-color: var(--custom-sunflower);
			z-index: 3;
		}
	}
}

/* Filter Form Styles */
.listing-filter-form {
	color: var(--custom-white);
	margin-top: 32px;

	.listing-filter-select {
		background-color: var(--custom-dark-blue);
		color: var(--custom-white);
		width: 100%;
		height: var(--input-height);
		border: 2px solid var(--custom-white);
		padding: 0 40px 0 12px;
		appearance: none;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15L16 11H8L12 15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="white"/></svg>');
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 24px 24px;
		margin-bottom: 16px;
	}
}

.listing-filter-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	padding: 24px 0;
}

.listing-filter-checkbox-input {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--custom-white);
	background-color: transparent;
	cursor: pointer;
	position: relative;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;

	&:checked {
		background-color: var(--custom-aquamarine);
		border-color: var(--custom-white);
	}

	&:checked::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 7px;
		width: 6px;
		height: 12px;
		border: solid var(--custom-white);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}
}

.listing-filter-checkbox-label {
	display: block;
	min-width: 0;
	margin: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Android Chrome: force readable dropdown menu colors */
.listing-filter-select option {
	background-color: var(--custom-dark-blue);
	color: var(--custom-black);
}

.listing-results-select option {
	background-color: var(--custom-white);
	color: var(--custom-black);
}

.listing-filter-title {
	padding-bottom: 12px;
}

/* Results Header & Controls */
.listing-results-header {
	max-width: 600px;
	width: var(--listing-width);
	margin: 0 auto;
	padding-bottom: 24px;
	border-bottom: var(--border-standard);

	.listing-results-title {
		font-size: 1.875rem;
		font-weight: 800;
		margin: 0 0 48px 0;
		text-transform: uppercase;
		color: var(--custom-black);
		letter-spacing: 0.05em;
	}

	.listing-results-label {
		display: block;
		font-size: 0.875rem;
		margin-bottom: 8px;
		color: var(--custom-black);
		font-weight: 600;
	}

	.listing-results-control-group {
		margin-bottom: 24px;

			.listing-results-select {
				background-color: var(--custom-light-blue);
				color: var(--custom-black);
				width: 100%;
				border: var(--border-standard);
				height: var(--input-height);
				padding: 0 40px 0 12px;
				appearance: none;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 15L16 11H8L12 15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="%23302F2F"/></svg>');
				background-repeat: no-repeat;
				background-position: right 12px center;
				background-size: 24px 24px;
			}

		#entries-per-page {
			background-color: var(--custom-light-blue);
			color: var(--custom-black);
		}
	}

	.listing-results-control-group--search {
		.listing-results-input {
			background-color: var(--custom-light-blue);
			color: var(--custom-black);
			width: 100%;
			height: var(--input-height);
			border: var(--border-standard);
			padding: 0 12px;
		}
	}
}

/* Export Buttons */
.listing-export-controls {
	max-width: 600px;
	width: var(--listing-width);
	margin: 0 auto;
}

@media (max-width: 959px) {
	.listing-export-controls {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.listing-export-button {
		margin-right: 12px;
	}
}

.listing-export-button {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
}

/* Ensure export icon/text stay vertically centered even if theme link rules override anchors */
.listing-export-controls .listing-export-button {
	display: inline-flex !important;
	align-items: center !important;
}

.listing-export-controls .listing-export-button .listing-export-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	padding-right: 10px;
}

/* =============================================================================
   Pagination Styles
   ============================================================================= */

.listing-pagination {
	margin: 48px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.listing-pagination-button {
	background-color: var(--custom-white);
	border: 1px solid var(--custom-blue);
	color: var(--custom-blue);
	padding: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.2s ease;
	min-width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

	&:hover:not(:disabled) {
		background-color: var(--custom-blue);
		color: var(--custom-white);
		transform: translateY(-2px);
	}

	&:disabled {
		opacity: 0.3;
		cursor: not-allowed;
		border-color: var(--custom-text-dark);
		color: var(--custom-text-dark);
		box-shadow: none;
	}

	&.is-active {
		background-color: var(--custom-blue);
		color: var(--custom-white);
		pointer-events: none;
	}

	&[data-page="prev"],
	&[data-page="next"] {
		padding: 0 12px;
		font-size: 1.5rem;
	}
}

.listing-pagination-info {
	margin: 0 16px;
	color: var(--custom-text-dark);
	font-weight: 500;
}

/* =============================================================================
   Dialog (Modal) Styles
   ============================================================================= */

.listing-dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 500px;
	width: 90%;
	overflow: visible;

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.7);
	}
}

.listing-modal-content {
	background-color: var(--custom-white);
	width: 100%;
	padding: 40px;
	position: relative;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.listing-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	color: var(--custom-black);
	cursor: pointer;
	padding: 0;

	&:hover {
		color: var(--custom-blue);
	}
}

.listing-modal-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 24px 0;
	text-transform: uppercase;
	color: var(--custom-black);
	border-bottom: 2px solid var(--custom-tangerine);
	padding-bottom: 12px;
}

.listing-modal-contact-item {
	margin-bottom: 20px;

	&:last-child {
		margin-bottom: 0;
	}

	strong {
		display: block;
		font-size: 0.875rem;
		text-transform: uppercase;
		color: var(--custom-text-dark);
		margin-bottom: 4px;
	}

	p {
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--custom-blue);
		margin: 0;
	}

	a {
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--custom-blue);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* =============================================================================
   Media Queries (min-width, smallest to largest)
   ============================================================================= */

/* 960px */
@media (min-width: 960px) {
	.listing-wrapper {
		.listing-filter-section {
			padding: min(5.2vw, 70px) min(67px, 4.6vw) min(7.2vw, 96px) min(67px, 4.6vw);

			.listing-filter-container {
				display: flex;
				flex-direction: row;
				max-width: var(--listing-max-width);
				margin: 0 auto;

				.top-leaf {
					position: absolute;
					top: -36px;
					left: -36px;
					width: 83px;
					height: 103px;
					z-index: 0;
				}

				.listing-filter-content {
					position: relative;
					width: 50%;
					aspect-ratio: 584 / 495;
					padding: min(3.2vw, 44px) min(4.6vw, 67px) min(4.2vw, 56px) min(4.6vw, 67px);

					.bottom-leaf {
						display: block;
						position: absolute;
						bottom: -36px;
						right: -36px;
						width: 124px;
						height: 123px;
						z-index: 2;
					}

					.small-bottom-leaf {
						display: block;
						position: absolute;
						bottom: -36px;
						right: 68px;
						width: 47px;
						height: 46px;
						z-index: 3;
					}
				}

				.listing-filter-form {
					width: 50%;
					margin-left: min(160px, 10.4vw);
					margin-top: 0;

					.listing-filter-fields {
						max-width: 510px;

						.listing-filter-field-group {
							.listing-filter-select {
								width: 100%;
							}
						}
					}
				}
			}
		}

		.listing-results {
			.listing-results-container {
				.listing-results-header {
					max-width: var(--listing-max-width);
					margin: 53px auto 0 auto;
					width: var(--listing-width);
					padding-bottom: 48px;

					.listing-results-controls {
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						gap: 32px;

						.listing-results-control-group {
							margin-bottom: 0;

							.listing-results-select {
								width: 328px;
							}

							#entries-per-page {
								width: 138px;
							}
						}

						.listing-results-control-group--search {
							margin-left: auto;

							.listing-results-input {
								width: 306px;
							}
						}
					}
				}

				.listing-export-controls {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-end;
					gap: 48px;
					width: var(--listing-width);
					max-width: var(--listing-max-width);
					margin: 26px auto;
				}
			}
		}
	}
}
/* Lender card meta text for city/state + company */
.listing .listing__card-content p.listing__card-meta-text {
	font-family: "Redonda Condensed";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.32px;
}