/* Search for floating layer styles */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EAE4DD;
  z-index: 1000;
  display: none; /* follow-upJScontrol */
  flex-direction: column;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.search-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Search for the top of the floating layer */
.search-overlay-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px; /* Figma spacing */
}
.search-overlay-topbar .logo {
  /* font-size: 28px; */ /* Slightly smaller than the main navigation barrierlogo - Replaced by picture */
  /* font-weight: bold; */ /* - Replaced by picture */
  display: flex; /* add flex To help align images */
  align-items: center; /* Vertically centered image */
}
/* Regarding the search floating layerLogopicture，Application specific size */
.search-overlay-topbar .site-logo {
    height: 30px;
}
.search-overlay-topbar-icons {
  display: flex;
  align-items: center; /* Vertically align icons */
  gap: 20px; /* Figma Icon spacing */
}

/* General style for icons in search overlay top bar */
.search-overlay-topbar-icons > * { /* Target direct children: img for heart/bag, span for close */
  display: flex; 
  align-items: center;
  justify-content: center;
}

.search-overlay-topbar-icons img { /* For heart and bag images */
  width: 24px;
  height: 24px;
  object-fit: contain;
  cursor: pointer;
  opacity: 1; /* Ensure no transparency by default for img icons */
}

/* Specifically target the bag icon in search if further refinement is needed */
.search-overlay-topbar-icons img[src="images/shopping_bag.svg"] {
    width: 24px; /* Ensure size consistency */
    height: 24px;
    opacity: 1; /* Explicitly set opacity to 1, overriding any other general rule if necessary */
}

.search-overlay-topbar-icons .icon-close-search { /* For the close button (span) */
  font-size: 22px; /* Keep its original size or adjust as needed */
  font-weight: bold;
  cursor: pointer;
  line-height: 1; /* Helps with vertical alignment of text/span */
}

/* Search input area */
.search-overlay-input-area {
  display: flex;
  align-items: center;
  background-color: #FFFFFF; /* Figma Background color of input box */
  border-radius: 10px; /* Figma rounded corners */
  padding: 15px 20px;
  width: 100%;
  max-width: 700px; /* Figma width */
  margin-bottom: 30px; /* Figma spacing */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.search-overlay-input-area input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 20px; /* Figma font size */
  font-family: 'Poppins', sans-serif;
  background-color: transparent;
}
.search-overlay-input-area input[type="text"]::placeholder {
  color: #AAA; /* Figma placeholdercolour */
}
.search-overlay-icon-search {
  margin: 0 10px;
}
.search-overlay-icon-search img {
  width: 24px;
  height: 24px;
}

/* Recommended search terms */
.search-overlay-suggestions {
  display: flex;
  gap: 15px; /* Figma Button spacing */
  margin-bottom: 40px; /* Figma spacing */
}
.search-overlay-suggestions button {
  background-color: #FFFFFF; /* Figma Button background color */
  color: #000000; /* Figma Text color */
  border: 1px solid #CCC; /* Figma frame */
  border-radius: 20px; /* Figma rounded corners */
  padding: 10px 20px;
  font-size: 16px; /* Figma font size */
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.search-overlay-suggestions button:hover {
  background-color: #51393A;
  color: #FFFFFF;
  border-color: #51393A;
}

/* searchpreview for google  */
.search-results-preview {
  background-color: #FFFFFF; /* Figma background color */
  border-radius: 10px; /* Figma rounded corners */
  width: 100%;
  max-width: 700px; /* Same width as the input box */
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none; /* Default Hide */
}
.search-results-preview.active {
  display: block;
}
.results-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px; /* Figma font size */
  color: #000000;
  margin: 0 0 15px 0; /* Figma spacing */
  padding-bottom: 10px;
  border-bottom: 1px solid #EEE; /* Figma Dividing line */
}
.results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.result-item {
  display: flex;
  align-items: center;
  padding: 15px 0; /* Figma Up and down spacing */
  border-bottom: 1px solid #EEE; /* Figma Dividing line */
  cursor: pointer;
}
.result-item:last-child {
  border-bottom: none;
}
.result-item:hover {
  background-color: #f9f9f9;
}
.result-item-icon {
  width: 20px; /* Figma size */
  height: 20px;
  margin-right: 15px; /* Figma Icon to text spacing */
  opacity: 0.5; /* The icon can be lighter */
}
.result-item-name {
  font-family: 'Poppins', sans-serif;
  font-size: 16px; /* Figma font size */
  color: #000000;
}