/* ==========================================================
   Toast Components
========================================================== */

#toast-container {
  position: fixed;

  top: 80px;

  right: 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  z-index: 99999;

  pointer-events: none;
}

.toast {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  min-width: 280px;

  max-width: 340px;

  padding: 16px 18px;

  border-radius: 14px;

  font-size: 14px;

  font-weight: 600;

  opacity: 0;

  transform: translateX(30px);

  transition: 0.3s;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

  pointer-events: auto;
}

.toast-icon {
  font-size: 20px;

  flex-shrink: 0;
}

.toast-message {
  flex: 1;

  line-height: 1.5;

  word-break: break-word;
}

.toast.show {
  opacity: 1;

  transform: translateX(0);
}

.toast-success {
  background: var(--success-bg);
  color: var(--success-dark);
  border: 1px solid var(--success-border);
  border-left: 4px solid var(--success);
}

.toast-error {
  background: var(--danger-bg);
  color: var(--danger-dark);
  border: 1px solid var(--danger-border);
  border-left: 4px solid var(--danger);
}

.toast-warning {
  background: var(--warning-bg);
  color: var(--warning-dark);
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning);
}

.toast-info {
  background: var(--info-bg);
  color: var(--info-dark);
  border: 1px solid var(--info-border);
  border-left: 4px solid var(--info);
}