.auth-overlay-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(10 10 10 / 88%);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: 9999;
  display: flex;
}

.auth-overlay-wrap.show {
  transform: translateY(0);
}

.auth-card {
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 100%;
}

.auth-overlay-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

/*  */

.credits-overlay-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(10 10 10 / 88%);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  z-index: 10;
  display: flex;
  overflow-y: auto;
}

/* .credits-overlay.show {
  display: flex;
} */
 .credits-overlay-wrap.show {
   transform: translateY(0);
 }

.credit-overlay-close {
  position: absolute;
  top: 15px;
  left: 50%;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}
#customCreditInput, #customCreditInput :focus, #customCreditInput :active {
  max-width: 300px;
  text-align: center;
  background: black;
  color: white;
  border-radius: 50px;
  border: 2px solid white;
  font-size: 20px;
  padding: 5px;
}
input::placeholder,
textarea::placeholder {
  color: #888888;
  /* your desired color */
  opacity: 1;
  /* ensure it's fully visible */
}
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

::placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

::-ms-input-placeholder {
  color: #888;
}

::-webkit-input-placeholder {
  color: #888;
}

.credit-option-btn:hover{
  box-shadow: 0px 0px 15px 0px #ffffff;
}

@media screen and (max-width: 768px) {
  .credit-option-btn{
    font-size: 13px;
  }
  
}