/**
 * COSTAR partners grid: [costar_partners] and [costar_partner_filters].
 *
 * Styled from the Integrations page itself: Elementor global colours, Montserrat
 * with tight tracking, white 20px cards on light teal, orange uppercase links.
 *
 * Every selector is scoped under .costar-partners and includes the element type,
 * so it outranks Elementor kit rules such as `.elementor-kit-5 button:hover`
 * or `.elementor-kit-5 input[type="search"]`.
 */

.costar-partners {
	/* Elementor globals, with the site's values as fallbacks */
	--cp-teal: var(--e-global-color-secondary, #00607c);
	--cp-orange: var(--e-global-color-primary, #f74902);
	--cp-tint: var(--e-global-color-fc9f3ad, #e6f0f2);
	--cp-white: var(--e-global-color-93f146f, #fff);
	--cp-text: var(--e-global-color-text, #000);
	--cp-teal-10: rgba(0, 96, 124, 0.1); /* #00607C1A, as on the "custom integration" box */

	--cp-tracking: -0.05em;
	--cp-radius-card: 20px;
	--cp-radius-control: 10px;
	--cp-radius-pill: 100px;
	--cp-offset: 120px; /* Sticky header height for deep-link scrolling */

	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.65;
	letter-spacing: var(--cp-tracking);
	scroll-margin-top: var(--cp-offset);
}

.costar-partners,
.costar-partners *,
.costar-partners *::before,
.costar-partners *::after {
	box-sizing: border-box;
}

.costar-partners [hidden] {
	display: none !important;
}

.costar-partners .costar-partners__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Feature pill for Elementor HTML widgets (Integration key template), matching the card pills:
   <span class="costar-pill"><img src="{term icon}" alt="" width="16" height="16">C2C</span> */
.elementor-widget-container span.costar-pill,
span.costar-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px 6px 10px;
	border-radius: 100px;
	background: var(--e-global-color-fc9f3ad, #e6f0f2);
	color: var(--e-global-color-secondary, #00607c);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

span.costar-pill img {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

/* "Our Partners" heading (title="" hides it when Elementor provides one) */

.costar-partners div.costar-partners__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 0 3rem;
	padding: 0;
	text-align: center;
}

.costar-partners .costar-partners__header h2.costar-partners__title {
	margin: 0;
	padding: 0;
	color: var(--cp-teal);
	font-family: inherit;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--cp-tracking);
	text-transform: none;
}

.costar-partners .costar-partners__header p.costar-partners__intro {
	max-width: 50rem;
	margin: 0;
	padding: 0;
	color: var(--cp-text);
	font-size: 18px;
	line-height: 1.6;
}

.costar-partners .costar-partners__header p.costar-partners__intro strong {
	display: block;
	font-weight: 700;
}

/* Controls: inline toolbar above the grid, or the sidebar from [costar_partner_filters] */

.costar-partners div.costar-partners__toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 1.5rem;
	padding: 0;
}

.costar-partners div.costar-partners__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.costar-partners.costar-partners--controls div.costar-partners__filters {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2px;
}

.costar-partners.costar-partners--controls div.costar-partners__search {
	margin: 0 0 12px;
}

/* Buttons */

.costar-partners .costar-partners__filters button.costar-partners__filter {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--cp-radius-control);
	background: transparent;
	color: var(--cp-text);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--cp-tracking);
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Sidebar buttons use the full feature names, so let long ones wrap */
.costar-partners.costar-partners--controls .costar-partners__filters button.costar-partners__filter {
	width: 100%;
	white-space: normal;
}

.costar-partners .costar-partners__filters button.costar-partners__filter:hover {
	background: var(--cp-teal-10);
	color: var(--cp-teal);
	box-shadow: none;
}

.costar-partners .costar-partners__filters button.costar-partners__filter:focus {
	outline: none;
	box-shadow: none;
}

.costar-partners .costar-partners__filters button.costar-partners__filter:focus-visible {
	outline: 2px solid var(--cp-teal);
	outline-offset: 2px;
}

.costar-partners .costar-partners__filters button.costar-partners__filter.is-active,
.costar-partners .costar-partners__filters button.costar-partners__filter.is-active:hover {
	background: var(--cp-teal);
	color: #fff;
}

.costar-partners .costar-partners__filters button.costar-partners__filter span.costar-partners__filter-label {
	flex: 1 1 auto;
	min-width: 0;
}

.costar-partners .costar-partners__filters button.costar-partners__filter span.costar-partners__count {
	display: inline-block;
	flex: 0 0 auto;
	min-width: 2em;
	margin: 0;
	padding: 2px 8px;
	border-radius: var(--cp-radius-pill);
	background: var(--cp-white);
	color: var(--cp-teal);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: center;
}

.costar-partners .costar-partners__filters button.costar-partners__filter.is-active span.costar-partners__count {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.costar-partners .costar-partners__filters button.costar-partners__filter img.costar-partners__icon {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	transition: filter 0.15s ease;
}

/* Term icons are orange <img> SVGs, so recolour them to white on the teal active state */
.costar-partners .costar-partners__filters button.costar-partners__filter.is-active img.costar-partners__icon {
	filter: brightness(0) invert(1);
}

/* Search */

.costar-partners div.costar-partners__search {
	position: relative;
	width: 100%;
	max-width: 420px;
	min-width: 0;
	margin: 0;
}

.costar-partners.costar-partners--controls div.costar-partners__search {
	max-width: none;
}

.costar-partners .costar-partners__search svg.costar-partners__search-icon {
	position: absolute;
	top: 50%;
	left: 18px;
	width: 18px;
	height: 18px;
	color: var(--cp-teal);
	transform: translateY(-50%);
	pointer-events: none;
}

.costar-partners .costar-partners__search input[type="search"].costar-partners__input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 18px 0 46px;
	border: 1px solid var(--cp-teal-10);
	border-radius: var(--cp-radius-pill);
	background: var(--cp-white);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--cp-tracking);
	text-transform: none;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.costar-partners .costar-partners__search input[type="search"].costar-partners__input::placeholder {
	color: var(--cp-text);
	opacity: 0.6;
}

.costar-partners .costar-partners__search input[type="search"].costar-partners__input:focus {
	border-color: var(--cp-teal);
	box-shadow: 0 0 0 3px var(--cp-teal-10);
	outline: none;
}

/* Feature panel: the Integration key card for the active filter, shown above the grid */

.costar-partners div.costar-partners__feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	margin: 0 0 1.5rem;
	padding: 2rem;
	border-radius: var(--cp-radius-card);
	background: var(--cp-white);
}

.costar-partners div.costar-partners__feature-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.costar-partners .costar-partners__feature h3.costar-partners__feature-name {
	margin: 0;
	padding: 0;
	color: var(--cp-teal);
	font-family: inherit;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--cp-tracking);
	text-transform: none;
}

.costar-partners .costar-partners__feature p {
	margin: 0;
	padding: 0;
	color: var(--cp-text);
	font-size: 15px;
	line-height: 1.6;
}

.costar-partners div.costar-partners__feature-practice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	padding: 0 0 0 2rem;
	border-left: 1px solid var(--cp-teal-10);
}

.costar-partners .costar-partners__feature span.costar-partners__feature-label {
	color: var(--cp-teal);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.costar-partners .costar-partners__feature .costar-partners__feature-practice p {
	font-size: 14px;
}

.costar-partners .costar-partners__feature a.costar-partners__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	padding: 6px 0;
	color: var(--cp-orange);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
	transition: color 0.15s ease;
}

.costar-partners .costar-partners__feature a.costar-partners__link svg {
	display: block;
	flex: 0 0 auto;
}

.costar-partners .costar-partners__feature a.costar-partners__link:hover {
	color: var(--cp-teal);
}

.costar-partners .costar-partners__feature a.costar-partners__link:focus-visible {
	outline: 2px solid var(--cp-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Status */

.costar-partners p.costar-partners__status {
	margin: 0 0 1rem;
	padding: 0;
	color: var(--cp-teal);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Grid + cards: white 20px cards, as the old Loop Grid */

.costar-partners ul.costar-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.costar-partners ul.costar-partners__grid > li.costar-partners__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 2rem;
	border: 0;
	border-radius: var(--cp-radius-card);
	background: var(--cp-white);
	list-style: none;
	scroll-margin-top: var(--cp-offset);
	transition: box-shadow 0.2s ease;
}

.costar-partners ul.costar-partners__grid > li.costar-partners__card::before,
.costar-partners ul.costar-partners__pills > li.costar-partners__pill::before {
	content: none;
	display: none;
}

.costar-partners ul.costar-partners__grid > li.costar-partners__card.is-highlighted {
	box-shadow: 0 0 0 3px var(--cp-orange);
	outline: none;
}

.costar-partners ul.costar-partners__grid > li.costar-partners__card:focus {
	outline: none;
}

.costar-partners .costar-partners__card div.costar-partners__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 64px;
	margin: 0 0 4px;
	padding: 0;
	overflow: hidden;
}

.costar-partners .costar-partners__card .costar-partners__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 64px;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

/* SVGs without usable width/height need an explicit height to size from their viewBox */
.costar-partners .costar-partners__card .costar-partners__logo img[src*=".svg"] {
	height: 56px;
}

.costar-partners .costar-partners__card span.costar-partners__logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--cp-tint);
	color: var(--cp-teal);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.costar-partners .costar-partners__card .costar-partners__name {
	margin: 0;
	padding: 0;
	color: var(--cp-teal);
	font-family: inherit;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--cp-tracking);
	text-transform: none;
	overflow-wrap: anywhere;
}

/* Feature pills: one on-brand style, told apart by the orange term icons */

.costar-partners .costar-partners__card ul.costar-partners__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.costar-partners .costar-partners__card ul.costar-partners__pills > li.costar-partners__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px 4px 8px;
	border-radius: var(--cp-radius-pill);
	background: var(--cp-tint);
	color: var(--cp-teal);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	list-style: none;
	white-space: nowrap;
}

.costar-partners .costar-partners__pills > li.costar-partners__pill img {
	display: block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

/* "Learn more" matches the page's orange uppercase text buttons ("Apply Today") */
.costar-partners .costar-partners__card a.costar-partners__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin: auto 0 0;
	padding: 6px 0;
	color: var(--cp-orange);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
	transition: color 0.15s ease;
}

.costar-partners .costar-partners__card a.costar-partners__link svg {
	display: block;
	flex: 0 0 auto;
}

.costar-partners .costar-partners__card a.costar-partners__link:hover {
	color: var(--cp-teal);
}

.costar-partners .costar-partners__card a.costar-partners__link:focus-visible {
	outline: 2px solid var(--cp-teal);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Empty state */

.costar-partners div.costar-partners__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 3rem 2rem;
	border-radius: var(--cp-radius-card);
	background: var(--cp-white);
	text-align: center;
}

.costar-partners .costar-partners__empty p {
	margin: 0;
	padding: 0;
	color: var(--cp-teal);
	font-size: 18px;
	font-weight: 600;
}

/* Matches the site's primary buttons: orange pill, white uppercase text */
.costar-partners .costar-partners__empty button.costar-partners__reset {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 12px 26px;
	border: 2px solid var(--cp-orange);
	border-radius: var(--cp-radius-pill);
	background: var(--cp-orange);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.costar-partners .costar-partners__empty button.costar-partners__reset:hover {
	border-color: var(--cp-teal);
	background: var(--cp-teal);
	color: #fff;
}

.costar-partners .costar-partners__empty button.costar-partners__reset:focus-visible {
	outline: 2px solid var(--cp-teal);
	outline-offset: 3px;
}

/* Small screens: the sidebar list becomes wrapping chips so the grid isn't pushed far down */

@media (max-width: 767px) {
	.costar-partners.costar-partners--controls div.costar-partners__filters {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.costar-partners.costar-partners--controls .costar-partners__filters button.costar-partners__filter {
		width: auto;
	}

	.costar-partners .costar-partners__filters button.costar-partners__filter {
		gap: 8px;
		padding: 8px 12px;
		border: 1px solid var(--cp-teal-10);
		border-radius: var(--cp-radius-pill);
		background: var(--cp-white);
		font-size: 14px;
	}

	.costar-partners .costar-partners__filters button.costar-partners__filter span.costar-partners__count {
		background: var(--cp-tint);
	}

	.costar-partners div.costar-partners__header {
		margin-bottom: 2rem;
	}

	.costar-partners div.costar-partners__feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding: 1.5rem;
	}

	.costar-partners div.costar-partners__feature-practice {
		padding: 1rem 0 0;
		border-top: 1px solid var(--cp-teal-10);
		border-left: 0;
	}

	.costar-partners .costar-partners__feature h3.costar-partners__feature-name {
		font-size: 22px;
	}

	.costar-partners .costar-partners__header h2.costar-partners__title {
		font-size: 28px;
	}

	.costar-partners ul.costar-partners__grid {
		gap: 1rem;
	}

	.costar-partners ul.costar-partners__grid > li.costar-partners__card {
		padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.costar-partners,
	.costar-partners * {
		transition: none !important;
	}
}