/* Señal visible de «buscando» — v3.17.1
 * Marca: turquesa #79C8D0 / #4AA5AD, texto #1E2E33. */

@keyframes pp-girar { to { transform: rotate(360deg); } }

/* 1) La capa .loading de Listeo era transparente (frontend.css:1051). */
#listeo-listings-container.loading:after {
	background: rgba(255, 255, 255, .55) !important;
	backdrop-filter: blur(1px);
	z-index: 5 !important;
}
#listeo-listings-container.loading:before {
	content: '';
	position: absolute;
	top: 90px; left: 50%;
	width: 42px; height: 42px;
	margin-left: -21px;
	border: 4px solid rgba(74, 165, 173, .25);
	border-top-color: #4AA5AD;
	border-radius: 50%;
	animation: pp-girar .8s linear infinite;
	z-index: 6;
}
/* Fallback si el contenedor no tiene position (Listeo se lo pone, por si acaso). */
#listeo-listings-container.loading { position: relative !important; min-height: 160px; }

/* 2) Banda «Buscando…» arriba del panel de filtros. */
.pp-buscando-banda {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	margin: 0 0 14px;
	border-radius: 8px;
	background: #e6f5f7;
	color: #1E2E33;
	font-size: 14px;
	font-weight: 600;
}
#listeo_core-search-form.pp-buscando .pp-buscando-banda { display: flex; }
.pp-buscando-rueda {
	width: 16px; height: 16px; flex: none;
	border: 2.5px solid rgba(74, 165, 173, .3);
	border-top-color: #4AA5AD;
	border-radius: 50%;
	animation: pp-girar .8s linear infinite;
}

/* 3) Rueda dentro del campo de ubicación, en el sitio del icono del pin. */
#listeo_core-search-form.pp-buscando .input-with-icon.location {
	position: relative;
}
#listeo_core-search-form.pp-buscando .input-with-icon.location i,
#listeo_core-search-form.pp-buscando .input-with-icon.location .sl-icon-location { visibility: hidden; }
#listeo_core-search-form.pp-buscando .input-with-icon.location:after {
	content: '';
	position: absolute;
	right: 16px; top: 50%;
	width: 18px; height: 18px;
	margin-top: -9px;
	border: 2.5px solid rgba(74, 165, 173, .3);
	border-top-color: #4AA5AD;
	border-radius: 50%;
	animation: pp-girar .8s linear infinite;
	pointer-events: none;
}

/* Mientras busca, el panel baja un poco su énfasis para que se note el cambio. */
#listeo_core-search-form.pp-buscando .pp-chips,
#listeo_core-search-form.pp-buscando .panel-dropdown { opacity: .75; transition: opacity .15s; }

/* 4) Desplegable de Google Places anclado al campo.
 * Google lo crea en el <body> con position:absolute y coordenadas del
 * documento; con el panel de filtros transformado y con scroll interno, caía
 * lejos del campo. El JS le fija top/left/width de viewport en cada cuadro
 * mientras el campo tiene el foco. Ver pp-busqueda-feedback.js. */
/* ⚠️ El `position: fixed` NO se pone aquí a propósito. Este CSS se carga en
 * toda la página del archivo, y en ella puede haber otros campos con
 * autocompletado (el buscador de la cabecera). Si les forzáramos `fixed`, sus
 * coordenadas —que Google calcula sobre el DOCUMENTO— se leerían como de
 * viewport y quedarían descolocados, justo el fallo que venimos a arreglar.
 * Lo aplica el JS, y solo al desplegable del campo que tiene el foco. */
.pac-container {
	z-index: 100000 !important;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(30, 46, 51, .16);
	border: 1px solid #d6e3e6;
	margin-top: 0 !important;
}
.pac-item { padding: 8px 12px; cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: #e6f5f7; }

@media (prefers-reduced-motion: reduce) {
	.pp-buscando-rueda, #listeo-listings-container.loading:before,
	#listeo_core-search-form.pp-buscando .input-with-icon.location:after { animation: none; }
}

/* 5) Pista bajo el campo de ubicación: la búsqueda solo se dispara al salir
 * del campo o con Enter, y eso no se puede adivinar. */
.pp-pista-ubicacion {
	/* ⚠️ Nada de margen negativo: el contenedor del campo tiene
	   margin-bottom:0 y el texto se montaba 8 px sobre el input (visto en
	   móvil el 2026-08-18). */
	display: block;
	margin: 6px 0 16px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #5A6B70;
}
#listeo_core-search-form.pp-buscando .pp-pista-ubicacion { opacity: .5; }

/* 6) Desplegable PROPIO de sugerencias (Places API nueva). Ver el JS. */
.pp-sug {
	display: none;
	position: fixed;
	z-index: 100001;
	background: #fff;
	border: 1px solid #d6e3e6;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(30, 46, 51, .16);
	overflow-y: auto;
	/* El alto máximo lo fija el JS según el espacio que deje el teclado. */
}
.pp-sug__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
	color: #1E2E33;
	border-top: 1px solid #eef3f4;
}
.pp-sug__item:first-child { border-top: 0; }
.pp-sug__item:hover, .pp-sug__item.is-activo { background: #e6f5f7; }
.pp-sug__ico {
	flex: none; width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
	background: #79C8D0; transform: rotate(-45deg); opacity: .8;
}
.pp-sug__t { min-width: 0; }
.pp-sug__t strong { font-weight: 600; }
.pp-sug__s { color: #5A6B70; font-size: 13px; }
@media (max-width: 767px) {
	.pp-sug__item { padding: 12px 14px; font-size: 15px; }
}

/* Aviso cuando Google se queda sin cupo diario de sugerencias: el campo
 * sigue sirviendo, y hay que decirlo. */
.pp-pista-ubicacion.pp-pista-aviso {
	color: #8a6100;
	background: #fff8e6;
	border-radius: 6px;
	padding: 6px 9px;
}

/* «Lo más buscado» fuera del panel de filtros (v3.19.4)
 * Ese panel lo pinta el tema hijo en <body> y lista términos populares de TODO
 * el sitio, incluidos nombres de producto: dentro de un filtro de Mascotas
 * Perdidas no pintan nada. La clase la pone y la quita pp-busqueda-feedback.js
 * al entrar y salir del campo, así que el buscador del encabezado lo conserva. */
html.pp-sin-populares .ppv2-populares { display: none !important; }