/* ===================================================================================
   Archivo: assets/css/whatsapp-button.css
   Desarrollador: INTIC GLOBAL - ALEX I. GARCIA B.
   Descripción: Estilos del botón de WhatsApp en ficha de producto y botón flotante.
   =================================================================================== */

.cliperp-wa-btn {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: var(--cliperp-border-radius, 8px) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(37, 211, 102, 0.25);
}

.cliperp-wa-btn:hover,
.cliperp-wa-btn:focus {
  background-color: #128c7e !important;
  border-color: #128c7e !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(37, 211, 102, 0.35);
}

.cliperp-wa-btn .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* Botón flotante */
.cliperp-wa-floating-btn {
  position: fixed;
  z-index: 99999;
  bottom: 25px;
}

.cliperp-wa-floating-btn.bottom-right {
  right: 25px;
}

.cliperp-wa-floating-btn.bottom-left {
  left: 25px;
}

.cliperp-wa-floating-link {
  width: 58px;
  height: 58px;
  background-color: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cliperp-wa-floating-link:hover {
  background-color: #128c7e;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.cliperp-wa-floating-link .dashicons {
  font-size: 32px;
  width: 32px;
  height: 32px;
}