/* Buscadores portal (propiedades + alojamientos).
 * Layout: --horizontal | --vertical
 * Tema:   --tema-prop (bg primary, botón secondary)
 *         --tema-aloj (bg secondary, botón primary)
 */

.mdpd-prop-search {
	--mdpd-prop-search-control-h: 3rem;
	--mdpd-search-bg: var(--fs-color-primary, var(--primary-color, #465f70));
	--mdpd-search-btn: var(--fs-color-secondary, #ff002a);
	--mdpd-prop-accent: var(--mdpd-search-btn);
	color: #fff;
	border-radius: 1.25rem;
	padding: 1rem 1rem 1.1rem;
	margin-bottom: 1.25rem;
	width: 100%;
	background: var(--mdpd-search-bg);
}

.mdpd-prop-search--tema-prop {
	--mdpd-search-bg: var(--fs-color-primary, var(--primary-color, #465f70));
	--mdpd-search-btn: var(--fs-color-secondary, #ff002a);
}

/* Fondo primary: el toggle checked global usa primary y se pierde. */
.mdpd-prop-search--tema-prop input[type="checkbox"]:not(.mdpd-no-toggle):checked {
	background: var(--mdpd-search-btn);
	border-color: var(--mdpd-search-btn);
}

.mdpd-prop-search--tema-prop input[type="checkbox"]:not(.mdpd-no-toggle):focus-visible {
	outline-color: var(--mdpd-search-btn);
}

.mdpd-prop-search--tema-aloj {
	--mdpd-search-bg: var(--fs-color-secondary, var(--primary-color, #ff002a));
	--mdpd-search-btn: var(--fs-color-primary, #465f70);
}

/* Shortcode flag `transparent`: mismo color de fondo al 80% de opacidad. */
.mdpd-prop-search--transparent {
	background: color-mix(in srgb, var(--mdpd-search-bg) 80%, transparent);
}

.mdpd-prop-search__form {
	display: contents;
	margin: 0;
}

.mdpd-prop-search__title,
.mdpd-prop-search__subtitle,
.mdpd-prop-search__label,
.mdpd-prop-search__range-sep,
.mdpd-prop-search__check,
.mdpd-prop-search fieldset legend {
	color: #fff;
}

.mdpd-prop-search__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 700;
}

/* Ícono antepuesto al título (Portal → Buscadores). Sin ícono elegido, el
 * título no lleva esta clase y se ve igual que siempre.
 *
 * Horizontal desktop: fila, ícono inline antes del texto (default de flex).
 * Vertical / mobile (ver reglas más abajo): flex-direction: column apila
 * ícono y texto sin ambigüedad. Se prefirió esto a un <br> + flex-basis:100%
 * — con texto suelto (nodo de texto, no <span>) al lado del <br> ese truco
 * es inconsistente entre navegadores: el salto queda "a medias". Column no
 * depende de cómo el navegador trate el nodo de texto.
 * `align-items: center` sirve para las dos direcciones: en fila centra el
 * ícono y el texto en el eje vertical (baseline); en columna los centra
 * horizontalmente — no hace falta una regla aparte para cada caso. */
.mdpd-prop-search__title--has-icon {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.mdpd-prop-search__title-icon {
	height: 1.3em;
	width: auto;
	display: inline-block;
	flex: 0 0 auto;
}

.mdpd-prop-search__subtitle {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.3;
	font-weight: 400;
	opacity: 0.92;
}

.mdpd-prop-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.mdpd-prop-search__label {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0.92;
}

.mdpd-prop-search__control {
	width: 100%;
	min-height: var(--mdpd-prop-search-control-h);
	margin-bottom: 0;
	border: 1px solid #e7eef0;
	border-radius: 0.625rem;
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	background-color: #fff;
	color: #111;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #111 50%),
		linear-gradient(135deg, #111 50%, transparent 50%);
	background-position:
		calc(100% - 1.1rem) calc(50% - 0.15rem),
		calc(100% - 0.8rem) calc(50% - 0.15rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.mdpd-prop-search__control:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-color: #fff;
}

.mdpd-prop-search__control:disabled {
	opacity: 0.72;
	cursor: not-allowed;
	color: #111;
	background-color: #f3f5f6;
	-webkit-text-fill-color: #111;
}

.mdpd-prop-search__submit {
	width: 100%;
	min-width: 160px;
	min-height: var(--mdpd-prop-search-control-h);
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0.75rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: var(--mdpd-search-btn) !important;
}

.mdpd-prop-search__submit .fa {
	margin-right: 0.35em;
}

.mdpd-prop-search__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* —— Horizontal props: 2 filas ——
 * Fila 1: operación, tipo, dorm, amb, baños, ciudad, zona
 * Fila 2: precio, pesos, dólares, apto crédito, cochera, buscar
 */
.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal {
	display: grid;
	/* Última columna (zona en fila 1, botón Buscar en fila 2): ancho mínimo
	 * 160px para el botón; el resto se reparte el espacio sobrante. */
	grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(160px, 1fr);
	gap: 0.65rem;
	row-gap: 0.75rem;
	align-items: end;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__title,
.mdpd-prop-search--horizontal .mdpd-prop-search__subtitle {
	grid-column: 1 / -1;
	align-self: auto;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__field {
	margin-bottom: 0;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price {
	grid-column: span 2;
	gap: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .mdpd-prop-search__label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-values,
.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price .sf-price-slider {
	margin: 0;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--mdpd-prop-search-control-h);
	font-size: 0.8rem;
	cursor: pointer;
}

.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check input {
	margin: 0;
	flex: 0 0 auto;
}

.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
	align-self: end;
}

/* Alojamientos horizontal: subtítulo + tipo + zona + buscar */
.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal {
	display: grid;
	/* Botón con mínimo 160px (antes topeaba a 8.5rem = 136px, menos que eso). */
	grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(160px, 1fr);
	gap: 0.65rem;
	row-gap: 0.75rem;
	align-items: end;
}

/* —— Vertical —— */
.mdpd-prop-search--vertical {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 1.25rem 1rem 1rem;
}

.mdpd-prop-search--vertical .mdpd-prop-search__title,
.mdpd-prop-search--vertical .mdpd-prop-search__subtitle {
	text-align: center;
}

/* Vertical (sidebar/widget, cualquier ancho de pantalla): ícono arriba,
 * texto abajo, centrado — siempre, no solo en el breakpoint mobile (que es
 * un layout distinto, ver media query más abajo). */
.mdpd-prop-search--vertical .mdpd-prop-search__title--has-icon {
	flex-direction: column;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field {
	margin-bottom: 0;
	gap: 0;
	width: 100%;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field:not(.mdpd-prop-search__field--price):not(.mdpd-prop-search__field--checks) > .mdpd-prop-search__label {
	display: none;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .mdpd-prop-search__label,
.mdpd-prop-search--vertical .mdpd-prop-search__field--checks legend.mdpd-prop-search__label {
	display: block;
	margin-bottom: 0.5rem;
}

/* Vertical: label → slider → valores (mismo orden visual que antes). */
.mdpd-prop-search--vertical .mdpd-prop-search__field--price {
	display: flex;
	flex-direction: column;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-head {
	display: contents;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .mdpd-prop-search__label {
	order: 1;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-slider {
	order: 2;
}

.mdpd-prop-search--vertical .mdpd-prop-search__field--price .sf-price-values {
	order: 3;
}

.mdpd-prop-search--vertical fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.mdpd-prop-search--vertical .mdpd-prop-search__checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.mdpd-prop-search--vertical .mdpd-prop-search__check {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	cursor: pointer;
}

.mdpd-prop-search--vertical .mdpd-prop-search__check input {
	margin: 0;
	flex: 0 0 auto;
}

/* Slider de precio */
.mdpd-prop-search .sf-price-slider {
	position: relative;
	height: 2rem;
	margin: 0.5rem 0 0.75rem;
}

.mdpd-prop-search .sf-price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0.25rem;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 0.125rem;
	transform: translateY(-50%);
}

.mdpd-prop-search .sf-price-range {
	position: absolute;
	height: 100%;
	background: var(--mdpd-prop-accent);
	border-radius: 0.125rem;
}

.mdpd-prop-search .sf-price-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.mdpd-prop-search .sf-price-input--min {
	z-index: 3;
}

.mdpd-prop-search .sf-price-input--max {
	z-index: 4;
}

.mdpd-prop-search .sf-price-input::-webkit-slider-thumb {
	pointer-events: all;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--mdpd-prop-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.15);
}

.mdpd-prop-search .sf-price-input::-moz-range-thumb {
	pointer-events: all;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--mdpd-prop-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.15);
}

.mdpd-prop-search .sf-price-input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mdpd-prop-search .sf-price-input:focus-visible::-moz-range-thumb {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.mdpd-prop-search .sf-price-values,
.mdpd-prop-search .sf-price-from,
.mdpd-prop-search .sf-price-to,
.mdpd-prop-search .sf-price-sep {
	color: #fff;
}

.mdpd-prop-search .sf-price-values {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75em;
	line-height: 1.1rem;
}

.mdpd-prop-search .sf-price-sep {
	opacity: 0.75;
}

/* Mobile: solo el buscador del home (el de hub/listado, mismo layout
 * horizontal, ya está oculto en mobile por `.mdpd-inline-buscador-col`).
 * Tipo, precio y buscar ocupan la fila entera; el resto va de a pares para
 * no alargar tanto el formulario — el orden pedido no es el del DOM, así que
 * hace falta `order` explícito por campo (los 4 checks sí vienen ya en el
 * orden pedido en el DOM —apto crédito, cochera, pesos, dólares— y con un
 * `order` igual entre ellos alcanza, el empate lo resuelve el propio DOM). */
@media (max-width: 849px) {
	/* Controles más bajos: menos alto de fila, sumado a los pares de arriba. */
	.mdpd-prop-search--horizontal {
		--mdpd-prop-search-control-h: 2.5rem;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal {
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo {
		order: 10;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--operacion {
		order: 20;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--ambientes {
		order: 21;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--dormitorios {
		order: 30;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--banos {
		order: 31;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--ciudad {
		order: 40;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--zona {
		order: 41;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price {
		order: 50;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
		order: 60;
	}
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		order: 100;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo,
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--price,
	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		grid-column: 1 / -1;
	}

	.mdpd-prop-search--tema-prop.mdpd-prop-search--horizontal .mdpd-prop-search__field--check {
		grid-column: span 1;
		justify-content: left;
	}

	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal {
		grid-template-columns: 1fr;
	}

	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--tipo,
	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--zona,
	.mdpd-prop-search--tema-aloj.mdpd-prop-search--horizontal .mdpd-prop-search__field--submit {
		grid-column: 1 / -1;
	}

	.mdpd-prop-search--vertical .mdpd-prop-search__checks {
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-prop-search__title-icon {
		height: 1.75em;
	}

	/* Mobile apila y centra el título en cualquier layout (en desktop,
	 * horizontal sigue en fila a la izquierda; vertical ya apila y centra
	 * siempre, arriba — misma regla, se repite acá para el caso horizontal
	 * angosto). */
	.mdpd-prop-search__title {
		text-align: center;
	}

	.mdpd-prop-search__title--has-icon {
		flex-direction: column;
	}
}