/* поле поиска */
/* поле поиска */
#liveSearch {
  flex: 1;
  height: 48px;              /* фиксированная высота */
  padding: 0 16px;           /* убрали вертикальный padding */
  border-radius: 24px;
  border: 1px solid #dadce0;
  font-size: 16px;
  line-height: 48px;         /* выравнивание текста по центру */
  transition: all 0.2s ease;
  min-width: 0;
  box-sizing: border-box;
}
#liveSearch:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

/* контейнер подсказок */
.live-suggestions {
  position: absolute; /* относительно body */
  z-index: 3000; /* максимально над другими элементами */
  background: #ffffff; /* чистый белый фон */
  border: 1px solid #e0e0e0; /* чуть светлее для мягкости */
  border-radius: 16px; /* более мягкие углы */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06); /* мягкая тень */
  max-height: 520px;
  overflow-y: auto;
  animation: fadeIn 0.2s ease-out;
  min-width: 280px; /* минимальная ширина */
  transition: all 0.15s ease-in-out;
  
  /* ключевое: ширина и позиция */
  left: 50%;
  transform: translateX(calc(-50% + 120px));
  width: var(--main-container);
  box-sizing: border-box; /* учитываем паддинги */
  margin-top: -8px;
  
}

/* если нужно, чтобы подсказки могли выходить за контейнер */
.live-search {
  position: relative; /* контейнер для абсолютного позиционирования подсказок */
}



/* анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* группы */
.suggestion-group { margin: 0; padding: 6px 0; border-bottom: 1px solid #f1f3f4; }
.suggestion-group:last-child { border-bottom: none; }
.sg-title { font-weight: 500; padding: 4px 12px; color: #5f6368; font-size: 12px; text-transform: uppercase; }

/* элемент результата */
.s-item {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.s-item:hover, .s-item.active { background: #f1f3f4; }
.s-thumb {
  width: 40px; height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: #f8f9fa;
}
.s-info { flex:1; min-width:0; }
.s-name {
  font-size: 14px;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-meta {
  font-size: 12px;
  color: #5f6368;
  margin-top: 2px;
  display: flex;
  gap: 6px;
}
.s-price { font-weight: 500; color: #188038; }
.s-old { text-decoration: line-through; color: #9aa0a6; font-size: 12px; }

/* компактные списки */
.s-compact { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px; }
.s-pill {
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid #dadce0;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.s-pill:hover { background: #f1f3f4; border-color: #c6c6c6; }

/* "Показать все результаты" */
.show-all {
  display: block;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #f1f3f4;
  color: #1a73e8;
  font-weight: 500;
  font-size: 14px;
}
.show-all:hover { background: #f1f3f4; }

/* подсветка */
mark {
  background: #fff7ae;
  color: inherit;
  padding: 0;
  border-radius: 2px;
}


.ls-field {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative; /* важно для абсолютного позиционирования подсказок */
}


/* кнопка */
#liveSearchBtn {
  flex: 0 0 auto;
  width: 48px;               /* высота и ширина одинаковые */
  height: 48px;
  border: none;
  background: #f8f9fa;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
}

#liveSearchBtn:hover {
  background: #e8f0fe;
  color: #1a73e8;
}

#liveSearchBtn .icon-search {
  width: 20px;
  height: 20px;
}

.live-search {
  position: relative;
}