.toast-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  /* İçindeki toast dışında tıklama geçmesin */
}

.toast-container.top-right {
  top: 20px;
  right: 20px;
}

.toast-container.top-left {
  top: 20px;
  left: 20px;
}

.toast-container.top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.toast-container.bottom-right {
  bottom: 20px;
  right: 20px;
}

.toast-container.bottom-left {
  bottom: 20px;
  left: 20px;
}

.toast-container.bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Toast kutusu */
.toasts {
  pointer-events: auto;
  display: flex;
  align-items: center;
  background-color: #444;
  color: white;
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  font-family: Arial, sans-serif;
  min-width: 280px;
  max-width: 400px;
  user-select: none;
}

/* Türlere göre renkler ve icon renk */

.toasts {
  color: #000;
  background-color: #fff;
}

.toasts.couponSuccess {
  background: linear-gradient(90deg, #5f6fff 0%, var(--text-main) 100%);
}

.toasts.couponError {
  background-color: #da3b32;
}

.toasts.success .icon {
  color: #fff;
  color: #34c759;
}

.toasts.error .icon {
  background-color: #ef4444;
  color: #fff;
}

.toasts.info .icon {
  color: #2196f3;
}

.toasts.couponSuccess .icon {
  color: var(--text-main);
}

.toasts.couponError .icon {
  color: #da3b32;
}

/* Icon */
.toasts .icon {
  font-size: 25px;
  margin-right: 14px;
  width: 28px;
  height: 28px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mesaj */
.toasts .message {
  flex: 1;
}

/* Animasyonlar */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

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

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

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

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

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

@keyframes slideOutTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

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

@keyframes slideOutBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.slide-in-right {
  animation: slideInRight 0.4s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.4s forwards;
}

.slide-in-left {
  animation: slideInLeft 0.4s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.4s forwards;
}

.slide-in-top {
  animation: slideInTop 0.4s forwards;
}

.slide-out-top {
  animation: slideOutTop 0.4s forwards;
}

.slide-in-bottom {
  animation: slideInBottom 0.4s forwards;
}

.slide-out-bottom {
  animation: slideOutBottom 0.4s forwards;
}