/* =========================================================
   contact-form.css — dark theme for the "Book a Discovery
   Call" WPForms form on /contact/ (form 1106, page 76).

   The page previously carried a hand-rolled <form> with every
   colour written inline. That form had no action, no method
   and no submit handler, so every enquiry was silently
   discarded and the submitted data ended up in the page URL
   (and from there into GA4 page_views). It was replaced with
   WPForms, which submits over AJAX and actually emails.

   This file reproduces the old inline look on the WPForms
   markup so the visual design is unchanged. The values below
   are copied from that original markup, not re-invented:
     input background   #1A2340
     input border       rgba(0,212,255,0.12)
     input text         #E8F4F8
     label text         #94A3B8   0.875rem
     radius             6px
     input padding      12px 16px
     submit background  #00D4FF   text #0A0E1A, 700, 14px pad

   Scoped to .bd-contact-wpform — the form_class set on form
   1106 — so it cannot reach the alpha-access form (1042) in
   the Resource Center gate, which is styled separately and
   sits on a different background.
   ========================================================= */

/* WPForms' "modern" renderer sets most of these via custom properties on the
   container. Setting the properties themselves is preferred over fighting
   individual rules: it keeps focus states, validation states and the checkbox
   accent consistent instead of half-restyled. */
.bd-contact-wpform.wpforms-container {
  --wpforms-field-background-color: #1A2340;
  --wpforms-field-border-color: rgba(0, 212, 255, 0.12);
  --wpforms-field-text-color: #E8F4F8;
  --wpforms-field-border-radius: 6px;
  --wpforms-label-color: #94A3B8;
  --wpforms-label-sublabel-color: #4A6080;
  --wpforms-label-error-color: #FF6B6B;
  --wpforms-button-background-color: #00D4FF;
  --wpforms-button-text-color: #0A0E1A;
  --wpforms-button-border-radius: 6px;
  --wpforms-field-size-input-height: 48px;
  --wpforms-field-size-padding-h: 16px;
  --wpforms-field-size-font-size: 1rem;

  margin: 0;
}

/* Belt and braces: older WPForms markup and any theme rule that hard-codes
   colours would otherwise leave white boxes on a #0F1629 section. */
.bd-contact-wpform .wpforms-field input[type="text"],
.bd-contact-wpform .wpforms-field input[type="email"],
.bd-contact-wpform .wpforms-field input[type="tel"],
.bd-contact-wpform .wpforms-field select,
.bd-contact-wpform .wpforms-field textarea {
  background: #1A2340;
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 6px;
  color: #E8F4F8;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: Inter, sans-serif;
  box-shadow: none;
}

.bd-contact-wpform .wpforms-field textarea {
  resize: vertical;
}

.bd-contact-wpform .wpforms-field input:focus,
.bd-contact-wpform .wpforms-field select:focus,
.bd-contact-wpform .wpforms-field textarea:focus {
  border-color: rgba(0, 212, 255, 0.5);
  outline: none;
}

/* Placeholder and the select's own "Select…" option, which inherits the
   dropdown's colours from the OS rather than the field. */
.bd-contact-wpform .wpforms-field ::placeholder { color: #4A6080; }
.bd-contact-wpform .wpforms-field select option { background: #1A2340; color: #E8F4F8; }

.bd-contact-wpform .wpforms-field-label,
.bd-contact-wpform .wpforms-field-label-inline {
  color: #94A3B8;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: Inter, sans-serif;
}

.bd-contact-wpform .wpforms-field-sublabel,
.bd-contact-wpform .wpforms-field-description {
  color: #4A6080;
  font-size: 0.8rem;
}

/* The original marked required fields with a plain "*" in the label. */
.bd-contact-wpform .wpforms-required-label { color: #00D4FF; }

/* Checkboxes: the original used accent-color so the native control picked up
   the brand cyan without custom markup. Two columns matches the old flex-wrap
   layout at desktop width. */
.bd-contact-wpform .wpforms-field-checkbox input[type="checkbox"] {
  accent-color: #00D4FF;
}
.bd-contact-wpform .wpforms-field-checkbox li label { color: #94A3B8; }

.bd-contact-wpform button[type="submit"],
.bd-contact-wpform .wpforms-submit {
  width: 100%;
  background: #00D4FF;
  color: #0A0E1A;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.bd-contact-wpform button[type="submit"]:hover,
.bd-contact-wpform .wpforms-submit:hover {
  background: #00B8D9;
}

/* Confirmation message.

   WPForms styles this with `div.wpforms-container .wpforms-confirmation-container-full`
   — (0,2,1) — giving a pale green #e0ffc7 panel. A plain
   `.bd-contact-wpform .wpforms-confirmation-container-full` is only (0,2,0) and
   loses, which is what shipped first: the form went dark correctly but the
   post-submit panel came back light green on the dark section. Qualifying with
   div.wpforms-container (the same element that carries our class) scores (0,3,1)
   and wins without !important. */
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container-full,
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container {
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: 6px;
  color: #E8F4F8;
  padding: 16px;
}
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container-full p,
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container p {
  color: #E8F4F8;
}
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container-full a,
div.wpforms-container.bd-contact-wpform .wpforms-confirmation-container a {
  color: #00D4FF;
  font-weight: 700;
}

.bd-contact-wpform .wpforms-error,
.bd-contact-wpform label.wpforms-error {
  color: #FF6B6B;
  font-size: 0.8rem;
}
.bd-contact-wpform .wpforms-field input.wpforms-error,
.bd-contact-wpform .wpforms-field textarea.wpforms-error,
.bd-contact-wpform .wpforms-field select.wpforms-error {
  border-color: #FF6B6B;
}