/* ===================== FLOATING WHATSAPP + CALL ===================== */
.floating-actions{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap: 14px;
}

.fab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  height: 56px;
  border-radius:50%;
  color:#fff;
  box-shadow: var(--shadow-lg);
  opacity:0;
  transform: translateY(18px) scale(.7);
  animation: fabIn .6s var(--ease) forwards;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fab:hover{ transform: translateY(-4px) scale(1.06); }
.fab:active{ transform: translateY(-1px) scale(.98); }
.fab svg{ position:relative; z-index:2; }

@keyframes fabIn{ to{ opacity:1; transform:none; } }

/* pulsing ring - a live span so it layers cleanly under the icon */
.fab-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 2px solid currentColor;
  animation: fabPulse 2.4s var(--ease) infinite;
  z-index:1;
}
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.55); opacity:0; }
}

.fab-call{
  width: 52px; height:52px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #ffffff;
  animation-delay: .1s;
}
.fab-call:hover{ box-shadow: 0 18px 38px rgba(169,120,31,0.4); }

.fab-whatsapp{
  width: 62px; height: 62px;
  background: linear-gradient(135deg, #34D399, #16A34A);
  color: #34D399;
  animation-delay: .3s;
}
.fab-whatsapp:hover{ box-shadow: 0 18px 38px rgba(22,163,74,0.42); }

/* gentle idle bounce on the primary WhatsApp icon so it stays noticeable without being frantic */
.fab-whatsapp svg{
  animation: fabBounce 3.4s ease-in-out infinite;
  animation-delay: 1.4s;
  color: #ffffff;
}
@keyframes fabBounce{
  0%, 78%, 100%{ transform: translateY(0); }
  84%{ transform: translateY(-4px); }
  90%{ transform: translateY(0); }
  94%{ transform: translateY(-2px); }
}

/* tooltip label sliding in from the right on hover */
.fab-label{
  position:absolute;
  right: calc(100% + 14px);
  top:50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--ink);
  color: var(--ivory);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: .8rem;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: var(--shadow-md);
  z-index:3;
}
.fab:hover .fab-label{ opacity:1; transform: translateY(-50%) translateX(0); }

/* back-to-top sits at the top of the same stack, only visible once scrolled */
.floating-actions .to-top{
  position: static;
  opacity:0;
  transform: translateY(10px) scale(.85);
  pointer-events:none;
  width: 44px; height:44px;
  box-shadow: var(--shadow-md);
}
.floating-actions .to-top.show{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

@media (max-width: 640px){
  .floating-actions{ right:16px; bottom:16px; gap:12px; }
  .fab-call{ width:48px; height:48px; }
  .fab-whatsapp{ width:56px; height:56px; }
  .fab-label{ display:none; }
  .floating-actions .to-top{ width:40px; height:40px; }
}