/*
 * DM Barra de Envío Gratis — estilos del front-end.
 * Autor: Digital Master
 * Los colores y medidas se definen en WooCommerce → Ajustes → Envío gratis
 * y llegan como variables CSS (:root). Los valores de var(..., fallback) son los de respaldo.
 */
.dm-fs-bar {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 20px;
}
.dm-fs-bar__text {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	font-weight: var(--dm-fs-weight, 500);
	color: var(--dm-fs-color-text, #292929);
}
/* Texto y monto con el mismo peso (se elige en los ajustes). */
.dm-fs-bar__text strong,
.dm-fs-bar__text .woocommerce-Price-amount {
	font-weight: inherit;
}
.dm-fs-bar__track {
	height: var(--dm-fs-height, 8px);
	background: var(--dm-fs-color-bg, #e5e5e5);
	border-radius: var(--dm-fs-radius, 999px);
	overflow: hidden;
}
.dm-fs-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--dm-fs-color-bar, #3858e9);
	border-radius: var(--dm-fs-radius, 999px);
	transition: width var(--dm-fs-speed, 600ms) cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}
.dm-fs-bar.is-complete .dm-fs-bar__fill { background: var(--dm-fs-color-done, #3858e9); }

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

/*
 * Corrección de espacio (v1.0.1)
 * El cuerpo del carrito de FunnelKit (.fkcart-slider-body) es una cuadrícula (grid) cuya
 * fila flexible (1fr) estaba pensada para la lista de productos. Al insertar la barra
 * antes de los productos, la barra se convertía en esa primera fila y recibía todo el
 * espacio libre. Aquí la fila de la barra se ajusta a su contenido y la fila flexible
 * pasa a ser la de los productos.
 */
.dm-fs-bar {
	align-self: start;
}
.fkcart-slider-body:has(> .dm-fs-bar) {
	grid-template-rows: auto minmax(0, 1fr) !important;
}