/*
 * CALCULADORA DE FRETE - Form Component
 */
.form-area {
  background: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
}

.form-section {
  margin-bottom: var(--spacing-xl);
}
.form-section:last-of-type {
  margin-bottom: 0;
}

.section-title {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

.input-group {
  margin-bottom: var(--spacing-lg);
}
.input-group:last-child {
  margin-bottom: 0;
}

.input-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: var(--spacing-md);
  font-size: var(--text-base);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
}
.form-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

.input-unit, .input-currency {
  position: absolute;
  right: var(--spacing-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
}

.input-currency {
  left: var(--spacing-md);
  right: auto;
}

/* Ajusta o padding do input quando há um símbolo de moeda */
.input-wrapper .form-input[data-field="fuelPrice"],
.input-wrapper .form-input[data-field="hourlyRate"],
.input-wrapper .form-input[data-field="extraExpenses"] {
  padding-left: 2.5rem; /* 40px */
}

.action-buttons-section {
  margin-top: var(--spacing-xl);
}

/* --- Estilos de Validação --- */

/* Estilo para o campo de input quando está inválido */
.form-input.invalid {
  border-color: var(--color-error); /* Usando a variável de cor de erro que definimos */
  background-color: #fff0f0; /* Um fundo levemente rosado para destacar */
}

/* Estilo para a mensagem de erro */
.error-message {
  color: var(--color-error);
  font-size: 0.8rem;
  margin-top: 4px;
  display: none; /* Começa escondido por padrão */
  height: 1rem; /* Garante que o layout não "pule" quando a mensagem aparece */
}

/* Classe para tornar a mensagem de erro visível */
.error-message.visible {
  display: block; /* Mostra a mensagem */
}

/* Estilos para o grupo do checkbox de ida e volta */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre o checkbox e o texto */
    margin-top: -5px; /* Ajuste fino para aproximar do campo de cima */
    margin-bottom: 15px; /* Espaço antes da próxima seção */
}

.checkbox-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none; /* Impede que o texto seja selecionado ao clicar */
}

.form-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color); /* Cor do checkbox quando marcado */
}

/* ============================================= */
/* ESTILOS DE VALIDAÇÃO DE ERRO                    */
/* ============================================= */

/* Estilo para a mensagem de erro */
.error-message {
    color: #e74c3c; /* Cor vermelha para o texto do erro */
    font-size: 0.875rem; /* Tamanho da fonte um pouco menor */
    margin-top: 6px; /* Espaço entre o campo e a mensagem */
    display: none; /* ESCONDE a mensagem por padrão */
    width: 100%;
    text-align: left;
}

/* Estilo para o campo de input QUANDO ele tem a classe .is-invalid */
.form-input.is-invalid {
    border-color: #e74c3c; /* Borda vermelha */
    background-color: #fff5f5; /* Fundo levemente rosado */
}

/* Quando o input tem a classe .is-invalid, MOSTRA a mensagem de erro que é sua irmã */
.form-input.is-invalid + .error-message {
    display: block; /* TORNA A MENSAGEM VISÍVEL */
}

/* Espaçamento extra para o checkbox de "ida e volta" */
.checkbox-group {
    margin-top: 1rem; /* Adiciona um espaço de 16px acima */
}