.error-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: linear-gradient(135deg, #eb2020, #f82626);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(224, 59, 59, 0.4);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    z-index: 9999;
    animation: popIn 0.3s ease-out;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  @keyframes popIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -60%) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  font-size: 16px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.4s ease, top 0.4s ease;
}

.popup.show {
  top: 40px;
  opacity: 1;
}

.popup.success {
  background-color: #4CAF50;
}

.popup.error {
  background-color: #f44336;
}

.hidden {
  display: none;
}