/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP (tarefa #33)
   --------------------------------------------------------------------------
   Marcação: parts/whatsapp-botao.php · Lógica: inc/whatsapp.php
   Script:   assets/js/whatsapp-botao.js

   Substitui o widget do plugin ar-contactus, que trazia 132 KB de CSS para
   desenhar um botão redondo e um formulário de dois campos.

   As medidas repetem as do widget antigo de propósito — 70 px de botão,
   20 px de folga, painel de 300 px, verde #008749 — para o visitante que
   conhece o site não notar troca nenhuma.

   O reset do tema (style.min.css) zera borda e fundo de input, então cada
   campo aqui declara os seus.

   Breakpoints do tema: 1220 / 970 / 680. O painel em tela cheia entra em
   428 px, que era o do widget antigo.
   ========================================================================== */

.qs-wa {
  --qs-wa-verde: #008749;
  --qs-wa-verde-escuro: #00713d;

  position: fixed;
  right: 20px;
  bottom: 20px;
  /* mesma altura do widget antigo: fica acima da barra de reserva
     (z-index 8000) e abaixo do banner de cookies (1000010) */
  z-index: 1000000;
  font-family: inherit;
}

/* ---------- o botão ---------- */

.qs-wa-bt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--qs-wa-verde);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
  transition: transform .2s ease, background-color .2s ease;
  animation: qs-wa-entra .4s ease .8s both;
}

.qs-wa-bt:hover  { background: var(--qs-wa-verde-escuro); }
.qs-wa-bt:active { transform: scale(.94); }

.qs-wa-bt:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 5px rgba(0, 135, 73, .6);
}

.qs-wa-icone {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
}

/* o anel que pulsa, atrás do botão */
.qs-wa-pulso {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: var(--qs-wa-verde);
  animation: qs-wa-pulsa 2s ease-out infinite;
}

/* a bolinha de "estamos online" do widget antigo */
.qs-wa-online {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #4ee08a;
}

@keyframes qs-wa-pulsa {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes qs-wa-entra {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* com o painel aberto o botão vira o "fechar" da conversa */
.qs-wa.qs-wa-aberto .qs-wa-pulso { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .qs-wa-bt    { animation-duration: .01ms; }
  .qs-wa-pulso { animation: none; opacity: 0; }
}

/* ---------- o painel ---------- */

.qs-wa-painel {
  position: absolute;
  right: 0;
  bottom: 86px;
  width: 300px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
  animation: qs-wa-sobe .18s ease both;
}

.qs-wa-painel[hidden] { display: none; }

@keyframes qs-wa-sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-wa-painel { animation-duration: .01ms; }
}

.qs-wa-head {
  padding: 16px 44px 16px 16px;
  background: var(--qs-wa-verde);
}

.qs-wa-head strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.qs-wa-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
}

.qs-wa-fechar:hover { background: rgba(255, 255, 255, .34); }

/* ---------- formulário ---------- */

.qs-wa-form { padding: 16px; }

.qs-wa-campo { display: block; margin-bottom: 12px; }

.qs-wa-campo > span {
  display: block;
  margin-bottom: 5px;
  color: #3b3b3b;
  font-size: 13px;
  font-weight: 600;
}

.qs-wa-campo em {
  color: #d63638;
  font-style: normal;
}

.qs-wa-campo input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #dcdfe3;
  border-radius: 5px;
  background: #fff;
  color: #3b3b3b;
  font-family: inherit;
  font-size: 14px;
  line-height: 38px;
}

.qs-wa-campo input:focus {
  border-color: var(--qs-wa-verde);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 135, 73, .18);
}

.qs-wa-campo input::placeholder { color: #9aa0a6; opacity: 1; }

.qs-wa-campo.qs-wa-invalido input { border-color: #d63638; }

/* honeypot: fora da tela, mas não display:none — robô que lê CSS pula os
   campos escondidos e cai justamente no que a gente queria pegar */
.qs-wa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qs-wa-erro {
  margin: 0 0 10px;
  color: #d63638;
  font-size: 13px;
  line-height: 1.4;
}

.qs-wa-erro a { color: inherit; font-weight: 600; text-decoration: underline; }

.qs-wa-enviar {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: var(--qs-wa-verde);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}

.qs-wa-enviar:hover     { background: var(--qs-wa-verde-escuro); }
.qs-wa-enviar[disabled] { opacity: .7; cursor: default; }

.qs-wa-priv {
  margin: 10px 0 0;
  color: #787878;
  font-size: 11px;
  line-height: 1.4;
}

.qs-wa-priv a { color: #787878; text-decoration: underline; }

/* ---------- recado depois do envio ---------- */

.qs-wa-sucesso {
  padding: 18px 16px;
  color: #3b3b3b;
  font-size: 14px;
  line-height: 1.5;
}

.qs-wa-sucesso[hidden] { display: none; }

.qs-wa-sucesso p { margin: 0; }

/* ---------- página do hotel: acima da barra de reserva ----------
   A barra de reserva é fixa no fundo da página do hotel em qualquer
   largura (--qs-reserva-h é medida pelo JS em parts/reserva.php). Sem
   isto o botão cobre os campos no celular. */
body.single-hotel .qs-wa {
  bottom: calc(var(--qs-reserva-h, 74px) + 14px);
}

/* ---------- celular ----------
   Abaixo de 428 px o painel toma a tela, como fazia o widget antigo:
   300 px de largura num aparelho de 360 px deixa o formulário espremido
   na quina. */
@media (max-width: 428px) {
  .qs-wa.qs-wa-aberto .qs-wa-painel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: 12px 12px 0 0;
  }

  .qs-wa.qs-wa-aberto .qs-wa-bt { display: none; }
}