<script>
    import { onMount } from 'svelte';
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';

    import basspagoPagementos from '$lib/assets/basspago-pagamentos.png';
    import planoPf from '$lib/assets/plano-pf.svg';
    import planoPj from '$lib/assets/plano-pj.svg';
    import planoPro from '$lib/assets/plano-pro.svg';

    const beneficios = [
        {
            title: 'Segurança',
            description: 'Antifraude nativo em todas as transações, protegendo seu negócio automaticamente.'
        },
        {
            title: 'Mais economia',
            description: 'Economize tempo, aumente a produtividade e reduza custos de integração em múltiplas plataformas.'
        },
        {
            title: 'Alta escalabilidade',
            description: 'Cresça de 100 a 1.000.000 com nossa plataforma, projetada para escalar sem fricção'
        },
        {
            title: 'Suporte de verdade',
            description: 'Nosso time garante atendimento rápido e eficiente, sem filas de espera e SLA demorado.'
        }
    ];

    const planos = [
        {
            id: 'pf',
            icon: planoPf,
            title: 'Plano PF',
            description: 'Plano essencial para começar a receber via Pix com agilidade e zero burocracia.',
            price: 'ZERO',
            priceLabel: 'Mensalidade',
            recursos: [
                'Pix',
                'Pix saque',
                'Pagamento de contas',
                'Extrato',
            ],
            isPro: false
        },
        {
            id: 'pj',
            icon: planoPj,
            title: 'Plano PJ',
            description: 'Tudo que sua empresa precisa para pagar, receber e escalar.',
            price: 'ZERO',
            priceLabel: 'Mensalidade',
            recursos: [
                'Pix',
                'Emissão de cobrança',
                'Pagamento',
                'Fluxo de aprovação',
                'Agendamentos',
                'Pagamento em lote',
                'Controle de acessos'
            ],
            isPro: false
        },
        {
            id: 'pro',
            icon: planoPro,
            title: 'Plano PRO',
            description: 'Para empresas que precisam de soluções de pagamento personalizadas.',
            info: 'Tenha uma solução segura e flexível, com APIs completas e integração simples para automatizar toda a jornada financeira da sua empresa.',
            recursos: [
                'APIs Pix (cash in e cash out)',
                'API de pagamento',
                'API de subcontas',
                'Webhooks',
                'Conta Escrow'
            ],
            isPro: true
        }
    ];

    let formData = {
        nome: '',
        celular: '',
        email: '',
        empresa: '',
        setor: '',
        funcionarios: '',
        faturamento: '',
        detalhes: ''
    };

    let errors = {};
    let loading = false;
    let success = false;
    let message = '';

    const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbxwB7e3k4_RXX5HaX0Y77AMtTjxTUPWRjFttaFagQ5QXYOxrB4finzgvAlcmOxPxPheNw/exec';

    function validateField(field) {
        const newErrors = { ...errors };

        switch (field) {
            case 'nome':
                if (!formData.nome) {
                    newErrors.nome = 'Nome é obrigatório';
                } else {
                    delete newErrors.nome;
                }
                break;
            case 'celular':
                const celularDigits = formData.celular.replace(/\D/g, '');
                if (!formData.celular) {
                    newErrors.celular = 'Celular é obrigatório';
                } else if (celularDigits.length < 10 || celularDigits.length > 11) {
                    newErrors.celular = 'Celular inválido';
                } else {
                    delete newErrors.celular;
                }
                break;
            case 'email':
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!formData.email) {
                    newErrors.email = 'E-mail é obrigatório';
                } else if (!emailRegex.test(formData.email)) {
                    newErrors.email = 'E-mail inválido';
                } else {
                    delete newErrors.email;
                }
                break;
            case 'empresa':
                if (!formData.empresa) {
                    newErrors.empresa = 'Nome da empresa é obrigatório';
                } else {
                    delete newErrors.empresa;
                }
                break;
            case 'setor':
                if (!formData.setor) {
                    newErrors.setor = 'Setor de atuação é obrigatório';
                } else {
                    delete newErrors.setor;
                }
                break;
            case 'funcionarios':
                if (!formData.funcionarios) {
                    newErrors.funcionarios = 'Número de funcionários é obrigatório';
                } else {
                    delete newErrors.funcionarios;
                }
                break;
            case 'faturamento':
                if (!formData.faturamento) {
                    newErrors.faturamento = 'Faturamento anual é obrigatório';
                } else {
                    delete newErrors.faturamento;
                }
                break;
        }

        errors = newErrors;
    }

    function validateAll() {
        Object.keys(formData).forEach(field => {
            if (field !== 'detalhes') {
                validateField(field);
            }
        });
        return Object.keys(errors).length === 0;
    }

async function submitForm(e) {
    e.preventDefault();
    
    if (!validateAll()) {
        return;
    }
    
    loading = true;
    message = '';
    
    try {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = GOOGLE_SCRIPT_URL;
        form.style.display = 'none';
        
        Object.keys(formData).forEach(key => {
            if (formData[key]) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = formData[key];
                form.appendChild(input);
            }
        });
        
        const iframe = document.createElement('iframe');
        iframe.name = 'response_frame';
        iframe.style.display = 'none';
        
        document.body.appendChild(iframe);
        document.body.appendChild(form);
        form.target = 'response_frame';
        form.submit();
        
        setTimeout(() => {
            success = true;
            message = 'Solicitação enviada com sucesso! Nossa equipe entrará em contato.';
            
            formData = {
                nome: '', celular: '', email: '', empresa: '',
                setor: '', funcionarios: '', faturamento: '', detalhes: ''
            };
            errors = {};
            
            if (document.body.contains(form)) document.body.removeChild(form);
            if (document.body.contains(iframe)) document.body.removeChild(iframe);
            
            setTimeout(() => {
                success = false;
                message = '';
            }, 8000);
        }, 2000);
        
    } catch (error) {
        console.error(' Erro:', error);
        success = false;
        message = 'Erro ao enviar. Tente o botão "Enviar via Email".';
    } finally {
        loading = false;
    }
}

    onMount(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            },
            { threshold: 0.1 }
        );

        const elements = document.querySelectorAll('.fade-up');
        elements.forEach((el) => observer.observe(el));

        return () => observer.disconnect();
    });
</script>

<svelte:head>
    <title>Preços - BassPago</title>
    <meta name="description" content="Preços flexíveis. De startups em crescimento a empresas em expansão, a Bass Pago oferece tudo que seu negócio precisa." />
</svelte:head>

<Header />

<!-- Preços Flexíveis Section -->
<section class="precos-flexiveis">
    <div class="precos-conteudo">
        <div class="desktop">
            <div class="precos-icones fade-up">
                <img src={basspagoPagementos} alt="Bass Pago Pagamentos" class="precos-icon" />
            </div>
        </div>
        <div class="precos-texto">
            <h1 class="fade-up">Preços flexíveis</h1>
            <div class="mobile">
                <div class="precos-icones fade-up">
                    <img src={basspagoPagementos} alt="Bass Pago Pagamentos" class="precos-icon" />
                </div>
            </div>
            <p class="fade-up">
                De startups em crescimento a empresas em expansão, a Bass Pago oferece tudo que seu negócio precisa.
            </p>
        </div>
    </div>
</section>

<!-- Benefícios Section -->
<section class="beneficios">
    <div class="beneficios-container">
        <div class="beneficios-header">
            <h2 class="fade-up">Benefícios exclusivos<br />que vão além do preço</h2>
            <p class="fade-up">
                Mais do que tarifas competitivas, oferecemos tecnologia, segurança e suporte dedicados para
                potencializar o seu negócio.
            </p>
        </div>

        <div class="beneficios-grid">
            {#each beneficios as beneficio}
                <div class="beneficio-card fade-up">
                    <h3>{beneficio.title}</h3>
                    <p>{beneficio.description}</p>
                </div>
            {/each}
        </div>
    </div>
</section>

<section id="planos-basspago" class="planos-basspago">
    <div class="planos-basspago-inner">
        <header class="section-header text-center text-black">
            <h2 class="fade-up">Cresça sem limites com uma solução feita para acompanhar seu negócio</h2>
            <p class="fade-up">Flexível, escalável e alinhada ao seu ritmo.</p>
        </header>
        <div class="planos-grid">
            {#each planos as plano}
                <article class="plano-card fade-up {plano.isPro ? 'pro' : ''}">
                    <div class="plano-card-header">
                        <span class="plano-icon {plano.id}">
                            <img src={plano.icon} alt={plano.title} />
                        </span>
                        <span class="plano-title">{plano.title}</span>
                    </div>
                    {#if plano.isPro}
                        <div class="plano-pro-label">Personalizado para suas necessidades!</div>
                    {/if}
                    <p class="plano-desc">{plano.description}</p>
                    
                    {#if !plano.isPro}
                        <div class="plano-preco">
                            <span>{plano.priceLabel}</span>
                            <strong>{plano.price}</strong>
                        </div>
                    {:else}
                        <a href="#form-negociacao-basspago" class="link-cta full">
                            <span>Solicitar negociação →</span>
                        </a>
                        <p class="plano-info">{plano.info}</p>
                    {/if}
                    
                    <div class="plano-recursos">
                        <span>Recursos disponíveis{plano.isPro ? ':' : ''}</span>
                        <ul>
                            {#each plano.recursos as recurso}
                                <li>
                                    <span class="checkmark"></span>
                                    {recurso}
                                </li>
                            {/each}
                        </ul>
                    </div>
                </article>
            {/each}
        </div>
    </div>
</section>

<section id="form-negociacao-basspago" class="form-negociacao-basspago">
    <div class="form-negociacao-container">
        <div class="form-negociacao-info">
            <div class="negociacao-chip fade-up">
                <span>Vamos juntos?</span>
            </div>
            <h2 class="fade-up">Alto volume de pagamentos ou modelo de negócios exclusivo?</h2>
            <p class="fade-up">
                Ainda com dúvidas sobre o seu modelo? Nossa
                equipe pode ajudá-lo a escolher a solução ideal,
                considerando volume de transações, melhores
                preços e total flexibilidade.
            </p>
        </div>
        
        <!-- Usar submitForm para Google Apps Script -->
        <form class="negociacao-form fade-up" on:submit={submitForm}>
            {#if success}
                <div class="form-message success-message">
                    {message}
                </div>
            {/if}
            {#if message && !success}
                <div class="form-message error-message">
                    {message}
                </div>
            {/if}
            
            <div class="form-row">
                <div class="form-group">
                    <label for="nome">Nome completo</label>
                    <input 
                        type="text" 
                        id="nome" 
                        name="nome" 
                        placeholder="Digite seu nome aqui" 
                        bind:value={formData.nome}
                        on:blur={() => validateField('nome')}
                        class:error={errors.nome}
                    />
                    {#if errors.nome}
                        <div class="error-message">{errors.nome}</div>
                    {/if}
                </div>
                <div class="form-group">
                    <label for="celular">DDD + Celular</label>
                    <input 
                        type="tel" 
                        id="celular" 
                        name="celular" 
                        placeholder="Digite seu número aqui" 
                        bind:value={formData.celular}
                        on:blur={() => validateField('celular')}
                        class:error={errors.celular}
                    />
                    {#if errors.celular}
                        <div class="error-message">{errors.celular}</div>
                    {/if}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="email">E-mail corporativo</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        placeholder="Digite seu e-mail" 
                        bind:value={formData.email}
                        on:blur={() => validateField('email')}
                        class:error={errors.email}
                    />
                    {#if errors.email}
                        <div class="error-message">{errors.email}</div>
                    {/if}
                </div>
                <div class="form-group">
                    <label for="empresa">Nome da empresa</label>
                    <input 
                        type="text" 
                        id="empresa" 
                        name="empresa" 
                        placeholder="Digite aqui" 
                        bind:value={formData.empresa}
                        on:blur={() => validateField('empresa')}
                        class:error={errors.empresa}
                    />
                    {#if errors.empresa}
                        <div class="error-message">{errors.empresa}</div>
                    {/if}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="setor">Setor de atuação</label>
                    <select 
                        id="setor" 
                        name="setor" 
                        bind:value={formData.setor}
                        on:change={() => validateField('setor')}
                        class:error={errors.setor}
                    >
                        <option value="" disabled>Selecione</option>
                        <option value="fintech">Fintech</option>
                        <option value="ecommerce">E-commerce</option>
                        <option value="servicos">Serviços</option>
                        <option value="industria">Indústria</option>
                        <option value="outro">Outro</option>
                    </select>
                    {#if errors.setor}
                        <div class="error-message">{errors.setor}</div>
                    {/if}
                </div>
                <div class="form-group">
                    <label for="funcionarios">Número de funcionários</label>
                    <select 
                        id="funcionarios" 
                        name="funcionarios" 
                        bind:value={formData.funcionarios}
                        on:change={() => validateField('funcionarios')}
                        class:error={errors.funcionarios}
                    >
                        <option value="" disabled>Selecione</option>
                        <option value="1-10">1 à 10</option>
                        <option value="11-50">11 à 50</option>
                        <option value="50+">+50</option>
                    </select>
                    {#if errors.funcionarios}
                        <div class="error-message">{errors.funcionarios}</div>
                    {/if}
                </div>
            </div>
            
            <div class="form-row row-full">
                <div class="form-group">
                    <label for="faturamento">Faturamento anual estimado</label>
                    <input 
                        type="text" 
                        id="faturamento" 
                        name="faturamento" 
                        placeholder="R$" 
                        bind:value={formData.faturamento}
                        on:blur={() => validateField('faturamento')}
                        class:error={errors.faturamento}
                    />
                    {#if errors.faturamento}
                        <div class="error-message">{errors.faturamento}</div>
                    {/if}
                </div>
            </div>
            
            <div class="form-row row-full">
                <div class="form-group">
                    <label for="detalhes">Se desejar, explique em mais detalhes sobre a sua necessidade</label>
                    <textarea 
                        id="detalhes" 
                        name="detalhes" 
                        rows="3" 
                        placeholder="Sua mensagem" 
                        bind:value={formData.detalhes}
                    ></textarea>
                </div>
            </div>
            
            <div class="form-buttons">
                <button type="submit" class="link-cta white" disabled={loading}>
                    <span>{loading ? 'Enviando...' : 'Enviar →'}</span>
                </button>
            </div>
        </form>
    </div>
</section>

<Footer />

<style>
/* =========================
   PREÇOS PAGE STYLES
   ========================= */

.no-destak {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* Preços Flexíveis Section */
.precos-flexiveis {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 180px 20px 60px;
    background: transparent;
}

.precos-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.precos-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 750px;
    text-align: center;
}

.precos-texto h1 {
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.precos-texto p {
    font-size: 23px;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 706px;
}

.precos-icones img {
    width: 100%;
    height: auto;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

/* Benefícios Section */
.beneficios {
    width: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
}

.beneficios-container {
    max-width: 1280px;
    width: 100%;
    display: flex;
    gap: clamp(30px, 6vw, 61px);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.beneficios-header {
    display: flex;
    width: 100%;
    max-width: 439px;
    min-height: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
    text-align: left;
}

.beneficios-header h2 {
    color: #000;
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0;
}

.beneficios-header p {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(20px, 3vw, 30px);
    width: 100%;
    max-width: 800px;
}

.beneficio-card {
    background: rgba(0, 0, 255, 0.03);
    border-radius: clamp(15px, 2vw, 20px);
    padding: clamp(20px, 3vw, 25px);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beneficio-card h3 {
    font-size: 16px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    color: black;
    margin-bottom: clamp(10px, 2vw, 15px);
    line-height: 1.3;
}

.beneficio-card p {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* Planos Section */
#planos-basspago {
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 80px 20px;
}

.planos-basspago-inner {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #000;
    line-height: 1.1;
    margin: 0;
}

.section-header p {
    font-size: 1.25rem;
    color: rgba(0, 0, 0, 0.75);
    margin: 0;
}

.planos-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    padding: 10px;
}

.plano-card {
    background: rgba(65, 254, 149, 0.08);
    border-radius: 15px;
    min-width: 340px;
    max-width: 380px;
    flex: 1 1 340px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    gap: 25px;
    box-shadow: 0 0 0 1px rgba(65, 254, 149, 0.1);
    align-items: flex-start;
    justify-content: flex-start;
    transition: box-shadow .3s, transform .3s;
    position: relative;
}

.plano-card.pro {
    background: rgba(65, 254, 149, 0.16);
}

.plano-card:hover {
    box-shadow: 0 4px 32px 0 rgba(65, 254, 149, 0.2), 0 0 0 2px #41fe95;
    transform: translateY(-4px) scale(1.03);
}

.plano-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.plano-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(65, 254, 149, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plano-icon img {
    width: 24px;
    height: 24px;
}

.plano-title {
    font-weight: 500;
    color: #111;
    font-size: 1.1rem;
}

.plano-desc {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.7);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.plano-preco {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.plano-preco span {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
}

.plano-preco strong {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 700;
    letter-spacing: -0.8px;
}

.plano-recursos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plano-recursos span {
    font-size: 16px;
    color: #111;
    font-weight: 500;
}

.plano-recursos ul {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.plano-recursos li {
    font-size: 16px;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.checkmark {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 4px;
    position: relative;
}

.checkmark:after {
    content: '✓';
    display: block;
    position: absolute;
    color: #41FE95;
    font-weight: bold;
    font-size: 12px;
    left: 2px;
    top: -2px;
}

.plano-pro-label {
    font-size: 1rem;
    color: #111;
    font-weight: 500;
    background: rgba(65, 254, 149, 0.2);
    padding: 8px 12px;
    border-radius: 8px;
    margin: -10px 0 10px 0;
}

.plano-info {
    color: rgba(0, 0, 0, 0.7);
    font-size: 1rem;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.link-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.link-cta.white {
    background: #fff;
    color: #000;
    border: 1px solid #ddd;
}

.link-cta.white:hover {
    background: #41FE95;
    color: #000;
    transform: translateY(-2px);
}

.link-cta.full {
    width: 100%;
    text-align: center;
}

/* Form Negociação Section */
#form-negociacao-basspago {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 64px 0;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    background: #000;
}

.form-negociacao-container {
    max-width: 1250px;
    width: 95%;
    background: transparent;
    display: flex;
    gap: 80px;
    align-items: flex-start;
    justify-content: center;
    border-radius: 32px;
    box-sizing: border-box;
    padding: 0 20px;
}

.form-negociacao-info {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.negociacao-chip span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 87px;
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 400;
    padding: 10px 20px;
    margin-bottom: 8px;
}

.form-negociacao-info h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
}

.form-negociacao-info p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.negociacao-form {
    background: rgba(255, 255, 255, 0.13);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 420px;
    box-sizing: border-box;
    box-shadow: 0 2px 22px 0 rgba(10, 20, 60, 0.08);
    width: 100%;
    max-width: 560px;
    position: relative;
}

.form-row {
    display: flex;
    gap: 24px;
    width: 100%;
}

.form-row.row-full {
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 140px;
}

.form-group label {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(239, 239, 239, 0.05);
    border-radius: 8px;
    border: 1px solid transparent;
    color: #fff;
    font-size: 15px;
    padding: 10px 20px;
    font-family: inherit;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    transition: background 0.2s, border 0.2s;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.05);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.form-group select {
    color: #fff;
    background: rgba(239, 239, 239, 0.07);
}

.form-group select:invalid {
    color: rgba(255, 255, 255, 0.28);
}

.form-group textarea {
    min-height: 70px;
    resize: vertical;
}

.error-message {
    color: #ff4d4d;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 400;
}

.form-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.success-message {
    background: rgba(65, 254, 149, 0.1);
    color: #41FE95;
    border: 1px solid rgba(65, 254, 149, 0.3);
}

.form-message.error-message {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

/* Utility classes */
.text-center {
    text-align: center;
}

.text-black {
    color: #000;
}

.hidden {
    display: none;
}

/* Fade animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* Responsive */
@media (max-width: 1100px) {
    .form-negociacao-container {
        flex-direction: column;
        gap: 40px;
        padding: 48px 4vw;
        align-items: center;
    }

    .form-negociacao-info {
        max-width: 95vw;
        align-items: flex-start;
    }

    .negociacao-form {
        min-width: 0;
        max-width: 97vw;
    }
}

@media (max-width: 800px) {
    #form-negociacao-basspago {
        padding: 32px 10px;
    }

    .form-negociacao-container {
        padding: 24px 0;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 500px) {
    .form-negociacao-info h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .precos-texto h1 {
        text-align: center;
    }

    .precos-texto p {
        font-size: 18px;
        max-width: 100%;
        text-align: center;
    }

    .beneficios-container {
        flex-direction: column;
    }

    .beneficios-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .planos-grid {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
    }

    .plano-card {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        padding: 22px 20px;
    }

    .section-header {
        padding: 0 4vw;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }
}

@media (min-width: 1024px) {
    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }
}
</style>