/* Attachment Carousel Styles */

/* Ensure carousel controls don't interfere with buttons */
.attachment-carousel .carousel-control-prev,
.attachment-carousel .carousel-control-next {
  width: 10%; /* Make controls narrower */
  z-index: 10; /* Lower z-index than buttons */
}

/* Make sure buttons are above carousel controls */
.attachment-carousel .card-footer {
  position: relative;
  z-index: 20; /* Higher than carousel controls */
}

/* Style buttons to be more prominent */
.attachment-carousel .btn {
  position: relative;
  z-index: 30; /* Highest z-index */
  margin: 0 2px; /* Add some spacing between buttons */
}

/* Ensure the carousel item content is clickable */
.attachment-carousel .carousel-item {
  pointer-events: auto;
}

/* Make sure the carousel doesn't capture clicks on buttons */
.attachment-carousel .carousel-inner {
  pointer-events: none;
}

/* But allow clicks on the content inside carousel items */
.attachment-carousel .carousel-item .card {
  pointer-events: auto;
}

/* Ensure the carousel controls are still clickable */
.attachment-carousel .carousel-control-prev,
.attachment-carousel .carousel-control-next {
  pointer-events: auto;
}

/* Add some padding to the card footer to ensure buttons are not too close to the edge */
.attachment-carousel .card-footer {
  padding: 0.75rem 1rem;
}

/* Make buttons more visible with a subtle shadow */
.attachment-carousel .btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add hover effect to make buttons more interactive */
.attachment-carousel .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}