/* ==========================================================================
   GB Persianas AI — Floating CTA CSS
   ========================================================================== */

:root {
  --gbpa-fab-size:    56px;
  --gbpa-fab-bottom:  24px;
  --gbpa-fab-right:   24px;
  --gbpa-fab-gap:     14px;
  --gbpa-wa-color:    #25d366;
  --gbpa-wa-dk:       #128c7e;
  --gbpa-phone-color: #1a56a0;
  --gbpa-phone-dk:    #0e3975;
}

/* ── Wrapper ───────────────────────────────────────────────────────────── */
.gbpa-floating-cta {
  position:   fixed;
  bottom:     var(--gbpa-fab-bottom);
  right:      var(--gbpa-fab-right);
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  align-items: flex-end;
  gap:        var(--gbpa-fab-gap);
}

/* ── FAB base ──────────────────────────────────────────────────────────── */
.gbpa-fab {
  position:        relative;
  width:           var(--gbpa-fab-size);
  height:          var(--gbpa-fab-size);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  text-decoration: none;
  box-shadow:      0 4px 16px rgba(0,0,0,.25);
  transition:      transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  outline:         none;
}
.gbpa-fab:hover,
.gbpa-fab:focus-visible {
  transform:  scale(1.08) translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.32);
}
.gbpa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── WhatsApp ──────────────────────────────────────────────────────────── */
.gbpa-fab--whatsapp {
  background: var(--gbpa-wa-color);
  width:  64px;
  height: 64px;
  order:  2; /* shown below phone */
}
.gbpa-fab--whatsapp:hover { background: var(--gbpa-wa-dk); }

/* ── Phone ─────────────────────────────────────────────────────────────── */
.gbpa-fab--phone {
  background: var(--gbpa-phone-color);
  order:  1;
}
.gbpa-fab--phone:hover { background: var(--gbpa-phone-dk); }

/* ── Tooltip ───────────────────────────────────────────────────────────── */
.gbpa-fab__tooltip {
  position:       absolute;
  right:          calc(100% + 12px);
  top:            50%;
  transform:      translateY(-50%);
  background:     rgba(0,0,0,.78);
  color:          #fff;
  font-size:      .8rem;
  font-weight:    600;
  white-space:    nowrap;
  padding:        .35rem .75rem;
  border-radius:  6px;
  pointer-events: none;
  opacity:        0;
  transition:     opacity .2s ease;
}
.gbpa-fab__tooltip::after {
  content:      '';
  position:     absolute;
  left:         100%;
  top:          50%;
  transform:    translateY(-50%);
  border:       6px solid transparent;
  border-left-color: rgba(0,0,0,.78);
}
.gbpa-fab:hover .gbpa-fab__tooltip,
.gbpa-fab:focus-visible .gbpa-fab__tooltip {
  opacity: 1;
}

/* ── Pulse animation (WhatsApp only) ───────────────────────────────────── */
.gbpa-fab__pulse {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  background:    var(--gbpa-wa-color);
  opacity:       0;
  animation:     gbpa-pulse 2.5s ease-out infinite;
}

@keyframes gbpa-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { transform: scale(1.6); opacity: 0;  }
}

/* ── Entrance animation ────────────────────────────────────────────────── */
.gbpa-floating-cta .gbpa-fab {
  animation: gbpa-fab-in .4s ease both;
}
.gbpa-fab--whatsapp { animation-delay: .1s; }
.gbpa-fab--phone    { animation-delay: .2s; }

@keyframes gbpa-fab-in {
  from { opacity: 0; transform: scale(.7) translateY(20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── Responsive: smaller on mobile ────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --gbpa-fab-size:   50px;
    --gbpa-fab-bottom: 16px;
    --gbpa-fab-right:  16px;
    --gbpa-fab-gap:    10px;
  }
  .gbpa-fab--whatsapp { width: 58px; height: 58px; }
  .gbpa-fab__tooltip  { display: none; } /* no tooltip on small screens */
}