/* Base positioning */
.wpsfb-container {
  position: fixed;
  z-index: 999999;
  display: flex;
  gap: var(--wpsfb-gap, 8px);
  font-size: var(--wpsfb-font, 14px);
  --wpsfb-text: #ffffff;
}
.wpsfb-container.right-bottom { right: 14px; bottom: 14px; }
.wpsfb-container.left-bottom  { left: 14px;  bottom: 14px; }
.wpsfb-container.right-top    { right: 14px; top: 14px; }
.wpsfb-container.left-top     { left: 14px;  top: 14px; }
.wpsfb-container.center       { left: 50%; top: 50%; transform: translate(-50%,-50%); }

/* Layouts */
.wpsfb-container.vertical .wpsfb-buttons { display: flex; flex-direction: column; gap: var(--wpsfb-gap, 8px); }
.wpsfb-container.horizontal .wpsfb-buttons { display: flex; flex-direction: row; gap: var(--wpsfb-gap, 8px); flex-wrap: wrap; }
.wpsfb-container.grid .wpsfb-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wpsfb-gap, 8px); }

/* Themes */
.wpsfb-container.theme-light .wpsfb-button {color: var(--wpsfb-text, #fff); }
.wpsfb-container.theme-dark .wpsfb-button { background: #111827; color: #f9fafb; }
.wpsfb-container.theme-glass .wpsfb-button { background: rgba(255,255,255,0.15); color:#fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); }
.wpsfb-container.theme-neon .wpsfb-button { background: #111; color:#fff; box-shadow: 0 0 12px rgba(0,238,255,0.7), inset 0 0 6px rgba(0,238,255,0.5); }

/* Shapes */
.wpsfb-container.shape-pill .wpsfb-button { border-radius: 9999px; }
.wpsfb-container.shape-rounded .wpsfb-button { border-radius: 16px; }
.wpsfb-container.shape-square .wpsfb-button { border-radius: 6px; }
.wpsfb-container.shape-icon-only .wpsfb-button { padding: 10px; }
.wpsfb-container.shape-icon-only .wpsfb-label { display:none; }

/* Button base */
.wpsfb-button {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  padding: 10px 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.wpsfb-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.wpsfb-button:active { transform: translateY(0) scale(.98); }

.wpsfb-icon {
  width: var(--wpsfb-icon, 28px);
  height: var(--wpsfb-icon, 28px);
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

/* FAB */
.wpsfb-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background-image: url("call.png");
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  margin-bottom: var(--wpsfb-gap,8px);
}
.wpsfb-fab span { font-size: 48px; line-height: 1; transform: translateY(-1px); }
.wpsfb-container.closed .wpsfb-buttons { display: none; }

/* Tooltips */
.wpsfb-buttons[data-tooltips="1"] .wpsfb-button { position: relative; }
.wpsfb-buttons[data-tooltips="1"] .wpsfb-button .wpsfb-label {
  position: relative;
}
.wpsfb-buttons[data-tooltips="1"] .wpsfb-button:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  top: -28px;
  font-size: 12px;
  background: rgba(0,0,0,.8);
  color:#fff;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(0);
}

/* Ripple effect */
.wpsfb-button { overflow: hidden; }
.wpsfb-button .wpsfb-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: wpsfb-ripple .6s linear;
  background: rgba(255,255,255,.35);
}
@keyframes wpsfb-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .wpsfb-button { padding: 10px 12px; }
  .wpsfb-label { font-size: 0.95em; }
}
