/*
 * Hamo — Progress bar de rolagem (mobile) para o widget NATIVO do Elementor
 * Pro "Taxonomy Filter" (.e-filter). Não toca em arquivos do Pro: os controles
 * são injetados via API do Elementor e a barra é criada via JS. Só aparece no
 * mobile e quando os rótulos transbordam para o lado.
 * Consumir sempre var(--x, fallback) — sem declarar defaults nos seletores.
 */

/* A barra fica escondida por padrão; só entra no mobile. */
.hamo-txf-bar {
	display: none;
}

@media ( max-width: 767px ) {
	/* Quando a feature está ligada, garante que os rótulos rolem para o lado
	 * (nowrap + overflow) mesmo sem o "Horizontal Scroll" nativo — e esconde
	 * a scrollbar nativa, já que mostramos a nossa. */
	.hamo-txf-progress-yes .e-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.hamo-txf-progress-yes .e-filter::-webkit-scrollbar {
		display: none;
	}

	.hamo-txf-progress-yes .hamo-txf-bar {
		display: block;
		position: relative;
		width: var(--hamo-txf-w, 40%);
		max-width: 100%;
		height: var(--hamo-txf-h, 3px);
		margin: var(--hamo-txf-gap, 8px) auto 0;
		background: var(--hamo-txf-track, rgba(0, 0, 0, 0.12));
		border-radius: var(--hamo-txf-r, 99px);
		overflow: hidden;
	}

	/* Some quando tudo cabe (sem rolagem). */
	.hamo-txf-progress-yes .hamo-txf-bar.is-hidden {
		display: none;
	}

	.hamo-txf-bar__fill {
		display: block;
		height: 100%;
		width: 0;
		background: var(--hamo-txf-fill, #0a3a80);
		border-radius: inherit;
		transition: width 0.1s linear;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hamo-txf-bar__fill {
		transition: none;
	}
}