.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: Arial, sans-serif;
}

.toast {
  position: relative;
  border-radius: 12px;
  background: #fff;
  padding: 20px 35px 20px 25px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  opacity: 0; /* start hidden */
  transition:
    transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35),
    opacity 0.5s ease; /* fade in/out */
}

.toast.active {
  transform: translateX(0%);
  opacity: 1; /* show */
}

.toast.hide {
  /* for fade out */
  opacity: 0;
  transform: translateX(calc(100% + 30px));
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.toast .toast-content {
  display: flex;
  align-items: center;
}

.toast .check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}

.toast .message {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.toast .message .text-1 {
  font-weight: 600;
  color: #333;
}

.toast .message .text-2 {
  font-size: 14px;
  color: #666;
}

.toast .close {
  position: absolute;
  top: 15%; /* vertically center */
  right: 6px; /* distance from the right edge */
  transform: translateY(-50%); /* perfect vertical centering */
  cursor: pointer;
  font-size: 14px; /* slightly larger for better visibility */
  font-weight: bold; /* makes the X stand out */
  color: #666; /* normal color */
  line-height: 1; /* ensures no extra spacing */
  text-align: center;
}

.toast .close:hover {
  color: #000;
}

.toast .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
}

.toast .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background-color: currentColor;
}

.progress.active:before {
  animation: progress 8s linear forwards;
}

@keyframes progress {
  100% {
    right: 0%;
  }
}

/* Type Colors */
.toast.success .check,
.toast.success .progress:before {
  background-color: #2bde3f;
}
.toast.error .check,
.toast.error .progress:before {
  background-color: #f44336;
}
.toast.info .check,
.toast.info .progress:before {
  background-color: #2770ff;
}