.styled-form {
  display: grid;
  grid-template-rows: auto 1fr; /* Rows for messages and fields */
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(148, 110, 3, 0.4),
    rgba(236, 126, 1, 0.968)
  );
}

.form-messages {
  grid-row: 1;
}

.success-message,
.error-message {
  padding: 15px;
  border-radius: 4px;
  text-align: center;
}

.success-message {
  background-color: #d4edda;
  color: var(--main-color);
  border: 1px solid #c3e6cb;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  grid-row: 2;
  color: var(--main-color);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-input,
.form-textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
}

.form-textarea {
  resize: none;
  min-height: 150px;
}

.form-button {
  padding: 15px 20px;
  border: 1px solid white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.5s ease, background-color 0.5s ease;
}

.form-button:hover {
  background-color: var(--main-color);
  color: white;
}

.terms-link {
  color: var(--second-color);
}