/* ===== Inputs e Formulários - Layout Instagram Clean ===== */

/* Inputs, selects e textareas */
input:not([type="checkbox"]),
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--fonte-size-padrao);
    font-family: var(--fonte-padrao);
    color: var(--cor-texto);
    background-color: var(--card-background);
    border: 1px solid var(--cor-borda);
    border-radius: var(--border-radius);
    outline: none;
    transition: all 0.2s ease-in-out;
}

/* Foco nos campos */
input:not([type="checkbox"]):focus,
select:focus,
textarea:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(61, 42, 232, 0.1);
    background-color: var(--card-background);
}

/* Labels */
label {
    font-weight: 500;
    color: var(--cor-texto);
    margin-bottom: 4px;
    display: inline-block;
}

/* Placeholder mais suave */
::placeholder {
    color: #a0a0a0;
    opacity: 1;
}

/* Campos desabilitados */
input:not([type="checkbox"]):disabled,
select:disabled,
textarea:disabled {
    background-color: var(--cor-secundaria);
    color: #999;
    cursor: not-allowed;
}

/* ===== Selects ===== */

/* Select nativo com seta customizada */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207L0%200h10L5%207z%22%20fill%3D%22%23606062%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    height: 50px; /* mesma altura do select2 */
}

select option[disabled] {
    color: #a0a0a0;
}

/* Textarea */
textarea {
    min-height: 32px;
    resize: vertical;
}

/* ===== Erros de validação ===== */
.input-error {
    border-color: red !important;
}

.input-error-message {
    color: red;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Campo de busca ===== */
.search-input {
    height: 60px;
    border-radius: 30px;
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    padding: 0 2rem;
    transition: all 0.3s ease;
    font-size: 1rem;
    width: 100%;
    background-color: var(--card-background);
}

.search-input:focus {
    box-shadow: 0 0 0 4px rgba(61, 42, 232, 0.2);
    border-color: var(--cor-principal);
    outline: none;
}

.search-btn {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: var(--cor-principal);
    color: var(--card-background);
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    background-color: var(--cor-principal-escura);
    color: white;
}

.search-btn svg {
    transform: scale(1.1);
}

/* ===== Select2 - Igual select normal ===== */

/* Caixa principal (single) */
.select2-container--default .select2-selection--single {
    background-color: var(--card-background);
    border: 2px solid var(--cor-borda);
    border-radius: var(--border-radius);
    height: 50px !important;
    padding: 0 14px;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}

/* Texto dentro do select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 50px !important;
    color: var(--cor-texto) !important;
    font-size: var(--fonte-size-padrao) !important;
    font-family: var(--fonte-padrao) !important;
}

/* Seta do dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    right: 14px !important;
}

/* Foco igual ao select normal */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--cor-principal) !important;
    box-shadow: 0 0 0 3px rgba(61, 42, 232, 0.1) !important;
}

/* Campos desabilitados */
.select2-container {
    background-color: var(--cor-secundaria) !important;
    color: #999 !important;
    cursor: not-allowed !important;
    border: none !important;
}

/* Select2 múltiplo */
.select2-container--default .select2-selection--multiple {
    background-color: var(--card-background);
    border: 1px solid var(--cor-borda);
    border-radius: var(--border-radius);
    padding: 6px 14px;
    min-height: 50px;
}