/* CSS for Support page */

.card .contact-form {
  display: flex;
  flex-direction: column;
}

.form-row.top-form-row {
  padding-top: var(--gap-cards);
}

.bottom-form-row {
  padding-bottom: var(--gap-cards);
}

.form-row {
  display: flex;
  padding: 0;
  margin: var(--gap-cards);
  gap: var(--gap-cards);
  flex-wrap: wrap;
}

.contact-field {
  background: white;
  border: none;
  border-radius: var(--small-border-radius);
  padding: 0.75rem 1rem;
  font-size: var(--size-regular);
  font-family: inherit;
  box-shadow: var(--shadow-element);
  transition: box-shadow var(--transition);
  color: var(--dark-text);
  flex: 1 1;
}

.contact-field::placeholder{
  color: rgba(150, 150, 150, 0.6);
}

.contact-field:focus {
  outline: none;
  box-shadow: var(--hover-shadow);
}

.contact-form textarea {
  resize: vertical;
  min-height: 7.5rem;
  font-family: inherit;
  line-height: 1.5;
}

.contact-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
}