.card {
  min-height: 300px;
}

/* Existing styles below */
.card {
  position: relative;
}

/* ...rest of your CSS... */

/* Modern high-contrast carousel arrows */

.card {
  border: 2px solid #0d6efd !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #ed0000;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  filter: invert(1);
  background-size: 60% 60%;
}

.carousel-control-prev,
.carousel-control-next {
  width: 60px;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover,
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:focus .carousel-control-next-icon {
  background-color: #ba0a0a;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}


<style>
.legend-btn {
  min-width: 160px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 8px;
}
.legend-btn.active {
  box-shadow: 0 0 0 2px #0d6efd;
  outline: none;
}
</style>