/* ====================================
   [07] BOTÓN DE CARRITO FLOTANTE
   ------------------------------------
   Estilos para el botón flotante del carrito
   que permanece fijo en la esquina inferior derecha
   mostrando el ícono de carrito y el contador de productos.
==================================== */

/* Contenedor principal del botón flotante */
.alcansan-float-cart {
  position: fixed; 			  /* Fija el botón en pantalla, no se mueve con scroll */
  bottom: 20px;   			  /* Separación de 20px desde el borde inferior */
  right: 20px;       		 /* Separación de 20px desde el borde derecho */
  background-color: #BE1823; /* Fondo rojo oscuro personalizado */
  color: white;              /* Texto en blanco */
  padding: 12px 16px;       /* Espacio interno vertical y horizontal */
  border-radius: 50px;      /* Bordes redondeados tipo pastilla */
  font-size: 20px;          /* Tamaño base del texto */
  text-decoration: none;    /* Sin subrayado (en caso de ser enlace) */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra para dar profundidad */
  display: flex;            /* Usamos flexbox para alinear ícono y texto */
  align-items: center;      /* Centra verticalmente los elementos */
  gap: 8px;                 /* Espacio entre ícono y contador */
  z-index: 9999;            /* Prioridad alta para que esté encima */
  transition: background-color 0.3s ease; /* Transición suave para hover */
  cursor: pointer;          /* Cambia cursor a mano para indicar clicable */
}

/* Cambia color de fondo al pasar el cursor sobre el botón */
.alcansan-float-cart:hover {
  background-color: #a11d02; /* Rojo más oscuro para efecto hover */
}

/* Ícono del carrito dentro del botón flotante */
.alcansan-float-cart .cart-icon {
  font-size: 24px; /* Ícono ligeramente más grande que el texto */
}

/* Contador de productos dentro del botón flotante */
.alcansan-float-cart .cart-count {
  background: #fff;         /* Fondo blanco para que destaque */
  color: #b12704;           /* Texto en rojo Amazon */
  border-radius: 50%;       /* Forma circular */
  padding: 2px 7px;         /* Espacio interno ajustado para burbuja */
  font-size: 14px;          /* Tamaño de fuente legible */
  font-weight: bold;        /* Fuente en negrita para visibilidad */
  min-width: 22px;          /* Ancho mínimo para evitar deformaciones */
  text-align: center;       /* Centrado horizontal del número */
  line-height: 1;           /* Altura de línea compacta para centrado vertical */
  user-select: none;        /* Impide selección del texto para mejor UX */
}