/* Fluent Forms → styled to match the Emma design (.contact-form / .input / .field).
   Loaded after Fluent Forms' own stylesheet, so !important is needed throughout.
   Scope: .emma-ff (+ --contact modifier). */

/* Two-column field grid (naam+bedrijf, email+telefoon); the rest span full width. */
.emma-ff--contact .fluentform fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  border: 0;
  margin: 0;
  padding: 0;
}
.emma-ff--contact .fluentform .ff-el-group { margin: 0 !important; }
.emma-ff--contact .fluentform .ff-el-group:has(textarea),
.emma-ff--contact .fluentform .ff-el-group:has(select),
.emma-ff--contact .fluentform .ff-el-group:has(input[name="privacy[]"]),
.emma-ff--contact .fluentform .ff_submit_btn_wrapper { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .emma-ff--contact .fluentform fieldset { grid-template-columns: 1fr; }
}

/* Labels */
.emma-ff .fluentform .ff-el-input--label label {
  font-weight: var(--weight-semibold) !important;
  color: var(--text-heading) !important;
  font-size: var(--fs-small) !important;
  margin-bottom: var(--space-2) !important;
}
.emma-ff .fluentform .ff-el-is-required { color: var(--color-error) !important; }

/* Inputs, textarea, select */
.emma-ff .fluentform input.ff-el-form-control,
.emma-ff .fluentform textarea.ff-el-form-control,
.emma-ff .fluentform select {
  width: 100% !important;
  font-size: var(--fs-body) !important;
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line-300) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.6875rem 0.875rem !important;
  min-height: 48px !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}
.emma-ff .fluentform textarea.ff-el-form-control { min-height: 128px !important; }
.emma-ff .fluentform input.ff-el-form-control:focus,
.emma-ff .fluentform textarea.ff-el-form-control:focus,
.emma-ff .fluentform select:focus {
  border-color: var(--blue-600) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}
.emma-ff .fluentform select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  padding-right: 2.5rem !important;
}

/* Checkbox (privacy consent) */
.emma-ff .fluentform .ff-el-group:has(input[name="privacy[]"]) .ff-el-input--label { margin: 0 !important; }
.emma-ff .fluentform .ff-el-form-check { display: flex !important; align-items: flex-start !important; gap: var(--space-3) !important; }
.emma-ff .fluentform .ff-el-form-check-label { font-size: var(--fs-small) !important; color: var(--text-body) !important; }
.emma-ff .fluentform input[type=checkbox] {
  accent-color: var(--color-accent) !important;
  width: 20px !important; height: 20px !important; min-height: 0 !important;
  margin-top: 2px !important; flex: none !important;
}

/* Submit button → design .btn--primary --lg */
.emma-ff .fluentform .ff-btn-submit {
  display: inline-flex !important; align-items: center !important; gap: var(--space-2) !important;
  background: var(--color-accent) !important; color: var(--text-on-accent) !important;
  border: 2px solid var(--color-accent) !important; border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important; font-size: 1.0625rem !important; font-weight: var(--weight-semibold) !important;
  min-height: 54px !important; padding: 0.9rem 1.75rem !important; box-shadow: none !important; width: auto !important;
  transition: var(--transition-colors) !important;
}
.emma-ff .fluentform .ff-btn-submit:hover { background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; }

/* Validation + success */
.emma-ff .fluentform .ff-el-is-error input,
.emma-ff .fluentform .ff-el-is-error textarea,
.emma-ff .fluentform .ff-el-is-error select { border-color: var(--color-error) !important; }
.emma-ff .fluentform .error-text, .emma-ff .fluentform .text-danger { color: var(--color-error-text) !important; font-size: var(--fs-caption) !important; }
.emma-ff .ff-message-success {
  background: var(--color-success-surface) !important; color: var(--color-success) !important;
  border: 1px solid var(--color-success) !important; border-radius: var(--radius-md) !important; padding: var(--space-5) !important;
}