/* Floating WhatsApp + Call Buttons
   Path: /assets/css/floating-buttons.css
   Used by: inc/components/floating-buttons.php
*/

:root{
  --fb-navy:      #0B1E3D;
  --fb-navy-dark: #071429;
  --fb-orange:    #FF7A29;
  --fb-orange-dk: #E85F0C;
  --fb-gold:      #D4AF37;
  --fb-whatsapp:  #25D366;
  --fb-white:     #FFFFFF;
}

.fb-wrap{
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.fb-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(11,30,61,0.35), 0 0 0 2px rgba(212,175,55,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
  border: none;
  cursor: pointer;
}
.fb-btn:hover{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 22px rgba(11,30,61,0.45), 0 0 0 3px var(--fb-gold);
}
.fb-btn svg{ width: 26px; height: 26px; }

.fb-btn.fb-whatsapp{ background: linear-gradient(145deg, var(--fb-whatsapp), #1DA851); }
.fb-btn.fb-call{ background: linear-gradient(145deg, var(--fb-navy), var(--fb-navy-dark)); }
.fb-btn.fb-call{ box-shadow: 0 6px 18px rgba(11,30,61,0.35), 0 0 0 2px rgba(255,122,41,0.45); }
.fb-btn.fb-call:hover{ box-shadow: 0 10px 22px rgba(11,30,61,0.45), 0 0 0 3px var(--fb-orange); }

/* gentle pulse ring on WhatsApp only, draws the eye without feeling gimmicky */
.fb-btn.fb-whatsapp::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid var(--fb-whatsapp);
  opacity:.55;
  animation: fb-pulse 2.4s ease-out infinite;
}
@keyframes fb-pulse{
  0%   { transform:scale(1);   opacity:.55; }
  70%  { transform:scale(1.35);opacity:0; }
  100% { transform:scale(1.35);opacity:0; }
}

/* tooltip label */
.fb-label{
  position:absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--fb-navy-dark);
  color: var(--fb-white);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.fb-label::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform: translateY(-50%);
  border-width:5px 0 5px 6px;
  border-style:solid;
  border-color: transparent transparent transparent var(--fb-navy-dark);
}
.fb-btn:hover .fb-label{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .fb-btn.fb-whatsapp::before{ animation:none; }
  .fb-btn{ transition:none; }
}

@media (max-width: 480px){
  .fb-wrap{ right:14px; bottom:16px; gap:12px; }
  .fb-btn{ width:52px; height:52px; }
  .fb-btn svg{ width:23px; height:23px; }
  .fb-label{ display:none; } /* labels crowd small screens; icons are enough on mobile */
}