/*
 * Form fields shared by the contact, demo key and waitlist forms: label above an input that
 * only has a bottom line, like the original Wix text inputs. Each form sets its own sizes
 * through custom properties.
 */
.field {
  display: flex;
  flex-direction: column;
  --label-size: 28px;
  --input-size: 28px;
  --line: 2px;
  --line-color: var(--blue);
}
.field label {
  display: block;
  padding: 0 20px 0 1px;
  font-size: var(--label-size);
  line-height: 1;
  color: var(--white);
  overflow-wrap: break-word;
}
/* The original marks required fields with " *" after the label; only some are visible. */
.field label::after { content: " *"; color: var(--req-color, transparent); }
.field:not(:has(:required)) label::after { content: none; }
.field input, .field textarea {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 3px 3px 3px 2px;
  border: 0;
  border-bottom: var(--line) solid var(--line-color);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--ff);
  font-size: var(--input-size);
  line-height: 1.4;
  outline-offset: 0;
}
.field textarea { padding: 21px 10px 3px 2px; resize: vertical; min-height: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--blue); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #ff4040; }

.form button[type="submit"] { display: flex; align-items: center; width: 100%; }
.form-status { margin: 0; }