/* Floating Bottom Bar — WhatsApp / Call Now / Book Now
   Path: /assets/css/floating-buttons.css
   Used by: inc/components/floating-buttons.php
   v2 — fixed: dark-theme contrast, mobile tap-target spacing, icon size
*/

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

.fb-bar{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 14px;                 /* real gap between buttons -> no accidental taps */
  background: transparent;    /* no merged bar, so it never "blends" with page bg */
  padding: 0;
}

/* the old divider is no longer needed since buttons are separated by gap now */
.fb-divider{
  display: none;
}

.fb-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;

  /* strong outer ring + shadow so every button pops off a dark page bg */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.12),
    0 8px 20px rgba(0,0,0,0.45);
}

.fb-item svg{ width: 22px; height: 22px; flex-shrink: 0; }

.fb-item:hover{
  transform: translateY(-2px);
}

/* ---------- WhatsApp: solid green pill, white icon+text = max contrast ---------- */
.fb-whatsapp{
  background: linear-gradient(135deg, var(--fb-whatsapp), var(--fb-whatsapp-dk));
  color: var(--fb-white);
}
.fb-whatsapp svg path:first-child{ fill: var(--fb-whatsapp-dk); }
.fb-whatsapp svg path:nth-child(2){ fill: var(--fb-white); }
.fb-whatsapp svg path:nth-child(3){ fill: var(--fb-whatsapp-dk); }
.fb-whatsapp:hover{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 8px 22px rgba(37,211,102,0.45);
}

/* ---------- Call Now: navy pill with gold ring + gold icon/text ---------- */
.fb-call{
  background: linear-gradient(180deg, #12294f, var(--fb-navy-dark));
  color: var(--fb-gold);
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.55),
    0 8px 20px rgba(0,0,0,0.45);
}
.fb-call svg{ color: var(--fb-gold); }
.fb-call:hover{
  color: var(--fb-white);
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.85),
    0 8px 22px rgba(212,175,55,0.3);
}
.fb-call:hover svg{ color: var(--fb-white); }

/* ---------- Book Now: primary CTA, filled orange ---------- */
.fb-book{
  background: linear-gradient(135deg, var(--fb-orange), var(--fb-orange-dk));
  color: var(--fb-white);
}
.fb-book svg{ color: var(--fb-white); }
.fb-book:hover{
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 10px 24px rgba(255,122,41,0.5);
}

/* =========================================================
   MOBILE — round icon-only buttons, generous real spacing
   ========================================================= */
@media (max-width: 480px){
  .fb-bar{
    bottom: 16px;
    gap: 16px;                 /* wider real gap so thumb can't hit neighbour */
  }

  .fb-item{
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
  }

  .fb-item svg{ width: 26px; height: 26px; }

  .fb-item span{
    display: none;              /* icons only on mobile */
  }
}

/* extra-small phones: keep buttons comfortably tappable, shrink gap slightly */
@media (max-width: 340px){
  .fb-bar{ gap: 12px; }
  .fb-item{ width: 52px; height: 52px; }
  .fb-item svg{ width: 24px; height: 24px; }
}