/* ============================================================
   WA Chat Button — Stylesheet v1.0.0
   ============================================================ */

/* ── CSS Variables ── */
.wacb-btn {
  --wacb-color:     #25D366;
  --wacb-hover:     #1ebe5d;
  --wacb-text:      #ffffff;
  --wacb-radius:    50px;
  --wacb-pad-v:     10px;
  --wacb-pad-h:     20px;
  --wacb-shadow:    0 4px 15px rgba(37, 211, 102, .35);
  --wacb-shadow-hv: 0 6px 22px rgba(37, 211, 102, .55);
  --wacb-duration:  .22s;
}

/* ── Base ── */
.wacb-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  font-family:     inherit;
  font-size:       15px;
  font-weight:     600;
  line-height:     1;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      background var(--wacb-duration) ease,
                   box-shadow  var(--wacb-duration) ease,
                   transform   var(--wacb-duration) ease,
                   color       var(--wacb-duration) ease,
                   border-color var(--wacb-duration) ease;
  user-select:     none;
}

.wacb-btn svg {
  flex-shrink: 0;
  transition: transform var(--wacb-duration) ease;
}

.wacb-btn:hover svg {
  transform: scale(1.1);
}

/* ── Style: Pill (default) ── */
.wacb-style-pill {
  background:    var(--wacb-color);
  color:         var(--wacb-text);
  padding:       var(--wacb-pad-v) var(--wacb-pad-h);
  border-radius: var(--wacb-radius);
  border:        2px solid transparent;
  box-shadow:    var(--wacb-shadow);
}
.wacb-style-pill:hover {
  background: var(--wacb-hover);
  box-shadow: var(--wacb-shadow-hv);
  transform:  translateY(-1px);
  color:      var(--wacb-text);
}

/* ── Style: Classic ── */
.wacb-style-classic {
  background:    var(--wacb-color);
  color:         var(--wacb-text);
  padding:       var(--wacb-pad-v) var(--wacb-pad-h);
  border-radius: 6px;
  border:        none;
  box-shadow:    0 2px 6px rgba(0,0,0,.2);
}
.wacb-style-classic:hover {
  background: var(--wacb-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transform:  translateY(-1px);
  color:      var(--wacb-text);
}

/* ── Style: Outlined ── */
.wacb-style-outlined {
  background:    transparent;
  color:         var(--wacb-color);
  padding:       calc(var(--wacb-pad-v) - 2px) var(--wacb-pad-h);
  border-radius: var(--wacb-radius);
  border:        2px solid var(--wacb-color);
}
.wacb-style-outlined:hover {
  background: var(--wacb-color);
  color:      var(--wacb-text);
  transform:  translateY(-1px);
  box-shadow: var(--wacb-shadow);
}

/* ── Style: Icon Only ── */
.wacb-style-icon {
  background:    var(--wacb-color);
  color:         var(--wacb-text);
  width:         52px;
  height:        52px;
  border-radius: 50%;
  border:        none;
  box-shadow:    var(--wacb-shadow);
  justify-content: center;
}
.wacb-style-icon svg {
  width:  26px;
  height: 26px;
}
.wacb-style-icon:hover {
  background: var(--wacb-hover);
  box-shadow: var(--wacb-shadow-hv);
  transform:  scale(1.08) translateY(-1px);
  color:      var(--wacb-text);
}

/* ── Pulse animation on icon (adds life) ── */
@keyframes wacb-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, .6); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0);  }
}
.wacb-style-icon {
  animation: wacb-pulse 2.2s infinite;
}

/* ── Floating Button ── */
.wacb-float {
  position: fixed;
  z-index:  9999;
}
.wacb-float-bottom-right { bottom: 24px; right: 24px; }
.wacb-float-bottom-left  { bottom: 24px; left:  24px; }
.wacb-float-top-right    { top:    24px; right: 24px; }
.wacb-float-top-left     { top:    24px; left:  24px; }

/* ── Tooltip ── */
.wacb-tooltip {
  position:      absolute;
  bottom:        calc(100% + 10px);
  right:         0;
  background:    #1a1a1a;
  color:         #fff;
  font-size:     13px;
  font-weight:   500;
  white-space:   nowrap;
  padding:       6px 12px;
  border-radius: 6px;
  pointer-events: none;
  opacity:       0;
  transform:     translateY(6px);
  transition:    opacity .2s ease, transform .2s ease;
}
.wacb-tooltip::after {
  content:      '';
  position:     absolute;
  top:          100%;
  right:        16px;
  border:       5px solid transparent;
  border-top-color: #1a1a1a;
}
.wacb-float:hover .wacb-tooltip {
  opacity:   1;
  transform: translateY(0);
}

/* ── Elementor wrapper ── */
.wacb-wrap {
  display: block;
  width:   100%;
}

/* ── Slide-in for floating button ── */
@keyframes wacb-slidein {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}
.wacb-float .wacb-btn {
  animation: wacb-slidein .4s cubic-bezier(.34,1.56,.64,1) forwards;
}