/*
  Motion Fit — redes sociais do rodapé e botão flutuante de WhatsApp.

  Folha separada porque os dois componentes aparecem em todas as páginas,
  inclusive na home, que não carrega o site-php.css (tem CSS inline próprio).
*/

/* ---------- Redes sociais (rodapé) ---------- */
.socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.socials .social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  /* O !important é para vencer `.footer a{color:...!important}` do
     final-polish.css — sem ele o ícone some no hover (verde sobre verde). */
  color: #fff !important;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}

.socials .social-link:hover,
.socials .social-link:focus-visible {
  background: #98c01f;
  border-color: #98c01f;
  color: #131312 !important;
  transform: translateY(-2px);
}

.socials .social-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---------- Botão "Usar minha localização" ---------- */
/* Criado pelo cep-calculator.js nas três páginas com busca (home, unidades
   e mapa). Fica aqui porque esta folha é a única carregada em todas elas. */
.geo-locate-btn {
  min-height: 34px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgba(19, 19, 18, .16);
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.geo-locate-btn:hover,
.geo-locate-btn:focus-visible {
  background: rgba(152, 192, 31, .14);
  border-color: #98c01f;
}

/* ---------- Botão flutuante de WhatsApp ---------- */
/* O "voltar ao topo" fica em bottom:88px, logo acima deste. */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 65px;
  height: 65px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  z-index: 9999;
  cursor: pointer;
  transition: transform .2s ease;
  /* !important porque `.footer a` e afins definem cor com !important. */
  color: #fff !important;
  text-decoration: none;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.06);
}

.whatsapp-float svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

/*
  O "voltar ao topo" (uiux.css) fica no mesmo canto: sobe para 100px para não
  encostar no botão de 65px.

  O `right` é calculado, não chutado: os dois botões têm larguras diferentes
  (44px e 65px), então alinhar pela borda direita deixaria os centros
  deslocados. A conta centraliza o menor sobre o eixo do maior.
*/
.uiux-back-top {
  bottom: 100px;
  right: calc(20px + (65px - 44px) / 2); /* = 30.5px */
}

@media (max-width: 640px) {
  .uiux-back-top {
    bottom: 94px;
    right: calc(20px + (65px - 44px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .socials .social-link {
    transition: none;
  }

  .whatsapp-float:hover,
  .socials .social-link:hover {
    transform: none;
  }
}

/* ---------- Botões flutuantes acima da faixa da campanha ---------- */
/*
  Quando a faixa sobe (home), os dois botões sobem junto para não ficarem por
  cima dela. A altura real da faixa é publicada pelo JS em --mf-strip-h, em
  vez de assumida: a arte é trocável no admin e pode ter outra proporção.

  A transição em "bottom" acompanha a da faixa, para subirem juntos.
*/
.whatsapp-float,
.uiux-back-top {
  transition: bottom .85s cubic-bezier(.22, .61, .36, 1),
              transform .2s ease, background .18s ease, box-shadow .18s ease;
}

body.has-campaign-strip .whatsapp-float {
  bottom: calc(20px + var(--mf-strip-h, 0px));
}

body.has-campaign-strip .uiux-back-top {
  bottom: calc(100px + var(--mf-strip-h, 0px));
}

@media (max-width: 640px) {
  body.has-campaign-strip .uiux-back-top {
    bottom: calc(94px + var(--mf-strip-h, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .uiux-back-top {
    transition: none;
  }
}