/*
 * Home Comparison form — only what the shared Contact Form styles lack.
 *
 * The form renders with the Contact Form block's classes, so its grid, field
 * look and 40px height, Main Color button and consent row all come from
 * mlsimport-listings.css. This sheet adds the few rules specific to this form:
 *   1. The property type dropdown (the .mlsimport-interest widget).
 *   2. The message box is resizable only vertically.
 *   3. The OpenStreetMap attribution reads as a second consent line, with space
 *      between it and the consent checkbox.
 */

/* 1. Property type is the .mlsimport-interest widget (same as the results Sort),
   so its open list matches the site instead of the OS-drawn native list. Its
   box (padding, border, radius, 40px) is the shared contact field rule; this
   adds only the widget's own parts: full width, caret, and a reset of what a
   theme's `button` rule sets (an Elementor kit's background, caps, spacing). */
.mlsimport-home-comparison__type {
	position: relative;
	display: block;
}
.mlsimport-home-comparison__type .mlsimport-interest__trigger,
.mlsimport-home-comparison__type .mlsimport-interest__trigger:hover,
.mlsimport-home-comparison__type .mlsimport-interest__trigger:focus {
	display: flex;
	align-items: center;
	width: 100%;
	/* The property page's own trigger is 48px (mlsimport-property-sections.css),
	   which loads here too; auto hands the height back to the shared 40px. */
	height: auto;
	padding-right: 30px;
	/* Same 13px as the field labels (.mlsimport-contact-form__field). */
	font-size: 13px;
	font-weight: inherit;
	color: var(--mli-text);
	background-color: #fff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 8px 5px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}
.mlsimport-home-comparison__type .mlsimport-interest__trigger:focus,
.mlsimport-home-comparison__type.is-open .mlsimport-interest__trigger {
	outline: none;
	border-color: var(--mli-accent);
}
.mlsimport-home-comparison__type.is-placeholder .mlsimport-interest__label {
	color: var(--mli-muted, #666);
}
.mlsimport-home-comparison__type .mlsimport-interest__list {
	margin: 0;
	color: var(--mli-text);
}
.mlsimport-home-comparison__type .mlsimport-location__option {
	font-size: 13px;
}
/* The native select stays the required, submitted control. The shared rule hides
   it with display:none, which would block submit with no message; keep it under
   the trigger, invisible, so the browser's "please select" note shows here.
   The form class outranks mlsimport-property-sections.css, which loads later. */
.mlsimport-home-comparison-form .mlsimport-home-comparison__type.is-enhanced > select {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* 2. The message box grows downwards, never sideways out of the grid. */
.mlsimport-home-comparison-form .mlsimport-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	resize: vertical;
}

/* 3. Same size as the consent text; the margin separates it from the checkbox. */
.mlsimport-home-comparison-form .mlsimport-home-comparison-attribution {
	margin: 4px 0 0;
}