/*
 * Smart Floating Social Bar — Frontend CSS
 * Self-contained, fully prefixed, theme-independent.
 * All selectors use .sfsb-* prefix to prevent theme conflicts.
 */

/* ============================================================
   CSS Custom Property Fallbacks
   (Real values are injected inline by PHP)
   ============================================================ */
:root {
  --sfsb-size: 50px;
  --sfsb-gap: 10px;
  --sfsb-radius: 50%;
  --sfsb-zindex: 9999;
  --sfsb-offset-x: 20px;
  --sfsb-offset-y: 0px;
  --sfsb-mobile-bottom: 20px;
  --sfsb-tooltip-bg: #1a1a2e;
  --sfsb-tooltip-color: #ffffff;
  --sfsb-expand-bg: #007AFF;
  --sfsb-expand-icon-color: #ffffff;
  --sfsb-btn-bg: #333333;
  --sfsb-btn-icon: #ffffff;
  --sfsb-btn-hover: #111111;
  --sfsb-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  --sfsb-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.28);
  --sfsb-transition: 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  --sfsb-transition-fast: 0.15s ease;
}

/* ============================================================
   Wrapper — Fixed Positioning
   ============================================================ */
.sfsb-wrapper {
  position: fixed !important;
  z-index: var(--sfsb-zindex) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--sfsb-gap) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  /* Reset any theme interference */
  font-family: inherit;
  box-sizing: border-box;
}

.sfsb-wrapper * {
  box-sizing: border-box !important;
}

/* All interactive children re-enable pointer events */
.sfsb-wrapper .sfsb-btn,
.sfsb-wrapper .sfsb-expand-toggle {
  pointer-events: auto !important;
}

/* ============================================================
   Desktop Positions
   ============================================================ */
.sfsb-pos-d--right-center {
  right: var(--sfsb-offset-x) !important;
  top: 50% !important;
  transform: translateY(calc(-50% + var(--sfsb-offset-y))) !important;
  left: auto !important;
  bottom: auto !important;
}

.sfsb-pos-d--right-top {
  right: var(--sfsb-offset-x) !important;
  top: calc(80px + var(--sfsb-offset-y)) !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
}

.sfsb-pos-d--right-bottom {
  right: var(--sfsb-offset-x) !important;
  bottom: calc(var(--sfsb-mobile-bottom) + var(--sfsb-offset-y)) !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.sfsb-pos-d--left-center {
  left: var(--sfsb-offset-x) !important;
  top: 50% !important;
  transform: translateY(calc(-50% + var(--sfsb-offset-y))) !important;
  right: auto !important;
  bottom: auto !important;
}

.sfsb-pos-d--left-top {
  left: var(--sfsb-offset-x) !important;
  top: calc(80px + var(--sfsb-offset-y)) !important;
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
}

.sfsb-pos-d--left-bottom {
  left: var(--sfsb-offset-x) !important;
  bottom: calc(var(--sfsb-mobile-bottom) + var(--sfsb-offset-y)) !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

/* ============================================================
   Mobile Positions
   ============================================================ */
@media (max-width: 768px) {
  .sfsb-pos-m--right-center {
    right: var(--sfsb-offset-x) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    bottom: auto !important;
  }

  .sfsb-pos-m--left-center {
    left: var(--sfsb-offset-x) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: auto !important;
    bottom: auto !important;
  }

  .sfsb-pos-m--bottom-center {
    bottom: var(--sfsb-mobile-bottom) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    flex-direction: row !important;
  }

  .sfsb-pos-m--bottom-left {
    bottom: var(--sfsb-mobile-bottom) !important;
    left: var(--sfsb-offset-x) !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    flex-direction: row !important;
  }

  .sfsb-pos-m--bottom-right {
    bottom: var(--sfsb-mobile-bottom) !important;
    right: var(--sfsb-offset-x) !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    flex-direction: row !important;
  }
}

/* ============================================================
   Buttons Container
   ============================================================ */
.sfsb-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--sfsb-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 768px) {
  .sfsb-pos-m--bottom-center .sfsb-buttons,
  .sfsb-pos-m--bottom-left .sfsb-buttons,
  .sfsb-pos-m--bottom-right .sfsb-buttons {
    flex-direction: row !important;
  }
}

/* ============================================================
   Base Button
   ============================================================ */
.sfsb-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sfsb-size) !important;
  height: var(--sfsb-size) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: var(--sfsb-radius) !important;
  background-color: var(--sfsb-btn-bg) !important;
  color: var(--sfsb-btn-icon) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: var(--sfsb-shadow) !important;
  transition: background-color var(--sfsb-transition-fast), box-shadow var(--sfsb-transition-fast), transform var(--sfsb-transition), color var(--sfsb-transition-fast) !important;
  outline: none !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  /* Prevent theme link styles */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.sfsb-btn:hover,
.sfsb-btn:focus-visible {
  background-color: var(--sfsb-btn-hover) !important;
  box-shadow: var(--sfsb-shadow-hover) !important;
  text-decoration: none !important;
  color: var(--sfsb-btn-icon) !important;
}

.sfsb-btn:focus-visible {
  outline: 3px solid var(--sfsb-btn-bg) !important;
  outline-offset: 3px !important;
}

/* Icon */
.sfsb-btn__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 55% !important;
  height: 55% !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

.sfsb-btn__icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}

/* Hidden label (screen-reader accessible) */
.sfsb-btn__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   Style Variants
   ============================================================ */

/* Circle (default) */
.sfsb-style--circle .sfsb-btn {
  border-radius: 50% !important;
}

/* Rounded Square */
.sfsb-style--rounded-square .sfsb-btn {
  border-radius: 14px !important;
}

/* Pill */
.sfsb-style--pill .sfsb-btn {
  border-radius: 40px !important;
  width: auto !important;
  padding: 0 16px !important;
  gap: 8px !important;
  font-size: 13px !important;
}
.sfsb-style--pill .sfsb-btn__icon {
  width: 20px !important;
  height: 20px !important;
}
.sfsb-style--pill .sfsb-btn__label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: none !important;
  white-space: nowrap !important;
  color: var(--sfsb-btn-icon) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

/* Minimal */
.sfsb-style--minimal .sfsb-btn {
  border-radius: 8px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 2px solid var(--sfsb-btn-bg) !important;
  color: var(--sfsb-btn-bg) !important;
}
.sfsb-style--minimal .sfsb-btn:hover {
  background-color: var(--sfsb-btn-bg) !important;
  color: var(--sfsb-btn-icon) !important;
  box-shadow: var(--sfsb-shadow) !important;
}

/* Glass */
.sfsb-style--glass .sfsb-btn {
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  color: var(--sfsb-btn-bg) !important;
}
.sfsb-style--glass .sfsb-btn:hover {
  background-color: rgba(255, 255, 255, 0.32) !important;
  color: var(--sfsb-btn-hover) !important;
}

/* Modern Stack */
.sfsb-style--modern-stack .sfsb-wrapper {
  gap: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
}
.sfsb-style--modern-stack .sfsb-buttons {
  gap: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.sfsb-style--modern-stack .sfsb-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: var(--sfsb-size) !important;
}
.sfsb-style--modern-stack .sfsb-btn:last-child {
  border-bottom: none !important;
}
.sfsb-style--modern-stack .sfsb-btn:hover {
  box-shadow: none !important;
}

/* ============================================================
   Hover Animations
   ============================================================ */

/* Scale */
.sfsb-anim--scale .sfsb-btn:hover {
  transform: scale(1.12) !important;
}

/* Slide (from right for right-side bar, from left for left-side bar) */
.sfsb-pos-d--right-center.sfsb-anim--slide .sfsb-btn,
.sfsb-pos-d--right-top.sfsb-anim--slide .sfsb-btn,
.sfsb-pos-d--right-bottom.sfsb-anim--slide .sfsb-btn {
  transform: translateX(0) !important;
  transition: transform 0.2s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
.sfsb-pos-d--right-center.sfsb-anim--slide .sfsb-btn:hover,
.sfsb-pos-d--right-top.sfsb-anim--slide .sfsb-btn:hover,
.sfsb-pos-d--right-bottom.sfsb-anim--slide .sfsb-btn:hover {
  transform: translateX(-6px) !important;
}
.sfsb-pos-d--left-center.sfsb-anim--slide .sfsb-btn:hover,
.sfsb-pos-d--left-top.sfsb-anim--slide .sfsb-btn:hover,
.sfsb-pos-d--left-bottom.sfsb-anim--slide .sfsb-btn:hover {
  transform: translateX(6px) !important;
}

/* Bounce */
@keyframes sfsb-bounce-kf {
  0%, 100% { transform: translateY(0); }
  30%       { transform: translateY(-6px); }
  60%       { transform: translateY(-2px); }
}
.sfsb-anim--bounce .sfsb-btn:hover {
  animation: sfsb-bounce-kf 0.5s ease !important;
  transform: none !important;
}

/* Pulse */
@keyframes sfsb-pulse-kf {
  0%   { box-shadow: 0 0 0 0 rgba(var(--sfsb-btn-rgb, 0,0,0), 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--sfsb-btn-rgb, 0,0,0), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--sfsb-btn-rgb, 0,0,0), 0); }
}
.sfsb-anim--pulse .sfsb-btn:hover {
  animation: sfsb-pulse-kf 0.7s ease !important;
}

/* Rotate */
.sfsb-anim--rotate .sfsb-btn:hover .sfsb-btn__icon {
  transform: rotate(15deg) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.sfsb-anim--rotate .sfsb-btn .sfsb-btn__icon {
  transition: transform 0.2s ease !important;
}

/* ============================================================
   Tooltip
   ============================================================ */
.sfsb-tooltip {
  position: absolute !important;
  background-color: var(--sfsb-tooltip-bg) !important;
  color: var(--sfsb-tooltip-color) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important;
  z-index: 1 !important;
  max-width: 200px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

/* Arrow */
.sfsb-tooltip::after {
  content: '' !important;
  position: absolute !important;
  border: 5px solid transparent !important;
}

/* Auto tooltip — left of right-side buttons */
.sfsb-pos-d--right-center .sfsb-tooltip,
.sfsb-pos-d--right-top .sfsb-tooltip,
.sfsb-pos-d--right-bottom .sfsb-tooltip {
  right: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(6px) !important;
  left: auto !important;
}
.sfsb-pos-d--right-center .sfsb-tooltip::after,
.sfsb-pos-d--right-top .sfsb-tooltip::after,
.sfsb-pos-d--right-bottom .sfsb-tooltip::after {
  left: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-left-color: var(--sfsb-tooltip-bg) !important;
}

/* Left-side buttons — tooltip on right */
.sfsb-pos-d--left-center .sfsb-tooltip,
.sfsb-pos-d--left-top .sfsb-tooltip,
.sfsb-pos-d--left-bottom .sfsb-tooltip {
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(-6px) !important;
  right: auto !important;
}
.sfsb-pos-d--left-center .sfsb-tooltip::after,
.sfsb-pos-d--left-top .sfsb-tooltip::after,
.sfsb-pos-d--left-bottom .sfsb-tooltip::after {
  right: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-right-color: var(--sfsb-tooltip-bg) !important;
}

/* Tooltip show on hover */
.sfsb-btn:hover .sfsb-tooltip,
.sfsb-btn:focus-visible .sfsb-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s !important;
}
.sfsb-pos-d--right-center .sfsb-btn:hover .sfsb-tooltip,
.sfsb-pos-d--right-top .sfsb-btn:hover .sfsb-tooltip,
.sfsb-pos-d--right-bottom .sfsb-btn:hover .sfsb-tooltip {
  transform: translateY(-50%) translateX(0) !important;
}
.sfsb-pos-d--left-center .sfsb-btn:hover .sfsb-tooltip,
.sfsb-pos-d--left-top .sfsb-btn:hover .sfsb-tooltip,
.sfsb-pos-d--left-bottom .sfsb-btn:hover .sfsb-tooltip {
  transform: translateY(-50%) translateX(0) !important;
}

/* Disable tooltips on mobile */
@media (max-width: 768px) {
  .sfsb-tooltip {
    display: none !important;
  }
}

/* ============================================================
   Expandable Mode
   ============================================================ */
.sfsb-expand-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sfsb-size) !important;
  height: var(--sfsb-size) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background-color: var(--sfsb-expand-bg) !important;
  color: var(--sfsb-expand-icon-color) !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: var(--sfsb-shadow) !important;
  transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  outline: none !important;
  padding: 0 !important;
}

.sfsb-expand-toggle:hover {
  box-shadow: var(--sfsb-shadow-hover) !important;
  transform: scale(1.08) !important;
}

.sfsb-expand-toggle:focus-visible {
  outline: 3px solid var(--sfsb-expand-bg) !important;
  outline-offset: 3px !important;
}

.sfsb-expand-icon,
.sfsb-expand-close-icon {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 55% !important;
  height: 55% !important;
  transition: opacity 0.2s ease, transform 0.25s ease !important;
}
.sfsb-expand-icon svg,
.sfsb-expand-close-icon svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
}

.sfsb-expand-close-icon {
  opacity: 0 !important;
  transform: rotate(-90deg) !important;
}

/* Expanded state */
.sfsb-expandable.sfsb-expanded .sfsb-expand-icon {
  opacity: 0 !important;
  transform: rotate(90deg) !important;
}
.sfsb-expandable.sfsb-expanded .sfsb-expand-close-icon {
  opacity: 1 !important;
  transform: rotate(0deg) !important;
}

/* Hidden buttons container in expandable mode */
.sfsb-expandable .sfsb-buttons {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
  pointer-events: none !important;
}

.sfsb-expandable.sfsb-expanded .sfsb-buttons {
  max-height: 600px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Button entry animation in expandable mode */
.sfsb-expandable .sfsb-btn {
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, box-shadow 0.15s ease !important;
}
.sfsb-expandable.sfsb-expanded .sfsb-btn {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Staggered button reveal */
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(1) { transition-delay: 0.02s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(2) { transition-delay: 0.06s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(3) { transition-delay: 0.10s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(4) { transition-delay: 0.14s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(5) { transition-delay: 0.18s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(6) { transition-delay: 0.22s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(7) { transition-delay: 0.26s !important; }
.sfsb-expandable.sfsb-expanded .sfsb-btn:nth-child(8) { transition-delay: 0.30s !important; }

/* ============================================================
   Display Mode: Stick to Side Wall (.sfsb-mode--sticky-wall)
   Buttons dock flush against the browser wall with tab styling
   and sleek slide-out micro-interactions.
   ============================================================ */

/* Pinned flush against the wall — overrides offset-x */
.sfsb-mode--sticky-wall.sfsb-pos-d--right-center,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-top,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-bottom {
  right: 0 !important;
  left: auto !important;
  align-items: flex-end !important;
}

.sfsb-mode--sticky-wall.sfsb-pos-d--left-center,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-top,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-bottom {
  left: 0 !important;
  right: auto !important;
  align-items: flex-start !important;
}

/* Base button tab transitions for sticky wall */
.sfsb-mode--sticky-wall .sfsb-btn {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              box-shadow 0.2s ease,
              padding 0.2s ease !important;
}

/* Right-sided sticky wall tabs: flat on right wall, rounded on left */
.sfsb-mode--sticky-wall.sfsb-pos-d--right-center .sfsb-btn,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-top .sfsb-btn,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-bottom .sfsb-btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.16) !important;
}

/* Hover slide-out effect for right-sided wall tabs */
.sfsb-mode--sticky-wall.sfsb-pos-d--right-center .sfsb-btn:hover,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-top .sfsb-btn:hover,
.sfsb-mode--sticky-wall.sfsb-pos-d--right-bottom .sfsb-btn:hover {
  transform: translateX(-8px) !important;
  box-shadow: -6px 4px 18px rgba(0, 0, 0, 0.24) !important;
}

/* Left-sided sticky wall tabs: flat on left wall, rounded on right */
.sfsb-mode--sticky-wall.sfsb-pos-d--left-center .sfsb-btn,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-top .sfsb-btn,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-bottom .sfsb-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.16) !important;
}

/* Hover slide-out effect for left-sided wall tabs */
.sfsb-mode--sticky-wall.sfsb-pos-d--left-center .sfsb-btn:hover,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-top .sfsb-btn:hover,
.sfsb-mode--sticky-wall.sfsb-pos-d--left-bottom .sfsb-btn:hover {
  transform: translateX(8px) !important;
  box-shadow: 6px 4px 18px rgba(0, 0, 0, 0.24) !important;
}

/* Tab label display (when Show Button Labels is enabled) */
.sfsb-mode--sticky-wall.sfsb-sw-label .sfsb-btn {
  width: auto !important;
  padding: 0 16px !important;
  gap: 8px !important;
}

.sfsb-mode--sticky-wall.sfsb-sw-label .sfsb-btn__label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sfsb-btn-icon) !important;
}

/* Mobile wall adherence */
@media (max-width: 768px) {
  .sfsb-mode--sticky-wall.sfsb-pos-m--right-center {
    right: 0 !important;
    left: auto !important;
  }
  .sfsb-mode--sticky-wall.sfsb-pos-m--left-center {
    left: 0 !important;
    right: auto !important;
  }
  .sfsb-mode--sticky-wall.sfsb-pos-m--bottom-center,
  .sfsb-mode--sticky-wall.sfsb-pos-m--bottom-left,
  .sfsb-mode--sticky-wall.sfsb-pos-m--bottom-right {
    bottom: 0 !important;
  }
}

/* Sticky Wall RTL */
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--right-center,
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--right-top,
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--right-bottom {
  right: auto !important;
  left: 0 !important;
  align-items: flex-start !important;
}
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--left-center,
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--left-top,
[dir="rtl"] .sfsb-mode--sticky-wall.sfsb-pos-d--left-bottom {
  left: auto !important;
  right: 0 !important;
  align-items: flex-end !important;
}

/* ============================================================
   Shortcode variant — inline, not fixed
   ============================================================ */
.sfsb-wrapper.sfsb-shortcode {
  position: static !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  transform: none !important;
  display: inline-flex !important;
}
.sfsb-wrapper.sfsb-shortcode .sfsb-buttons {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* ============================================================
   RTL Support
   ============================================================ */
[dir="rtl"] .sfsb-pos-d--right-center,
[dir="rtl"] .sfsb-pos-d--right-top,
[dir="rtl"] .sfsb-pos-d--right-bottom {
  right: auto !important;
  left: var(--sfsb-offset-x) !important;
}

[dir="rtl"] .sfsb-pos-d--left-center,
[dir="rtl"] .sfsb-pos-d--left-top,
[dir="rtl"] .sfsb-pos-d--left-bottom {
  left: auto !important;
  right: var(--sfsb-offset-x) !important;
}

[dir="rtl"] .sfsb-pos-d--right-center .sfsb-tooltip,
[dir="rtl"] .sfsb-pos-d--right-top .sfsb-tooltip,
[dir="rtl"] .sfsb-pos-d--right-bottom .sfsb-tooltip {
  right: auto !important;
  left: calc(100% + 10px) !important;
  transform: translateY(-50%) translateX(-6px) !important;
}
[dir="rtl"] .sfsb-pos-d--right-center .sfsb-btn:hover .sfsb-tooltip,
[dir="rtl"] .sfsb-pos-d--right-top .sfsb-btn:hover .sfsb-tooltip,
[dir="rtl"] .sfsb-pos-d--right-bottom .sfsb-btn:hover .sfsb-tooltip {
  transform: translateY(-50%) translateX(0) !important;
}
[dir="rtl"] .sfsb-pos-d--right-center .sfsb-tooltip::after,
[dir="rtl"] .sfsb-pos-d--right-top .sfsb-tooltip::after,
[dir="rtl"] .sfsb-pos-d--right-bottom .sfsb-tooltip::after {
  left: auto !important;
  right: 100% !important;
  border-left-color: transparent !important;
  border-right-color: var(--sfsb-tooltip-bg) !important;
}

/* ============================================================
   Mobile Responsive
   ============================================================ */
@media (max-width: 768px) {
  .sfsb-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Slightly smaller on tablet */
  @media (min-width: 481px) {
    .sfsb-btn {
      width: calc(var(--sfsb-size) * 0.9) !important;
      height: calc(var(--sfsb-size) * 0.9) !important;
    }
  }

  /* Compact on small phones */
  @media (max-width: 480px) {
    .sfsb-btn {
      width: calc(var(--sfsb-size) * 0.82) !important;
      height: calc(var(--sfsb-size) * 0.82) !important;
    }
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sfsb-btn,
  .sfsb-expand-toggle,
  .sfsb-buttons,
  .sfsb-tooltip {
    transition: none !important;
    animation: none !important;
  }
}