/*
 * ABC's forms (src/forms.js, src/register.js) in the look this site's forms had
 * on Webflow: no card, the site's labels, light inputs and lime button, sized
 * in rem so they follow the site's own root size like the rest of the page.
 * Unlayered, and more specific than ABC's scoped rules, so these win.
 */
:is([data-abc-form], [data-abc-register]) .abc-register.abc-register {
  --md-sys-color-primary: #c4e666;
  --md-sys-color-on-primary: #222;
  --brand-green: #c4e666;
  --prose-link: #222;
  --font-sans: 'Inter Tight', sans-serif;
  --font-serif: 'Inter Tight', sans-serif;
  background: transparent;
  color: #222;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

/* The form sits on the page, not in a card. */
[data-abc-form] .abc-register.abc-register .card-outlined {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .form-label {
  color: #222;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: normal;
  margin-bottom: .25rem;
}

:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .form-input {
  background-color: #fafafa;
  color: #222;
  border: .1rem solid #e1e1e1;
  border-radius: .4rem;
  box-shadow: none;
  height: auto;
  padding: .5rem;
  font-size: 1rem;
}
:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .form-input:focus {
  border-color: #888;
  box-shadow: none;
  outline: none;
}
:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .form-input::placeholder { color: #888; }
[data-abc-form] .abc-register.abc-register textarea.form-input { min-height: 3.5rem; height: 6rem; }

/* The site's button: lime, rounded, a little bigger on hover. */
:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .btn-filled {
  background-color: #c4e666;
  color: #222;
  border: 0;
  border-radius: .6rem;
  box-shadow: none;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
  height: auto;
  transition: transform .3s cubic-bezier(.645, .045, .355, 1);
}
:is([data-abc-form], [data-abc-register]) .abc-register.abc-register .btn-filled:hover {
  background-color: #c4e666;
  box-shadow: none;
  transform: scale(1.05);
}

/* The button sits at the left, under the fields, as it did. */
[data-abc-form] .abc-register.abc-register form > .flex.justify-end { justify-content: flex-start; }