/* ============================================================================
   CONTACT FORM SKIN — loaded after Fluent Forms' own stylesheets (wp_footer),
   so these rules actually win. Simple stack: first/last side by side, full-
   width fields, tight gaps, full-width button.
   ========================================================================== */

.fluentform .frm-fluent-form {
  display: flex; flex-direction: column; gap: 12px;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.fluentform .frm-fluent-form > fieldset { display: contents; border: 0; padding: 0; margin: 0; }

.fluentform .ff-el-group { margin: 0; padding: 0; background: none; box-shadow: none; }

.fluentform .ff-el-input--label { display: block; text-align: left; margin: 0 0 5px; padding: 0; }
.fluentform .ff-el-input--label label {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); margin: 0;
}

.fluentform .ff-t-container { display: flex; gap: 12px; width: 100%; margin: 0; }
.fluentform .ff-t-cell { flex: 1 1 0; min-width: 0; padding: 0; }

.fluentform .ff-el-input--content { width: 100%; }
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control {
  display: block; width: 100%; max-width: 100%;
  background: color-mix(in srgb, var(--ink-800) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 46px; height: auto;
  margin: 0;
  padding: 11px 14px;
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.4;
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fluentform .ff-el-form-control::placeholder { color: var(--text-tertiary); }
.fluentform .ff-el-form-control:hover { border-color: var(--ink-700); }
.fluentform .ff-el-form-control:focus {
  background: color-mix(in srgb, var(--ink-800) 95%, transparent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
}
.fluentform textarea.ff-el-form-control { min-height: 96px; resize: vertical; }

.fluentform select.ff-el-form-control {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234DA6FF' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}

.fluentform .ff_submit_btn_wrapper { margin: 2px 0 0; padding: 0; text-align: stretch; }
.fluentform .ff-btn-submit {
  display: block; width: 100%;
  background: var(--accent); color: var(--ink-950);
  border: 0; border-radius: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  padding: 14px 24px; margin: 0;
  cursor: pointer;
  box-shadow: none;
  transition: background 120ms ease, transform 120ms ease;
}
.fluentform .ff-btn-submit:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* keep the styled success message (also must outrank FF) */
.fluentform .ff-message-success {
  background: color-mix(in srgb, var(--signal-ok) 10%, var(--ink-900));
  border: 1px solid color-mix(in srgb, var(--signal-ok) 40%, transparent);
  border-radius: 8px; color: var(--text-primary); padding: 18px;
}
/* error text */
.fluentform .error.text-danger, .fluentform .ff-el-validation-error { color: #E5484D; font-size: 0.8125rem; }

/* ---- Two-column layout — verified live against the real FF DOM ----------------
   Facts from inspection: the name field renders as .ff-name-field-wrapper (NOT
   .ff-el-group); a visible <legend> was occupying the first grid slot; Phone is
   a mask input (name="input_mask"). Explicit placement below. */
@media (min-width: 700px) {
  .fluentform .frm-fluent-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    justify-items: stretch;
  }
  .fluentform .frm-fluent-form legend.ff_screen_reader_title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); margin: 0; padding: 0;
  }
  .fluentform .ff-name-field-wrapper {
    grid-column: 1 / -1; order: 1; margin: 0;
    display: flex; gap: 12px;
  }
  .fluentform .ff-name-field-wrapper .ff-el-group { flex: 1 1 0; min-width: 0; margin: 0; }
  .fluentform .ff-el-group:has(input[type="email"]) { order: 2; grid-column: auto; }
  .fluentform .ff-el-group:has(input[name="input_mask"]) { order: 3; grid-column: auto; }
  .fluentform .ff-el-group:has(select) { order: 4; grid-column: 1 / -1; }
  .fluentform .ff-el-group:has(textarea) { order: 5; grid-column: 1 / -1; }
  .fluentform .ff_submit_btn_wrapper { order: 6; grid-column: 1 / -1; }
}