/* public/css/web/floating-widgets.css */

/* --- Posicionamiento FORZADO para el Botón de WhatsApp --- */
/* Este código intenta sobrescribir CUALQUIER otro estilo usando !important */
/* Apunta al div que tiene las clases de posicionamiento responsive de Tailwind */

/* Para pantallas pequeñas (móviles) */
/* Selector para el div que tiene CLASES fixed, bottom-20, right-6 */
/* Nota: Asegúrate de que estas clases están en el div exactamente así */
.fixed.bottom-20.right-6 {
  /* Forzar posición fija */
  position: fixed !important;
  /* Forzar distancia desde abajo y derecha en móviles */
  bottom: 145px !important; 
  right: 220px !important;  
  /* Asegurar que está por encima de otros elementos */
  z-index: 1000 !important; 
  /* Anular cualquier top o left que venga de otro lado (opcional pero seguro) */
  top: auto !important;
  left: auto !important;
}

/* Para pantallas medianas y grandes (desktop) */
/* Selector para el div que tiene CLASES fixed, md:bottom-12, md:right-12 */
/* Nota: Los ":" en las clases de Tailwind necesitan ser escapados con '\' si no usas un preprocesador, o puedes usar selectores alternativos si existen ID/clases únicas */
/* Usaremos el selector con escape '\' para CSS plano */
.fixed.md\:bottom-12.md\:right-12 {
  /* Forzar posición fija */
  position: fixed !important; 
  /* Forzar distancia desde abajo y derecha en desktop */
  bottom: 425px !important; /* <-- Puedes ajustar este valor si quieres otro margen en desktop */
  right: 22px !important;  /* <-- Puedes ajustar este valor */
  z-index: 1000 !important; /* Asegurar que esté visible */
  /* Anular cualquier top o left */
  top: auto !important;
  left: auto !important;
}


/* --- Reglas para el Widget de Chatbot de Elfsight --- */
/* Manten las reglas para el bot de Elfsight si quieres que se posicione de forma diferente */
/* Necesitas el selector REAL del chatbot aquí, y aplicarles valores top/bottom/right/left */
/* Por ejemplo, si quieres que el bot quede 60px encima del WhatsApp en desktop */

.selector-real-del-chatbot {
   position: fixed !important;
   z-index: 1000 !important;
   bottom: 580px !important; // 120px (bottom WhatsApp) + AlturaWhatsApp + Margen (aprox 50px + 10px)
   right: 20px !important; // Mismo right que WhatsApp
   top: auto !important; left: auto !important; // Anular otros
}

public/css/web/floating-widgets.css

/* ... tus reglas de posicionamiento para .cabbik-whatsapp-float-container ... */

/* === Reglas para asegurar la apariencia del Botón de WhatsApp (Color y Forma) === */

/* Apunta al div del círculo verde dentro de tu contenedor flotante */
.cabbik-whatsapp-float-container .rounded-full {
    background-color: #25d366 !important; /* Fuerza el color de fondo verde */
    /* Asegura otras propiedades si se perdieron, según tu código original */
    /* Por ejemplo: */
    border-radius: 9999px !important; /* Si 'rounded-full' se sobrescribió */
    padding: 12px !important; /* Si el padding se perdió (md:p-5) */
    /* width: ... !important; height: ... !important; */ /* Si el tamaño se perdió */
    /* box-shadow: ... !important; */ /* Si la sombra se perdió */
}

/* Apunta al enlace (<a>) si es necesario, dentro de tu contenedor */
.cabbik-whatsapp-float-container a {
    display: flex !important; /* Asegura que el enlace se comporte como flex si tu SVG lo necesita para centrarse */
    align-items: center !important;
    justify-content: center !important;
    /* Otras propiedades del enlace si se perdieron */
}


/* Apunta al icono SVG dentro del círculo verde */
.cabbik-whatsapp-float-container svg {
  fill: #ffffff !important; /* Fuerza el color del icono a blanco (para SVGs) */
  color: #ffffff !important; /* Fuerza el color del icono a blanco (si es una fuente de iconos o fallback) */
  /* Asegura el tamaño si se perdió (w-6 md:w-8 h-6 md:h-8) */
  width: 24px !important; /* Valor de w-6 en Tailwind por defecto */
  height: 24px !important; /* Valor de h-6 en Tailwind por defecto */

    /* Media query para ajustar tamaño del icono en desktop (md) si usas md:w-8 md:h-8 */
    @media (min-width: 768px) {
       width: 32px !important; /* Valor de w-8 en Tailwind por defecto */
       height: 32px !important; /* Valor de h-8 en Tailwind por defecto */
    }
}