.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(183, 28, 28, 0.4),
    rgba(229, 57, 53, 0.968)
  );
}

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

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

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

.error-message {
  background-color: #ffcdd2;
  color: #b71c1c;
  border: 1px solid #e57373;
}

.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 var(--main-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1em;
  transition: color 0.5s ease, background-color 0.5s ease;
  background-color: var(--second-color);
  color: #fff;
}

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

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