To apply the new styles to your search container and button in Joomla 5 with JBusinessDirectory, you need to override the default CSS. Here’s how you can do it:

### **Steps to Apply the New Styles:**

#### **1. Locate Your Custom CSS File**
- If using Helix Ultimate, go to **Extensions** → **Templates** → **Styles**.
- Select your active **Helix-based template** and navigate to **Custom Code** → **Custom CSS**.
- Alternatively, you can add the styles directly in `custom.css` (usually found in `templates/your-template/css/custom.css`).

#### **2. Apply the Custom CSS**
Add the following CSS to your `custom.css` file:

```css
/* Search Container */
.jbd-container.business-directory.horizontal.search-style-2 {
    background-color: #oooooo !important;
    border: 2px solid #a3d9ff !important;
    border-radius: 12px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 20px auto !important;
    width: 80% !important;
    max-width: 800px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Search Input */
.jbd-search-bar input[type="text"] {
    flex-grow: 1 !important;
    padding: 8px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    margin-right: 10px !important;
    font-size: 16px !important;
}

/* Search Button */
.search-dir-button {
    background-color: #007BFF !important;
    color: white !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

/* Microphone Button */
.microphone-button {
    background-color: #007BFF !important;
    color: white !important;
    border: none !important;
    padding:1px 3px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

/* Search Results */
.search-results {
    margin: 20px auto !important;
    padding: 15px !important;
    width: 80% !important;
    max-width: 800px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
}

/* Result Items */
.result-item {
    padding: 10px !important;
    background: white !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Result Item Image */
.result-item img {
    width: 80px !important;
    height: 80px !important;
    margin-right: 10px !important;
    border-radius: 5px !important;
    object-fit: cover !important;
}
```

#### **3. Save & Clear Cache**
- Save your changes.
- Clear Joomla and browser cache to see the updated styles.

Let me know if you need further adjustments! 🚀