/* --- Desktop default --- */
.social-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10000;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #02FDD2;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Hide toggle on desktop */
.social-toggle {
  display: none;
}

@media screen and (max-width: 768px) {
  .social-widget {
    bottom: 15px;
    right: 15px;
    gap: 8px;
  }

  /* Toggle button */
  .social-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #02FDD2;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    position: relative;
    transition: transform 0.2s ease;
  }

  .social-toggle:active {
    transform: scale(0.92);
  }

  /* Triangle arrow using borders */
  .social-toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #02FDD2; /* arrow color */
    transition: transform 0.2s ease;
  }

  /* Rotate arrow when active */
  .social-widget.active .social-toggle::before {
    transform: rotate(180deg); /* arrow points down when active */
  }

  /* Hide all icons by default */
  .social-widget .social-icon {
    display: none;
  }

  /* Show first icon if needed */
  .social-widget .social-icon:first-of-type {
    display: flex;
  }

  /* Show all icons when active */
  .social-widget.active .social-icon {
    display: flex;
  }

  /* Make social icons slightly smaller on mobile */
  .social-icon {
    width: 36px;
    height: 36px;
  }

  .social-icon img {
    width: 55%;
    height: 55%;
  }
}