/* ============================================
   KUMANI — COMPONENTE: FORM INPUT
   Usado em /servicos (cotação), Contacto e Checkout.
   ============================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-secondary);
}

.field__label .field__required {
  color: var(--color-danger);
  margin-left: var(--space-1);
}

.field__input,
.field__select,
.field__textarea {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  padding: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.field__textarea {
  resize: vertical;
  min-height: 120px;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--color-brand-primary);
}

/* --- Estado de erro --- */
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-danger);
}

.field__message {
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}

.field--error .field__message {
  color: var(--color-danger);
}

/* --- Estado de sucesso (ex.: confirmação após validação) --- */
.field--success .field__input {
  border-color: var(--color-success);
}

/* --- Checkbox de consentimento --- */
.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}

.field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-brand-primary);
  flex-shrink: 0;
}

.field--checkbox .field__label {
  text-transform: none;
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
}

/* --- Botão de submissão com estado de carregamento --- */
.btn[data-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-neutral-0);
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

.btn--secondary[data-loading="true"]::after {
  border-color: rgba(27, 27, 27, 0.25);
  border-top-color: var(--color-text-primary);
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* --- Mensagem de resultado do formulário (sucesso/erro geral) --- */
.form-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  margin-top: var(--space-4);
}

.form-message--success {
  background: rgba(46, 125, 50, 0.1);
  color: var(--color-brand-green-accessible);
}

.form-message--error {
  background: rgba(220, 20, 60, 0.08);
  color: var(--color-danger);
}