/* ==========================================================================
   Formulário de contato
   ========================================================================== */

.form {
  display: grid;
  gap: 4px;
}

.form__control {
  width: 100%;
  min-height: 24px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  font: inherit;
  font-size: 13px;
}

.form__control::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

textarea.form__control {
  min-height: 100px;
  resize: vertical;
}

.form__submit {
  justify-self: end;
  margin-top: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-header);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background 150ms ease;
}

.form__submit:hover:not(:disabled) {
  background: var(--color-white);
}

.form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.form__status {
  min-height: 1.5em;
  font-size: 14px;
}

.form__status.is-error {
  color: #ffd0cc;
}