/**
 * EQF — plantilla "buscador"
 *
 * Para un formulario de UN SOLO campo de texto. Pensada para la home: compacta,
 * de ancho acotado y altura mínima, sin la rejilla ni el bloque de acciones de
 * las plantillas de filtrado completo.
 *
 * Uso:
 *   [eqf_filters query_id="lista_clubes_loop_home" filters="club_buscador"
 *                template="buscador" submit_mode="ajax"]
 *
 * El nombre del archivo es lo que define el nombre de la plantilla: EQF
 * registra automáticamente todo eqf-*.css como template disponible.
 */

/* --------------------------------------------------------------------------
   Contenedor
   El max-width es lo que impide que herede el ancho de la sección de Elementor
   y se estire de lado a lado. Centrado por defecto.
   -------------------------------------------------------------------------- */

.eqf-wrapper.eqf-template-buscador {
	--eqf-b-alto: 46px;
	--eqf-b-radio: 999px;
	--eqf-b-borde: #e2e5ea;
	--eqf-b-borde-activo: var(--e-global-color-accent, #F5821F);
	--eqf-b-texto: #1d2939;
	--eqf-b-placeholder: #98a2b3;
	--eqf-b-fondo: #fff;

	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.eqf-wrapper.eqf-template-buscador .eqf-form {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

/* Un solo campo: la rejilla no aporta nada y añadiría huecos. */
.eqf-wrapper.eqf-template-buscador .eqf-grid {
	display: block;
	gap: 0;
	margin: 0;
}

.eqf-wrapper.eqf-template-buscador .eqf-field {
	display: block;
	margin: 0;
	padding: 0;
}

/* La etiqueta se oculta visualmente pero sigue existiendo para lectores de
   pantalla; el placeholder cumple la función visible. */
.eqf-wrapper.eqf-template-buscador .eqf-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   El input
   -------------------------------------------------------------------------- */

.eqf-wrapper.eqf-template-buscador input[type="text"] {
	width: 100%;
	height: var(--eqf-b-alto);
	padding: 0 46px 0 18px;

	background: var(--eqf-b-fondo);
	border: 1px solid var(--eqf-b-borde);
	border-radius: var(--eqf-b-radio);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);

	font-family: inherit;
	font-size: 14px;
	line-height: var(--eqf-b-alto);
	color: var(--eqf-b-texto);

	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.eqf-wrapper.eqf-template-buscador input[type="text"]::placeholder {
	color: var(--eqf-b-placeholder);
	opacity: 1;
}

.eqf-wrapper.eqf-template-buscador input[type="text"]:focus {
	outline: none;
	border-color: var(--eqf-b-borde-activo);
	box-shadow: 0 0 0 3px rgba(245, 130, 31, .15);
}

/* --------------------------------------------------------------------------
   Acciones
   El botón de enviar se superpone al input como icono de lupa. En modo ajax o
   auto el formulario se envía solo, así que el botón es un extra, no el camino
   principal.
   -------------------------------------------------------------------------- */

.eqf-wrapper.eqf-template-buscador .eqf-actions {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	height: 0;          /* no ocupa alto: el botón va posicionado */
}

.eqf-wrapper.eqf-template-buscador .eqf-btn.eqf-apply {
	position: absolute;
	right: 6px;
	bottom: 6px;

	width: 34px;
	height: 34px;
	padding: 0;
	min-width: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: none;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;

	font-size: 0;       /* se oculta el texto, queda la lupa */
	color: var(--eqf-b-placeholder);
	transition: color .15s ease, background .15s ease;
}

/* Lupa dibujada en CSS: evita depender de una fuente de iconos del tema. */
.eqf-wrapper.eqf-template-buscador .eqf-btn.eqf-apply::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.eqf-wrapper.eqf-template-buscador .eqf-btn.eqf-apply::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 2px;
	height: 7px;
	background: currentColor;
	border-radius: 2px;
	transform: rotate(-45deg);
}

.eqf-wrapper.eqf-template-buscador .eqf-btn.eqf-apply:hover {
	color: var(--eqf-b-borde-activo);
	background: rgba(245, 130, 31, .08);
}

/* El botón de limpiar no encaja en un buscador de un solo campo: para vaciarlo
   basta con borrar el texto. */
.eqf-wrapper.eqf-template-buscador .eqf-btn.eqf-clear {
	display: none;
}

/* --------------------------------------------------------------------------
   Estado AJAX
   -------------------------------------------------------------------------- */

/* Contenedor: solo posiciona, ya no gira ni tiene borde propio. El markup
   del bloque .eqf-ajax-loader es genérico (spinner + texto "Cargando...")
   y lo comparten todas las plantillas — aquí solo hay sitio para el spinner. */
.eqf-wrapper.eqf-template-buscador .eqf-ajax-loader {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* El aro que gira de verdad es el span vacío .eqf-spinner, no el
   contenedor: así la rotación no arrastra consigo el texto que va al lado. */
.eqf-wrapper.eqf-template-buscador .eqf-ajax-loader .eqf-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--eqf-b-borde);
	border-top-color: var(--eqf-b-borde-activo);
	border-radius: 50%;
	animation: eqf-buscador-giro .7s linear infinite;
}

/* Sin sitio para texto en un buscador compacto de un solo campo. */
.eqf-wrapper.eqf-template-buscador .eqf-ajax-loader .eqf-loading-text {
	display: none;
}

@keyframes eqf-buscador-giro {
	to { transform: rotate(360deg); }
}

/* Mientras se busca, la lupa estorba. */
.eqf-wrapper.eqf-template-buscador.eqf-loading .eqf-btn.eqf-apply {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Móvil
   Se ensancha a todo el contenedor, pero sin crecer en alto.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.eqf-wrapper.eqf-template-buscador {
		max-width: none;
	}

	.eqf-wrapper.eqf-template-buscador input[type="text"] {
		font-size: 16px;   /* por debajo de 16px, iOS hace zoom al enfocar */
	}
}