/* ============================================================================
   FAB — floating contact button (bottom-right)
   ----------------------------------------------------------------------------
   Loaded by : every page
   Depends on: base/tokens.css
   Scripted by: js/ui.js (toggles .open on .fab-wrap)

   Collapsed it is a single navy circle. Opening it fans out WhatsApp / Email /
   Call pills; each pill reveals its label on hover by animating max-width from
   0, which avoids a layout jump. On small screens the labels are always shown
   because there is no hover.
   ============================================================================ */

.fab-wrap{
  position:fixed;bottom:28px;right:28px;z-index:998;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}

/* ── Main toggle ────────────────────────────────────────────────────────── */
.fab-main{
  width:58px;height:58px;border-radius:50%;
  background:var(--navy);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(30,58,122,0.35);
  transition:all 0.3s;
}
.fab-main:hover{
  background:var(--blue);transform:scale(1.08);
  box-shadow:0 6px 24px rgba(30,58,122,0.45);
}

/* Swap the chat icon for an X while open, and rotate the button. */
.fab-icon-close{display:none;}
.fab-wrap.open .fab-icon-open{display:none;}
.fab-wrap.open .fab-icon-close{display:block;}
.fab-wrap.open .fab-main{background:var(--text-mid);transform:rotate(90deg);}

/* ── Fan-out options ────────────────────────────────────────────────────── */
.fab-options{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;visibility:hidden;
  transform:translateY(20px) scale(0.8);
  transition:all 0.3s ease;
}
.fab-wrap.open .fab-options{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
}

.fab-btn{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;border-radius:50px;
  color:#fff;font-size:0.82rem;font-weight:600;
  font-family:'Inter',sans-serif;text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transition:all 0.25s;white-space:nowrap;
}
.fab-btn:hover{transform:translateX(-4px);box-shadow:0 6px 24px rgba(0,0,0,0.3);}

/* Label slides open on hover. */
.fab-btn span{max-width:0;overflow:hidden;opacity:0;transition:all 0.3s ease;}
.fab-btn:hover span{max-width:120px;opacity:1;margin-left:2px;}

/* Brand colours for each channel. */
.fab-wa{background:#25D366;}
.fab-wa:hover{background:#1ebe5d;}
.fab-email{background:#ea4335;}
.fab-email:hover{background:#d33426;}
.fab-call{background:#2563eb;}
.fab-call:hover{background:#1d4ed8;}

@media(max-width:640px){
  .fab-wrap{bottom:20px;right:20px;}
  .fab-main{width:52px;height:52px;}
  /* No hover on touch, so labels stay visible. */
  .fab-btn span{max-width:120px;opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .fab-main,.fab-btn,.fab-options{transition:none;}
}