/* Style the search container */
#ads-algolia-search-container {
  width: 100%;
  margin: 20px auto; /* Center it on the page and add some margin */
  padding: 0;
}

/* Style the search input field */
#ads-algolia-search-input {
  width: 100%; /* Make the input take the full width of the container */
  padding: 12px 20px; /* Add padding for a more comfortable input area */
  font-size: 16px; /* Increase font size for readability */
  border: 1px solid #ddd; /* Light border for a clean look */
  border-radius: 25px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
  outline: none; /* Remove the default outline on focus */
}

/* Add focus effect to the search input */
#ads-algolia-search-input:focus {
  border-color: #0073aa; /* Change border color on focus */
  box-shadow: 0 4px 8px rgba(0, 115, 170, 0.2); /* Enhance the shadow on focus */
}

/* Style the search results */
#ads-algolia-search-results {
  margin-top: 20px; /* Space between the input and results */
  padding: 0; /* Remove default padding */
  list-style: none; /* Remove bullet points */
}

.ads-algolia-hit {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ads-algolia-hit .search-result-item {
  display: flex;
  gap: 4px;
  align-items: flex-start; /* Align the content to the start of the container */
  margin-bottom: 15px; /* Add some space between the results */
}

.search-thumbnail {
  width: 100px; /* Adjust the width of the thumbnail */
  height: auto; /* Maintain aspect ratio */
  margin-right: 15px; /* Space between the image and the content */
}

.search-content {
  flex: 1; /* Take up the remaining space */
}

.search-content .search-excerpt {
  font-size: 14px;
}

.search-content .search-link {
  font-size: 14px;
  font-weight: bold;
  color: #0073aa;
  text-decoration: none;
}

.search-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px; /* Space between title and excerpt */
}

.search-content p {
  margin: 0; /* Remove default margin */
}

.ais-Pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.ais-Pagination--noRefinement {
  display: none;
}

.ads-algolia-index {
  margin: 20px 0;
}