/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 26 2026 | 02:16:05 */
<div style="max-width: 1400px; margin: 0 auto; padding: 20px;">
    <div style="display: flex; gap: 30px; flex-wrap: wrap;">
        <!-- Left Column - Search Form -->
        <div style="flex: 0 0 350px; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
            <h3 style="margin-top: 0; border-bottom: 2px solid #eee; padding-bottom: 15px;">🔍 Find Properties</h3>
            
            <form method="GET" action="">
                <!-- Property Type -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 600;">🏠 Property Type</label>
                    <select name="property_type" style="width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                        <option value="">All Types</option>
                        <option value="Detached">Detached House</option>
                        <option value="Semi-Detached">Semi-Detached</option>
                        <option value="Townhouse">Townhouse</option>
                        <option value="Condo">Condo/Apartment</option>
                        <option value="Commercial">Commercial</option>
                    </select>
                </div>
                
                <!-- Transaction Type -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 600;">🔄 For</label>
                    <div style="display: flex; gap: 10px;">
                        <button type="button" class="trans-btn" data-type="Sale" style="flex: 1; padding: 10px; border: 2px solid #e0e0e0; background: white; border-radius: 8px; cursor: pointer;">Sale</button>
                        <button type="button" class="trans-btn" data-type="Lease" style="flex: 1; padding: 10px; border: 2px solid #e0e0e0; background: white; border-radius: 8px; cursor: pointer;">Rent</button>
                    </div>
                    <input type="hidden" name="transaction" id="transaction-type" value="Sale">
                </div>
                
                <!-- Location -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 600;">📍 Location</label>
                    <input type="text" name="city" placeholder="Enter city" style="width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                </div>
                
                <!-- Price Range -->
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 600;">💰 Price Range</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="number" name="min_price" placeholder="Min" style="flex: 1; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                        <span style="align-self: center;">to</span>
                        <input type="number" name="max_price" placeholder="Max" style="flex: 1; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                    </div>
                </div>
                
                <!-- Bedrooms & Bathrooms -->
                <div style="display: flex; gap: 15px; margin-bottom: 20px;">
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px; font-weight: 600;">🛏️ Beds</label>
                        <select name="beds" style="width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                            <option value="">Any</option>
                            <option value="1">1+</option>
                            <option value="2">2+</option>
                            <option value="3">3+</option>
                            <option value="4">4+</option>
                        </select>
                    </div>
                    <div style="flex: 1;">
                        <label style="display: block; margin-bottom: 5px; font-weight: 600;">🛁 Baths</label>
                        <select name="baths" style="width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px;">
                            <option value="">Any</option>
                            <option value="1">1+</option>
                            <option value="2">2+</option>
                            <option value="3">3+</option>
                            <option value="4">4+</option>
                        </select>
                    </div>
                </div>
                
                <!-- Search Button -->
                <button type="submit" style="width: 100%; padding: 15px; background: #0073aa; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer;">
                    🔍 Search Properties
                </button>
            </form>
        </div>
        
        <!-- Right Column - Results -->
        <div style="flex: 1; min-width: 300px;">
            <h1 style="margin-top: 0;">Available Properties in GTA</h1>
            
            [xyz-ips snippet="mls-search-page"]
            
            <!-- Map Section -->
            <div style="margin-top: 40px; padding: 20px; background: #f9f9f9; border-radius: 12px;">
                <h3>🗺️ Properties on Map</h3>
                <div style="background: white; padding: 40px; text-align: center; border: 2px dashed #ccc; border-radius: 8px;">
                    <p>Interactive map will show property locations</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Transaction buttons
document.querySelectorAll('.trans-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.trans-btn').forEach(b => b.style.background = 'white');
        this.style.background = '#0073aa';
        this.style.color = 'white';
        document.getElementById('transaction-type').value = this.dataset.type;
    });
});
</script> /* Make page wider */
.entry-content {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Price range inputs in two lines */
.filter-group .price-range {
    display: block !important;
}

.filter-group .price-range input {
    width: 100% !important;
    margin-bottom: 10px !important;
}

.filter-group .price-range span {
    display: none !important; /* Hide the "to" text */
}

/* Sort By label above dropdown */
.results-summary {
    display: block !important;
    text-align: left !important;
}

.sort-options {
    display: block !important;
    margin-top: 10px !important;
}

.sort-options label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
}

.sort-options select {
    width: 100% !important;
    max-width: 200px !important;
    padding: 8px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
}

/* Fix any overlapping issues */
.wp-block-columns {
    gap: 20px !important;
}

.filter-group {
    clear: both !important;
    margin-bottom: 20px !important;
}

/* Make search panel sticky */
.search-panel {
    position: sticky !important;
    top: 20px !important;
}/* Change "Bathrooms" to "Baths" */
.filter-group .filter-half:last-child label {
    font-size: 0 !important; /* Hide original text */
}

.filter-group .filter-half:last-child label::after {
    content: "🛁 BATHS" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Make bedroom label match */
.filter-group .filter-half:first-child label {
    font-size: 0 !important;
}

.filter-group .filter-half:first-child label::after {
    content: "🛏️ BEDS" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Price Range label fix */
.filter-group:has(.price-range) label {
    font-size: 0 !important;
}

.filter-group:has(.price-range) label::after {
    content: "💰 PRICE RANGE" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Location label fix */
.filter-group:has(.location-input) label {
    font-size: 0 !important;
}

.filter-group:has(.location-input) label::after {
    content: "📍 LOCATION" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Property Type label fix */
.filter-group:has(select[name="property_type"]) label {
    font-size: 0 !important;
}

.filter-group:has(select[name="property_type"]) label::after {
    content: "🏠 PROPERTY TYPE" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Make filter selects more compact */
.filter-select, .location-input {
    padding: 8px !important;
    font-size: 14px !important;
}

/* Adjust spacing */
.filter-group {
    margin-bottom: 15px !important;
}

/* Make the search panel more compact */
.search-panel {
    padding: 20px !important;
}

/* Fix any overlapping in the results area */
.properties-grid {
    margin-top: 15px !important;
}