/* Social Buttons Frontend Styles - COLLAPSE SYSTEM FIXED 
Name : asset/style.css 
*/

.sb-floating-buttons {
    position: fixed;
    bottom: 85px; /* เปลี่ยนจาก 25px เป็น 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; /* เปลี่ยนจาก transform เป็น display: none */
}

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

/* 🔧 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: all 0.3s ease;
    max-width: 280px;
    height: auto;
    line-height: 1;
    position: relative;
    z-index: 3;
}

.sb-button:hover {
    transform: translateX(-5px) scale(1.05);
    box-shadow: none !important;
    text-decoration: none !important;
}

.sb-button:active {
    transform: translateX(-3px) scale(0.98);
}

.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;
}

/* 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;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px !important;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    background: transparent !important;
    border-radius: 8px;
    box-shadow: none !important;
    transition: all 0.3s ease;
    width: var(--sb-btn-width, 280px) !important;
}

/* Generic icon before text (fallback size via CSS var) */
.sb-button span::before {
    content: "";
    display: inline-block;
    width: var(--sb-icon-size, 18px);
    height: var(--sb-icon-size, 18px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: 0 0 var(--sb-icon-size, 18px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* 🔧 FIXED: Toggle button styles - z-index ต่ำกว่าปุ่มโซเชียล */
.sb-toggle-button {
    position: fixed !important;
    bottom: 25px !important;
    right: 15px !important;
    z-index: 9998 !important; /* ลดลงจาก 10000 เป็น 9998 */
    width: var(--sb-toggle-size, 50px) !important;
    height: var(--sb-toggle-size, 50px) !important;
    border-radius: 50% !important;
    background: var(--sb-toggle-color, linear-gradient(135deg, #667eea 0%, #764ba2 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 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

/* ===== Dynamic Position for Toggle Button (matches Settings) ===== */
.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 20px rgba(0, 0, 0, 0.4) !important;
}

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

/* 🔧 FIXED: 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;
}

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

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

.sb-button.sb-button-whatsapp span {
    background: linear-gradient(135deg, #25d366 0%, #1fb855 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 (when no image is provided) */
.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;
}

/* X (Twitter) */
.sb-button.sb-button-twitter span {
    background: #000 !important;
    color: #fff !important;
}

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

/* ===== Brand icons (expects files at asset/icons/*.svg) ===== */
.sb-button.sb-button-line span::before { background-image: url('icons/line.svg'); }
.sb-button.sb-button-facebook span::before { background-image: url('icons/messenger.svg'); }
.sb-button.sb-button-telegram span::before { background-image: url('icons/telegram.svg'); }
.sb-button.sb-button-whatsapp span::before { background-image: url('icons/whatsapp.svg'); }
.sb-button.sb-button-phone span::before { background-image: url('icons/phone.svg'); }
.sb-button.sb-button-email span::before { background-image: url('icons/email.svg'); }
.sb-button.sb-button-custom span::before { background-image: url('icons/link.svg'); }

/* New platforms */
.sb-button.sb-button-tiktok span::before { background-image: url('icons/tiktok.svg'); }
.sb-button.sb-button-instagram span::before { background-image: url('icons/instagram.svg'); }
.sb-button.sb-button-twitter span::before { background-image: url('icons/x.svg'); }
.sb-button.sb-button-snapchat span::before { background-image: url('icons/snapchat.svg'); }

/* Attribution label */
.sb-attribution {
    position: fixed;
    right: 18px;
    bottom: 6px;
    z-index: 9998;
    font-size: 11px;
    line-height: 1.2;
    color: rgba(0,0,0,0.45);
    pointer-events: none;
    user-select: none;
}

.sb-attribution a {
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
}

.sb-attribution a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sb-floating-buttons {
        right: 10px;
        bottom: 75px; /* เปลี่ยนจาก 20px เป็น 75px */
    }
    
    .sb-button {
        max-width: 260px;
    }
    
    .sb-toggle-button {
        bottom: 20px !important;
        right: 10px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .sb-floating-buttons {
        right: 8px;
        bottom: 65px; /* เปลี่ยนจาก 15px เป็น 65px */
    }
    
    .sb-button {
        max-width: 250px;
    }
    
    .sb-toggle-button {
        bottom: 15px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Remove link styling */
.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;
}

/* Force clickable area */
.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;
    }
}

/* Focus styles for accessibility */
.sb-button:focus,
.sb-toggle-button:focus,
.sb-close-btn:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

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

/* ===== FINAL OVERRIDE: occupy toggle space when toggle is disabled ===== */
.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; }
}

/* Improve hover lift for span buttons to match images */
.sb-floating-buttons .sb-button span:hover {
    transform: translateY(-1px);
}

/* ===== Font Awesome icon mapping for ::before ===== */
/* Default icon setup */
.sb-button span::before {
    background-image: none !important;
    font-size: var(--sb-icon-size, 18px);
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    width: auto;
    height: auto;
    filter: none;
}

/* Brand buttons → Font Awesome Brands */
.sb-button.sb-button-line span::before      { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f3c0"; } /* LINE */
.sb-button.sb-button-facebook span::before  { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f39e"; } /* Facebook */
.sb-button.sb-button-telegram span::before  { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f3fe"; } /* Telegram */
.sb-button.sb-button-whatsapp span::before  { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f232"; } /* WhatsApp */
.sb-button.sb-button-tiktok span::before    { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\e07b"; } /* TikTok */
.sb-button.sb-button-instagram span::before { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f16d"; } /* Instagram */
.sb-button.sb-button-twitter span::before   { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\e61b"; } /* X (Twitter) */
.sb-button.sb-button-snapchat span::before  { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f2ac"; } /* Snapchat */

/* Non-brand buttons → Font Awesome Free (Solid) */
.sb-button.sb-button-phone span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f095"; /* phone */
}
.sb-button.sb-button-email span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0e0"; /* envelope */
}

/* Custom button → Font Awesome Free (Regular) */
.sb-button.sb-button-custom span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content: "\f58a"; /* face-grin-tongue-squint */
}

/* ===== Blinking Animation for Social Buttons ===== */
@keyframes sb-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}


/* Blink animation class (explicit, not global) */
.sb-anim-blink { animation: sb-blink 1.5s infinite ease-in-out; }


/* ===== EXTRA ATTENTION-GRABBING EFFECTS (apply class to .sb-button) ===== */

/* 1) Pulse (breathing pop) */
@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; }

/* 2) Bounce (CTA bounce) */
@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; }


/* 3) Glow (pseudo-element aura, uses brand color variable) */
@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; /* spread glow outside button */
  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;
}
/* keep content above the aura */
.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; }

/* Ensure glow aura animates even if theme resets animation */
.sb-anim-on .sb-button.sb-anim-glow::before { animation: sb-glow-aura 1.6s ease-in-out infinite !important; }

/* 4) Wiggle (gentle attention shake) */
@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%; }

/* 5) Shine (scoped to each button safely) */
@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;
}

/* 6) Neon Border Loop */
@keyframes sb-neon-border {
  0% { border-color: #ff0080; box-shadow: 0 0 5px #ff0080, 0 0 20px #ff0080; }
  25% { border-color: #7928ca; box-shadow: 0 0 5px #7928ca, 0 0 20px #7928ca; }
  50% { border-color: #00f0ff; box-shadow: 0 0 5px #00f0ff, 0 0 20px #00f0ff; }
  75% { border-color: #00ff9d; box-shadow: 0 0 5px #00ff9d, 0 0 20px #00ff9d; }
  100% { border-color: #ff0080; box-shadow: 0 0 5px #ff0080, 0 0 20px #ff0080; }
}
.sb-button.sb-anim-neon-border span {
  border: 2px solid #ff0080;
  animation: sb-neon-border 2s linear infinite;
  border-radius: 8px;
}

/* 7) Text Color Cycle */
@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;
}

/* Utility: ensure transform animations don't fight hover lift */
.sb-anim-pulse:hover,
.sb-anim-bounce:hover,
.sb-anim-wiggle:hover { transform: none; }

/* 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;
}