/* Container Utama */
#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Base Style: Bentuk Kapsul Dynamic Island */
#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 14px 28px 14px 55px;
  width: auto;
  min-width: 220px;
  max-width: 90vw;
  border-radius: 50px; /* Bentuk Pil */
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 22px;
  backdrop-filter: blur(12px); /* Efek kaca */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  /* Animasi Masuk ala iOS */
  animation: dynamicIslandIn 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* --- Penyesuaian Warna Sesuai Tipe --- */

.toast-success {
  background-color: rgba(40, 167, 69, 0.85) !important; /* Hijau */
}

.toast-error {
  background-color: rgba(220, 53, 69, 0.85) !important; /* Merah */
}

.toast-warning {
  background-color: rgba(255, 153, 0, 0.85) !important; /* Oranye */
}

.toast-info {
  background-color: rgba(0, 123, 255, 0.85) !important; /* Biru */
}

/* --- Animasi Keyframes --- */
@keyframes dynamicIslandIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-30px);
    filter: blur(10px);
  }
  60% {
    transform: scale(1.05) translateY(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Animasi Keluar: Menciut dan Menghilang ke Atas */
@keyframes dynamicIslandOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  30% {
    /* Sedikit membesar sebelum menciut untuk efek pegas */
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translateY(-40px);
    filter: blur(12px);
  }
}

/* Class trigger untuk Toastr */
.dynamic-island-exit {
  animation: dynamicIslandOut 0.5s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* Tipografi */
.toast-title {
  font-weight: 700;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 14px;
}

.toast-message {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 13px;
  opacity: 0.9;
}

/* Progress Bar Minimalis */
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
}

/* Icon (Menggunakan SVG agar bersih) */
#toast-container > .toast-success { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-error { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") !important; }