/**
 * QV WhatsApp Widget Styles
 * Estilos para botão flutuante de WhatsApp
 * Versão: 1.0.0
 */

/* ===== VARIÁVEIS CSS ===== */
:root {
  /* Cores WhatsApp */
  --qv-whatsapp-green: #25D366;
  --qv-whatsapp-green-dark: #128C7E;
  --qv-whatsapp-green-light: #DCF8C6;

  /* Cores de estado */
  --qv-whatsapp-offline: #95A5A6;
  --qv-whatsapp-badge-online: #2ECC71;
  --qv-whatsapp-badge-offline: #E74C3C;

  /* Z-index (abaixo do QV Chat = 999999) */
  --qv-whatsapp-z-index: 999998;

  /* Tamanhos (iguais ao Try-On, compacto) */
  --qv-whatsapp-size-desktop: 60px;
  --qv-whatsapp-size-tablet: 50px;
  --qv-whatsapp-size-mobile: 45px;
}

/* ===== CONTAINER PRINCIPAL ===== */
.qv-whatsapp-container {
  position: fixed !important;
  z-index: var(--qv-whatsapp-z-index) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: auto !important;
}

/* ===== BOTÃO FLUTUANTE (BUBBLE) ===== */
.qv-whatsapp-bubble {
  width: var(--qv-whatsapp-size-desktop) !important;
  height: var(--qv-whatsapp-size-desktop) !important;
  border-radius: 50% !important;
  background: var(--qv-whatsapp-green) !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: qv-whatsapp-float 3s ease-in-out infinite !important;
}

/* Estado Online (padrão) */
.qv-whatsapp-bubble.online {
  background: var(--qv-whatsapp-green) !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
}

/* Estado Offline */
.qv-whatsapp-bubble.offline {
  background: var(--qv-whatsapp-offline) !important;
  box-shadow: 0 4px 16px rgba(149, 165, 166, 0.4) !important;
  opacity: 0.8 !important;
}

/* Hover */
.qv-whatsapp-bubble:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6) !important;
}

.qv-whatsapp-bubble.offline:hover {
  box-shadow: 0 6px 24px rgba(149, 165, 166, 0.5) !important;
}

/* Active (clicado) */
.qv-whatsapp-bubble:active {
  transform: scale(0.95) !important;
}

/* ===== ÍCONE WHATSAPP ===== */
.qv-whatsapp-icon {
  width: 24px !important;
  height: 24px !important;
  fill: white !important;
  pointer-events: none !important;
}

/* ===== BADGE DE STATUS ===== */
.qv-whatsapp-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  padding: 4px 8px !important;
  background: var(--qv-whatsapp-badge-online) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 2px solid white !important;
  animation: qv-whatsapp-pulse 2s ease-in-out infinite !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Badge Offline */
.qv-whatsapp-badge.offline {
  background: var(--qv-whatsapp-badge-offline) !important;
  animation: none !important;
}

/* ===== TOOLTIP ===== */
.qv-whatsapp-tooltip {
  position: absolute !important;
  bottom: calc(100% + 15px) !important; /* Acima do bubble */
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 0, 0, 0.85) !important;
  color: white !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: normal !important; /* Permite quebra de linha */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  z-index: 20 !important;
  max-width: 250px !important; /* Evita vazar para fora da tela */
  text-align: center !important;
  word-wrap: break-word !important;
}

/* Seta do tooltip */
.qv-whatsapp-tooltip::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-color: rgba(0, 0, 0, 0.85) !important;
}

/* Mostrar tooltip ao hover */
.qv-whatsapp-container:hover .qv-whatsapp-tooltip {
  opacity: 1 !important;
}

/* ===== ANIMAÇÕES ===== */

/* Animação de flutuação */
@keyframes qv-whatsapp-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animação de pulse (badge) */
@keyframes qv-whatsapp-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* Fade in ao carregar */
@keyframes qv-whatsapp-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qv-whatsapp-container {
  animation: qv-whatsapp-fade-in 0.5s ease !important;
}

/* ===== RESPONSIVIDADE ===== */

/* Tablets e telas médias (≤768px) */
@media (max-width: 768px) {
  .qv-whatsapp-bubble {
    width: var(--qv-whatsapp-size-tablet) !important;
    height: var(--qv-whatsapp-size-tablet) !important;
  }

  .qv-whatsapp-badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  .qv-whatsapp-tooltip {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

  /* Ajuste de posicionamento em mobile */
  .qv-whatsapp-container {
    bottom: 20px !important;
  }
}

/* Mobile e telas pequenas (≤480px) */
@media (max-width: 480px) {
  .qv-whatsapp-bubble {
    width: var(--qv-whatsapp-size-mobile) !important;
    height: var(--qv-whatsapp-size-mobile) !important;
  }

  .qv-whatsapp-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
    top: -3px !important;
    right: -3px !important;
  }

  .qv-whatsapp-tooltip {
    font-size: 12px !important;
    padding: 7px 12px !important;
    max-width: 200px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Ajuste de posicionamento em telas pequenas */
  .qv-whatsapp-container {
    bottom: 15px !important;
  }
}

/* ===== ACESSIBILIDADE ===== */

/* Focus visible (para navegação por teclado) */
.qv-whatsapp-bubble:focus-visible {
  outline: 3px solid var(--qv-whatsapp-green-dark) !important;
  outline-offset: 3px !important;
}

/* Redução de movimento (para usuários com preferência) */
@media (prefers-reduced-motion: reduce) {
  .qv-whatsapp-bubble,
  .qv-whatsapp-badge,
  .qv-whatsapp-tooltip,
  .qv-whatsapp-container {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== COMPATIBILIDADE COM OUTROS WIDGETS ===== */

/* Garantir que WhatsApp não sobreponha QV Chat (z-index menor) */
.qv-whatsapp-container {
  z-index: 999998 !important;
}

/* QV Chat tem z-index: 999999 */
.qv-widget-container {
  z-index: 999999 !important;
}

/* ===== ESTADOS ESPECIAIS ===== */

/* Oculto (quando QV Chat está aberto) */
.qv-whatsapp-container[style*="display: none"] {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ===== PRINT (remover ao imprimir) ===== */
@media print {
  .qv-whatsapp-container {
    display: none !important;
  }
}