/*
 Theme Name: AssortTech's theme
 Theme URI: https://assorttech.com/case-studies/
 Description: Welcome to AssortTech's custom child theme for the Hello Elementor theme. This child theme allows you to leverage the powerful features of the Hello Elementor theme while offering a robust foundation for your unique customizations. Designed with flexibility and ease of use in mind, AssortTech's Hello Elementor Child Theme ensures your website stands out with tailored styles and functionalities, all while maintaining seamless updates and compatibility with the parent theme
 Author: AssortTech
 Author URI: https://assorttech.com
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: assorttech-theme
*/


.ajax-search {
    position: relative;
    width: 100%;
    margin: auto;
}

.search-wrapper {
	padding:15px;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 50px;
	gap:15px;
    background: #F5F6F8;
    overflow: hidden;
}

#search-input {
    background: #F5F6F8;
    flex: 2;
    padding: 0px;
    border: none;
    outline: none;
    font-size: 16px; /* Adjust font size as needed */
}

.search-icon {
    padding: 0px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
}

#search-input:focus + .search-icon {
    transform: translateX(calc(-100% - 30px)); /* Adjust based on icon size and padding */
    color: #333;
}

#search-results {
    position: absolute;
    top: 45px;
	left:35px;
    width: calc(100% - 70px); /* Adjust width to match .search-wrapper border */
    background: #fff;
    border: 1px solid #F5F6F8;
    z-index: 50;
}

#search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#search-results li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

#search-results li a {
    text-decoration: none;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

#search-results li .price {
    color: #900;
    font-weight: bold;
}

#search-results li img {
    width: 50px; /* Adjust image size as needed */
    height: auto;
    float: left;
    margin-right: 10px;
}
#search-results p {
    padding: 10px;
}

/*
.pagination {
    margin-top: 10px;
    text-align: center;
}

.page-number {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: #f1f1f1;
    cursor: pointer;
    border-radius: 3px;
}

.page-number:hover {
    background-color: #ddd;
}

.page-number.active {
    background-color: #0073e6;
    color: white;
}*/