/* Form pattern ibrido Fondix + Bootstrap Italia (accessibilità PA) */

.fx-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fx-form-group,
.ep-app .field.fx-form-group,
.ep-app .fx-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fx-form-label {
  font-family: var(--fx-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fx-ink);
  line-height: 1.4;
}

.fx-form-required {
  color: var(--fx-error);
  font-weight: 700;
  margin-left: 0.125rem;
}

.fx-form-hint {
  font-size: 0.8125rem;
  color: var(--fx-ink-muted);
  line-height: 1.45;
  margin: 0;
}

.fx-form-control,
.ep-app .fx-form-control {
  font-family: var(--fx-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fx-ink);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border-strong);
  border-radius: var(--fx-radius-sm);
  padding: 0.625rem 0.75rem;
  width: 100%;
  transition: border-color var(--fx-duration) var(--fx-ease-out),
              box-shadow var(--fx-duration) var(--fx-ease-out);
}

.fx-form-control::placeholder {
  color: var(--fx-ink-disabled);
}

.fx-form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--fx-navy-light);
}

.fx-form-control:focus {
  outline: none;
  border-color: var(--fx-navy-mid);
  box-shadow: var(--fx-focus-ring);
}

.fx-form-control:disabled {
  background: var(--fx-surface-muted);
  color: var(--fx-ink-disabled);
  cursor: not-allowed;
}

.fx-form-control--invalid,
.fx-form-control.invalid {
  border-color: var(--fx-error);
}

.fx-form-control--invalid:focus,
.fx-form-control.invalid:focus {
  box-shadow: 0 0 0 3px oklch(52% 0.18 25 / 0.25);
}

.fx-form-feedback {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
}

.fx-form-feedback--error,
.validation-message {
  color: var(--fx-error);
  font-weight: 500;
}

.fx-form-feedback--success {
  color: var(--fx-success);
}

/* Bridge: classi legacy EnergiaPro */
.ep-app .field .input.fx-form-control,
.ep-app .input.fx-form-control {
  border: 1px solid var(--fx-border-strong);
}

.ep-in-fondix .fx-form-control:focus {
  border-color: var(--fx-navy-mid);
}