#form-section,
#form-summary {
  background-color: #9da2aa;
  padding: 30px;
}

/* venstre boks */
#form-section {
  display: grid;
  gap: 1.5rem;
}

/* top info boks */
#form-info {
  background-color: #2a2b30;
  padding: 1.5rem;
}

#form-info h2 {
  color: white;
  margin: 0;
  font-size: 30px;
}

#form-info p {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: white;
}

/* højre boks */
#form-summary {
  text-align: left;
}

#form-summary h2 {
  background-color: #2a2b30;
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
  color: white;
  text-align: left;
  font-size: 1.1rem;
}

#form-summary p {
  font-size: 1.1rem;
  text-align: left;
  color: black;
}

/* form */
.climate-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.climate-form label {
  color: black;
  font-weight: bold;
}

.climate-form input,
.climate-form select,
.climate-form textarea {
  width: 100%;
  padding: 12px;
  border: none;
  background-color: #f2f2f2;
  color: black;
  font-size: 1rem;
  box-sizing: border-box;
}

/* knap */
.climate-form button {
  width: fit-content;
  padding: 14px 26px;
  background-color: #2f3238;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
  border-radius: 999px;
}

.error-message {
  display: none;
  color: red;
}

.form-group:has(:user-invalid) {
  .error-message {
    display: block;
  }
  input {
    outline: 2px solid red;
  }
}

.form-group:has(:required) {
  label::after {
    content: " *";
    color: red;
  }
}