/* ==========================================================================
   Verster-Roos — JetFormBuilder enquiry form skin
   Maps the plugin's real rendered markup (see wordpress\server\form-rendered.html)
   onto the approved concept form (concept-wp\vb-classes.css .vb-form__*).
   Every rule is scoped under .vb-site so nothing leaks into wp-admin.
   Tokens only — no raw colors, no raw font stacks.
   ========================================================================== */

/* Row: plugin ships `.jet-form-builder-row{padding:5px 0}` and no gap between
   the label and the control. We take explicit control of both instead of
   layering on top of the 5px padding (which would either double or fight it),
   and we do not add a margin to the label element itself (a label margin here
   previously doubled the row's built-in spacing on other builds). */
.vb-site .jet-form-builder-row{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0;
}
.vb-site .jet-form-builder-row:last-of-type{ margin-bottom: 0; }

/* Required marks: the shortcode's required_mark="" is not honoured by the
   plugin's render (it still prints a literal *), so hide it in CSS. */
.vb-site .jet-form-builder__required{ display: none; }

/* Label */
.vb-site .jet-form-builder__label{ width: 100%; }
.vb-site .jet-form-builder__label-text{
  display: block;
  font-family: var(--vb-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--vb-color-ink);
}

/* Field ground: text inputs, select, textarea.
   Plugin/theme give text inputs a fixed height (measured 48px); set height
   to auto and take over the box entirely with the concept's own metrics. */
.vb-site .jet-form-builder__field-wrap{ width: 100%; }
.vb-site .jet-form-builder__field.text-field,
.vb-site .jet-form-builder__field.select-field,
.vb-site .jet-form-builder__field.textarea-field{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0.8rem;
  background: var(--vb-color-surface);
  border: 1px solid var(--vb-color-line);
  border-radius: var(--vb-radius-sm);
  font-family: var(--vb-font-body);
  font-size: 1rem;
  line-height: var(--vb-leading-body);
  color: var(--vb-color-ink);
  transition: border-color 150ms ease;
}
.vb-site .jet-form-builder__field.textarea-field{
  min-height: 140px;
  resize: vertical;
}
.vb-site .jet-form-builder__field.text-field:focus,
.vb-site .jet-form-builder__field.select-field:focus,
.vb-site .jet-form-builder__field.textarea-field:focus{
  outline: none;
  border-color: var(--vb-color-brand);
}

/* Submit button — identical to .vb-btn.vb-btn--primary in vb-classes.css */
.vb-site .jet-form-builder__submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vb-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.9rem 1.5rem;
  min-height: 44px;
  border-radius: var(--vb-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: var(--vb-color-brand);
  color: var(--vb-color-surface);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.vb-site .jet-form-builder__submit:hover,
.vb-site .jet-form-builder__submit:focus-visible{
  background: var(--vb-color-brand-hover);
}
.vb-site .jet-form-builder__submit-wrap{ width: auto; }

/* Validation error text — brick, small. The plugin uses two different error
   text hooks depending on which validation path fires (field-message.php's
   `.jet-form-builder__field-error`, and the live-validation `.error-message`
   referenced in the plugin's own frontend/main.css); style both so neither
   path renders in the plugin's default red. */
.vb-site .jet-form-builder__field-error,
.vb-site .error-message{
  color: var(--vb-color-brand);
  font-size: var(--vb-text-small);
  margin-top: 0.3rem;
}

/* Success / failure banner — the plugin injects
   `.jet-form-builder-message.jet-form-builder-message--success` (or
   `--error`) via JS after a real AJAX response; it never appears in a
   pre-submit render, so these rules are written from the plugin's own
   includes/form-messages/status-info.php + assets/build/frontend/main.css,
   not from a captured page. Both are restyled as quiet panels on contract
   tokens instead of the plugin's default green/red. */
.vb-site .jet-form-builder-message{
  margin: 1.25rem 0 0;
  padding: 1rem 1.5rem;
  border: 1px solid var(--vb-color-line);
  border-radius: var(--vb-radius-sm);
  font-family: var(--vb-font-body);
  font-size: var(--vb-text-body);
  text-align: left;
}
.vb-site .jet-form-builder-message--success{
  background: var(--vb-color-surface-alt);
  border-color: var(--vb-color-line);
  color: var(--vb-color-ink);
}
.vb-site .jet-form-builder-message--error{
  background: var(--vb-color-surface);
  border-color: var(--vb-color-brand);
  color: var(--vb-color-brand);
}