/* --- Base Search Styles --- */



#searchContainer {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 1001; /* Ensure it's properly layered */

}



#icon-container #showSearchBtn img {

  /* Inherits size and hover from #icon-container .control_btn */

}



#searchContainer .search-inner-container {

  background: #f0ead8;

  padding: 8px;

    border-radius: 8px;

    width: 300px;

  max-width: 85vw;

  display: none;

  font-family: "Poppins", sans-serif;

  opacity: 0;

  transform-origin: top right; /* Đặt điểm gốc ở góc trên bên phải */

  transform: scale(0.1); /* Bắt đầu từ kích thước rất nhỏ */

  transition: opacity 0.3s ease-out, transform 0.3s ease-out,

    visibility 0s linear 0.3s;

  visibility: hidden;

  position: absolute;

  top: 100%;

  right: 0;

  z-index: 1002;

}



#searchContainer .search-inner-container.visible {

  display: block;

  opacity: 1;

  transform: scale(1); /* Mở rộng đến kích thước đầy đủ */

  visibility: visible;

  transition: opacity 0.3s ease-out, transform 0.3s ease-out,

    visibility 0s linear 0s;

  height: 55  px;

  border-radius: 20px;

  width: 300px;

  animation: searchExpand 0.3s ease-out forwards;

}



#searchContainer .input-group {

  display: flex;

  width: 100%;

  border-radius: 5px;

  overflow: hidden;

}



#searchContainer .search-input {

  flex-grow: 1;

  border: none;

  padding: 8px 8px;

  font-size: 14px;

  border-radius: 15px 0px 0px 15px;

  border: 1px solid #f0ead8;

  outline: none;

  background-color: #f0ead8;

}



/* Thêm style cho trạng thái focus của input */

#searchContainer .search-input:focus {

  border: 1px solid #a97c50; /* Thay đổi màu viền khi focus */

  box-shadow: 0 0 0 2px rgba(169, 124, 80, 0.2); /* Thêm shadow nhẹ khi focus */

  outline: none; /* Đảm bảo không có outline */

}



/* Cập nhật style cho container khi input được focus */

#searchContainer .search-inner-container:focus-within {

  border-color: #a97c50;

  box-shadow: 0 0 5px rgba(169, 124, 80, 0.3);

}



/* --- UPDATED BUTTON STYLES --- */

#searchContainer .search-button-inline,

#searchContainer .mic-button {

  padding: 8px 10px;

  cursor: pointer;

  background-color: #f0ead8;

  border: none;

  border-left: 1px solid #f0ead8;

  display: flex;

  align-items: center;

  justify-content: center;

  /* Add transition for background and transform */

  transition: background-color 0.2s ease, transform 0.1s ease;

  /* Ensure transform origin is centered */

  transform-origin: center;

}

#searchContainer .mic-button {

  border-radius: 0 5px 5px 0;

}



/* --- HOVER STATE for Buttons --- */

#searchContainer .search-button-inline:hover,

#searchContainer .mic-button:hover {

  background-color: #f0ead8;

  /* Slight scale up on hover */

  transform: scale(1.05);

}

/* Optional: Slightly brighten icon on button hover */

#searchContainer .search-button-inline:hover .search-icon-inline,

#searchContainer .mic-button:hover .mic-icon {

  filter: brightness(1.1);

}



/* --- ACTIVE STATE for Buttons (Touch/Click Feedback) --- */

#searchContainer .search-button-inline:active,

#searchContainer .mic-button:active {

  background-color: #f0ead8; /* Slightly darker for active */

  /* Scale down slightly when pressed */

  transform: scale(0.95);

  /* Ensure transition is fast for active state */

  transition-duration: 0.05s;

}

/* Optional: Reset icon brightness during active press */

#searchContainer .search-button-inline:active .search-icon-inline,

#searchContainer .mic-button:active .mic-icon {

  filter: brightness(1);

}



/* Icons inside the buttons */

#searchContainer .search-icon-inline,

#searchContainer .mic-icon {

  width: 24px;

  height: 24px;

  vertical-align: middle;

  display: block;

  /* Add transition for filter */

  transition: filter 0.2s ease;

}



/* Suggestions dropdown */

#searchContainer .suggestions {

  position: absolute;

  top: calc(100% + 5px);

  left: 0;

  width: 100%;

  background: #f0ead8;

  border: 1px solid #ddd;

  border-top: none;

  border-radius: 0 0 5px 5px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  max-height: 200px;

  overflow-y: auto;

  z-index: 1005;

  display: none;

  list-style: none;

  padding: 0;

  margin: 0;

  opacity: 0;

  transform: translateY(-10px);

  transition: opacity 0.2s ease-out, transform 0.2s ease-out;

}



#searchContainer .suggestions.show {

  display: block;

  border-radius: 20px;

  width: 315px;

  opacity: 1;

  transform: translateY(0);

  animation: suggestionsAppear 0.25s ease-out forwards;

}



/* Individual suggestion items */

#searchContainer .suggestions .list-group-item {

  padding: 10px 12px;

  cursor: pointer;

  font-size: 14px;

  border-bottom: 1px solid #eee;

  background-color: F0EAD8;

  color: #a97c50;

  transition: background-color 0.2s ease;

  border-radius: 0;

  border-left: none;

  border-right: none;

  border-top: none;

}

#searchContainer .suggestions .list-group-item:last-child {

  border-bottom: none;

}

#searchContainer .suggestions .list-group-item:hover,

#searchContainer .suggestions .list-group-item.highlight {

  background-color: #f0ead8;

}



/* Mic button listening state */

#mic-button.listening {

  background-color: #f16875;

  animation: pulse 1.5s infinite ease-in-out;

  transform: scale(1); /* Override hover/active scale when listening */

}

#mic-button.listening:hover {

  background-color: #e85865; /* Darker red on hover when listening */

  transform: scale(1.05); /* Allow scale on hover even when listening */

}

#mic-button.listening:active {

  background-color: #d74855; /* Even darker red on active when listening */

  transform: scale(0.95); /* Allow scale on active */

}



#mic-button.listening img {

  filter: brightness(0) invert(1);

}



@keyframes pulse {

  0% {

    opacity: 1; /* transform: scale(1); */

  } /* Remove scale from pulse if button handles it */

  50% {

    opacity: 0.7; /* transform: scale(0.95); */

  }

  100% {

    opacity: 1; /* transform: scale(1); */

  }

}



/* --- Animation Styles for Search Container --- */



/* Animation khi hiển thị search */

@keyframes searchExpand {

  0% {

    opacity: 0;

    transform: scale(0.1);

  }

  70% {

    opacity: 1;

    transform: scale(1.05); /* Hiệu ứng hơi lớn hơn một chút */

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}



/* Animation khi ẩn search */

@keyframes searchCollapse {

  0% {

    opacity: 1;

    transform: scale(1);

  }

  100% {

    opacity: 0;

    transform: scale(0.1);

  }

}



/* Class để áp dụng animation khi ẩn */

#searchContainer .search-inner-container.hiding {

  animation: searchCollapse 0.3s ease-in forwards;

}



/* Cập nhật style cho suggestions để có animation tương tự */

#searchContainer .suggestions {

  position: absolute;

  top: calc(100% + 5px);

  left: 0;

  width: 100%;

  background: #f0ead8;

  border: 1px solid #ddd;

  border-top: none;

  border-radius: 0 0 5px 5px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  max-height: 200px;

  overflow-y: auto;

  z-index: 1005;

  display: none;

  list-style: none;

  padding: 0;

  margin: 0;

  opacity: 0;

  transform: translateY(-10px);

  transition: opacity 0.2s ease-out, transform 0.2s ease-out;

}



#searchContainer .suggestions.show {

  display: block;

  border-radius: 20px;

  width: 315px;

  opacity: 1;

  transform: translateY(0);

  animation: suggestionsAppear 0.25s ease-out forwards;

}



@keyframes suggestionsAppear {

  0% {

    opacity: 0;

    transform: translateY(-10px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Class để áp dụng animation khi ẩn suggestions */

#searchContainer .suggestions.hiding {

  animation: suggestionsDisappear 0.2s ease-in forwards;

}



@keyframes suggestionsDisappear {

  0% {

    opacity: 1;

    transform: translateY(0);

  }

  100% {

    opacity: 0;

    transform: translateY(-10px);

  }

}



/* --- RESPONSIVE MEDIA QUERIES --- */



/* Medium Screens (Tablets, Large Phones) */

@media (max-width: 768px) {

  #searchContainer {

    /* top: 15px;

    right: 15px; */

  }

  #searchContainer .search-inner-container {

    width: 250px;

    position: relative;

    /* top: 40px;

    right: 40%; */

  }

}



/* Small Screens (Typical Phones) */

@media (max-width: 480px) {

  #searchContainer {

  right: 80% !important;

  top: -30% !important;

  position: absolute !important;

  }

  #searchContainer .search-inner-container {

    width: auto;

    max-width: calc(100vw - 50px);

    padding: 6px;

    position: relative;

    /* top: 40px;

    right: 60px; */

    transform: translateX(-50%);

  }

  #searchContainer .search-input {

    padding: 6px 10px;

    font-size: 13px;

  }

  #searchContainer .search-button-inline,

  #searchContainer .mic-button {

    padding: 6px 8px;

    /* Adjust hover/active scale slightly if needed for smaller buttons */

    /* transform: scale(1.03); on hover */

    /* transform: scale(0.97); on active */

  }

  #searchContainer .search-icon-inline,

  #searchContainer .mic-icon {

    width: 16px;

    height: 16px;

  }

  #searchContainer .suggestions .list-group-item {

    padding: 8px 10px;

    font-size: 13px;

  }

  #searchContainer .suggestions{

    max-height: 220px;

  }

  #searchContainer .suggestions.show{

    width: 280px;

  }

}



/* Very Small Screens (e.g., iPhone 5/SE width) */

@media (max-width: 360px) {

  #searchContainer {

    top: 10px;

    right: 10px;

  }

  #searchContainer .search-inner-container {

    max-width: calc(100vw - 40px);

    padding: 5px;

  }

  #searchContainer .search-input {

    padding: 5px 8px;

    font-size: 12px;

  }

  #searchContainer .search-button-inline,

  #searchContainer .mic-button {

    padding: 5px 6px;

  }

  #searchContainer .search-icon-inline,

  #searchContainer .mic-icon {

    width: 14px;

    height: 14px;

  }

  #searchContainer .suggestions .list-group-item {

    padding: 6px 8px;

    font-size: 12px;

  }

}



#searchContainer {

  position: fixed;

  z-index: 1;

  align-items: center;

  right: 60px;

  top: 12%;

}



/* Thêm style cho phân loại kết quả tìm kiếm */

#searchContainer .suggestion-title {

  font-weight: bold;

  padding: 8px 12px;

  background-color: #f0ead8;

  border-bottom: 1px solid #f0ead8;

  color: #a97c50;

  font-size: 13px;

}



#searchContainer .suggestion-category {

  font-weight: bold;

  padding: 6px 12px;

  background-color: #f0ead8;

  border-bottom: 1px solid #eee;

  color: #a97c50;

  font-size: 12px;

}



#searchContainer .no-results {

  padding: 10px 12px;

  color: #a97c50;

  font-style: italic;

  text-align: center;

  font-size: 13px;

}



/* Cải thiện hiệu ứng hover cho các mục gợi ý */

#searchContainer .suggestions .list-group-item {

  transition: background-color 0.15s ease;

  cursor: pointer;

}



#searchContainer .suggestions .list-group-item:hover {

  background-color: #f0f0f0;

}



#searchContainer .suggestions .list-group-item.highlight {

  background-color: #e8f0fe;

  border-left: 3px solid #4285f4;

}



/* Cải thiện hiển thị khi có nhiều kết quả */

#searchContainer .suggestions {

  max-height: 300px;

  overflow-y: auto;

  scrollbar-width: thin;

}



#searchContainer .suggestions::-webkit-scrollbar {

  width: 6px;

}



#searchContainer .suggestions::-webkit-scrollbar-thumb {

  background-color: #ccc;

  border-radius: 3px;

}



#searchContainer .suggestions::-webkit-scrollbar-track {

  background-color: #f5f5f5;

}