/* ============================================================
   NUTRICOR — buttons.css
   Botões de ação, CTAs e botão flutuante de WhatsApp (SVG local).
   ============================================================ */

.btn-fill, .btn-outline, .btn-wa-card, .btn-wa-big, .btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1rem;
  border-radius: 50px; cursor: pointer; border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}

/* preenchido (primário) */
.btn-fill {
  background: var(--primary); color: var(--white);
  padding: 15px 30px; box-shadow: 0 12px 26px -12px rgba(31,164,99,.75);
}
.btn-fill:hover { background: var(--primary-deep); transform: translateY(-3px); }

/* contorno (secundário) */
.btn-outline {
  background: transparent; color: var(--secondary);
  border-color: var(--line); padding: 13px 28px;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary-deep); background: var(--primary-pale); }

/* WhatsApp em card de produto/serviço */
.btn-wa-card {
  background: var(--primary-pale); color: var(--primary-deep);
  padding: 12px 20px; font-size: .94rem; width: 100%;
}
.btn-wa-card:hover { background: var(--primary); color: var(--white); }
.btn-wa-card img { width: 20px; height: 20px; }

/* WhatsApp grande (seção CTA) */
.btn-wa-big {
  background: #25D366; color: var(--white);
  padding: 17px 36px; font-size: 1.08rem; font-weight: 500;
  box-shadow: 0 14px 34px -14px rgba(37,211,102,.8);
}
.btn-wa-big:hover { background: #1eb558; transform: translateY(-3px); }
.btn-wa-big img { width: 24px; height: 24px; }

/* botão de envio de formulário */
.btn-submit {
  background: var(--primary); color: var(--white);
  padding: 16px 34px; width: 100%; font-size: 1.05rem;
}
.btn-submit:hover { background: var(--primary-deep); }

/* ---------- Botão flutuante de WhatsApp ---------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 62px; height: 62px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.65);
  animation: wa-pulse 2.4s infinite;
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float img { width: 34px; height: 34px; }

/* etiqueta que aparece ao lado no desktop */
.wa-float::after {
  content: 'Agendar pelo WhatsApp';
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%);
  background: var(--secondary); color: var(--white);
  padding: 9px 15px; border-radius: 30px; font-size: .82rem; font-weight: 500;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .25s ease; box-shadow: var(--shadow-soft);
}
.wa-float:hover::after { opacity: 1; }

@keyframes wa-pulse {
  0%   { box-shadow: 0 14px 30px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 14px 30px -8px rgba(37,211,102,.65), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width: 600px) {
  .wa-float { width: 56px; height: 56px; bottom: 18px; right: 18px; }
  .wa-float img { width: 30px; height: 30px; }
  .wa-float::after { display: none; }
}