/* Picksoso Contact Button - Frontend Styles */
.pcs-cb-container {
  position: fixed;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcs-cb-container.pcs-left { left: 16px; }
.pcs-cb-container.pcs-right { right: 16px; }

.pcs-cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: 0.96;
  will-change: transform;
  position: relative; /* for side label positioning */
  overflow: visible; /* allow side label to be visible */
}

.pcs-cb-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.pcs-cb-btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,0.14); }

/* Icon & label layout */
.pcs-cb-btn .pcs-icon { display: inline-block; margin-right: 8px; width: var(--pcs-icon-size, 20px); height: var(--pcs-icon-size, 20px); }
.pcs-cb-btn .pcs-label { display: inline-block; line-height: 1; }
.pcs-cb-btn.pcs-shape-circle .pcs-icon { margin-right: 0; }

/* Button type helpers (optional if inline colors used) */
.pcs-cb-btn.pcs-whatsapp { /* default color handled inline */ }
.pcs-cb-btn.pcs-phone { /* default color handled inline */ }
.pcs-cb-btn.pcs-instagram { /* default color handled inline */ }

/* Animations */
.pcs-cb-btn.pcs-anim-pulse { animation: pcsPulse 1.8s ease-in-out infinite; animation-play-state: running; }
.pcs-cb-btn.pcs-anim-bounce { animation: pcsBounce 1.6s ease-in-out infinite; animation-play-state: running; }
.pcs-cb-btn.pcs-anim-wiggle { animation: pcsWiggle 1.2s ease-in-out infinite; animation-play-state: running; }

@keyframes pcsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pcsBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes pcsWiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(1.5deg); }
  50% { transform: rotate(0); }
  75% { transform: rotate(-1.5deg); }
  100% { transform: rotate(0); }
}

/* Side label bubble (visible when label exists and shape is circle) */
.pcs-side-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--pcs-bg, rgba(17,17,17,0.92));
  color: var(--pcs-text, #fff);
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
}

/* Appear from the opposite side depending on container position */
.pcs-cb-container.pcs-right .pcs-cb-btn .pcs-side-label { right: calc(100% + 10px); animation: pcsRevealLeft 0.8s ease-out 0.15s both; }
.pcs-cb-container.pcs-left .pcs-cb-btn .pcs-side-label { left: calc(100% + 10px); animation: pcsRevealRight 0.8s ease-out 0.15s both; }

@keyframes pcsRevealLeft {
  0% { opacity: 0; transform: translateX(16px) translateY(-50%); }
  100% { opacity: 1; transform: translateX(0) translateY(-50%); }
}
@keyframes pcsRevealRight {
  0% { opacity: 0; transform: translateX(-16px) translateY(-50%); }
  100% { opacity: 1; transform: translateX(0) translateY(-50%); }
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .pcs-cb-container { gap: 8px; }
  .pcs-cb-btn { padding: 8px 12px; }
}