/* --- 1. Inputs, Textareas e Selects --- */
form[class*="forminator-"] .forminator-input,
form[class*="forminator-"] .forminator-textarea,
form[class*="forminator-"] .forminator-select {
    display: block !important;
    width: 100% !important;
    padding: 0.8rem 0.75rem !important;
    font-size: 1rem !important;
    color: #212529 !important;
    background-color: #fff !important;
    /* Borda primária sutil no estado normal */
    border: 1px solid var(--bs-primary) !important; 
    border-radius: 0.375rem !important;
    appearance: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Foco: Borda da cor primária e sombra brilhante primária */
form[class*="forminator-"] .forminator-input:focus,
form[class*="forminator-"] .forminator-textarea:focus,
form[class*="forminator-"] .forminator-select:focus {
    border-color: var(--bs-primary) !important;
    outline: 0 !important;
    /* Cria aquele brilho azul (ou da sua cor primária) ao redor do input */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* --- 2. Botões --- */
.forminator-button {
    background-color: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 0.375rem !important;
    padding: 0.8rem 1.25rem !important;
    transition: all 0.2s ease-in-out !important;
}

.forminator-button:hover {
    background-color: var(--bs-primary) !important;
    filter: brightness(0.9); /* Escurece levemente o botão no hover */
    color: #fff !important;
}

/* --- 3. Checkbox Primário --- */
.forminator-checkbox .forminator-checkbox-input:checked + .forminator-checkbox-box {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Estilo para a mensagem de erro do Forminator */
.forminator-error-message {
    display: block; /* Garante que o Bootstrap mostre a mensagem */
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em; /* Tamanho padrão do Bootstrap para feedback */
    color: var(--bs-danger); /* Usa a cor de erro do seu Bootstrap */
}

/* Adiciona a borda vermelha ao input quando houver erro */
.forminator-field.forminator-has-error .form-control {
    border-color: var(--bs-danger) !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* 1. Estilização das Abas (Pills) */
.nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.nav-pills .nav-link {
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
}

.nav-pills .nav-link:hover {
    background-color: var(--bs-primary);
    color: #ffffff;
}

/* 1. Força a cor de fundo branca e a borda no menu do Select2 */
/* 1. O container que de fato é a janela flutuante */
.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    overflow: hidden !important; /* Garante que os cantos arredondados funcionem */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
}

/* 2. Força o fundo branco na lista de resultados */
.select2-results {
    background-color: #ffffff !important;
}

.select2-results__options {
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Estilização de cada item da lista */
.select2-results__option {
    background-color: #ffffff !important;
    color: #212529 !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
}

/* 4. Estilo do item selecionado (hover) com sua cor primária */
.select2-results__option--highlighted {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* 5. Caso o item já esteja selecionado no form */
.select2-results__option[aria-selected="true"] {
    background-color: #e9ecef !important; /* Um cinza claro para indicar seleção */
    color: #212529 !important;
}

/* --- Estilo 100% Bootstrap 5 para Selects do Forminator --- */

/* Força o container do select a ter o comportamento de um .form-select do BS5 */
form[class*="forminator-"] .forminator-field select.forminator-select {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important; /* Padding igual ao BS5 */
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    border: 1px solid #dee2e6 !important; /* Borda cinza suave padrão BS */
    border-radius: 0.375rem !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    appearance: none !important;
}

/* Foco estilo Bootstrap 5 */
form[class*="forminator-"] .forminator-field select.forminator-select:focus {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* --- Ajuste se estiver usando Select2 (O que o Forminator geralmente usa) --- */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-left: 0 !important;
    color: #212529 !important;
}

/* Remove a borda azul padrão do select2 e alinha com a nossa */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}