/*
 * Tiles de búsquedas frecuentes: [mdpd_links_tipos] y [mdpd_links_ambientes].
 *
 * Mismo lenguaje visual que las tiras del índice de zonas (assets/zonas.css):
 * caja compacta, radio de la variable del theme, color de acento a la
 * izquierda y relleno pleno recién en hover. La diferencia es que acá la tira
 * lleva el conteo a la derecha.
 *
 * `.mdpd-busquedas` es la clase del propio `.row` que devuelve el shortcode y
 * queda SIN propiedades a propósito: un `margin` ahí le pisaría a Flatsome los
 * márgenes negativos con los que arma el gutter entre columnas. El espaciado
 * lo pone la sección de UX Builder que envuelva el bloque.
 */

.mdpd-busqueda-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	min-height: 56px;
	height: 100%;
	padding: 0.5em 0.8em;
	font-size: 0.95em;
	font-weight: 500;
	line-height: 1.25;
	color: #2b2b2b;
	background: #f4f4f4;
	border-left: 4px solid #ccc;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Las dos variantes del atributo `color` del shortcode. Mismo tratamiento que
   en el índice de zonas: tinte de fondo y barra de acento en reposo, pleno en
   hover y en foco de teclado. */
.mdpd-busqueda-tile--primario {
	background: color-mix(in srgb, var(--fs-color-primary, #168ea6) 10%, #fff);
	border-left-color: var(--fs-color-primary, #168ea6);
}

.mdpd-busqueda-tile--secundario {
	background: color-mix(in srgb, var(--fs-color-secondary, #ff5500) 10%, #fff);
	border-left-color: var(--fs-color-secondary, #ff5500);
}

.mdpd-busqueda-tile--primario:hover,
.mdpd-busqueda-tile--primario:focus-visible {
	color: #fff;
	background: var(--fs-color-primary, #168ea6);
}

.mdpd-busqueda-tile--secundario:hover,
.mdpd-busqueda-tile--secundario:focus-visible {
	color: #fff;
	background: var(--fs-color-secondary, #ff5500);
}

.mdpd-busqueda-tile__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* El conteo informa, no compite: se apaga en reposo y acompaña al texto
   cuando la tira se pinta entera en hover. */
.mdpd-busqueda-tile__total {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: #8a8a8a;
}

.mdpd-busqueda-tile:hover .mdpd-busqueda-tile__total,
.mdpd-busqueda-tile:focus-visible .mdpd-busqueda-tile__total {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 549px) {
	.mdpd-busqueda-tile {
		min-height: 50px;
		padding: 0.45em 0.6em;
		font-size: 0.85em;
	}
}