/* Custom Divi Search Form Styling */
.custom-divi-search-form {
    display: flex;
    justify-content: center; /* Align in the center horizontally */
    align-items: center;
    max-width: 600px; /* Adjust based on layout */
    margin: 0 auto; /* Center it */
    border: none;
}

.custom-divi-search-input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-right: none; /* Remove border between input and button */
    border-radius: 5px 0 0 5px; /* Rounded corners on the left */
    font-size: 16px;
    outline: none;
    color: #333;
    background-color: #f8f8f8;
}

.custom-divi-search-input::placeholder {
    color: #999;
}

.custom-divi-search-button {
    padding: 10px 20px;
    border: none;
    border-radius: 0 5px 5px 0; /* Rounded corners on the right */
    background-color: #00A889; /* Your brand green */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-divi-search-button:hover {
    background-color: #008C75; /* Slightly darker green for hover */
}

/* Left-align the search bar for specific instances */
.left-align-search-bar .custom-divi-search-form {
    justify-content: flex-start !important; /* Align to the left */
    margin: 0; /* Remove auto margins */

}

/* Target the search form inside the footer-search-bar */
#footer-search-bar .custom-divi-search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%; /* Ensure it takes up full available width */
    width: 100%; /* Make the form responsive to the container width */
    margin: 0 auto;
    border: none;
    padding: 0 10px; /* Optional: Adds padding for responsiveness */
}

/* Custom styling for input and button */
#footer-search-bar .custom-divi-search-input {
    flex-grow: 1;
    padding: 8px 12px;
    font-size: 14px; /* Adjust font size for smaller screens */
}

#footer-search-bar .custom-divi-search-button {
    padding: 8px 15px;
    font-size: 14px; /* Adjust font size for smaller screens */
}

/* Optional: Make search form smaller at a certain breakpoint */
@media (max-width: 768px) {
    #footer-search-bar .custom-divi-search-form {
        max-width: 90%; /* Reduce the width on smaller screens */
    }

    #footer-search-bar .custom-divi-search-input {
        padding: 6px 10px; /* Adjust padding for smaller inputs */
    }

    #footer-search-bar .custom-divi-search-button {
        padding: 6px 12px; /* Adjust padding for smaller buttons */
    }
}