/**
 * Lo mínimo para que el buscador se lea, y nada que haya que pelear.
 *
 * El campo y los botones no se tocan: llevan las clases del bloque de búsqueda
 * y de los botones de bloque, así que el tema ya los ha vestido. Aquí solo se
 * coloca —una fila, una lista— y se marca la diferencia entre libre y ocupado.
 *
 * Los colores salen de la paleta del tema con uno de respaldo detrás. Cada
 * tema nombra su paleta como quiere, así que la variable puede no existir; lo
 * que no puede pasar es que entonces no se vea nada. Y la diferencia se dice
 * también con palabras, porque el color solo no se lee.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * CON EL PESO JUSTO, PARA QUE MANDE QUIEN MONTA LA PÁGINA
 * ─────────────────────────────────────────────────────────────────────────────
 * Casi todo va dentro de `:where()`, que deja la regla con peso cero. Así el
 * CSS de quien monta la página —una persona, el tema, una IA— gana con
 * cualquier selector, sin `!important` y sin adivinar cuál usa el plugin.
 * Antes el formulario llevaba un ancho máximo con dos clases detrás, y pedir
 * el campo a todo el ancho no había manera de conseguirlo.
 *
 * Pero peso cero es menos que el de una etiqueta suelta, y eso tuvo un precio.
 * La hoja de reinicio de MDB —la de Bootstrap, que traen muchos temas— dice
 * `p { margin-top: 0 }` y `ul { margin-top: 0; margin-bottom: 1rem }`, y con
 * eso ganaba a la separación entre las piezas del buscador: el botón de ver
 * más acababa pegado a la última fila. Así que los márgenes que separan una
 * pieza de otra pesan una clase, lo justo para ganarle a una etiqueta. Quien
 * quiera otros los cambia nombrándolos con dos clases, como
 * `.hostr-buscador .hostr-mas-caja`.
 *
 * Y pesan algo más las reglas que tienen que ganarle a otra hoja: vaciar la
 * lista de resultados, que muchos temas pintan con viñetas; el margen que el
 * bloque de búsqueda le pone al botón y el ancho que le da a su etiqueta; y el
 * campo agrupado, al que el tema le pone un borde que dentro del grupo sobra.
 *
 * Lo más habitual se cambia con variables, sin selectores:
 *
 *   --hostr-ancho          ancho del formulario; 100 % si no se dice nada
 *   --hostr-hueco          separación entre el campo y el botón
 *   --hostr-grupo-radio    con el botón dentro: redondeo del grupo
 *   --hostr-grupo-relleno  con el botón dentro: aire entre el borde y lo de dentro
 *   --hostr-grupo-fondo    con el botón dentro: fondo del grupo
 */

:where(.hostr-buscador) {
	margin-block: 1.5em;
}

/* El formulario ocupa el sitio que le den, o el ancho que se le pida. */
:where(.hostr-buscador .hostr-form) {
	box-sizing: border-box;
	width: var(--hostr-ancho, 100%);
	max-width: 100%;
}

/* Y si es más estrecho que su sitio, se coloca donde se diga. */
:where(.hostr-alinear-centro .hostr-form) {
	margin-inline: auto;
}

:where(.hostr-alinear-derecha .hostr-form) {
	margin-inline-start: auto;
}

/*
 * El campo y el botón, uno al lado del otro. Lo normal es que esto lo ponga
 * la hoja del bloque de búsqueda de WordPress, pero un sitio puede estar
 * cargando solo el CSS de los bloques que usa, y aquí no hay un bloque de
 * búsqueda de verdad sino su marcado. Sin esto, en ese sitio, el botón se
 * caería debajo del campo.
 */
:where(.hostr-buscador .wp-block-search__inside-wrapper) {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hostr-hueco, .75em);
	align-items: stretch;
	max-width: 100%;
}

/*
 * El bloque de búsqueda separa el botón del campo con un margen a la
 * izquierda. Aquí la separación es el `gap`, que vale igual escribiendo de
 * derecha a izquierda; con los dos a la vez el hueco sería el doble del que
 * se pide. Pesa lo justo para ganarle a esa regla.
 */
.hostr-form .hostr-ir {
	margin: 0;
}

:where(.hostr-buscador .hostr-ir) {
	flex: 0 0 auto;
	cursor: pointer;
}

/*
 * La etiqueta escondida, escondida del todo.
 *
 * `screen-reader-text` la deja en un píxel, pero el bloque de búsqueda le da a
 * su etiqueta `width: 100%`, y cuál de las dos gana depende del orden en que
 * lleguen las hojas de cada sitio. Donde gana la del bloque, la etiqueta queda
 * invisible y tan ancha como la página, colocada donde empieza el campo, así
 * que se sale por la derecha y le mete a la página entera una barra de
 * desplazamiento horizontal: en un móvil, la página se mueve de lado. Lo único
 * que hay que ganarle es ese ancho.
 */
.hostr-form .wp-block-search__label.screen-reader-text {
	width: 1px;
}

/*
 * Un campo decente en los temas que no visten el suyo.
 *
 * Con peso cero, como casi todo: en cuanto el tema diga algo del campo —y casi
 * todos lo dicen— gana el tema y esto desaparece. Es una red, no una opinión.
 */
:where(.hostr-buscador .hostr-q) {
	flex: 1 1 auto;
	min-width: 0;
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--wp--preset--color--borde, rgba(128, 128, 128, .4));
	border-radius: var(--wp--custom--radio--corto, 4px);
	padding: .55em .75em;
}

/* El botón debajo del campo, tan ancho como él. */
:where(.hostr-boton-debajo .wp-block-search__inside-wrapper) {
	flex-direction: column;
}

/*
 * El botón dentro del campo: los dos, un solo control.
 *
 * El borde, el fondo y el redondeo pasan del campo a la caja que los envuelve,
 * y el campo se queda sin nada dentro de ella. Salen de las mismas variables
 * con las que el tema viste sus campos —las de MDB, con la paleta de WordPress
 * y un gris detrás para cualquier otro tema—, así que el grupo tiene el mismo
 * aspecto que un campo suelto del sitio.
 *
 * Esto sí pesa: el tema le pone el borde al campo con una clase, y para
 * quitárselo dentro del grupo hay que decir un poco más que él. El redondeo,
 * el relleno y el fondo del grupo se cambian con sus variables.
 */
.hostr-boton-dentro .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	gap: var(--hostr-hueco, .25em);
	padding: var(--hostr-grupo-relleno, .25em);
	background-color: var(--hostr-grupo-fondo, var(--mdb-body-bg, transparent));
	border: 1px solid var(--mdb-border-color, var(--wp--preset--color--borde, rgba(128, 128, 128, .4)));
	border-radius: var(--hostr-grupo-radio, var(--mdb-border-radius, var(--wp--custom--radio--corto, 4px)));
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hostr-boton-dentro .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--mdb-primary, var(--wp--preset--color--primario, currentColor));
	box-shadow: 0 0 0 1px var(--mdb-primary, var(--wp--preset--color--primario, currentColor));
}

.hostr-boton-dentro .hostr-q,
.hostr-boton-dentro .hostr-q:focus {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}

/*
 * La separación entre las piezas: con una clase de peso, no con cero.
 *
 * Son un párrafo, un div, una lista y otro párrafo, y la hoja de reinicio de
 * casi cualquier tema les pone sus márgenes a los párrafos y a las listas por
 * etiqueta. Con peso cero ganaba ella y las piezas quedaban pegadas.
 */
.hostr-extensiones {
	margin: .6em 0 0;
}

.hostr-aviso {
	margin: .8em 0 0;
}

.hostr-resultados,
.hostr-esperando {
	margin: 1.2em 0 0;
}

/* El botón de ver más, despegado de la última fila. */
.hostr-mas-caja {
	margin: 1.8em 0 .5em;
}

:where(.hostr-extensiones) {
	font-size: .875em;
	color: var(--wp--preset--color--atenuado, inherit);
	opacity: .85;
}

:where(.hostr-aviso) {
	min-height: 1.2em;
}

:where(.hostr-aviso.es-malo) {
	color: var(--wp--preset--color--peligro, #b32d2e);
}

/*
 * La lista, sin viñetas ni sangría. Esto pesa a propósito: muchos temas le dan
 * viñetas a toda lista que haya en el contenido, y un resultado con un punto
 * delante parece otra cosa.
 */
.hostr-buscador .hostr-resultados,
.hostr-buscador .hostr-esperando {
	list-style: none;
	padding: 0;
}

:where(.hostr-fila) {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	align-items: center;
	padding: .7em 0;
	border-top: 1px solid var(--wp--preset--color--borde, rgba(128, 128, 128, .25));
}

:where(.hostr-fila:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--borde, rgba(128, 128, 128, .25));
}

/* El nombre y su letra pequeña, uno encima del otro y a la izquierda. */
:where(.hostr-quien) {
	flex: 1 1 12em;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .1em;
}

:where(.hostr-nombre) {
	overflow-wrap: anywhere;
	font-weight: 600;
}

:where(.hostr-fila.esta-ocupado .hostr-nombre) {
	font-weight: 400;
	opacity: .6;
}

:where(.hostr-estado) {
	font-size: .875em;
}

:where(.hostr-estado.es-libre) {
	color: var(--wp--preset--color--exito, #007017);
}

:where(.hostr-estado.es-ocupado) {
	color: var(--wp--preset--color--peligro, #b32d2e);
}

:where(.hostr-estado.es-dudoso) {
	color: var(--wp--preset--color--atenuado, inherit);
	opacity: .85;
}

:where(.hostr-precio) {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* El precio de antes, tachado y sin gritar. */
:where(.hostr-antes) {
	font-weight: 400;
	opacity: .6;
}

/*
 * Lo que costará renovarlo, debajo del nombre.
 *
 * Es más pequeña que el precio y no está escondida: quien mire el número de
 * arriba tiene que tropezarse con este.
 */
:where(.hostr-renueva) {
	font-size: .8125em;
	color: var(--wp--preset--color--atenuado, inherit);
	opacity: .85;
}

/*
 * Lo que se enseña mientras se busca.
 *
 * Y no es un texto que ponga «buscando». Una consulta tarda uno o dos
 * segundos y en ese rato la pantalla no puede quedarse igual, porque entonces
 * quien busca no sabe si le hicieron caso y vuelve a darle al botón. Se pintan
 * unas filas grises del tamaño de las que van a venir, así que la lista no
 * pega un salto cuando lleguen.
 */
:where(.hostr-esperando li) {
	height: 1.2em;
	margin: 0;
	padding: .7em 0;
	border-top: 1px solid var(--wp--preset--color--borde, rgba(128, 128, 128, .25));
	background-clip: content-box;
	background-color: currentColor;
	opacity: .09;
	animation: hostr-latido 1.2s ease-in-out infinite;
}

:where(.hostr-esperando li:nth-child(2)) { animation-delay: .1s; }
:where(.hostr-esperando li:nth-child(3)) { animation-delay: .2s; }
:where(.hostr-esperando li:nth-child(4)) { animation-delay: .3s; }
:where(.hostr-esperando li:nth-child(5)) { animation-delay: .4s; }

@keyframes hostr-latido {
	0%, 100% { opacity: .07; }
	50%      { opacity: .16; }
}

/* La rueda del botón, mientras se busca o se piden más. */
:where(.hostr-rueda),
:where(.hostr-form[data-hostr-pendiente] .hostr-ir)::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: .5em;
	vertical-align: -.15em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: hostr-gira .7s linear infinite;
}

@keyframes hostr-gira {
	to { transform: rotate(360deg); }
}

/*
 * La misma rueda cuando se pulsó buscar antes de que llegara el JavaScript.
 *
 * La búsqueda ya está apuntada y sale en cuanto llegue. Mientras tanto el
 * botón tiene que decir que se le hizo caso, o quien busca le vuelve a dar
 * pensando que no pasó nada.
 */
:where(.hostr-form[data-hostr-pendiente] .hostr-ir) {
	cursor: progress;
}

:where(.hostr-form[data-hostr-pendiente] .hostr-ir)::before {
	content: "";
}

/*
 * Con lupa, mientras gira se ve la rueda en su lugar y no las dos: un botón
 * que solo es un dibujo no tiene sitio para ambas.
 */
:where(.hostr-ir.has-icon.hostr-girando) svg,
:where(.hostr-form[data-hostr-pendiente] .hostr-ir.has-icon) svg {
	display: none;
}

:where(.hostr-ir.has-icon) .hostr-rueda,
:where(.hostr-form[data-hostr-pendiente] .hostr-ir.has-icon)::before {
	margin-inline-end: 0;
}

/*
 * A quien le moleste el movimiento no se le mueve nada. Sigue viendo que algo
 * está pasando, porque el gris del esqueleto y la rueda siguen ahí.
 */
@media (prefers-reduced-motion: reduce) {
	:where(.hostr-esperando li),
	:where(.hostr-rueda),
	:where(.hostr-form[data-hostr-pendiente] .hostr-ir)::before {
		animation: none;
	}
}

/*
 * El diálogo donde se elige el dominio que viene con un producto.
 *
 * Se apoya en el `<dialog>` del navegador, que ya centra, oscurece el fondo,
 * atrapa el tabulador dentro y cierra con Escape. Lo que queda aquí es el
 * tamaño y el respiro; los colores y las formas los pone el tema, como en
 * todo lo demás.
 */
:where(.hostr-modal) {
	width: min(34rem, calc(100vw - 2rem));
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radio--medio, 8px);
	background-color: var(--wp--preset--color--fondo, Canvas);
	color: inherit;
}

:where(.hostr-modal)::backdrop {
	background: rgba(0, 0, 0, .5);
}

:where(.hostr-modal-caja) {
	padding: 1.5rem;
}

:where(.hostr-modal-caja > h2) {
	margin-top: 0;
}

:where(.hostr-modal .hostr-buscador) {
	margin-block-end: 0;
}

/* El pie del diálogo, con la misma clase de peso que las otras separaciones. */
.hostr-modal-pie {
	margin: 1.2em 0 0;
}

:where(.hostr-modal-pie) {
	text-align: end;
}

/* El aviso de la ficha del producto, sin gritar. */
.hostr-regalo-aviso {
	margin: 0 0 1em;
}

:where(.hostr-regalo-cual) {
	display: block;
	font-size: .875em;
	color: var(--wp--preset--color--atenuado, inherit);
	opacity: .85;
}

/* El botón ya lo viste el tema; aquí solo se le quita el estirón de la fila. */
:where(.hostr-fila .hostr-anadir) {
	flex: 0 0 auto;
	cursor: pointer;
}

:where(.hostr-fila .hostr-anadir[disabled]) {
	cursor: default;
	opacity: .65;
}