/* ===========================================================================
   FORMULÁRIOS DE LEAD (form-controle.php + form-envio.php): CAMPOS DE 65px COM
   BORDA DE 2px, ÍCONE VERDE À DIREITA, CAIXA DE ESCOLHA, TURNSTILE E BOTÃO.
   =========================================================================== */

.form-lead label {
    display: block;
    margin-bottom: 5px;
    color: var(--titulo);
    font-weight: 700;
}

.form-lead input[type="text"],
.form-lead input[type="email"],
.form-lead input[type="tel"],
.form-lead textarea {
    display: block;
    width: 100%;
    height: 65px;
    margin-bottom: 30px;
    padding: 0 40px 0 20px;
    border: 2px solid #e4ecf2;
    border-radius: 0;
    background-color: #fff;
    box-shadow: none;
    color: var(--texto);
    font-size: 16px;
    outline: 0;
}

.form-lead textarea {
    min-height: 150px;
    padding: 15px 20px;
    resize: vertical;
}

.form-lead input::placeholder {
    color: #8cb2b2;
    opacity: 1;
}

.form-lead textarea::placeholder {
    color: #757575;
    opacity: 1;
}

.form-lead input:focus,
.form-lead textarea:focus {
    border-color: var(--verde);
}

/* CAMPO INVÁLIDO SÓ FICA VERMELHO DEPOIS QUE A PESSOA MEXE NELE (OU TENTA ENVIAR). */
.form-lead input:user-invalid,
.form-lead textarea:user-invalid {
    border-color: #a94442;
}

/* CAIXA BRANCA DO FORMULÁRIO, COM TÍTULO DE FIO VERDE À ESQUERDA (FALE CONOSCO,
   PROPOSTA, DEPOIMENTO). */
.form-caixa {
    padding: 40px 50px 50px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}

.form-caixa__titulo {
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: 2px solid var(--verde);
    font-size: 22px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .form-caixa { padding: 40px 25px 50px; }
}

/* COLUNAS DENTRO DE UMA .linha: METADE E QUARTO A PARTIR DE 768px; TERÇO A PARTIR
   DE 992px (METADE ENTRE 768 E 991px). ABAIXO DE 768px, TODAS INTEIRAS. __inteiro: A
   LINHA TODA EM QUALQUER LARGURA (O TELEFONE DA PROPOSTA, SEM O TIPO DE CONTATO AO LADO). */
.form-lead__metade,
.form-lead__terco,
.form-lead__quarto,
.form-lead__inteiro {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .form-lead__metade,
    .form-lead__terco { width: 50%; }
    .form-lead__quarto { width: 25%; }
}

@media (min-width: 992px) {
    .form-lead__terco { width: 33.33333333%; }
}

/* ÍCONE VERDE À DIREITA DO CAMPO, 20px DA BORDA E CENTRADO NOS 65px DA CAIXA (A MEDIDA
   É FIXA: EM %, O CENTRO DEPENDIA DA MARGEM DE BAIXO DO CAMPO). */
.campo-icone {
    position: relative;
}

.campo-icone > .icone {
    position: absolute;
    top: 32.5px;
    right: 20px;
    z-index: 1;
    color: var(--verde);
    transform: translateY(-50%);
    pointer-events: none;
}

.campo-icone--texto > .icone {
    top: 30px;
}

/* NA COLUNA (.form-lead__metade/__terco/__quarto) O CAMPO FICA 15px PARA DENTRO: O ÍCONE
   ACOMPANHA, PARA FICAR A 20px DA BORDA DO CAMPO E NÃO DA COLUNA. */
.form-lead__metade.campo-icone > .icone,
.form-lead__terco.campo-icone > .icone,
.form-lead__quarto.campo-icone > .icone,
.form-lead__inteiro.campo-icone > .icone {
    right: 35px;
}

/* CAIXA DE ESCOLHA: SETA VERDE PARA BAIXO À DIREITA, SEM O "V" CINZA. O TEXTO
   ESCOLHIDO FICA EM NEGRITO. VALE PARA O .seletor E PARA O NATIVO SEM SCRIPT. */
.form-lead select,
.form-lead .seletor {
    display: block;
    width: 100%;
    height: 65px;
    margin-bottom: 30px;
    padding: 0 30px 0 18px;
    border: 2px solid #e5eaee;
    border-radius: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23256c4a' d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E") no-repeat right 20px center / 10.5px 14px;
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 14px;
    font-weight: 400;
    line-height: 60px;
    cursor: pointer;
}

.form-lead select {
    font-weight: 700;
    appearance: none;
}

.form-lead .seletor__atual {
    font-weight: 700;
}

.form-lead .seletor::after {
    display: none;
}

/* O WIDGET É REDUZIDO A PARTIR DO CANTO ESQUERDO QUANDO A COLUNA NÃO CABE 300px. */
.form-lead__turnstile .cf-turnstile {
    width: 300px;
    transform-origin: 0 0;
}

/* BOTÃO DE ENVIO: VERDE DO BOOTSTRAP (NÃO O DA MARCA), SEM A FAIXA BRANCA DO HOVER. */
.botao--enviar {
    border-color: #198754;
    background-color: #198754;
    text-transform: uppercase;
}

.botao--enviar::after {
    display: none;
}

.botao--enviar:hover {
    border-color: #146c43;
    background-color: #157347;
    color: #fff;
}

.botao--enviar:disabled {
    opacity: .65;
    cursor: wait;
}