/* ── Fluent Forms — tema Circle (specificità aumentata) ─────────────────────────── */

.contacts-form-wrap .fluentform {
  --ff-primary-color: var(--color-accent);
  font-family: var(--font-body);
  max-width: var(--container-narrow);
}

.contacts-form-wrap .fluentform .ff-el-group {
  margin-bottom: var(--space-6);
}

.contacts-form-wrap .fluentform .ff-el-input--label label,
.contacts-form-wrap .fluentform label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: inline-block;
}

.contacts-form-wrap .fluentform input[type="text"],
.contacts-form-wrap .fluentform input[type="email"],
.contacts-form-wrap .fluentform input[type="tel"],
.contacts-form-wrap .fluentform input[type="url"],
.contacts-form-wrap .fluentform select,
.contacts-form-wrap .fluentform textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-3) 0;
  width: 100%;
  transition: border-color 0.2s ease;
}

.contacts-form-wrap .fluentform textarea {
  min-height: 140px;
  resize: vertical;
}

.contacts-form-wrap .fluentform input:focus,
.contacts-form-wrap .fluentform select:focus,
.contacts-form-wrap .fluentform textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
  box-shadow: none;
}

.contacts-form-wrap .fluentform input::placeholder,
.contacts-form-wrap .fluentform textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.contacts-form-wrap .fluentform .ff-el-form-check-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contacts-form-wrap .fluentform button[type="submit"],
.contacts-form-wrap .fluentform .ff-btn-submit {
  background-color: var(--color-accent) !important;
  color: var(--color-bg);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.contacts-form-wrap .fluentform button[type="submit"]:hover,
.contacts-form-wrap .fluentform .ff-btn-submit:hover {
  background: var(--color-accent-light);
}

.contacts-form-wrap .fluentform .ff-message-success {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  padding: var(--space-4);
}

.contacts-form-wrap .fluentform .error,
.contacts-form-wrap .fluentform .ff-el-is-error input,
.contacts-form-wrap .fluentform .ff-el-is-error textarea,
.contacts-form-wrap .fluentform .ff-el-is-error select {
  border-bottom-color: #c0392b;
}

.contacts-form-wrap .fluentform .error-message,
.contacts-form-wrap .fluentform .ff-el-form-error {
  color: #c0392b;
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
/* ── Fix checkbox/radio azzerate dal reset globale del tema ─────────────── */

.contacts-form-wrap .fluentform input[type="checkbox"],
.contacts-form-wrap .fluentform input[type="radio"] {
  appearance: auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.contacts-form-wrap .fluentform .ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}