/* ===============================
   Gooey wrapper
   ❌ ค่า default = ไม่มี filter (มือถือ)
================================ */
.social-btn-wrapper {
    /* intentionally empty */
  }
  
  /* ===============================
     Desktop เท่านั้น (มี gooey)
  ================================ */
  @media (min-width: 769px) {
    .social-btn-wrapper {
      filter: url(#goo);
    }
  }
  
  /* ===============================
     Container (fixed ห้ามมี filter)
  ================================ */
  .social-btn {
    position: fixed;
    bottom: 5%;
    right: 25px;
    margin: 1em;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    z-index: 9999;
  }
  
  /* ===============================
     Icons + Button
  ================================ */
  .social-btn span,
  .social-btn .button {
    position: absolute;
    --size: 55px;
  
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    background: #f36e20;
    cursor: pointer;
  }
  
  /* link */
  .social-btn a {
    color: #fff;
    font-size: 22px;
  }
  
  /* main button icon */
  .social-btn .button i {
    font-size: 30px;
    color: #fff;
  }
  
  /* rotate main button */
  .social-btn.active .button {
    transform: rotate(360deg);
    transition: transform 1s ease-in-out;
  }
  
  /* ===============================
     Show / Hide icons
  ================================ */
  .social-btn.active span:not(:last-child) {
    animation: show .5s ease forwards;
  }
  
  .social-btn.in-active span:not(:last-child) {
    animation: hide .5s ease forwards;
  }
  
  @keyframes show {
    to {
      transform: translateY(calc((var(--i) * -75px) - 20px));
      background: var(--bg);
      color: var(--clr);
    }
  }
  
  @keyframes hide {
    to {
      transform: translateY(0);
    }
  }
  
  /* ===============================
     iOS / Android click fix
  ================================ */
  .social-btn,
  .social-btn * {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* ===============================
     Hide SVG
  ================================ */
  svg {
    width: 0;
    height: 0;
  }