/* public/css/public-styles.css */
#mbfc-floating-container {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 9;
	display: flex;
	flex-direction: column-reverse; /* La lista encima del botón */
	align-items: flex-end; /* Alinea los ítems a la derecha */
}

#mbfc-toggle-button {
	background-color: #25d366; /* Similar al color de WhatsApp, como en tu imagen */
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	padding: 0; /* Para que el icono ocupe todo */
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

#mbfc-toggle-button:hover {
	background-color: #1dae54;
	transform: scale(1.05);
}

#mbfc-toggle-button .mbfc-icon {
	min-width: 32px; /* Ajusta el tamaño de tus iconos SVG */
	min-height: 32px;
	/* Si usas SVG y quieres controlar el color desde CSS:
       fill: currentColor; (asegúrate que el SVG no tenga un fill fijo) */
}

#mbfc-links-list {
	list-style: none;
	margin: 0 0 15px 0; /* Espacio entre la lista y el botón de toggle */
	padding: 0;
	/* Para lograr el efecto de la imagen, necesitarás posicionar
       los ítems de forma más compleja, no como una lista vertical simple.
       Lo siguiente es para una lista vertical: */
	/* background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    width: auto;
    min-width: 180px;
    overflow: hidden; */
}

#mbfc-links-list li {
	margin: 0 0 8px 0; /* Espacio entre los botones de la lista */
	padding: 0;
	/* border-bottom: 1px solid #eee; */ /* Para lista vertical */
}
/* #mbfc-links-list li:last-child {
    border-bottom: none;
} */

#mbfc-links-list li a {
	display: inline-block; /* Para que el padding y el border-radius funcionen bien */
	padding: 10px 20px;
	text-decoration: none;
	background-color: #e6ffe6; /* Verde claro como en tu imagen */
	color: #333; /* Texto oscuro */
	border: 1px solid #adebad; /* Borde verde más oscuro */
	border-radius: 25px; /* Para hacerlos redondeados como píldoras */
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease, transform 0.1s ease;
	white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
}

#mbfc-links-list li a:hover {
	background-color: #d1f5d1;
	border-color: #94d194;
	transform: translateY(-1px); /* Pequeño efecto al pasar el cursor */
}

/* Ocultar inicialmente la lista (se muestra con JS) */
#mbfc-links-list {
	display: none;
}

/* Ajustes para el posicionamiento de los ítems como en la imagen
   (esto es más complejo y puede requerir ajustes adicionales)
   La imagen muestra ítems flotando individualmente.
   Podrías usar position:absolute para cada `li` dentro de `ul#mbfc-links-list`
   y calcular sus posiciones relativas al botón principal.
   Este es un ejemplo muy básico y necesitará más trabajo: */

#mbfc-floating-container.mbfc-open #mbfc-links-list li:nth-child(1) a {
	/* Ejemplo: posicionar el primer ítem */
	/* transform: translate(-100px, -20px); */
}
#mbfc-floating-container.mbfc-open #mbfc-links-list li:nth-child(2) a {
	/* Ejemplo: posicionar el segundo ítem */
	/* transform: translate(-150px, -70px); */
}
/* ... y así sucesivamente para cada ítem.
   Esto se volvería complicado de mantener si el número de ítems varía mucho.
   Flexbox o Grid dentro de la lista, o incluso una animación con JS,
   podrían ser alternativas para un despliegue más dinámico estilo "abanico".
*/