.select-container {
  position: relative;
  width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


.select-box {
  width: 100%;
  cursor: pointer;
  position: relative;
  border: none;
  border-bottom: 1px solid transparent;
  align-items: center;
}

.select-box:focus {
  outline: none;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 1px;
  z-index: 10;
  /* Animation properties */
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  visibility: hidden;
  /* Use visibility instead of display for animation */
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    /* Bounce effect */
    opacity 0.2s ease,
    visibility 0s 0.2s;
  /* Delay visibility change until after fade out */
}

.option {
  cursor: pointer;
}

/* Show options when select is clicked */
.select-container.active .select-options {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    /* Bounce effect */
    opacity 0.2s ease,
    visibility 0s 0s;
  /* No delay for visibility when showing */
}

.down-arrow {
  transition: transform 0.3s ease;
}

.select-container.active .down-arrow, .down-arrow.active {
  transform: rotate(180deg);
}

/* Ensure the dropdown has a nice border radius */
.select-container.active .select-box {
  border-radius: 6px 6px 0 0;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px solid rgba(128, 128, 128, 0.583);
}