/* 1. Ensure the menu item container allows the form to stretch */
/* You may need to inspect your Astra site to get the exact menu item class */
.menu-item.menu-item-search-sort {
    /* Remove any fixed widths or max-widths the theme might add */
    width: auto !important; 
    flex-grow: 1; /* Allow the LI itself to grow if possible */
}

/* Ensure the container uses all available horizontal space */
.search-container {
    display: flex;       /* Use Flexbox for alignment */
    width: 100%;         /* Crucial: Takes up 100% of the parent element's width */
    box-sizing: border-box; /* Ensures padding/borders are included in the 100% calculation */

    /* --- Dynamic Design Styles --- */
    border: 1px solid #ccc;
    border-radius: 5px; 
    overflow: hidden; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

/* Dynamic highlight on focus */
.search-container:focus-within {
    border-color: #0073aa; /* Highlight color */
    box-shadow: 0 0 0 1px #0073aa;
}

/* The input field (expands dynamically) */
.search-container input[type="search"] {
    flex-grow: 1; /* Key: Takes up all remaining space within the container */
    padding: 8px 12px;
    border: none;
    outline: none; /* Remove default browser outline */
    font-size: 14px;
    background: transparent;
    box-sizing: border-box;
}

/* The submit button (fixed width) */
.search-container button[type="submit"] {
    background-color: #0073aa; 
    color: white;
    border: none;
    padding: 0 15px; /* Fixed padding/width */
    cursor: pointer;
    font-size: 16px;
    line-height: 1; 
    transition: background-color 0.3s ease;
}

/* Dynamic hover effect for the button */
.search-container button[type="submit"]:hover {
    background-color: #0056b3; 
}

/* 3. The input field must take the remaining space */
.search-container input[type="search"], 
.menu-search-form input[type="search"] {
    flex-grow: 1; /* This is the key: input takes all available space */
    padding: 8px 12px;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    box-sizing: border-box; /* Ensures padding is included in the 100% width calculation */
}

/* 4. The button remains fixed size */
.search-container button[type="submit"],
.menu-search-form .search-submit {
    background-color: #0073aa; 
    color: white;
    border: none;
    padding: 0 15px; /* Fixed padding keeps width consistent */
    cursor: pointer;
    font-size: 16px;
    line-height: 1; 
    transition: background-color 0.3s ease;
}


.menu-search-form .sort-options {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.menu-search-form .sort-options select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 14px;
}

/* Optional: Improve styling on hover/focus */
.menu-search-form input[type="search"]:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}


/* 1. The main container for the search group */
.search-container {
    display: flex; /* Use Flexbox to align input and button horizontally */
    border: 1px solid #ccc;
    border-radius: 5px; /* Subtle rounded corners for a modern look */
    overflow: hidden; /* Ensures the contents stay within the rounded border */
    max-width: 300px; /* Limit width for menu integration */
    transition: border-color 0.3s ease; /* Smooth transition for focus effect */
}

/* Optional: Add a subtle shadow when the input is focused */
.search-container:focus-within {
    border-color: #0073aa; /* Highlight color on focus */
    box-shadow: 0 0 0 1px #0073aa;
}

/* 2. Styling the input field */
.search-container input[type="search"] {
    flex-grow: 1; /* Allows the input to take up available space */
    padding: 8px 12px;
    border: none; /* Remove individual border as the container handles it */
    outline: none; /* Remove default focus outline */
    font-size: 14px;
    background: transparent; /* Match the container background */
}

/* 3. Styling the submit button */
.search-container button[type="submit"] {
    /* Use a visually appealing color */
    background-color: #0073aa; 
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1; /* Align text/icon vertically */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Dynamic hover effect for the button */
.search-container button[type="submit"]:hover {
    background-color: #00518a; /* Slightly darker shade on hover */
}

/* Ensure the form uses this container class */
/* If you are using the PHP code from the previous response, 
   you might need to adjust the class names slightly. */
/* Example for previous code: */
.menu-search-form {
    display: flex;
    /* other styles... */
}
.menu-search-form input[type="search"] {
    /* styles from above, use specific selectors to override if needed */
}