/* Shared floating WhatsApp button + back-to-top button.
   Loaded globally in layouts/seo.blade.php so every page gets the same
   position/size regardless of whether its own page CSS defines one. */

.wa-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 800;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: all .25s;
  animation: wa-pulse 3s infinite;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }
  50% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,.1); }
}
.wa-fab:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.5); animation: none; }
.wa-fab svg { width: 28px; height: 28px; fill: #fff; }

#back-to-top {
  position: fixed; bottom: 96px; right: 28px; z-index: 800;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-dark, #0d5c3b); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.15)); opacity: 0; transform: translateY(10px);
  transition: all .3s; pointer-events: none;
}
#back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
#back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
  .wa-fab { width: 50px; height: 50px; bottom: 20px; right: 20px; }
  .wa-fab svg { width: 24px; height: 24px; }
  #back-to-top { width: 40px; height: 40px; bottom: 82px; right: 20px; }
}