.btn-signup {
  background-color: rgb(121, 19, 19);
  border-color: rgb(121, 19, 19);
  color: rgb(255, 255, 255);
}
.btn-signup:hover {
  background-color: darkred;
  border-color: darkred;
}
.btn-signup:active {
  background-color: #800000;
  border-color: #800000;
}


/* Hide arrows in Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrows in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Base size and color */
.x-icon {
  width: 14px;
  height: 14px;
  stroke: white; /* inherits button text color */
  transition: stroke 0.2s, transform 0.2s;
}
.btn-outline-danger {
  border: none;          /* remove outline border */
  color: currentColor;    /* keep text/icon color */
  border-radius: 20; 
  transition: background-color 0.2s, color 0.2s;
}

.btn-outline-danger:hover {
  background-color: rgba(255, 77, 79, 0.2); /* light red hover background */
  color: #ff4d4f;  /* red color on hover */
  transform: scale(1.0001); /* slightly enlarge icon */
}
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fade + scale pop-in */
/* Slide + fade from top for intro text */
.pop-in-top {
  opacity: 0;
  transform: translateY(-20px); /* start above */
  animation: popInTop 0.6s ease-out forwards;
}

@keyframes popInTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: translateY(10px); /* small overshoot for bounce effect */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}