/* ==========================================================================
   LAVRE — botão do WhatsApp e a janela de nome e telefone (ver whats.js)
   1. Botões   2. Janela   3. Celular
   ========================================================================== */

/* 1. Botões ------------------------------------------------------------------ */
.wa-logo { display: block; flex: none; width: var(--i, 28px); height: var(--i, 28px); fill: currentColor; }

/* Computador: redondo, flutuando no canto de baixo */
.wa-float { --i: 30px; position: fixed; right: 20px; bottom: 20px; z-index: 25; width: 58px; height: 58px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; box-shadow: 0 8px 20px rgba(18,140,70,0.32), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .2s, filter .2s; }
.wa-float:hover { transform: scale(1.06); filter: brightness(1.05); }

/* Na última tela o rodapé cede espaço, para o "© LAVRE" não ficar embaixo do botão */
@media (min-width: 900px) {
  .footer { padding-right: 68px; }
}

/* Celular: dentro da barra do topo, ao lado do "Pedir coleta" */
.wa-top { --i: 21px; display: none; flex: none; width: 41px; height: 41px; padding: 0; border: none; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; background: #25D366; color: #fff; box-shadow: 0 4px 10px rgba(18,140,70,0.26), inset 0 1px 0 rgba(255,255,255,0.3); -webkit-tap-highlight-color: transparent; }

/* 2. Janela -------------------------------------------------------------------- */
.wa-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wa-modal__backdrop { position: absolute; inset: 0; background: rgba(14,30,70,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.wa-card { position: relative; width: 100%; max-width: 400px; padding: 26px 24px 20px; border-radius: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(14,30,70,0.28); }
.wa-card__close { --i: 18px; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #EEF1F6; color: var(--muted); }
.wa-card__close .icon { stroke-width: 2.2; }
.wa-card__head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.wa-card__logo { --i: 26px; flex: none; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; box-shadow: 0 4px 10px rgba(18,140,70,0.22); }
.wa-card__head strong { display: block; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.wa-card__head div span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }

.wa-field { display: flex; flex-direction: column; gap: 6px; }
.wa-field > span { font-size: 14px; font-weight: 700; color: var(--ink); }
/* 16px no campo: abaixo disso o iPhone dá zoom ao tocar */
.wa-field input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--field-border); border-radius: 16px; outline: none; background: #fff; font-family: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.wa-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.wa-field input::placeholder { color: #9AA3B6; }
.wa-field small { min-height: 0; font-size: 13px; font-weight: 600; color: var(--red); }
.wa-field small:empty { display: none; }
.wa-field.is-wrong input { border-color: var(--red); }
.wa-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wa-send { --i: 22px; margin-top: 4px; width: 100%; min-height: 56px; padding: 0 20px; border: none; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: #fff; font-family: inherit; font-size: 17px; font-weight: 700; box-shadow: 0 6px 14px rgba(18,140,70,0.24), inset 0 1px 0 rgba(255,255,255,0.3); }
.wa-send:hover { filter: brightness(1.05); }
.wa-card__note { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }

/* 3. Celular ------------------------------------------------------------------------ */
@media (max-width: 899.98px) {
  .wa-float { display: none; }
  .wa-top { display: flex; }
  /* A janela fica no alto da tela, para o teclado não cobrir os campos */
  .wa-modal { align-items: flex-start; padding: 76px 14px 14px; }
  .wa-card { padding: 22px 18px 16px; border-radius: 24px; gap: 12px; }
}
/* Telas estreitas: o logo e o botão "Pedir coleta" encolhem um pouco para o WhatsApp caber na barra */
@media (max-width: 374.98px) {
  .topbar__logo img { height: 20px; }
}
@media (max-width: 359.98px) {
  .topbar__logo img { height: 18px; }
  .topbar__cta { padding: 12px 14px; }
  .topbar__cta .icon { display: none; }
}