/* =========================
   WhatsApp flutuante (minimal mobile)
   ========================= */

/* Botão */
.bt-whatsApp{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 100;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  text-decoration: none;

  /* minimal */
  background: transparent;
  -webkit-tap-highlight-color: transparent;

  transition: transform .15s ease, filter .15s ease;
  will-change: transform;
}

.bt-whatsApp:active{
  transform: scale(.96);
}

/* Ícone */
.bt-whatsApp__img{
  width: 52px;
  height: 52px;
  display: block;
}

/* Badge (mais discreto) */
.alertWapp{
  position: fixed;
  right: 14px;
  bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 101;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  background: #ff2d2d;
  color: #fff;

  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 16px;

  border-radius: 999px;

  visibility: hidden; /* JS controla */
}

/* Mensagem: no mobile vira “chip” menor (opcional) */
.msgWapp{
  position: fixed;
  right: 76px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 100;

  max-width: min(160px, calc(100vw - 110px));
  height: 28px;
  padding: 0 12px;

  background: rgba(0,0,0,.88);
  color: #fff;

  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 28px;

  border-radius: 999px;

  visibility: hidden; /* JS controla */
  cursor: pointer;
  user-select: none;
}

/* Mobile: ainda mais compacto */
@media (max-width: 480px){
  .bt-whatsApp{
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }

  .bt-whatsApp__img{
    width: 48px;
    height: 48px;
  }

  .alertWapp{
    right: 10px;
    bottom: calc(52px + 12px + env(safe-area-inset-bottom, 0px));
  }

  /* se quiser SUMIR com a msg no celular, deixa display:none */
  .msgWapp{
    right: 68px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    height: 26px;
    line-height: 26px;
    font-size: 11px;
  }
}

/* Desktop (mantém hover só fora do mobile) */
@media (hover: hover){
  .bt-whatsApp:hover{
    transform: translateY(-3px);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));
  }
}