/* ================================================================= */
/* 1. BASE LAYOUT AND ALIGNMENT (Desktop & Flexbox)                  */
/* ================================================================= */

.search-block-section {
    width: 100%;
    max-width: 80%; /* Updated from 1000px/100% to 80% per user's latest code */
    margin: 30px auto; 
}

/* Autocomplete Results Styling */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7f2;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.autocomplete-item {
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--primary-color, #fa5754); /* Use primary color */
    transition: background 0.2s;
}

.autocomplete-link:hover {
    background: #f9f9f9;
}

/* Focus state for the global search input */
#global-search-input:focus {
    border-color: var(--primary-color, #fa5754) !important;
    box-shadow: 0 0 0 0.2rem rgba(250, 87, 84, 0.25); /* Optional: add a glow effect matching the primary color */
    outline: none;
}

.autocomplete-link:hover {
    background: #f9f9f9;
}

.item-label {
    font-weight: 500;
    font-size: 14px;
}

.item-category {
    font-size: 11px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* FIX APPLIED HERE for the scrollbar and fixed height */
.list {
    margin-block-start: 0px !important;
    max-height: 250px !important; /* Fixed height for the dropdown options list */
    overflow-y: auto !important; /* Adds the vertical scrollbar */
}

/* Wrapper is a transparent container */
.search-form-wrapper {
    width: 100% !important; 
    box-sizing: border-box;
}

/* The actual white, rounded container with shadow */
.search-fields-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important; /* Forces all elements to match height */
    gap: 0; 
    
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* FIX: REMOVE ALL PADDING from here. The button will cover this area. */
    padding: 0; 
}

.form-group {
    float: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: auto !important; 
    
    /* FIX: Increase flex-grow for standard groups to make them wider */
    flex-grow: 2; 
    min-width: 150px; 
    position: relative;
    
    line-height: 1;
    
    /* Vertical separator for elements *within* the form row */
}

/* Remove the right border from the form-group just before the button group */
.search-fields-row .form-group:last-of-type {
    border-right: none;
}

/* * CRITICAL FIX: The previous rule below incorrectly re-applied the light gray border 
 * to the last form field, which fought the red button's border. 
 * We are removing it to allow the red button's border to be the separator.
 */
.search-fields-row .form-input-group:not(.search-button-group) {
    /* border-right: 1px solid #e9e9e9; <-- REMOVED */
}


.search-input-group {
    /* FIX: Increase flex-grow for the main input/search field to make it wider than the others */
    flex-grow: 3 !important; 
}


/* --- Input and Native Select Styling (Ensuring equal height and text alignment) --- */
.search-input-group input,
.native-select { 
    width: 100% !important;
    height: 100% !important; 
    
    border: none; 
    border-radius: 8px;
    
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s;
    
    padding-left: 45px !important;
    padding-right: 35px !important; 
    
    padding-top: 12px !important; 
    padding-bottom: 12px !important; 

    line-height: 1.4 !important; 

    appearance: none !important; 
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important; 
}

/* Icons within form groups (The red compass and grid icons on the LEFT) */
.form-group i {
    position: absolute;
    top: 50% !important; 
    left: -10px;
    transform: translateY(-50%) !important; 
    color: #FA5754; 
    font-size: 1.1rem;
    z-index: 5; 
}

/* Explicitly color the search icon red too */
.search-input-group .search-icon {
    color: #FA5754 !important;
}

/* --- CUSTOM DROPDOWN ARROW (Right side of Selects) --- */
.location-dropdown::after,
.category-dropdown::after {
    content: "\25BC"; /* Filled downward triangle */
    position: absolute;
    top: 50%;
    right: 15px; 
    transform: translateY(-50%) translateY(1px); 
    color: #777; 
    pointer-events: none; 
    
    font-size: 0.8rem; 
    line-height: 1;
}

/* ================================================================= */
/* 2. CUSTOM DROPDOWN LIST STYLING (ASSUMED HTML STRUCTURE)          */
/* ================================================================= */

/* Placeholder style for the container holding the list of options */
.dropdown-list-container {
    /* Set fixed height and enable scrolling */
    max-height: 250px; /* Example fixed height */
    overflow-y: auto; /* Enable vertical scrollbar */
    /* Add basic styling for visibility if this were a custom list */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 5px 0;
    margin-top: 5px;
}

/* Style for individual list items (optional, but good for context) */
.dropdown-list-container li {
    padding: 10px 15px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
}
.dropdown-list-container li:hover {
    background-color: #f5f5f5;
}


/* ================================================================= */
/* 3. SINGLE SEARCH ICON BUTTON STYLING (ICON ONLY)                  */
/* ================================================================= */

/* New Container for Search button only */
.search-button-group {
    /* FIX: Greatly reduce flex-grow to make the button 10-15% of the total width (e.g., 0.5 to 1.0) */
    flex-grow: 0.8; 
    flex-shrink: 0;
    
    display: flex;
    align-items: stretch; 
    justify-content: center;
    
    border-left: none !important; 
    
    padding: 0; 
}

/* Base style for the button */
.single-search-icon-btn {
    height: 100% !important; 
    margin: 0; 
    border: none;
    cursor: pointer;
    box-shadow: none !important; 
    font-weight: 500;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative; 
    padding: 10px; /* Padding for the icon inside the button */
}

/* 3.1 Search Button (Red, Icon Only) */
.single-search-icon-btn {
    background-color: #FA5754 !important; 
    color: white !important;

    /* Apply border-radius only to the top-right and bottom-right corners */
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    
    /* CRITICAL FIX: This border is now the only separator between the last field and the button */
    border-left: 1px solid #FA5754; 
}

/* FIX: When the button group is the only element, ensure it covers the full width and has the main container's radius */
.search-fields-row:has(> .search-button-group:only-child) .search-button-group {
    padding: 0; 
    border-right: none; 
    border-left: none;
    flex-grow: 1; /* Override for standalone button */
}
.search-fields-row:has(> .search-button-group:only-child) .single-search-icon-btn {
    border-radius: 12px; /* Full radius for the standalone button */
    border-left: none; /* No separator border when it's the only item */
}


/* Style the icon inside the search button */
.single-search-icon-btn i {
    color: white !important;
    font-size: 2rem !important; 
    line-height: 1 !important; 
    
    /* Ensure perfect centering (flexbox on parent .single-search-icon-btn handles it) */
    position: static !important; 
    transform: none !important; 
    padding: 0;
    margin: 0;
}

/* 3.2 Reset Button (Removed styling as the current design shows only the icon button) */
.reset-btn {
    display: none !important;
}


/* ================================================================= */
/* 4. MOBILE RESPONSIVENESS (< 768px)                                */
/* ================================================================= */

@media (max-width: 767px) {
    
    .search-fields-row {
        flex-direction: column !important; 
        gap: 15px; 
        padding: 15px; 
    }
    
    .form-group {
        border-right: none;
        flex-grow: 1; /* Reset flex-grow on mobile */
    }
    
    .search-input-group input,
    .native-select,
    .search-button-group { 
        border-radius: 8px !important;
        padding: 0; 
    }
    
    .form-group { 
        width: 100%;
        min-width: unset;
        height: auto;
    }
    
    .search-button-group {
        width: 100% !important; 
        min-width: unset !important;
        height: 45px !important; 
        margin: 0; 
        padding: 0; /* No internal padding on button group for mobile */
        
        .single-search-icon-btn {
             width: 100% !important; 
             border-radius: 8px !important; 
             border-left: none !important; 
             padding: 10px; /* Internal padding for icon on mobile */
        }
    }

    .location-dropdown::after,
    .category-dropdown::after {
        right: 15px; 
    }
    
    /* Ensure dropdown list is still scrollable on mobile */
    .dropdown-list-container {
        max-height: 200px; /* Slightly shorter on mobile */
    }
}

/* --- Forceful Removal of Nice-Select Pseudo-elements --- */
.nice-select::after,
.nice-select::before {
    content: none !important;
    display: none !important; 
}