/* Acf form fields */
.elementor-widget-new_user .acf-form-fields{
	transform:translatex(0px) translatey(0px);
}

body,
input,
select,
textarea,
button,
.acf-label,
.acf-field p.description,
.select2-container--default .select2-selection--single,
.select2-selection__rendered,
.select2-search__field {
    font-family: 'Inter', sans-serif !important;
}


/* Input */
body .acf-form-fields .acf-fields input[id^="acff"], 
body .acf-field-textarea .acf-input textarea[id^="acff"],
body .acf-form-fields .acf-input select[id^="acff"]{
	/*padding-left:8px;
	margin-left:5px;
	transform:translatex(0px) translatey(0px);
	background-color:#e8f0fe;
	border-style:solid;*/
	
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #cfcfe8;
    border-radius: 3px;
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    outline: none;
}

/*
 * CSS para estilizar campos Select2
 * Baseado no seu estilo de campos de formulário.
*/

/* 1. O contêiner principal do Select2 */
/* Define a largura e o alinhamento geral. */
body .select2-container--default .select2-selection--single {
    width: 100%;
    height: auto !important; /* Permite que a altura se ajuste ao padding */
    padding: 8px;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #cfcfe8;
    border-radius: 3px;
    outline: none;
    
    /* Transições para o efeito de foco */
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

/* 2. O texto que aparece quando uma opção é selecionada */
/* Garante que a cor do texto e o alinhamento vertical estejam corretos. */
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
    line-height: 1.5; /* Mantém o alinhamento com a altura */
    padding-left: 0; /* Remove o padding padrão para usar o do contêiner */
}

/* 3. A seta do dropdown */
/* Posiciona a seta corretamente na vertical dentro da nova altura do campo. */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    /*height: 100%;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 1px;*/
    /*width: 20px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 24px;
    height: 24px;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0; /* Centraliza a seta internamente */
}


/* 4. Estilo de FOCO (quando o campo é clicado) */
/* Cria um brilho azul suave, similar a frameworks modernos, e muda a cor da borda. */
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default .select2-selection--single:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
    background-color: #fff;
}

/* 5. (Bônus) Estilo do painel que abre com as opções */
/* Garante que o painel dropdown tenha a mesma borda do campo. */
body .select2-container--default .select2-dropdown {
    /*border: 1px solid #80bdff;*/
    border-radius: 3px;
}

/*
 * ===================================================================
 * CSS ADICIONAL para campos Select2 de MÚLTIPLA SELEÇÃO
 * ===================================================================
*/

/* 1. A Caixa Principal (que contém as "pills") */
/* Aplicamos o mesmo estilo de borda, padding e fundo. */
body .select2-container--default .select2-selection--multiple {
    width: 100%;
    /*min-height: 58px;*/
    padding: 8px 15px; /* Padding ajustado para acomodar as pills */
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #cfcfe8;
    border-radius: 3px;
    outline: none;
    cursor: text;

    /* Transições para o efeito de foco */
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* 2. As "Pills" dos Itens Selecionados */
/* Estilo para cada tag/opção que o usuário seleciona. */
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e9ecef; /* Cor de fundo cinza claro para a pill */
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 3px 8px;
    color: #495057;
    margin: 4px 4px 2px 0; /* Espaçamento entre as pills */
}

/* 3. O Botão "X" para Remover a Pill */
/* Estiliza o 'x' que remove uma opção selecionada. */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #6c757d;
    font-weight: bold;
    margin-right: 5px; /* Espaço entre o 'x' e o texto da pill */
    float: left; /* Alinha o 'x' à esquerda dentro da pill */
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #343a40; /* Cor mais escura ao passar o mouse */
    cursor: pointer;
}

/* 4. Estilo de FOCO para a caixa de múltipla seleção */
/* Aplica o mesmo brilho azul quando o campo está ativo. */
body .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f59e0b;
    box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25); /* Laranja */
    background-color: #fff !important;
}

/* 5. Campo de busca (onde o usuário digita) */
/* Garante que o placeholder do campo de busca seja visível */
body .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 5px;
}

body .select2-container--default .select2-search--inline .select2-search__field::-webkit-input-placeholder { color: #6c757d; }
body .select2-container--default .select2-search--inline .select2-search__field::-moz-placeholder { color: #6c757d; }
body .select2-container--default .select2-search--inline .select2-search__field:-ms-input-placeholder { color: #6c757d; }
body .select2-container--default .select2-search--inline .select2-search__field:-moz-placeholder { color: #6c757d; }

/* Input * /
.acf-field-user-email .acf-input input[type=email]{
	background-color:#e8f0fe;
}


/* Text Area * /
.acf-field-textarea .acf-input textarea{
	background-color:#e8f0fe;
}*/

/* Select * /
.acf-form-fields .acf-input select{
	background-color:#e8f0fe;
}

/* Span Tag */
.acf-input > span > span > span,
.acf-input > span > span > span > span {
    background-color: #fff !important;
}


/* Acf input */
/*.acf-form-fields .acf-field-submit-button .acf-input{
	right:-200px;
	left:242px;
	transform:translatex(0px) translatey(0px);
}*/
.acf-form-fields .acf-field-submit-button .acf-input button, 
body .elementor-471 .elementor-element.elementor-element-9f35843 .eael-login-form .eael-lr-btn{
    width: calc(100% - 13px);
    background-color: #D85E36;
    box-shadow: 3px 3px 0 #ffffff, 10px 10px 0 #44548a;
    font-family: "Taberna", Sans-serif;
    font-size: 2rem;
    line-height: 2rem;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-style: none;
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    padding: 20px 28px 26px 28px;
    margin: 0;
    height: auto;
}

.acf-form-fields .acf-field-submit-button .acf-input button:hover,
body .elementor-471 .elementor-element.elementor-element-9f35843 .eael-login-form .eael-lr-btn:hover {
    background-color: #44548a;
    box-shadow: 2px 2px 0 #ffffff, 7px 7px 0 #d85e36;
}

.eael-lr-form-wrapper .eael-lr-form-loader-wrapper {
    width: 100%;
}

/* Button */
.acf-field-submit-button .acf-input .fea-submit-button{
	background-color:#d85e36;
	color:#ffffff;
	font-family:'tab';
}

/* Label */
.acf-form-fields .acf-field-text label{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* 640px and smaller screen sizes */
@media (max-width:640px){

	/* Input */
	.acf-form-fields .acf-fields input[type=text]{
		border-style:solid;
	}
	
	/* Button */
	.acf-field-submit-button .acf-input .fea-submit-button{
		border-top-left-radius:8px;
		border-top-right-radius:8px;
		border-bottom-left-radius:8px;
		border-bottom-right-radius:8px;
		transform:translatex(0px) translatey(0px);
		font-family:Georgia,Times,'Times New Roman',serif;
		font-size:18px;
		
	}
	
}


/* Input */
.acf-form-fields .acf-fields input[type=text]{
	background-color:#e8f0fe;
}

/* Input */
.acf-form-fields ul input[type=search]{
	background-color:#e8f0fe !important;
}

/* Input */
.acf-form-fields .acf-fields input[type=text]{
	background-color:#e8f0fe;
	border-color:#000000;
	border-style:solid;
	border-right-width:1px;
	border-right-style:solid;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-left-width:1px;
	border-left-style:solid;
	border-width:1px;
	width:253px;
}

/* Input */
.acf-form-fields ul input[type=search]{
	background-color:#e8f0fe !important;
}

/* Input */
.cep .acf-input input[type=text]{
	padding-right:0px;
	border-right-width:1px;
	width:135px;
}