/* Social Buttons Frontend Styles - COMPLETE WITH ALL EFFECTS - FIXED
Name : asset/style.css 
*/

:root{
  --fa-brands-stack: "Font Awesome 6 Brands","Font Awesome 7 Brands","Font Awesome 5 Brands","Font Awesome Brands","Font Awesome";
  --fa-free-stack:   "Font Awesome 6 Free","Font Awesome 7 Free","Font Awesome 5 Free","Font Awesome Free","Font Awesome";
}

.sb-floating-buttons {
    position: fixed;
    bottom: 85px;
    right: 15px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* ===== Dynamic Position from Settings ===== */

.sb-floating-buttons.sb-left { left: 15px; right: auto; }
.sb-floating-buttons.sb-right { right: 15px; left: auto; }
.sb-floating-buttons.sb-top { top: calc(85px + var(--sb-toggle-size, 50px) + 12px); bottom: auto; }
.sb-floating-buttons.sb-bottom { bottom: 85px; top: auto; }

/* ===== Adjust positions when Toggle is disabled ===== */
.sb-floating-buttons.sb-top.sb-no-toggle {
  top: 85px !important;
}
.sb-floating-buttons.sb-bottom.sb-no-toggle {
  bottom: 25px !important;
}

@media (max-width: 768px) {
  .sb-floating-buttons.sb-top.sb-no-toggle { top: 75px !important; }
  .sb-floating-buttons.sb-bottom.sb-no-toggle { bottom: 20px !important; }
}

@media (max-width: 480px) {
  .sb-floating-buttons.sb-top.sb-no-toggle { top: 65px !important; }
  .sb-floating-buttons.sb-bottom.sb-no-toggle { bottom: 15px !important; }
}

@media (max-width: 768px) {
  .sb-floating-buttons.sb-left { left: 10px; }
  .sb-floating-buttons.sb-right { right: 10px; }
  .sb-floating-buttons.sb-top { top: calc(75px + var(--sb-toggle-size, 50px) + 10px); }
  .sb-floating-buttons.sb-bottom { bottom: 75px; }
}

@media (max-width: 480px) {
  .sb-floating-buttons.sb-left { left: 8px; }
  .sb-floating-buttons.sb-right { right: 8px; }
  .sb-floating-buttons.sb-top { top: calc(65px + var(--sb-toggle-size, 50px) + 8px); }
  .sb-floating-buttons.sb-bottom { bottom: 65px; }
}

/* CRITICAL FIX: Collapsed state - ซ่อนปุ่มทั้งหมดยกเว้นปุ่มแรก */
.sb-floating-buttons.sb-collapsed .sb-button:not(:first-child) {
    display: none !important;
}

/* CRITICAL FIX: เมื่อ collapsed ให้ซ่อนปุ่ม + และแสดงเฉพาะเมื่อไม่มี toggle button */
.sb-floating-buttons.sb-collapsed .sb-button:first-child::after {
    display: none !important;
}

/* NEW: แสดงปุ่ม + เฉพาะเมื่อไม่มี toggle button และ collapsed */
.sb-floating-buttons.sb-collapsed:not(.has-toggle) .sb-button:first-child::after {
    content: '+';
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

/* CRITICAL FIX: Expanded state - แสดงปุ่มทั้งหมด */
.sb-floating-buttons.sb-expanded .sb-button {
    display: block !important;
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* ซ่อนปุ่ม + เมื่อขยายแล้ว */
.sb-floating-buttons.sb-expanded .sb-button:first-child::after {
    display: none !important;
}

/* CRITICAL FIX: เมื่อมี toggle button ให้ซ่อน container ทั้งหมดเมื่อ collapsed */
.sb-floating-buttons.sb-collapsed.has-toggle {
    display: none !important;
}

/* แสดง container เมื่อ expanded */
.sb-floating-buttons.sb-expanded.has-toggle {
    display: flex !important;
}

.sb-button {
    display: block;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    max-width: 280px;
    height: auto;
    line-height: 1;
    position: relative;
    z-index: 3;
    will-change: transform !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* OPTIMIZED HOVER EFFECTS */
.sb-button:hover {
    transform: translateX(-5px) scale(1.03) !important;
    filter: brightness(1.1) saturate(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 5;
}

.sb-button:active {
    transform: translateX(-2px) scale(0.98) !important;
    transition: transform 0.1s ease !important;
}

.sb-button img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    outline: none !important;
    mix-blend-mode: normal !important;
    isolation: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: filter 0.2s ease !important;
}

.sb-button:hover img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)) !important;
}

/* Force social button image width from Settings */
.sb-floating-buttons .sb-button img {
    width: var(--sb-btn-width, 280px) !important;
    height: auto !important;
}

/* Updated to support inline icon + text layout */
.sb-button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    background: transparent !important;
    border-radius: 24px;
    box-shadow: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    width: var(--sb-btn-width, 280px) !important;
}

.sb-button:hover span {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* FONT AWESOME ICONS - FIXED VERSION */
.sb-button span::before {
    display: inline-block !important;
    font-family: var(--fa-brands-stack), var(--fa-free-stack) !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    width: var(--sb-icon-size, 18px) !important;
    height: auto !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: var(--sb-icon-size, 18px) !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    color: inherit !important;
    background-image: none !important;
    background: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Brand buttons → Font Awesome Brands */
.sb-button.sb-button-line span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f3c0" !important;
}

.sb-button.sb-button-facebook span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f39e" !important;
}

.sb-button.sb-button-telegram span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f3fe" !important;
}

.sb-button.sb-button-whatsapp span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f232" !important;
}

.sb-button.sb-button-tiktok span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\e07b" !important;
}

.sb-button.sb-button-instagram span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f16d" !important;
}

.sb-button.sb-button-twitter span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\e61b" !important;
}

.sb-button.sb-button-snapchat span::before {
    font-family: var(--fa-brands-stack) !important;
    font-weight: 400 !important;
    content: "\f2ac" !important;
}

/* Non-brand buttons → Font Awesome Free (Solid) */
.sb-button.sb-button-phone span::before {
    font-family: var(--fa-free-stack) !important;
    font-weight: 900 !important;
    content: "\f095" !important;
}

.sb-button.sb-button-email span::before {
    font-family: var(--fa-free-stack) !important;
    font-weight: 900 !important;
    content: "\f0e0" !important;
}

.sb-button.sb-button-custom span::before {
    font-family: var(--fa-free-stack) !important;
    font-weight: 400 !important;
    content: "\f58a" !important;
}

/* แก้ไขปัญหาไอคอนถูก override */
.sb-anim-off .sb-button span::before {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
}


/* ENHANCED BRAND GLOW EFFECTS - OPTIMIZED */
.sb-button.sb-button-line:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 185, 0, 0.3)) !important;
}

.sb-button.sb-button-whatsapp:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(37, 211, 102, 0.3)) !important;
}

.sb-button.sb-button-facebook:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(24, 119, 242, 0.3)) !important;
}

.sb-button.sb-button-telegram:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(34, 158, 217, 0.3)) !important;
}

.sb-button.sb-button-instagram:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(225, 48, 108, 0.3)) !important;
}

.sb-button.sb-button-twitter:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(29, 161, 242, 0.3)) !important;
}

.sb-button.sb-button-tiktok:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 0, 80, 0.3)) !important;
}

.sb-button.sb-button-snapchat:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 252, 0, 0.4)) !important;
}

.sb-button.sb-button-phone:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 107, 53, 0.3)) !important;
}

.sb-button.sb-button-email:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(234, 67, 53, 0.3)) !important;
}

.sb-button.sb-button-custom:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(108, 117, 125, 0.3)) !important;
}

/* GENTLE BREATHING ANIMATION - FIRST BUTTON ONLY (SAFE) */
@keyframes gentle-breathe {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.95;
        transform: scale(1.02);
    }
}

/* Only apply breathing when NOT in transition states */
.sb-floating-buttons:not(.sb-expanding):not(.sb-collapsing):not(:hover) .sb-button:first-child:not(.sb-animating) {
    animation: gentle-breathe 4s ease-in-out infinite;
}

.sb-floating-buttons:hover .sb-button,
.sb-floating-buttons.sb-expanding .sb-button,
.sb-floating-buttons.sb-collapsing .sb-button {
    animation: none !important;
}

/* SAFER FADE-IN ANIMATION - NO CONFLICTS */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Only apply fade-in on initial expansion, not all the time */
.sb-floating-buttons.sb-just-expanded .sb-button {
    animation: fade-in-up 0.3s ease-out forwards !important;
}

.sb-floating-buttons.sb-just-expanded .sb-button:nth-child(1) { animation-delay: 0.05s !important; }
.sb-floating-buttons.sb-just-expanded .sb-button:nth-child(2) { animation-delay: 0.1s !important; }
.sb-floating-buttons.sb-just-expanded .sb-button:nth-child(3) { animation-delay: 0.15s !important; }
.sb-floating-buttons.sb-just-expanded .sb-button:nth-child(4) { animation-delay: 0.2s !important; }
.sb-floating-buttons.sb-just-expanded .sb-button:nth-child(5) { animation-delay: 0.25s !important; }

/* ANIMATION SYSTEM (SAFE VERSION) */
@keyframes sb-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.sb-anim-blink { animation: sb-blink 1.5s infinite ease-in-out; }

@keyframes sb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.sb-anim-pulse { animation: sb-pulse 1.3s ease-in-out infinite; }

@keyframes sb-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
.sb-anim-bounce { animation: sb-bounce 1.8s ease-in-out infinite; }

@keyframes sb-glow-aura {
  0%   { opacity: 0; transform: scale(0.95); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0.95); }
}

.sb-button.sb-anim-glow { position: relative; --sb-glow-color: currentColor; }
.sb-button.sb-anim-glow::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
  background: radial-gradient(ellipse at center, var(--sb-glow-color) 0%, rgba(255,255,255,0.65) 40%, rgba(255,255,255,0) 80%);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: sb-glow-aura 1.6s ease-in-out infinite;
}

/* Ensure glow doesn't interfere with content */
.sb-button.sb-anim-glow > img,
.sb-button.sb-anim-glow > span { 
    position: relative; 
    z-index: 1; 
}

/* Brand glow presets */
.sb-button.sb-anim-glow.sb-button-line      { --sb-glow-color: #00b900; }
.sb-button.sb-anim-glow.sb-button-whatsapp  { --sb-glow-color: #25d366; }
.sb-button.sb-anim-glow.sb-button-facebook  { --sb-glow-color: #1877f2; }
.sb-button.sb-anim-glow.sb-button-telegram  { --sb-glow-color: #229ED9; }
.sb-button.sb-anim-glow.sb-button-instagram { --sb-glow-color: #E1306C; }
.sb-button.sb-anim-glow.sb-button-twitter   { --sb-glow-color: #000000; }
.sb-button.sb-anim-glow.sb-button-tiktok    { --sb-glow-color: #29b6f6; }
.sb-button.sb-anim-glow.sb-button-snapchat  { --sb-glow-color: #FFFC00; }
.sb-button.sb-anim-glow.sb-button-email     { --sb-glow-color: #ff6b35; }
.sb-button.sb-anim-glow.sb-button-phone     { --sb-glow-color: #34a853; }
.sb-button.sb-anim-glow.sb-button-custom    { --sb-glow-color: #8e44ad; }

.sb-anim-on .sb-button.sb-anim-glow::before { animation: sb-glow-aura 1.6s ease-in-out infinite !important; }

@keyframes sb-wiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(2.5deg); }
  30% { transform: rotate(-2.5deg); }
  45% { transform: rotate(1.5deg); }
  60% { transform: rotate(-1.5deg); }
  75% { transform: rotate(.8deg); }
}
.sb-anim-wiggle { animation: sb-wiggle .9s ease-in-out infinite; transform-origin: 50% 90%; }

/* Ensure span-based buttons (e.g., LINE) also animate */
.sb-button.sb-anim-blink span { animation: sb-blink 1.5s infinite ease-in-out; }
.sb-button.sb-anim-pulse span { animation: sb-pulse 1.3s ease-in-out infinite; }
.sb-button.sb-anim-bounce span { animation: sb-bounce 1.8s ease-in-out infinite; }
.sb-button.sb-anim-wiggle span { animation: sb-wiggle .9s ease-in-out infinite; }

@keyframes sb-shine {
  0%   { left: -70%; }
  100% { left: 130%; }
}
.sb-button.sb-anim-shine { position: relative; overflow: hidden; }
.sb-button.sb-anim-shine > img,
.sb-button.sb-anim-shine > span { position: relative; z-index: 1; }
.sb-button.sb-anim-shine::after {
  content: "";
  position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: sb-shine 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes sb-neon-border {
  0% {
    box-shadow:
      0 0 5px var(--sb-neon, rgba(168,85,247,.40)),
      0 0 10px var(--sb-neon, rgba(168,85,247,.35)),
      0 0 15px var(--sb-neon, rgba(168,85,247,.25));
  }
  50% {
    box-shadow:
      0 0 8px var(--sb-neon, rgba(168,85,247,.60)),
      0 0 18px var(--sb-neon, rgba(168,85,247,.55)),
      0 0 28px var(--sb-neon, rgba(168,85,247,.45));
  }
  100% {
    box-shadow:
      0 0 5px var(--sb-neon, rgba(168,85,247,.40)),
      0 0 10px var(--sb-neon, rgba(168,85,247,.35)),
      0 0 15px var(--sb-neon, rgba(168,85,247,.25));
  }
}
.sb-button.sb-anim-neon-border span {
  --sb-neon: rgba(168,85,247,.95);
  border: 2px solid var(--sb-neon);
  border-radius: 24px;
  animation: sb-neon-border 1.8s ease-in-out infinite;
}

@keyframes sb-text-cycle {
  0%   { color: #ff4d4d; }
  25%  { color: #ffa64d; }
  50%  { color: #4dff4d; }
  75%  { color: #4da6ff; }
  100% { color: #ff4dff; }
}
.sb-button.sb-anim-text-cycle span {
  animation: sb-text-cycle 3s linear infinite;
}

/* Prevent hover conflicts with animations */
.sb-anim-pulse:hover,
.sb-anim-bounce:hover,
.sb-anim-wiggle:hover { 
    transform: translateX(-5px) scale(1.03) !important; 
}

/* Kill switch when animation is disabled */
.sb-anim-off .sb-button,
.sb-anim-off .sb-button img,
.sb-anim-off .sb-button span {
  animation: none !important;
  box-shadow: none !important;
}

/* PERFORMANCE OPTIMIZATIONS */
@media (prefers-reduced-motion: reduce) {
    .sb-floating-buttons .sb-button,
    .sb-toggle-button,
    .sb-attribution {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    
    .sb-button:hover {
        transform: translateX(-2px) !important;
    }
}

/* TOGGLE BUTTON STYLES */
.sb-toggle-button {
    position: fixed !important;
    bottom: 25px !important;
    right: 15px !important;
    z-index: 9998 !important;
    width: var(--sb-toggle-size, 50px) !important;
    height: var(--sb-toggle-size, 50px) !important;
    border-radius: 50% !important;
    background: linear-gradient(
      135deg,
      var(--sb-toggle-color, #667eea) 0%,
      color-mix(in srgb, var(--sb-toggle-color, #667eea) 80%, #000 20%) 100%
    ) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    pointer-events: auto !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Dynamic Position for Toggle Button */
.sb-toggle-button.sb-left { left: 15px !important; right: auto !important; }
.sb-toggle-button.sb-right { right: 15px !important; left: auto !important; }
.sb-toggle-button.sb-top { top: 85px !important; bottom: auto !important; }
.sb-toggle-button.sb-bottom { bottom: 25px !important; top: auto !important; }

@media (max-width: 768px) {
  .sb-toggle-button.sb-left { left: 10px !important; }
  .sb-toggle-button.sb-right { right: 10px !important; }
  .sb-toggle-button.sb-top { top: 75px !important; }
  .sb-toggle-button.sb-bottom { bottom: 20px !important; }
}

@media (max-width: 480px) {
  .sb-toggle-button.sb-left { left: 8px !important; }
  .sb-toggle-button.sb-right { right: 8px !important; }
  .sb-toggle-button.sb-top { top: 65px !important; }
  .sb-toggle-button.sb-bottom { bottom: 15px !important; }
}

.sb-toggle-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.sb-toggle-button.sb-active {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4) !important;
}

/* Toggle visual effects from Settings */
.sb-toggle-button.sb-toggle-effect-glow {
    box-shadow: 0 0 16px color-mix(in srgb, var(--sb-toggle-color, #667eea) 70%, #fff 30%) !important;
    filter: saturate(1.08) brightness(1.05);
}

@keyframes sb-toggle-pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.sb-toggle-button.sb-toggle-effect-pulse {
    animation: sb-toggle-pulse 1.6s ease-in-out infinite;
}

@keyframes sb-toggle-rainbow {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
}
.sb-toggle-button.sb-toggle-effect-rainbow {
    animation: sb-toggle-rainbow 4s linear infinite;
    box-shadow: 0 0 0 2px var(--sb-toggle-border-color, #a855f7) inset !important,
                0 6px 16px rgba(0,0,0,.25) !important;
}

.sb-toggle-button.sb-toggle-effect-neon {
    box-shadow:
        0 0 6px rgba(168, 85, 247, .65) !important,
        0 0 14px rgba(168, 85, 247, .55) !important,
        0 0 24px rgba(168, 85, 247, .45) !important;
}

.sb-toggle-button.sb-toggle-effect-shadow:hover {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

/* Toggle animation parity (apply same classes to toggle) */
.sb-toggle-button.sb-anim-blink { animation: sb-blink 1.5s infinite ease-in-out; }
.sb-toggle-button.sb-anim-pulse { animation: sb-pulse 1.3s ease-in-out infinite; }
.sb-toggle-button.sb-anim-bounce { animation: sb-bounce 1.8s ease-in-out infinite; }
.sb-toggle-button.sb-anim-wiggle { animation: sb-wiggle .9s ease-in-out infinite; transform-origin: 50% 50%; }

/* Toggle – Glow aura using pseudo-element (safe overlay) */
.sb-toggle-button.sb-anim-glow { position: fixed !important; }
.sb-toggle-button.sb-anim-glow::after {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,0) 80%);
  filter: blur(12px);
  pointer-events: none;
  animation: sb-glow-aura 1.6s ease-in-out infinite;
}

/* Toggle – Shine sweep */
.sb-toggle-button.sb-anim-shine { position: fixed !important; overflow: hidden !important; }
.sb-toggle-button.sb-anim-shine::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: sb-shine 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Toggle – Neon border pulse */
.sb-toggle-button.sb-anim-neon-border {
  box-shadow: 0 0 6px rgba(255,255,255,.50), 0 0 14px rgba(255,255,255,.55), 0 0 22px rgba(255,255,255,.35);
  animation: sb-neon-border 1.8s ease-in-out infinite;
}

/* Toggle – Text color cycle (icon/text color) */
.sb-toggle-button.sb-anim-text-cycle { animation: sb-text-cycle 3s linear infinite; }

/* CLOSE BUTTON STYLES */
.sb-close-btn {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: #f44336 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
    transition: all 0.3s ease !important;
}

.sb-close-btn:hover {
    background: #d32f2f !important;
    transform: scale(1.1) !important;
}

/* Specific button type styles when using spans (no image) */
.sb-button.sb-button-line span {
    background: linear-gradient(135deg, #00b900 0%, #00d400 100%) !important;
    transition: background 0.3s ease !important;
}

.sb-button.sb-button-line:hover span {
    background: linear-gradient(135deg, #00d400 0%, #00ff00 100%) !important;
}

.sb-button.sb-button-facebook span {
    background: linear-gradient(135deg, #0084ff 0%, #0066cc 100%) !important;
    transition: background 0.3s ease !important;
}

.sb-button.sb-button-facebook:hover span {
    background: linear-gradient(135deg, #0066cc 0%, #004499 100%) !important;
}

.sb-button.sb-button-telegram span {
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
    transition: background 0.3s ease !important;
}

.sb-button.sb-button-whatsapp span {
    background: linear-gradient(135deg, #25d366 0%, #1fb855 100%) !important;
    transition: background 0.3s ease !important;
}

.sb-button.sb-button-whatsapp:hover span {
    background: linear-gradient(135deg, #1fb855 0%, #17a847 100%) !important;
}

.sb-button.sb-button-phone span {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;
}

.sb-button.sb-button-email span {
    background: linear-gradient(135deg, #ea4335 0%, #d23430 100%) !important;
}

.sb-button.sb-button-custom span {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

/* New brand fallbacks */
.sb-button.sb-button-tiktok span {
    background: #000 !important;
    color: #fff !important;
}

.sb-button.sb-button-instagram span {
    background: linear-gradient(135deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4) !important;
    color: #fff !important;
}

.sb-button.sb-button-twitter span {
    background: #000 !important;
    color: #fff !important;
}

.sb-button.sb-button-snapchat span {
    background: #fffc00 !important;
    color: #000 !important;
}

/* ENHANCED ATTRIBUTION */
.sb-attribution {
    position: fixed !important;
    z-index: 9997 !important;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(0,0,0,0.45);
    pointer-events: none;
    user-select: none;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

.sb-attribution { right: 18px; bottom: 6px; }
.sb-attribution.sb-left   { left: 18px !important; right: auto !important; }
.sb-attribution.sb-right  { right: 18px !important; left: auto !important; }
.sb-attribution.sb-top    { top: 6px !important; bottom: auto !important; }
.sb-attribution.sb-bottom { bottom: 6px !important; top: auto !important; }

.sb-attribution:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.sb-attribution a { 
    color: inherit; 
    text-decoration: none; 
    opacity: 0.7; 
    pointer-events: auto;
}
.sb-attribution a:hover { 
    opacity: 1; 
    text-decoration: underline; 
}

/* QR TOOLTIP SYSTEM */
.sb-qr-tip {
  position: fixed;
  display: none;
  z-index: 10010;
  pointer-events: none;
}

.sb-qr-tip.is-visible { display: block; }

.sb-qr-card {
  position: fixed;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 10px;
  pointer-events: auto;
}

/* QR tooltip: branded header + icon */
.sb-qr-card { --sb-qr-brand:#f4f6f9; --sb-qr-text:#1f2937; }
.sb-qr-head{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; margin:-10px -10px 10px;
  background: var(--sb-qr-brand);
  color: var(--sb-qr-text);
  border-radius:10px 10px 0 0; border-bottom:1px solid rgba(0,0,0,.06);
  font-weight:600; font-size:13px;
}
.sb-qr-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background: rgba(255,255,255,.65);
}
.sb-qr-ico::before{
  font-size:13px; line-height:1; display:inline-block;
}

/* Brand color presets */
.sb-qr-tip.is-line       .sb-qr-card{ --sb-qr-brand:#dafbe0; --sb-qr-text:#064d1f; }
.sb-qr-tip.is-facebook   .sb-qr-card{ --sb-qr-brand:#e7f0ff; --sb-qr-text:#0a3a8b; }
.sb-qr-tip.is-telegram   .sb-qr-card{ --sb-qr-brand:#e5f6ff; --sb-qr-text:#0a4c6b; }
.sb-qr-tip.is-whatsapp   .sb-qr-card{ --sb-qr-brand:#e9fdf2; --sb-qr-text:#064e3b; }
.sb-qr-tip.is-phone      .sb-qr-card{ --sb-qr-brand:#fff2e6; --sb-qr-text:#7a2e0c; }
.sb-qr-tip.is-email      .sb-qr-card{ --sb-qr-brand:#ffe9e5; --sb-qr-text:#7a1d18; }
.sb-qr-tip.is-custom     .sb-qr-card{ --sb-qr-brand:#eef1f4; --sb-qr-text:#1f2937; }
.sb-qr-tip.is-tiktok     .sb-qr-card{ --sb-qr-brand:#1a1a1a; --sb-qr-text:#fafafa; }
.sb-qr-tip.is-instagram  .sb-qr-card{ --sb-qr-brand:#fde2ff; --sb-qr-text:#5b104d; }
.sb-qr-tip.is-twitter    .sb-qr-card{ --sb-qr-brand:#111;    --sb-qr-text:#fff; }
.sb-qr-tip.is-snapchat   .sb-qr-card{ --sb-qr-brand:#fffde1; --sb-qr-text:#111827; }

/* Header icons */
.sb-qr-tip.is-line      .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f3c0"; }
.sb-qr-tip.is-facebook  .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f39e"; }
.sb-qr-tip.is-telegram  .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f3fe"; }
.sb-qr-tip.is-whatsapp  .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f232"; }
.sb-qr-tip.is-tiktok    .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\e07b"; }
.sb-qr-tip.is-instagram .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f16d"; }
.sb-qr-tip.is-twitter   .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\e61b"; }
.sb-qr-tip.is-snapchat  .sb-qr-ico::before{ font-family:var(--fa-brands-stack); font-weight:400; content:"\f2ac"; }
.sb-qr-tip.is-phone     .sb-qr-ico::before{ font-family:var(--fa-free-stack);   font-weight:900; content:"\f095"; }
.sb-qr-tip.is-email     .sb-qr-ico::before{ font-family:var(--fa-free-stack);   font-weight:900; content:"\f0e0"; }
.sb-qr-tip.is-custom    .sb-qr-ico::before{ font-family:var(--fa-free-stack);   font-weight:400; content:"\f58a"; }

.sb-qr-tip.is-tiktok .sb-qr-card::before,
.sb-qr-tip.is-twitter .sb-qr-card::before{
  filter: drop-shadow(-1px 0 1px rgba(255,255,255,.12));
}

.sb-qr-card::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
  filter: drop-shadow(-1px 0 1px rgba(0,0,0,.08));
}

.sb-qr-tip.is-left .sb-qr-card::before {
  left: auto;
  right: -8px;
  border-color: transparent transparent transparent #ffffff;
  filter: drop-shadow(1px 0 1px rgba(0,0,0,.08));
}

.sb-qr-card img {
  display: block;
  width: 180px;
  height: 180px;
}

.sb-qr-card .sb-qr-text {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
  max-width: 240px;
  word-break: break-all;
}

@media (max-width: 480px) {
  .sb-qr-card { padding: 8px; border-radius: 10px; }
  .sb-qr-card img { width: 150px; height: 150px; }
  .sb-qr-card .sb-qr-text { max-width: 200px; font-size: 11px; }
}

/* SOCIAL BUTTON SHAPE SYSTEM (CIRCLE) */
.sb-floating-buttons.sb-shape-circle { gap: 12px; }

.sb-floating-buttons.sb-shape-circle .sb-button {
  width: var(--sb-circle-size, 56px) !important;
  height: var(--sb-circle-size, 56px) !important;
  max-width: none !important;
}

.sb-floating-buttons.sb-shape-circle .sb-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.sb-floating-buttons.sb-shape-circle .sb-button span {
  width: var(--sb-circle-size, 56px) !important;
  height: var(--sb-circle-size, 56px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}

.sb-floating-buttons.sb-shape-circle .sb-button span::before {
  line-height: 1 !important;
  margin: 0 !important;
  font-size: calc(var(--sb-circle-size, 56px) * 0.60) !important;
  width: 1em !important;
  height: 1em !important;
  display: block !important;
}

.sb-floating-buttons.sb-shape-circle .sb-button span:hover { 
    transform: none !important; 
}

.sb-floating-buttons.sb-shape-circle .sb-button:hover { 
    transform: scale(1.08) !important; 
}
.sb-floating-buttons.sb-shape-circle .sb-button:active { 
    transform: scale(0.96) !important; 
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .sb-floating-buttons {
        right: 10px;
        bottom: 75px;
    }
    
    .sb-button {
        max-width: 260px;
    }
    
    .sb-button:hover {
        transform: translateX(-3px) scale(1.02) !important;
    }
    
    .sb-toggle-button {
        bottom: 20px !important;
        right: 10px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
    
    .sb-toggle-button:hover {
        transform: scale(1.05) !important;
    }
    
    .sb-floating-buttons .sb-button {
        animation: none !important;
    }
    
    .sb-attribution.sb-left { left: 10px !important; }
    .sb-attribution.sb-right { right: 10px !important; }
    .sb-attribution.sb-top { top: 10px !important; }
    .sb-attribution.sb-bottom { bottom: 10px !important; }
}

@media (max-width: 480px) {
    .sb-floating-buttons {
        right: 8px;
        bottom: 65px;
    }
    
    .sb-button {
        max-width: 250px;
    }
    
    .sb-button:hover {
        transform: translateX(-2px) !important;
    }
    
    .sb-toggle-button {
        bottom: 15px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .sb-toggle-button:hover {
        transform: none !important;
    }
    
    .sb-attribution.sb-left { left: 8px !important; }
    .sb-attribution.sb-right { right: 8px !important; }
    .sb-attribution.sb-top { top: 15px !important; }
    .sb-attribution.sb-bottom { bottom: 15px !important; }
}

/* LINK STYLING REMOVAL */
.sb-button:link,
.sb-button:visited,
.sb-button:hover,
.sb-button:active,
.sb-button:focus {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    color: inherit !important;
}

.sb-button {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* PRINT STYLES */
@media print {
    .sb-floating-buttons,
    .sb-toggle-button,
    .sb-attribution {
        display: none !important;
    }
}

/* ACCESSIBILITY FOCUS STYLES */
.sb-button:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2) !important;
}

.sb-toggle-button:focus {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.2) !important;
}

/* THEME COMPATIBILITY */
.sb-floating-buttons,
.sb-floating-buttons *,
.sb-toggle-button {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* FINAL OVERRIDES */
.sb-floating-buttons.sb-no-toggle.sb-bottom { bottom: 25px !important; }
.sb-floating-buttons.sb-no-toggle.sb-top { top: 85px !important; }

@media (max-width: 768px) {
  .sb-floating-buttons.sb-no-toggle.sb-bottom { bottom: 20px !important; }
  .sb-floating-buttons.sb-no-toggle.sb-top { top: 75px !important; }
}

@media (max-width: 480px) {
  .sb-floating-buttons.sb-no-toggle.sb-bottom { bottom: 15px !important; }
  .sb-floating-buttons.sb-no-toggle.sb-top { top: 65px !important; }
}
/* === Anti-white-box overrides (safe, minimal) ===
   Some themes add background/shadow to anchors or our animation layers.
   These rules ensure the floating buttons never render an unwanted white box. */

/* Neutralize any default background/shadow on the button wrapper */
.sb-floating-buttons .sb-button,
.sb-floating-buttons a.sb-button {
  background: transparent !important;
  box-shadow: none !important;
}

/* Kill animation overlay layers that could appear as pale/white patches */
.sb-floating-buttons .sb-button.sb-anim-glow::before,
.sb-floating-buttons .sb-button.sb-anim-shine::after {
  content: none !important;
  display: none !important;
}

/* Ensure pseudo-elements on generic buttons don't introduce backgrounds */
.sb-floating-buttons .sb-button::before,
.sb-floating-buttons .sb-button::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep the actual span backgrounds (brand colors) intact while removing box effects */
.sb-floating-buttons .sb-button span {
  box-shadow: none !important;
}