/* Smart Floating Buttons - Styles (full) */

/* Container (both prefixes for compatibility) */
.ssfb-wrapper, .sfb-container {
  position: fixed; /* fallback: plugin also sets inline fallback style */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  pointer-events: none; /* allow clicks only on children */
}

/* Ensure children accept pointer events */
.ssfb-wrapper .ssfb-btn, .sfb-container .sfb-btn {
  pointer-events: auto;
}

/* Position classes */
.ssfb-position-bottom-right, .sfb-bottom-right { bottom: 20px; right: 20px; }
.ssfb-position-bottom-left,  .sfb-bottom-left  { bottom: 20px; left: 20px; }
.ssfb-position-top-right,   .sfb-top-right    { top: 20px; right: 20px; }
.ssfb-position-top-left,    .sfb-top-left     { top: 20px; left: 20px; }

/* Fixed bug: explicit center-left/right handling */
.ssfb-position-center-left, .sfb-center-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.ssfb-position-center-right, .sfb-center-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* Button base styles */
.ssfb-btn, .sfb-btn {
  width: 50px;
  height: 50px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* Hover */
.ssfb-btn:hover, .sfb-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* Sizes - supports inline style override but provide default */
.ssfb-single { /* custom main button */
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Social colors - fallbacks (will be overridden by inline styles if user set a color) */
.ssfb-facebook, .sfb-facebook { background: #1877F2; }
.ssfb-twitter, .sfb-twitter   { background: #1DA1F2; }
.ssfb-whatsapp, .sfb-whatsapp { background: #25D366; color: #fff; }
.ssfb-linkedin, .sfb-linkedin { background: #0A66C2; }
.ssfb-email, .sfb-email       { background: #DD4B39; }

/* Icon sizing */
.ssfb-wrapper .ssfb-icon, .sfb-icon {
  display: flex;
  justify-content: center;;
  align-item:center;
  color: inherit;
  font-size: var(--ssfb-icon-size, 20px);  /* for FA icons */
  width: var(--ssfb-icon-size, 20px);     /* for SVGs and <img> */
  height: var(--ssfb-icon-size, 20px);
  max-width: 100%;
  max-height: 100%;
}

/* Optional text label */
.ssfb-text {
  margin-left: 8px;
  font-size: 14px;
  color: inherit;
}

/* Animations - applied when wrapper receives class ssfb-animation-{name} */
.ssfb-animation-bounce .ssfb-btn { animation: ssfb-bounce 2200ms infinite ease-in-out; }
.ssfb-animation-pulse  .ssfb-btn { animation: ssfb-pulse 1800ms infinite ease-in-out; }
.ssfb-animation-zoom   .ssfb-btn { animation: ssfb-zoom 1800ms infinite ease-in-out; }

/* Individual keyframes */
@keyframes ssfb-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%                      { transform: translateY(-10px); }
  60%                      { transform: translateY(-6px); }
}

@keyframes ssfb-pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.08); opacity: .9; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ssfb-zoom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Small screens: reduce size */
@media (max-width: 480px) {
  .ssfb-btn, .sfb-btn { width: 44px; height: 44px; font-size: 16px; }
}

/* Visually hidden utility for accessibility */
.ssfb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}