/******************************************************************************/
/* Toasts                                                                     */
/******************************************************************************/

#toastContainer {
  position: fixed;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

/* Toast base */
.toast {
  pointer-events: auto;            /* allow clicks inside each toast */
  max-width: 360px;
  background: #fff;
  color: #000;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  user-select: none;
  cursor: default;
}

/* Visible state */
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.toast--success { border-left: 5px solid #28a745; }
.toast--warning { border-left: 5px solid #ffc107; }
.toast--error   { border-left: 5px solid #dc3545; }
.toast--info    { border-left: 5px solid #555; }

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}