#details-slide {
  background-color: #1c1f23;
  overflow-y: auto;
  z-index: 960;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Visible class triggers animation */
#details-slide.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: slide in from right */
@media (min-width: 768px) {
  #details-slide {
    top: 57px;
    right: 0;
    width: 500px;
    height: 100%;
    transform: translateX(100%);
    padding-bottom: 100px;
  }

  #details-slide.visible {
    transform: translateX(0);
  }
}

/* Mobile: slide up from bottom */
@media (max-width: 767px) {
  #details-slide {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    transform: translateY(100%);
  }

  #details-slide.visible {
    transform: translateY(0);
  }
}

/* Close button */
#details-slide-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
}