/* ============================================================================
   Inputs Component
   Campos de formulário: input, select, textarea
   ============================================================================ */

/* Base: input, select, textarea */
.input,
select.input,
textarea.input {
  width: 100%;
  padding: var(--space-md) var(--space-md);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-800);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.input::placeholder {
  color: var(--color-neutral-300);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

select.input {
  cursor: pointer;
  appearance: auto;
}

/* Select em linha (ex.: filtros) – não estica 100% */
.input-group .input,
.input--auto {
  width: auto;
  min-width: 10rem;
}

/* Mesmo tamanho de fonte e padding que .btn-sm */
.input-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-md);
  width: auto;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%238A8F98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

textarea.input {
  resize: vertical;
  min-height: 6rem;
}

/* Input com botão dentro (ex.: search) – botão à direita, menor */
.input-with-action {
  display: flex;
  align-items: stretch;
  border: var(--border-thin) solid var(--color-neutral-300);
  border-radius: var(--radius-card);
  background-color: var(--color-neutral-0);
  overflow: hidden;
}

/* Variante em fundo escuro (ex.: hero da listings) */
.bg-secondary .input-with-action {
  border-color: var(--color-secundary-700);
}

.input-with-action:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px rgba(39, 173, 122, 0.2);
}

.input-with-action .input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding-right: var(--space-2);
}

.input-with-action .input:focus {
  box-shadow: none;
}

.input-with-action .btn {
  flex-shrink: 0;
  border-radius: 0;
  margin: 0;
}

.input-with-action .btn-xs {
  padding: var(--space-2) var(--space-4);
}