/* Basic host styling */
:host {
  display: block;
}

/* Basic reset for elements used */
h2,
textarea,
button {
  margin: 0;
}

/* Styles specific to the form view */
.form-view {
  background-color: white; /* Specific to this view */
  padding: 0.5rem 1rem;
  border-radius: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* Gap between form and Go Back button */
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* Gap between elements inside the form */
}

.form-view h2 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-black);
}

.form-view textarea {
  width: 100%;
  height: 7rem;
  padding: var(--space-8);
  border-radius: var(--space-8);
  border: 1px solid var(--border-color);
  font-size: 0.875rem;
  color: var(--primary-black);
  resize: none;
  font-family: var(--ism-primary-font-family); /* Ensure consistent font */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* General button styles (can be shared or moved to global styles later) */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  /* flex: 1; */ /* Let buttons size naturally by default */
  font-family: var(--ism-primary-font-family);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.primary {
  background-color: var(--primary-blue);
  color: white;
}

button.primary:hover {
  background-color: #001943;
}

button.secondary {
  background-color: white;
  border: 1px solid var(--border-color);
  color: #333;
}

/* Specific style for the Go Back button if needed */
.go-back-button {
  /* Add any specific styling, e.g., width, alignment */
  /* Example: width: 100%; */
}

/* Styles for nested components (if any were used, e.g., loading-spinner) */
/* loading-spinner styles would go here if needed */