/* Fix for Auto Listings Search Form Width - Both old and new shortcode styles */
.auto-listings-search,
.als,
form.als {
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Improve search form layout for different styles */
.auto-listings-search.s-1,
.auto-listings-search.s-2,
.auto-listings-search.s-3,
.auto-listings-search.s-4,
.als {
    max-width: 800px !important;
}

/* Center the search form container */
.auto-listings-search-container,
[class*="auto_listings_search"],
.als-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Improve field spacing and alignment */
.auto-listings-search .row,
.als .als-field,
.als-field:not(:last-child) {
    margin-bottom: 20px !important;
}

.auto-listings-search .field,
.als .als-field {
    margin: 0 5px !important;
}

/* Better button styling */
.auto-listings-search .al-button,
.als button,
.als .als-submit,
button[class^="als-"] {
    padding: 10px 30px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    max-width: 200px !important;
    margin: 10px auto !important;
    display: block !important;
}

.auto-listings-search .al-button:hover,
.als button:hover,
.als .als-submit:hover,
button[class^="als-"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Improve input field styling */
.auto-listings-search .area,
.als input[type="text"],
.als input:not([type="submit"]),
.als select {
    max-width: 100% !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
}

/* Style for standard layout */
.auto-listings-search.standard {
    padding: 25px !important;
}

/* Fix for ALS form specific elements */
.als .SumoSelect {
    max-width: 100% !important;
}

.als input:not([type=submit]) {
    max-width: 100% !important;
    padding: 10px 15px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auto-listings-search,
    .als,
    form.als {
        max-width: 100% !important;
        margin: 0 15px 30px 15px !important;
        padding: 15px !important;
    }
    
    .auto-listings-search .area,
    .als input[type="text"] {
        max-width: 100% !important;
    }
}

/* Additional improvements for form elements */
.auto-listings-search .SumoSelect,
.als .SumoSelect {
    display: inline-block !important;
    vertical-align: middle !important;
}

.auto-listings-search .condition-wrap {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}

.auto-listings-search .price-wrap {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}

.auto-listings-search .area-wrap {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Fix for extras wrap */
.auto-listings-search .extras-wrap {
    max-width: 100% !important;
    padding: 15px 0 !important;
}

.auto-listings-search .extras-wrap .field {
    display: inline-block !important;
    margin: 5px !important;
    vertical-align: top !important;
}

/* Override the default full width from the plugin */
.als {
    width: auto !important;
}

/* Ensure form fields don't exceed container */
.als .als-field,
.als input,
.als select,
.als .SumoSelect {
    box-sizing: border-box !important;
}