/* The contact-sales form — GTS-84.
 *
 * SEPARATE FILE, for the same reason as a11y.css: the approved page
 * (design/style-v1/index.html) is self-contained and is not ours to edit
 * (§4.4), so an addition to a CEO-approved design lives where a reviewer can
 * see exactly what was added and a v2 of the package can replace the theme
 * without discarding it.
 *
 * EVERY COLOUR IS AN EXISTING TOKEN from the approved set — --surface-2,
 * --line, --text, --muted, --green, --grad, --radius. No new colour is
 * introduced, which keeps the "no off-token colours" check meaningful and
 * keeps the form visually part of the approved design rather than bolted on.
 *
 * --muted is #8A97A8, measured at 6.64:1 against the page background #070B12
 * and therefore above the 4.5:1 WCAG AA threshold. The theme's other greys
 * (#4A5568 at 2.62:1, #56637a at 3.25:1, #5A6778 at 3.42:1) all FAIL it, so
 * none of them is used for text here — see a11y.css for the measurements.
 */

.contact-form {
  margin: 32px auto 0;
  max-width: 560px;
  text-align: left;
}

.contact-form .field + .field {
  margin-top: 16px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #8A97A8);
}

/* The asterisk is DECORATION ONLY and is marked aria-hidden in the partial.
 * What actually conveys "required" is the `required` attribute on the input,
 * which assistive technology announces — so the information does not depend
 * on seeing a green glyph. A colour-only required marker would convey nothing
 * to a non-sighted or colour-blind user, which is why the attribute carries
 * the meaning and this rule only styles the hint. */
.contact-form .req {
  color: var(--green, #00E88F);
  margin-left: 4px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2, #131C2B);
  border: 1px solid var(--line, #1E2A3D);
  border-radius: 10px;
  color: var(--text, #E8EEF7);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted, #8A97A8);
  opacity: 1; /* Firefox dims placeholders by default, which would drop the
               * measured contrast below AA. */
}

/* No `outline: none` anywhere in this file. The focus ring comes from
 * a11y.css (2px solid #00E88F), and overriding it here is how the GTS-3
 * correction gets silently undone for exactly the elements that need it most
 * — the ones a keyboard user must tab through to convert. */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--green, #00E88F);
}

.contact-form .actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-form button[type='submit'] {
  background: var(--grad, linear-gradient(120deg, #00E88F, #2E7CF6));
  color: #04110B;
  border: 0;
  padding: 13px 30px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.contact-form button[type='submit']:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* THE STATUS REGION IS ALWAYS IN THE DOM, never created on submit.
 *
 * An aria-live region that is inserted at the same moment its text appears is
 * frequently not announced at all — the screen reader has nothing to observe
 * changing. So it ships empty and is filled in place.
 *
 * It is also NOT hidden with `display: none` while empty, for the same
 * reason; an empty element with no padding occupies nothing visually. */
.contact-form .form-status {
  margin-top: 16px;
  font-size: 14.5px;
  min-height: 1.5em;
}

.contact-form .form-status[data-state='error'] {
  color: var(--text, #E8EEF7);
}

.contact-form .form-status[data-state='ok'] {
  color: var(--green, #00E88F);
}

.contact-form .form-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted, #8A97A8);
}

.contact-form .form-note a {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .contact-form .actions {
    flex-direction: column;
    align-items: stretch;
  }
}