#custom-search-input{
height: 80px;
font-size: 18px;
font-family: var(--e-global-typography-a321aa8-font-family), Sans-serif;
    font-weight: 400;
    line-height: var(--e-global-typography-a321aa8-line-height);
    letter-spacing: var(--e-global-typography-a321aa8-letter-spacing);
    word-spacing: var(--e-global-typography-a321aa8-word-spacing);
border-style: none;
outline: none;
}

#search-results-list .no-results {
  font-size: 18px;
  font-family: var(--e-global-typography-a321aa8-font-family), Sans-serif;
  font-weight: 400;
  line-height: var(--e-global-typography-a321aa8-line-height);
  letter-spacing: var(--e-global-typography-a321aa8-letter-spacing);
  word-spacing: var(--e-global-typography-a321aa8-word-spacing);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Adjust padding as needed */
  text-align: center;
  width: 100%;
}

/* If the .no-results is the only child, remove the bottom border from the parent ul */
#search-results-list:only-child {
  border-bottom: none;
}


#search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* Ensures the child elements adhere to the container's border radius */
}

#search-results-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee; /* subtle border for each item */
  transition: background-color 0.2s;
}


#search-results-list li:hover {
background-color: var(--e-global-color-7a2b158);
}

#search-results-list li:last-child {
  border-bottom: none; /* Remove bottom border for the last item */
}



#search-results-list li a {
  display: flex;
  text-decoration: none;
  align-items: center; /* Align the image and text content vertically */
  padding: 12px;
  width: 100%;
  color: #333;
}

#search-results-list li img {
  flex-shrink: 0; /* Prevent the image from shrinking */
  width: 60px; /* Image width */
  height: 60px; /* Image height, same as width to keep it square */
  margin-right: 16px;
  border-radius: 6px; /* Optional: if you want rounded corners */
  object-fit: cover;
}

#search-results-list li .text-content {
  display: flex;
  flex-direction: column; /* Stack the title and excerpt vertically */
  justify-content: center;
  flex-grow: 1;
  min-width: 0; /* Fixes an issue where flex items won't shrink properly */
}

#search-results-list li h3 {
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  margin: 0 0 4px 0; /* Add some margin below the title */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds an ellipsis if the title is too long */
}

#search-results-list li p {
  font-size: 12px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds an ellipsis if the excerpt is too long */
}



.searchmenu-container {
  max-height: 600px; /* Adjust this value based on your preference */
  overflow-y: auto;
}

/* Style for the "Load More" button */
.load-more-results {
  text-align: center;
  padding: 16px;
  cursor: pointer;
  justify-content: center;
  font-family: var(--e-global-typography-a321aa8-font-family), Sans-serif;
  font-weight: 400;
  line-height: var(--e-global-typography-a321aa8-line-height);
  letter-spacing: var(--e-global-typography-a321aa8-letter-spacing);
  word-spacing: var(--e-global-typography-a321aa8-word-spacing);
}

/* Optional: hover effect for the "Load More" button */
.load-more-results:hover {
  background-color: #e0e0e0; /* Slightly darker grey on hover */
}


.dialog-close-button{
  border-radius: 50px;
  padding: 10px;
}


.group-title {
  font-size: 16px;
  font-family: var(--e-global-typography-a321aa8-font-family), Sans-serif;
  font-weight: 500;
  padding: 12px;
  background-color: #f7f7f7; /* Light background for the group title */
  border-bottom: 1px solid #eee;
}


/* Desktop Search Input Styles */
#desktop-search-input {
  height: 50px;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
}

#desktop-search-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust based on your layout */
  margin: 0 auto; /* Center the search bar */
}

#desktop-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
}

#desktop-search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px; /* Adjust as needed */
  overflow-y: auto;
}

#desktop-search-results-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s;
}

#desktop-search-results-list li:last-child {
  border-bottom: none;
}

#desktop-search-results-list li:hover {
  background-color: #f7f7f7;
}

#desktop-search-results-list li a {
  display: flex;
  text-decoration: none;
  align-items: center;
  width: 100%;
  color: #333;
}

#desktop-search-results-list li img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 16px;
  border-radius: 6px;
  object-fit: cover;
}

#desktop-search-results-list li .text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0;
}

#desktop-search-results-list li h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#desktop-search-results-list li p {
  font-size: 14px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Load More Button */
.load-more-results {
  text-align: center;
  padding: 16px;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 0 0 5px 5px;
}

.load-more-results:hover {
  background-color: #e0e0e0;
}

/* Group Title */
.group-title {
  font-size: 16px;
  font-weight: 500;
  padding: 12px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #eee;
}

/* Mobile Search Input Styles */
#custom-search-input {
  height: 80px;
  font-size: 18px;
  padding: 10px;
  border: none;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}