/* Campo di un form (wordpress.md: .field, .field__label, .field__input): etichetta sopra, campo da 52px su fondo
   soft, raggio 12px. Errori di Contact Form 7 in --text-error / --surface-error, mai nel rosso del brand. */
@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .field__label {
    color: var(--text-strong);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
  }

  .field__input {
    width: 100%;
    height: var(--control-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text-strong);
    font: inherit;
    font-size: var(--fs-ui);

    &::placeholder { color: var(--text-muted); opacity: 1; }
    &[aria-invalid="true"] { border-color: var(--text-error); background: var(--surface-error); }
  }

  /* Messaggi di Contact Form 7 sotto il campo e in fondo al form */
  .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: var(--text-error);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
  }

  .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    &:empty { display: none; }
  }

  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.spam .wpcf7-response-output { background: var(--surface-error); color: var(--text-error); }
  .wpcf7 form.sent .wpcf7-response-output { background: var(--surface-soft); color: var(--text-strong); }

  .wpcf7-spinner { display: none; }
  .wpcf7 .hidden-fields-container { display: contents; } /* fieldset dei campi nascosti di CF7: senza bordo né spazio */
  .wpcf7 form.submitting { opacity: .7; }
}