.elementor-27525 .elementor-element.elementor-element-6f192e5b{--display:flex;}.elementor-27525 .elementor-element.elementor-element-9bc9293 .elementor-icon-wrapper{text-align:end;}.elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );color:#01CA1B;}.elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-framed .elementor-icon, .elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-framed .elementor-icon, .elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-framed .elementor-icon{background-color:#01CA1B;}.elementor-27525 .elementor-element.elementor-element-9bc9293.elementor-view-stacked .elementor-icon svg{fill:#01CA1B;}.elementor-27525 .elementor-element.elementor-element-9bc9293 .elementor-icon{font-size:29px;border-width:0px 0px 0px 0px;}.elementor-27525 .elementor-element.elementor-element-9bc9293 .elementor-icon svg{height:29px;}.elementor-27525 .elementor-element.elementor-element-05caf31{z-index:9999;}#elementor-popup-modal-27525 .dialog-widget-content{background-color:#02010100;margin:0px 10px 10px 0px;}#elementor-popup-modal-27525 .dialog-message{width:119px;height:auto;}#elementor-popup-modal-27525{justify-content:flex-end;align-items:flex-end;}/* Start custom CSS for html, class: .elementor-element-05caf31 */<style>
    /* BOTÃO FLUTUANTE DO WHATSAPP COM TEXTO */
    #floating-chat-btn {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        background-color: #25d366 !important;
        color: #FFFFFF !important;
        padding: 0 20px 0 15px !important;
        height: 60px !important;
        border-radius: 30px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
        cursor: pointer !important;
        z-index: 2147483647 !important;
        border: 2px solid #FFFFFF !important;
        pointer-events: auto !important;
        transition: transform 0.3s ease, background-color 0.3s ease !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    }

    #floating-chat-btn:hover {
        transform: scale(1.05) !important;
        background-color: #20ba5a !important;
    }

    #floating-chat-btn svg {
        width: 32px !important;
        height: 32px !important;
        fill: #FFFFFF !important;
        pointer-events: none !important;
        flex-shrink: 0 !important;
    }

    #floating-chat-btn span {
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        text-transform: none !important;
    }

    /* JANELA FLUTUANTE */
    #floating-chat-window {
        position: fixed !important;
        bottom: 105px !important;
        right: 30px !important;
        width: 350px !important;
        max-width: 90vw !important;
        z-index: 2147483647 !important;
        display: none;
        background: #002866 !important;
        padding: 25px 20px !important;
        border-radius: 20px !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
        border: 2px solid #ffc107 !important;
        color: #FFF !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

    #floating-chat-window h2 {
        color: #ffc107 !important;
        font-size: 20px !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        text-transform: uppercase !important;
    }

    #floating-chat-window select, 
    #floating-chat-window input {
        width: 100% !important;
        padding: 14px !important;
        margin-bottom: 15px !important;
        border-radius: 30px !important;
        border: none !important;
        font-size: 15px !important;
        font-weight: bold !important;
        box-sizing: border-box !important;
        color: #0f172a !important;
        background-color: #ffffff !important;
        outline: none !important;
    }

    #floating-chat-window select {
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 16px !important;
        cursor: pointer !important;
    }

    #floating-chat-window button.action-btn {
        width: 100% !important;
        padding: 14px !important;
        background-color: #ffc107 !important;
        color: #002866 !important;
        border: none !important;
        border-radius: 30px !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4) !important;
    }

    #floating-chat-window button.close-btn {
        background: none !important;
        border: none !important;
        color: #ffc107 !important;
        font-size: 22px !important;
        float: right !important;
        cursor: pointer !important;
        margin-top: -10px !important;
    }

    @media (max-width: 480px) {
        #floating-chat-btn span {
            display: none !important;
        }
        #floating-chat-btn {
            width: 60px !important;
            height: 60px !important;
            padding: 0 !important;
            justify-content: center !important;
            border-radius: 50% !important;
        }
    }
<\/style>

<!-- BOTÃO COM ÍCONE DO WHATSAPP E TEXTO -->
<div id="floating-chat-btn" onclick="abrirJanelaChat()" title="Fale no WhatsApp">
    <svg viewBox="0 0 24 24">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
    </svg>
    <span>Fale no WhatsApp</span>
</div>

<!-- JANELA DO FORMULÁRIO -->
<div id="floating-chat-window">
    <button class="close-btn" onclick="abrirJanelaChat()">&times;</button>
    <h2>Orçamento Rápido</h2>

    <!-- ETAPA 1 -->
    <div id="janela-step-1">
        <select id="j-localidade">
            <option value="" disabled selected>Selecione a Localidade</option>
            <option value="São Paulo (Capital)">São Paulo (Capital)</option>
            <option value="Barueri">Barueri</option>
            <option value="Campinas">Campinas</option>
            <option value="Cotia">Cotia</option>
            <option value="Embu das Artes">Embu das Artes</option>
            <option value="Ferraz de Vasconcelos">Ferraz de Vasconcelos</option>
            <option value="Franco da Rocha">Franco da Rocha</option>
            <option value="Guarulhos">Guarulhos</option>
            <option value="Itaquaquecetuba">Itaquaquecetuba</option>
            <option value="Jundiaí">Jundiaí</option>
            <option value="Litoral">Litoral</option>
            <option value="Mairiporã">Mairiporã</option>
            <option value="Osasco">Osasco</option>
            <option value="Santana de Parnaíba">Santana de Parnaíba</option>
            <option value="Santo André">Santo André</option>
            <option value="Suzano">Suzano</option>
            <option value="Outra">Outra</option>
        </select>

        <select id="j-servico">
            <option value="" disabled selected>Qual o serviço precisa?</option>
            <option value="Limpeza">Limpeza</option>
            <option value="Construção">Construção</option>
            <option value="Manutenção">Manutenção</option>
            <option value="Instalação">Instalação</option>
        </select>

        <button class="action-btn" onclick="irProximo()">Próximo</button>
    </div>

    <!-- ETAPA 2 -->
    <div id="janela-step-2" style="display: none;">
        <input type="text" id="j-nome" placeholder="Seu Nome">
        <input type="tel" id="j-whatsapp" placeholder="DDD + Whatsapp" oninput="MascaraWhats(this)">
        
        <div style="display: flex; gap: 10px;">
            <button class="action-btn" style="background: rgba(255,255,255,0.2); color:#FFF;" onclick="irVoltar()">Voltar</button>
            <button class="action-btn" onclick="enviarForm(this)">Falar com a gente</button>
        </div>
    </div>
</div>

<script>
function abrirJanelaChat() {
    var win = document.getElementById('floating-chat-window');
    if (win) {
        win.style.display = (win.style.display === 'block') ? 'none' : 'block';
    }
}

// Ouve cliques em qualquer botão do site que tenha a classe "abrir-orcamento"
document.addEventListener('click', function(e) {
    var target = e.target.closest('.abrir-orcamento');
    if (target) {
        e.preventDefault();
        abrirJanelaChat();
    }
});

function irProximo() {
    var loc = document.getElementById('j-localidade').value;
    var serv = document.getElementById('j-servico').value;

    if (!loc || !serv) {
        alert("Por favor, selecione a localidade e o serviço.");
        return;
    }
    if (loc === "Outra") {
        alert("Atendemos apenas as localidades listadas.");
        return;
    }

    document.getElementById('janela-step-1').style.display = 'none';
    document.getElementById('janela-step-2').style.display = 'block';
}

function irVoltar() {
    document.getElementById('janela-step-2').style.display = 'none';
    document.getElementById('janela-step-1').style.display = 'block';
}

function MascaraWhats(input) {
    var x = input.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,5})(\d{0,4})/);
    input.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
}

function enviarForm(btn) {
    var scriptUrl = "https://script.google.com/macros/s/AKfycbwCGA47j555v31miuYFp3_3XWOM5kBHMQstiXJv-U5s_3C1fqlO2U_k9tn1OcCuVug/exec";
    var nome = document.getElementById('j-nome').value.trim();
    var whats = document.getElementById('j-whatsapp').value.trim();
    var loc = document.getElementById('j-localidade').value;
    var serv = document.getElementById('j-servico').value;

    if (!nome || !whats) {
        alert("Preencha seu nome e WhatsApp.");
        return;
    }

    btn.disabled = true;
    btn.innerText = "Enviando...";

    var formData = new URLSearchParams();
    formData.append("Localidade", loc);
    formData.append("Servico", serv);
    formData.append("Nome", nome);
    formData.append("Whatsapp", whats);

    fetch(scriptUrl, {
        method: 'POST',
        body: formData,
        mode: 'no-cors'
    }).catch(function(err) {});

    var numeroWhatsApp = "5511967803179";
    if (loc === "São Paulo (Capital)" || loc === "Guarulhos" || loc === "Mairiporã") {
        numeroWhatsApp = "5511969434769";
    }

    var mensagem = encodeURIComponent("Olá, meu nome é " + nome + ", sou de " + loc + ", preciso de " + serv + " e gostaria de um orçamento.");
    
    setTimeout(function() {
        window.location.href = "https://wa.me/" + numeroWhatsApp + "?text=" + mensagem;
    }, 800);
}
</script>/* End custom CSS */