/* ===================================================================
   WIDGET DE CAPTAÇÃO WHATSAPP — componente COMPARTILHADO pelas 3 LPs
   Fazenda dos Cordeiros · 03/08/2026

   Este arquivo e o assets/js/wa-widget.js são a ÚNICA implementação do
   widget. As três landing pages carregam os dois e se diferenciam apenas
   pelos data-attributes do ponto de montagem (<div class="wa-widget" …>).
   NÃO copiar este bloco para style.css, cafe-com-orquideas.css ou
   a-gosto-de-caminhar.css — foi justamente isso que se desfez aqui.

   Substituiu, em 03/08/2026:
     · o modal centralizado .lead-modal (home e Café com Orquídeas), cujo
       botão de envio caía abaixo do corte em telas baixas;
     · o widget .wa-form-* que vivia só no CSS do A Gosto de Caminhar.
   A estrutura vem daquele widget (por sua vez portado do
   cauasalomao/solar-dona-dora), com as cores trazidas para a identidade
   da fazenda.

   CORES — decisão consciente, não descuido:
     · cabeçalho no VERDE DA FAZENDA (--c-forest), não no verde do Solar;
     · balão de saudação no CREME da casa (--c-sand), não no lilás de lá;
     · botão flutuante e submit seguem no VERDE OFICIAL DO WHATSAPP. É
       convenção registrada no site/README.md: quem carrega o sinal do
       canal é o próprio canal. Trocar esses dois pelo verde da fazenda
       tira do usuário a pista de para onde o clique leva.

   PERSONALIZAÇÃO POR PÁGINA: sobrescreva os tokens --wa-* dentro de
   `.wa-widget` na folha da própria LP. Nada aqui precisa ser duplicado.
   =================================================================== */

.wa-widget {
  /* geometria do canto */
  --wa-bottom: 22px;
  --wa-side: 22px;
  --wa-size: 56px;

  /* verde do CANAL — só o FAB e o submit (ver nota acima) */
  --wa-green: #25D366;
  --wa-green-hover: #1EBE57;
  --wa-green-rgb: 37, 211, 102;

  /* identidade da FAZENDA — cabeçalho e balão. Os fallbacks existem para o
     caso de a folha da LP não definir os tokens --c-*. */
  --wa-header: var(--c-forest, #00491D);
  --wa-bubble: var(--c-sand, #ebe4d2);
  --wa-bubble-ink: var(--c-text, #0E0E0E);

  --wa-border: rgba(14, 14, 14, .12);
  --wa-ink: var(--c-text, #1A1A1A);
  --wa-ink-soft: #5A5A5A;
  --wa-radius: 14px;
  --wa-font: var(--font-sans, Georgia, serif);
  --wa-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
}

/* ---- botão flutuante (launcher) ----
   Sem a animação de pulso do original: ela partia de `0 0 0 0` e, na maior
   parte do ciclo, apagava o brilho de base — o botão sumia contra o verde
   do rodapé e da mata das fotos. */
.wa-fab {
  position: fixed; bottom: var(--wa-bottom); right: var(--wa-side);
  /* Acima do banner de cookies (z 1200) e logo abaixo do painel (1500): antes
     estava em 90 e o banner passava por cima do botão. */
  z-index: 1499;
  width: var(--wa-size); height: var(--wa-size);
  background: var(--wa-green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(var(--wa-green-rgb), .4);
  border: none; padding: 0; cursor: pointer;
  transition: transform .2s, background .2s;
}
.wa-fab:hover { transform: scale(1.1); }
.wa-fab:active { transform: scale(.95); transition-duration: .1s; }

/* ---- ícone: WhatsApp quando recolhido, X quando expandido ----
   Os dois vivem no botão e o CSS alterna. O X reforça que o mesmo botão que
   abriu é o que fecha. */
.wa-fab-ico { display: none; line-height: 0; }
.wa-fab-ico svg { width: 30px; height: 30px; fill: #fff; }
.wa-fab-ico--wa { display: block; }
.wa-widget.is-open .wa-fab-ico--wa { display: none; }
.wa-widget.is-open .wa-fab-ico--x { display: block; }
.wa-fab-ico--x svg {
  width: 26px; height: 26px; fill: none; stroke: #fff;
  stroke-width: 2.4; stroke-linecap: round;
}

/* ---- painel ----
   Ancorado logo acima do FAB. Sem véu e sem travar a rolagem: é um canto da
   tela, não um bloqueio — foi essa a falha do modal que ele substituiu. */
.wa-panel {
  position: fixed; z-index: 1500;
  /* Ancorado ao botão: mesma borda direita, logo acima dele. `left: auto` é
     explícito porque a media query mobile já definiu `left` no passado e
     left+right+width juntos deixavam o card desalinhado do botão. */
  right: var(--wa-side); left: auto;
  bottom: calc(var(--wa-bottom) + var(--wa-size) + .75rem);
  /* A porcentagem de um elemento `fixed` resolve contra o viewport SEM a barra
     de rolagem — ao contrário de 100vw, que a inclui e fazia o card vazar para
     fora da tela pela direita. */
  width: 360px; max-width: calc(100% - 2 * var(--wa-side));
  opacity: 0; visibility: hidden;
  transform: scale(.85) translateY(12px);
  /* Cresce a partir do botão flutuante — são o mesmo componente. */
  transform-origin: bottom right;
  transition: opacity .22s var(--wa-ease), transform .22s var(--wa-ease), visibility .22s var(--wa-ease);
}
.wa-widget.is-open .wa-panel { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wa-panel { transition: opacity .15s linear, visibility .15s linear; transform: none; }
}

.wa-box {
  background: #fff; width: 100%;
  border-radius: var(--wa-radius); overflow: hidden; position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .22);
  display: flex; flex-direction: column;
  /* O card NUNCA passa da viewport. Antes o overflow ficava aqui e a caixa
     inteira rolava, o que levava o cabeçalho junto; agora a caixa só define o
     teto e quem rola é .wa-body. */
  max-height: calc(100vh - var(--wa-bottom) - var(--wa-size) - 1.5rem);
  max-height: calc(100svh - var(--wa-bottom) - var(--wa-size) - 1.5rem);
}

/* ---- corpo: a ÚNICA área rolável ----
   min-height:0 é o que permite ao item flex encolher abaixo do conteúdo; sem
   ele o flex usa o tamanho natural, a caixa estoura o max-height e o cabeçalho
   volta a sair pelo topo. */
.wa-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .8rem 1rem .2rem;
  -webkit-overflow-scrolling: touch;
}

/* ---- bloco de ação: fixo, fora do scroll ---- */
.wa-actions {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  /* padding vertical ~30% menor que o do card anterior (.9rem/1rem) */
  padding: .42rem 1rem .5rem;
  background: #fff;
  border-top: 1px solid rgba(14, 14, 14, .07);
}

/* ---- cabeçalho: balão de chat, título e chevron que recolhe ---- */
.wa-head {
  background: var(--wa-header); padding: .85rem .9rem;
  display: flex; gap: .6rem; align-items: center; flex-shrink: 0;
}
.wa-head-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  background: rgba(255, 255, 255, .16); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wa-head-ico svg { width: 17px; height: 17px; fill: #fff; }
.wa-head h3 {
  font-size: .95rem; margin: 0; color: #fff; flex: 1; line-height: 1.3;
  font-family: var(--wa-font); font-weight: 700; letter-spacing: normal;
}
.wa-collapse {
  flex-shrink: 0; background: transparent; border: none;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; color: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.wa-collapse svg {
  width: 20px; height: 20px; fill: none; stroke: #fff;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.wa-collapse:hover { background: rgba(255, 255, 255, .18); }

/* O form é só o container flex entre cabeçalho e ação — o respiro vive em
   .wa-body e .wa-actions. min-height:0 pelo mesmo motivo do corpo. */
.wa-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ---- balão de saudação, com a pontinha virada para o ícone ---- */
.wa-intro {
  position: relative; align-self: flex-start;
  background: var(--wa-bubble); color: var(--wa-bubble-ink);
  font-size: .8rem; line-height: 1.45; margin: .15rem 0 0;
  padding: .6rem .75rem; border-radius: 4px 10px 10px 10px;
  font-family: var(--wa-font);
}
.wa-intro::before {
  content: ''; position: absolute; top: 0; left: -6px;
  border-width: 0 6px 8px 0; border-style: solid;
  border-color: transparent var(--wa-bubble) transparent transparent;
}

/* rótulo só para leitor de tela — o campo se identifica pelo placeholder */
.wa-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- os três campos num único container, separados por fio ---- */
.wa-fields {
  border: 1px solid var(--wa-border); border-radius: 8px;
  background: #fff; overflow: hidden;
}
.wa-fg { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0 .7rem; }
.wa-fg + .wa-fg { border-top: 1px solid var(--wa-border); }
.wa-fields input {
  /* padding menor, mas min-height 44px MANTIDO: é o alvo de toque mínimo
     recomendado — encolher abaixo disso é o que torna um form difícil no dedo. */
  padding: .45rem 0; border: none; border-radius: 0;
  font-size: 16px; /* 16px trava o zoom automático do Safari no iOS */
  font-family: var(--wa-font);
  background: transparent; min-height: 44px; width: 100%;
  color: var(--wa-ink); transition: background .2s;
}
.wa-fields input::placeholder { color: var(--wa-ink-soft); opacity: 1; }
.wa-fields input:focus { outline: none; }
.wa-fg:focus-within { background: rgba(162, 86, 65, .06); }
/* sem borda própria: o campo inválido se marca pelo fundo e por um fio interno */
.wa-fields input.is-invalid { background: #fff5f4; box-shadow: inset 2px 0 0 #c0392b; padding-left: .5rem; }
.wa-flag { flex-shrink: 0; display: flex; align-items: center; }
.wa-flag svg { width: 22px; height: 16px; border-radius: 2px; display: block; }
/* o autopreenchimento do Chrome pintava o campo de azulado dentro da caixa branca */
.wa-fields input:-webkit-autofill,
.wa-fields input:-webkit-autofill:hover,
.wa-fields input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
          box-shadow: 0 0 0 1000px #fff inset;
}

/* ---- erro compacto, uma linha ---- */
.wa-err {
  margin: 0; color: #B00020;
  font-size: .72rem; font-weight: 700; line-height: 1.3;
  font-family: var(--wa-font); letter-spacing: normal;
}
.wa-err[hidden] { display: none; }

/* ---- opt-in obrigatório, marcado por padrão ---- */
.wa-optin {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
  background: rgba(var(--wa-green-rgb), .10);
  border: 1px solid rgba(var(--wa-green-rgb), .55); border-radius: 8px;
  padding: .6rem .7rem; cursor: pointer;
  font-size: .76rem; font-weight: 400; line-height: 1.4;
  letter-spacing: normal; color: var(--wa-ink);
  font-family: var(--wa-font);
  transition: background .2s, border-color .2s;
}
.wa-optin input {
  width: auto; min-height: 0; flex-shrink: 0; margin-top: .12rem; padding: 0;
  accent-color: var(--wa-green);
}
.wa-optin.is-invalid { background: #FDECEC; border-color: #D32F2F; }

/* ---- pílula verde centralizada ---- */
.wa-submit {
  /* Sem margem própria: o respiro entre o aceite e o botão agora é só o
     padding de .wa-actions, bem menor que o gap do form anterior. */
  margin: 0; align-self: center; width: auto;
  background: var(--wa-green); color: #fff;
  border: none; border-radius: 999px;
  /* padding vertical ~30% menor (.6rem → .42rem); min-height preserva o toque */
  padding: .42rem 1.5rem; min-height: 44px;
  font-weight: 700; font-size: .9rem; font-family: var(--wa-font);
  letter-spacing: normal;
  cursor: pointer; transition: background .2s, opacity .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.wa-submit svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.wa-submit:hover { background: var(--wa-green-hover); }
.wa-submit:disabled { opacity: .7; cursor: wait; }

.wa-foot {
  text-align: center; font-size: .7rem; color: var(--wa-ink-soft);
  margin: .4rem 0 0; padding: 0; line-height: 1.35;
  font-family: var(--wa-font); letter-spacing: normal;
}
.wa-foot a { color: var(--wa-ink-soft); text-decoration: underline; }

/* ---- MOBILE ----
   Largura da tela menos as margens e teto de 85dvh, como especificado. O dvh
   acompanha as barras do navegador que aparecem e somem; o svh/vh abaixo é o
   fallback para quem não suporta dvh. */
@media (max-width: 640px) {
  .wa-panel {
    /* Ancorado à direita, junto do botão. `left` fica AUTO de propósito: com
       left+right o card deixava de acompanhar a borda do botão.
       O 100% (viewport sem a barra de rolagem) no lugar de 100vw é o que
       impede o card de vazar pela direita. */
    left: auto; right: var(--wa-side);
    width: min(380px, calc(100% - 32px)); max-width: none;
  }
  .wa-box {
    /* dvh, não vh: acompanha a barra de endereço que aparece e some. O vh
       fixo media a tela SEM a barra e estourava a viewport real. */
    max-height: calc(85svh - var(--wa-bottom) - var(--wa-size));
    max-height: calc(85dvh - var(--wa-bottom) - var(--wa-size));
  }
}