.toast {
  position: fixed;
  right: var(--spacing-lg);
  bottom: var(--spacing-lg);
  z-index: var(--z-toast);
  max-width: 24rem;
  padding: 0.75rem var(--spacing-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: var(--grey-100);
  background: var(--grey-900);
  font-size: var(--font-size-sm);
  animation: toast-in 180ms ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

/* A cancellation or a rejection is not a success — it gets a left rule rather
   than a whole different colour, so the toast stays part of the grey scheme. */
.toast--warning {
  border-left: 3px solid var(--color-warning);
}

.toast--error {
  border-left: 3px solid var(--color-danger);
}

.form-errors {
  margin-bottom: var(--spacing-md);
  padding: 0.75rem var(--spacing-md);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.form-errors ul {
  list-style: disc;
  padding-left: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

@media (max-width: 768px) {
  .toast {
    right: var(--spacing-md);
    left: var(--spacing-md);
    bottom: var(--spacing-md);
    max-width: none;
  }
}