/* Start Journey component styles */
#start-journey-container {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}

#start-journey-container h2 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

#start-journey-form {
  margin-bottom: 30px;
}

#start-journey-result {
  margin-top: 30px;
}

.journey-info {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.journey-id {
  font-family: monospace;
  background-color: #eee;
  padding: 3px 6px;
  border-radius: 3px;
}

#initial-response-container {
  margin-top: 20px;
}

/* Ensure component styles are consistent with the main application */
#start-journey-container .form-group {
  margin-bottom: 20px;
}

#start-journey-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

#start-journey-container input[type="text"],
#start-journey-container textarea,
#start-journey-container select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

#start-journey-container textarea {
  min-height: 120px;
  resize: vertical;
}

#start-journey-container button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

#start-journey-container button:hover {
  background-color: #2980b9;
}

#start-journey-container button.secondary {
  background-color: var(--secondary-color);
}

#start-journey-container button.secondary:hover {
  background-color: #1a252f;
}