/* ============================================================
   sections/side-link/style.css
   ============================================================ */

.side-links {
  position: fixed;
  right: var(--side-link-offset, 20px);
  top: var(--side-link-top, 50%);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--side-link-gap, 20px);
  z-index: 1000;
  transition: all 0.3s ease;
}

.side-links.left {
  right: auto;
  left: var(--side-link-offset, 20px);
}

.side-link-item {
  width: var(--side-link-item-size, 45px);
  height: var(--side-link-item-size, 45px);
  background: var(--side-link-bg, linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top:    var(--side-link-border-t, 1px solid rgba(255, 255, 255, 0.1));
  border-right:  var(--side-link-border-r, 1px solid rgba(255, 255, 255, 0.1));
  border-bottom: var(--side-link-border-b, 1px solid rgba(255, 255, 255, 0.1));
  border-left:   var(--side-link-border-l, 1px solid rgba(255, 255, 255, 0.1));
  border-radius: var(--side-link-radius, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--side-link-color, var(--primary-color));
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--side-link-shadow, 0 4px 15px rgba(0, 0, 0, 0.1));
}

@media (max-width: 991px) {
  .side-link-item {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--side-link-bg, rgba(var(--primary-rgb), 0.08));
  }
}

.side-link-item:hover {
  transform: translateX(-5px);
  background: var(--side-link-hover-bg, linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.1)
  ));
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--side-link-hover, var(--secondary-color));
  box-shadow: var(--side-link-hover-shadow, 0 6px 20px rgba(0, 0, 0, 0.15));
}

.side-links.left .side-link-item:hover {
  transform: translateX(5px);
}

.side-link-item i {
  font-size: var(--side-link-size, 1.2rem);
}

.side-link-item img {
  width: var(--side-link-size, 2rem);
  height: var(--side-link-size, 2rem);
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.side-links.hidden {
  transform: translateY(-50%) translateX(100px);
  opacity: 0;
}

.side-links.left.hidden {
  transform: translateY(-50%) translateX(-100px);
}

@media (max-width: 768px) {
  .side-link-item i {
    font-size: var(--side-link-size, 1rem);
  }
}