/* WhatsApp: floating chat button, contact-list icon and the quote form's WhatsApp button. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 0; height: 56px; padding: 0 16px; border-radius: 999px;
  background: var(--wa); color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(18,140,75,.35), 0 2px 6px rgba(0,0,0,.15);
  transition: gap .3s, padding .3s, transform .2s, box-shadow .2s, opacity .3s;
}
.wa-float svg { width: 26px; height: 26px; flex: none; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; }
.wa-float:hover, .wa-float:focus-visible { gap: 10px; padding: 0 20px 0 16px; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18,140,75,.45), 0 2px 6px rgba(0,0,0,.15); }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 180px; }
.wa-float::before {                       /* gentle attention ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--wa);
  animation: waPing 2.6s ease-out infinite; pointer-events: none;
}
@keyframes waPing { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.wa-float.is-tucked { opacity: 0; transform: translateY(12px); pointer-events: none; }

.wa-bubble { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wa-phone { fill: currentColor; }

/* contact list icon */
.contact-list svg.wa-ic { background: rgba(37,211,102,.14); }
.contact-list svg.wa-ic .wa-bubble { stroke: var(--wa-deep); }
.contact-list svg.wa-ic .wa-phone { fill: var(--wa-deep); stroke: none; }


.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.form-actions .btn { height: 50px; padding-top: 0; padding-bottom: 0; }
.btn-wa svg { width: 20px; height: 20px; flex: none; }
.btn-wa:hover { background: var(--wa-deep); border-color: var(--wa-deep); box-shadow: 0 8px 20px rgba(18,140,75,.3); }
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; height: 52px; padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; display: none; } }