.elementor-kit-23401{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-17959ca:#FF591E;--e-global-color-71d8166:#319FFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-23401 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1428px;}.e-con{--container-max-width:1428px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1199px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:899px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<style>
/* Add these CSS classes to your existing CSS file */

/* Contact Form Styles */
.section {
    padding: 80px 0;
}

.contact-section {
    background: #fff;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.required {
    color: #ef4444;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #fff;
    font-family: 'Inter', sans-serif;
}

.form-input:hover,
.form-select:hover {
    border-color: #38b2ac;
    box-shadow: 0 4px 12px rgba(56, 178, 172, 0.15);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #38b2ac;
    box-shadow: 0 6px 20px rgba(56, 178, 172, 0.25);
}

.phone-container {
    display: flex;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.phone-container:hover,
.phone-container:focus-within {
    border-color: #38b2ac;
    box-shadow: 0 4px 12px rgba(56, 178, 172, 0.15);
}

.country-code {
    width: 120px;
    border: none;
    background-color: #f9fafb;
    border-right: 1px solid #e5e7eb;
    padding: 12px 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.phone-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
}

.phone-input:focus {
    outline: none;
}

/* Button Styles - Update your existing .btn-primary */
.btn-full {
    width: 100%;
}

.btn-primary {
    background: #38b2ac;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.btn-primary:hover:not(:disabled) {
    background: #319795;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(56, 178, 172, 0.4);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Message Styles */
.message {
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.success-message {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    color: white;
    box-shadow: 0 10px 25px rgba(56, 178, 172, 0.3);
}

.error-message {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.loading-message {
    background: #f3f4f6;
    color: #374151;
}

/* Responsive Design for Form */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .phone-container {
        flex-direction: column;
    }
    
    .country-code {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .form-container {
        padding: 20px;
        margin: 0 20px;
    }
}

/* Animation classes if you want scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}
</style>

<!-- Contact Form Section -->    
<section id="contact-form" class="section contact-section">        
    <div class="container">            
        <div class="form-container animate-on-scroll">                
            <h2 class="form-title">Send Us a Message</h2>                
            <form id="contactForm">                    
                <div class="form-row">                        
                    <div class="form-group">                            
                        <label class="form-label">First Name <span class="required">*</span></label>                            
                        <input type="text" class="form-input" id="firstName" required>                        
                    </div>                        
                    <div class="form-group">                            
                        <label class="form-label">Last Name <span class="required">*</span></label>                            
                        <input type="text" class="form-input" id="lastName" required>                        
                    </div>                    
                </div>                    
                <div class="form-group">                        
                    <label class="form-label">Email <span class="required">*</span></label>                        
                    <input type="email" class="form-input" id="email" required>                    
                </div>                    
                <div class="form-group">                        
                    <label class="form-label">Phone</label>                        
                    <div class="phone-container">                            
                        <select class="country-code" id="countryCode">                                
                            <option value="+1-US">🇺🇸 +1</option>                                
                            <option value="+1-CA" selected>🇨🇦 +1</option>                                
                            <option value="+966">🇸🇦 +966</option>                                
                            <option value="+44">🇬🇧 +44</option>                            
                        </select>                            
                        <input type="tel" class="phone-input" id="phone" placeholder="555-1234">                        
                    </div>                    
                </div>                    
                <div class="form-group">                        
                    <label class="form-label">Province</label>                        
                    <select class="form-select" id="province">                            
                        <option value="">Select Province</option>                            
                        <option value="AB">Alberta</option>                            
                        <option value="BC">British Columbia</option>                            
                        <option value="MB">Manitoba</option>                            
                        <option value="NB">New Brunswick</option>                            
                        <option value="NL">Newfoundland and Labrador</option>                            
                        <option value="NS">Nova Scotia</option>                            
                        <option value="ON">Ontario</option>                            
                        <option value="PE">Prince Edward Island</option>                            
                        <option value="QC">Quebec</option>                            
                        <option value="SK">Saskatchewan</option>                        
                    </select>                    
                </div>                    
                <div class="form-group">                        
                    <label class="form-label">Dealership Name</label>                        
                    <input type="text" class="form-input" id="dealershipName">                    
                </div>                    
                <div class="form-group">                        
                    <label class="form-label">Title or Position</label>                        
                    <input type="text" class="form-input" id="titlePosition">                    
                </div>                    
                <button type="submit" class="btn-primary btn-full" id="submitBtn">Send Message</button>                
            </form>                
            <div id="loadingMessage" class="message loading-message" style="display: none;">                    
                Sending your message...                
            </div>                
            <div id="successMessage" class="message success-message" style="display: none;">                    
                <span style="font-size: 1.5rem; margin-right: 10px;">🎉</span>                    
                Thank you for your message! We will get back to you soon.                
            </div>                
            <div id="errorMessage" class="message error-message" style="display: none;">                    
                There was a problem sending your message. Please fill in all required fields and try again.                
            </div>            
        </div>        
    </div>    
</section>

<script>
// Improved form submission handler with better error handling
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contactForm');
    
    if (!form) {
        console.error('Contact form not found');
        return;
    }
    
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Get form elements
        const submitBtn = document.getElementById('submitBtn');
        const loadingMessage = document.getElementById('loadingMessage');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');
        
        // Check if all elements exist
        if (!submitBtn || !loadingMessage || !successMessage || !errorMessage) {
            console.error('Form elements not found');
            alert('Form configuration error. Please contact support.');
            return;
        }
        
        // Get form data
        const firstName = document.getElementById('firstName')?.value?.trim() || '';
        const lastName = document.getElementById('lastName')?.value?.trim() || '';
        const email = document.getElementById('email')?.value?.trim() || '';
        const phone = document.getElementById('phone')?.value?.trim() || '';
        const countryCode = document.getElementById('countryCode')?.value || '+1-CA';
        const province = document.getElementById('province')?.value || '';
        const dealershipName = document.getElementById('dealershipName')?.value?.trim() || '';
        const titlePosition = document.getElementById('titlePosition')?.value?.trim() || '';
        
        // Hide all messages initially
        loadingMessage.style.display = 'none';
        successMessage.style.display = 'none';
        errorMessage.style.display = 'none';
        
        // Basic validation
        if (!firstName || !lastName || !email) {
            errorMessage.innerHTML = 'Please fill in all required fields (First Name, Last Name, and Email).';
            errorMessage.style.display = 'block';
            return;
        }
        
        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            errorMessage.innerHTML = 'Please enter a valid email address.';
            errorMessage.style.display = 'block';
            return;
        }
        
        // Show loading state
        loadingMessage.style.display = 'block';
        submitBtn.disabled = true;
        submitBtn.textContent = 'Sending...';
        
        try {
            // Prepare data for Zapier webhook
            const webhookData = {
                firstName: firstName,
                lastName: lastName,
                fullName: `${firstName} ${lastName}`,
                email: email,
                phone: phone ? `${countryCode} ${phone}` : '',
                countryCode: countryCode,
                phoneNumber: phone,
                province: province,
                dealershipName: dealershipName,
                titlePosition: titlePosition,
                timestamp: new Date().toISOString(),
                dateSubmitted: new Date().toLocaleDateString(),
                timeSubmitted: new Date().toLocaleTimeString(),
                source: 'Go Dealer Website Contact Form',
                userAgent: navigator.userAgent,
                referrer: document.referrer || 'Direct'
            };
            
            console.log('Sending data to webhook:', webhookData);
            
            // Send to Zapier webhook with timeout
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
            
            const response = await fetch('https://hooks.zapier.com/hooks/catch/12164529/2vegmts/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(webhookData),
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            console.log('Response status:', response.status);
            console.log('Response ok:', response.ok);
            
            if (response.ok) {
                // Success
                loadingMessage.style.display = 'none';
                successMessage.style.display = 'block';
                
                // Reset form
                form.reset();
                
                // Reset button
                submitBtn.disabled = false;
                submitBtn.textContent = 'Send Message';
                
                // Hide success message after 5 seconds
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 5000);
                
                console.log('Form submitted successfully');
                
            } else {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
        } catch (error) {
            console.error('Form submission error:', error);
            
            // Hide loading, show error
            loadingMessage.style.display = 'none';
            
            let errorText = 'There was a problem sending your message. ';
            
            if (error.name === 'AbortError') {
                errorText += 'Request timed out. Please try again.';
            } else if (error.message.includes('Failed to fetch')) {
                errorText += 'Network error. Please check your connection and try again.';
            } else {
                errorText += 'Please try again or contact us directly.';
            }
            
            errorMessage.innerHTML = errorText;
            errorMessage.style.display = 'block';
            
            // Reset button
            submitBtn.disabled = false;
            submitBtn.textContent = 'Send Message';
        }
    });
    
    // Clear error messages when user starts typing
    ['firstName', 'lastName', 'email'].forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('input', function() {
                const errorMessage = document.getElementById('errorMessage');
                if (errorMessage && errorMessage.style.display === 'block') {
                    errorMessage.style.display = 'none';
                }
            });
        }
    });
    
    // Email validation on blur
    const emailField = document.getElementById('email');
    if (emailField) {
        emailField.addEventListener('blur', function() {
            const email = this.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            if (email && !emailRegex.test(email)) {
                this.style.borderColor = '#ef4444';
            } else {
                this.style.borderColor = '#e5e7eb';
            }
        });
    }
});
</script>/* End custom CSS */