/* Adapted from Uiverse.io by GreyD097 for Sanrakshan Footer */
.footer-button-box {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-button-box .social-button {
  width: 50px;
  height: 50px;
  position: absolute;
  cursor: pointer;
  background: #2c2c2c;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer-button-box .social-button .icon {
  width: 22px;
  height: 22px;
  fill: #fff;
  transition: transform 0.3s ease;
}

/* Initial stacked state */
.footer-button-box .social-button:nth-child(1) { z-index: 4; } /* LinkedIn */
.footer-button-box .social-button:nth-child(2) { z-index: 3; } /* YouTube */
.footer-button-box .social-button:nth-child(3) { z-index: 2; } /* Twitter/X */
.footer-button-box .social-button:nth-child(4) { z-index: 1; } /* Facebook */

/* Hover state - fan out */
.footer-button-box:hover .social-button:nth-child(1) {
  transform: translateX(0); /* LinkedIn - stays in place */
}
.footer-button-box:hover .social-button:nth-child(2) {
  transform: translateX(55px); /* YouTube - moves right */
}
.footer-button-box:hover .social-button:nth-child(3) {
  transform: translateX(110px); /* Twitter/X - moves further right */
}
.footer-button-box:hover .social-button:nth-child(4) {
  transform: translateX(165px); /* Facebook - moves furthest right */
}

/* Individual hover effects */
.footer-button-box .social-button:hover {
  transform: scale(1.1);
}

/* Keep other buttons in place while hovering one */
.footer-button-box:hover .social-button:nth-child(1):hover { transform: translateX(0) scale(1.1); }
.footer-button-box:hover .social-button:nth-child(2):hover { transform: translateX(55px) scale(1.1); }
.footer-button-box:hover .social-button:nth-child(3):hover { transform: translateX(110px) scale(1.1); }
.footer-button-box:hover .social-button:nth-child(4):hover { transform: translateX(165px) scale(1.1); }

/* Brand colors on hover */
.footer-button-box .social-button.facebook:hover {
  background-color: #1877F2;
}

.footer-button-box .social-button.twitter:hover {
  background-color: #000000;
}

.footer-button-box .social-button.youtube:hover {
  background-color: #FF0000;
}

.footer-button-box .social-button.linkedin:hover {
  background-color: #0072b1;
}

/* Add a placeholder for the expanded width to prevent layout shift */
.footer-button-box-wrapper {
    min-width: 270px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-start; /* Align to the left */
}