/* ============================================================
   Custom Chat Button — chatbutton.css
   PrestaShop 1.7 Compatible
   ============================================================ */

:root {
  --chatbtn-color:  #25D366;
  --chatbtn-size:   60px;
  --chatbtn-bottom: 28px;
  --chatbtn-side:   28px;
  --chatbtn-shadow: 0 4px 20px rgba(0, 0, 0, .28);
  --chatbtn-zindex: 9999;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.chatbtn-fab {
  position:   fixed;
  bottom:     var(--chatbtn-bottom);
  right:      var(--chatbtn-side);
  z-index:    var(--chatbtn-zindex);
  display:    flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse; /* tooltip left of button */
}

.chatbtn-fab.chatbtn-left {
  right:          unset;
  left:           var(--chatbtn-side);
  flex-direction: row; /* tooltip right of button */
}

/* ── Anchor / Button ─────────────────────────────────────── */
.chatbtn-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--chatbtn-size);
  height:          var(--chatbtn-size);
  border-radius:   50%;
  background:      var(--chatbtn-color);
  box-shadow:      var(--chatbtn-shadow);
  text-decoration: none;
  flex-shrink:     0;
  transition:      transform .25s cubic-bezier(.34, 1.56, .64, 1),
                   box-shadow .25s ease;
  outline: none;
}

.chatbtn-link:hover,
.chatbtn-link:focus {
  transform:  scale(1.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .32);
}

.chatbtn-link:active {
  transform: scale(.96);
}

/* ── Icon ────────────────────────────────────────────────── */
.chatbtn-icon {
  width:  52%;
  height: 52%;
  display: block;
  flex-shrink: 0;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.chatbtn-tooltip {
  display:          inline-block;
  background:       #1a1a1a;
  color:            #fff;
  font-size:        13px;
  font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  white-space:      nowrap;
  padding:          6px 12px;
  border-radius:    6px;
  box-shadow:       0 2px 12px rgba(0,0,0,.2);
  opacity:          0;
  pointer-events:   none;
  transform:        translateX(8px);
  transition:       opacity .2s ease, transform .2s ease;
}

/* Tooltip arrow — right side */
.chatbtn-fab:not(.chatbtn-left) .chatbtn-tooltip::after {
  content:  '';
  position: absolute;
  right:    -6px;
  top:      50%;
  transform: translateY(-50%);
  border:   6px solid transparent;
  border-right: none;
  border-left-color: #1a1a1a;
}

.chatbtn-tooltip {
  position: relative;
}

/* Tooltip arrow — left side */
.chatbtn-fab.chatbtn-left .chatbtn-tooltip {
  transform: translateX(-8px);
}

.chatbtn-fab.chatbtn-left .chatbtn-tooltip::after {
  content:  '';
  position: absolute;
  left:     -6px;
  top:      50%;
  transform: translateY(-50%);
  border:   6px solid transparent;
  border-left: none;
  border-right-color: #1a1a1a;
}

/* Show tooltip on hover */
.chatbtn-fab:hover .chatbtn-tooltip {
  opacity:   1;
  transform: translateX(0);
}

/* ── Pulse animation ─────────────────────────────────────── */
@keyframes chatbtn-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(var(--chatbtn-rgb, 37,211,102), .45); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--chatbtn-rgb, 37,211,102), 0);  }
  100% { box-shadow: 0 0 0 0   rgba(var(--chatbtn-rgb, 37,211,102), 0);  }
}

.chatbtn-pulse .chatbtn-link {
  animation: chatbtn-ripple 1.8s ease-out infinite;
}

.chatbtn-pulse .chatbtn-link:hover {
  animation: none;
}

/* ── Hide on mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .chatbtn-hide-mobile {
    display: none !important;
  }
}

/* ── Entrance animation ──────────────────────────────────── */
@keyframes chatbtn-enter {
  from {
    opacity:   0;
    transform: scale(.6) translateY(20px);
  }
  to {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
}

.chatbtn-fab {
  animation: chatbtn-enter .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}