/**
 * FLUENT FORMS — SLADĚNÍ S DESIGN SYSTEMEM
 *
 * Cizí plugin, cizí HTML/třídy (frm-fluent-form, ff-el-*) — nemůžeme
 * upravovat jeho výstup, jen ho stylovat shora přes CSS. Vše cíleno
 * výhradně na `.frm-fluent-form` a její potomky, ať se to nedostane
 * mimo formulář. Barvy/radius/mezery čtou naše tokeny (Fáze 0,
 * rozhodnutí #4), ne natvrdo zapsané hodnoty.
 */

.frm-fluent-form {
  font-family: var(--font-body);
  max-width: 100%;
}

.frm-fluent-form .ff-el-input--label label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: inline-block;
}

.frm-fluent-form .ff-el-is-required label::after {
  content: ' *';
  color: var(--color-error);
}

.frm-fluent-form .ff-el-form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.frm-fluent-form textarea.ff-el-form-control {
  min-height: 120px;
  resize: vertical;
}

.frm-fluent-form .ff-el-group {
  margin-bottom: var(--space-4);
}

.frm-fluent-form .ff-btn-submit {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  background: var(--color-action);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.frm-fluent-form .ff-btn-submit:hover {
  background: var(--color-action-hover);
  color: var(--color-text-inverse);
}

/* Chybové/úspěšné stavy, pokud je Fluent Forms vypíše se svými třídami */
.frm-fluent-form .error,
.frm-fluent-form .ff-el-form-control.is-invalid {
  border-color: var(--color-error);
}
.frm-fluent-form .error-message,
.frm-fluent-form .ff-error-message {
  color: var(--color-error);
  font-size: var(--text-caption);
  margin-top: var(--space-1);
}
.frm-fluent-form .ff-message-success {
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}