/* Barneo Search Widget - Component Styles */

/* ===== SEARCH INPUT ===== */
.barneo-search-widget .search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--barneo-spacing-sm);
}

.barneo-search-widget .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.barneo-search-widget .search-input {
  width: 100%;
  padding: var(--barneo-spacing-sm) 40px var(--barneo-spacing-sm)
    var(--barneo-spacing-lg);
  border: 1px solid var(--barneo-border-light);
  border-radius: var(--barneo-radius-lg);
  font-size: var(--barneo-font-size-base);
  outline: none;
  transition: border-color var(--barneo-transition-normal);
  background-color: var(--barneo-bg-primary);
  box-sizing: border-box;
  line-height: var(--barneo-line-height-normal);
}

.barneo-search-widget .search-input--has-clear {
  padding-right: 40px;
}

.barneo-search-widget .search-input--small .search-input {
  font-size: var(--barneo-font-size-xs);
  padding: var(--barneo-spacing-sm) var(--barneo-spacing-sm);
}

.barneo-search-widget .search-input--large .search-input {
  font-size: var(--barneo-font-size-base);
  padding: var(--barneo-spacing-md) var(--barneo-spacing-lg);
}

.barneo-search-widget .search-input--loading {
  padding-right: 40px;
}

.barneo-search-widget .search-input--disabled {
  background-color: var(--barneo-bg-disabled);
  color: var(--barneo-text-disabled);
  cursor: not-allowed;
}

.barneo-search-widget .search-input__loader {
  position: absolute;
  right: var(--barneo-spacing-md);
  display: flex;
  align-items: center;
}

.barneo-search-widget .search-input__spinner {
  width: var(--barneo-icon-size);
  height: var(--barneo-icon-size);
  border: 2px solid var(--barneo-gray-200);
  border-top: 2px solid var(--barneo-primary);
  border-radius: var(--barneo-radius-full);
  animation: barneo-spin 1s linear infinite;
}

.barneo-search-widget .search-input__clear {
  position: absolute;
  right: var(--barneo-spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--barneo-text-muted);
  cursor: pointer;
  padding: var(--barneo-spacing-xs);
  border-radius: var(--barneo-radius-sm);
  font-size: var(--barneo-font-size-sm);
  line-height: 1;
  transition: all var(--barneo-transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.barneo-search-widget .search-input__clear:hover {
  background-color: var(--barneo-bg-hover);
  color: var(--barneo-text-secondary);
}

/* ===== SEARCH BUTTON ===== */
.barneo-search-widget .search-button {
  width: var(--barneo-button-size);
  height: var(--barneo-button-size);
  background: var(--barneo-primary);
  border: none;
  border-radius: var(--barneo-radius-md);
  color: var(--barneo-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--barneo-transition-normal);
  flex-shrink: 0;
}

.barneo-search-widget .search-button:hover {
  background: var(--barneo-primary-hover);
}

/* Стили фокуса для input и button только когда включен focus */
.barneo-search-widget--focus-enabled .search-input:focus {
  border-color: var(--barneo-border-focus);
  box-shadow: 0 0 0 3px var(--barneo-primary-light);
}

.barneo-search-widget--focus-enabled .search-button:focus {
  border-color: var(--barneo-border-focus);
  box-shadow: 0 0 0 3px var(--barneo-primary-light);
}

/* ===== SUGGESTIONS DROPDOWN ===== */
.barneo-search-widget .suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--barneo-bg-primary);
  border: 1px solid var(--barneo-border-light);
  border-radius: var(--barneo-radius-lg);
  box-shadow: var(--barneo-shadow-lg);
  margin-top: var(--barneo-spacing-xs);
  z-index: var(--barneo-z-dropdown);
  max-height: var(--barneo-dropdown-max-height);
  overflow-y: auto;
  overflow-x: hidden;
}

.barneo-search-widget .suggestion-section {
  display: flex;
  flex-direction: column;
  gap: var(--barneo-spacing-lg);
  padding: var(--barneo-spacing-lg);
  border-bottom: 1px solid var(--barneo-gray-100);
}

.barneo-search-widget .suggestion-section:last-child {
  border-bottom: none;
}

.barneo-search-widget .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--barneo-spacing-md);
}

.barneo-search-widget .section-title {
  margin: 0;
  font-size: var(--barneo-font-size-sm);
  font-weight: var(--barneo-font-weight-semibold);
  color: var(--barneo-text-primary);
}

.barneo-search-widget .clear-button {
  background: none;
  border: none;
  color: var(--barneo-text-secondary);
  font-size: var(--barneo-font-size-xs);
  cursor: pointer;
  padding: var(--barneo-spacing-xs) var(--barneo-spacing-sm);
  border-radius: var(--barneo-radius-sm);
  transition: color var(--barneo-transition-normal);
}

.barneo-search-widget .clear-button:hover {
  color: var(--barneo-text-primary);
  background: var(--barneo-bg-hover);
}

/* ===== HISTORY ===== */
.barneo-search-widget .history-list {
  display: flex;
  flex-direction: column;
  gap: var(--barneo-spacing-sm);
}

.barneo-search-widget .history-item-container {
  display: flex;
  align-items: center;
  gap: var(--barneo-spacing-xs);
}

.barneo-search-widget .history-item {
  display: flex;
  align-items: center;
  gap: var(--barneo-spacing-sm);
  background: none;
  border: none;
  padding: var(--barneo-spacing-sm) var(--barneo-spacing-md);
  border-radius: var(--barneo-radius-md);
  cursor: pointer;
  transition: background-color var(--barneo-transition-normal);
  text-align: left;
  flex: 1;
}

.barneo-search-widget .history-item:hover {
  background: var(--barneo-bg-hover);
}

.barneo-search-widget .history-delete-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--barneo-spacing-2xl);
  height: var(--barneo-spacing-2xl);
  background: none;
  border: none;
  border-radius: var(--barneo-radius-sm);
  color: var(--barneo-text-muted);
  cursor: pointer;
  transition: all var(--barneo-transition-normal);
  flex-shrink: 0;
}

.barneo-search-widget .history-delete-button:hover {
  background: var(--barneo-bg-hover);
  color: var(--barneo-error);
}

.barneo-search-widget .history-icon {
  color: var(--barneo-text-muted);
  flex-shrink: 0;
}

.barneo-search-widget .history-text {
  color: var(--barneo-text-secondary);
  font-size: var(--barneo-font-size-sm);
}

/* ===== POPULAR QUERIES ===== */
.barneo-search-widget .popular-queries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--barneo-spacing-sm);
}

.barneo-search-widget .query-tag {
  background: var(--barneo-bg-primary);
  border: 1px solid var(--barneo-gray-200);
  border-radius: var(--barneo-radius-xl);
  padding: var(--barneo-spacing-sm) var(--barneo-spacing-md);
  font-size: var(--barneo-font-size-xs);
  color: var(--barneo-text-primary);
  cursor: pointer;
  transition: all var(--barneo-transition-normal);
}

.barneo-search-widget .query-tag:hover {
  background: var(--barneo-bg-hover);
  border-color: var(--barneo-gray-300);
}

/* ===== HINTS ===== */
.barneo-search-widget .hint-list {
  display: flex;
  flex-direction: column;
  gap: var(--barneo-spacing-sm);
  margin-top: var(--barneo-spacing-md);
}

.barneo-search-widget .hint-item {
  display: flex;
  align-items: center;
  gap: var(--barneo-spacing-sm);
  background: none;
  border: none;
  padding: var(--barneo-spacing-sm) var(--barneo-spacing-md);
  border-radius: var(--barneo-radius-md);
  cursor: pointer;
  transition: background-color var(--barneo-transition-normal);
  text-align: left;
  width: 100%;
}

.barneo-search-widget .hint-item:hover {
  background: var(--barneo-bg-hover);
}

.barneo-search-widget .hint-icon {
  color: var(--barneo-text-muted);
  flex-shrink: 0;
}

.barneo-search-widget .hint-text {
  color: var(--barneo-text-secondary);
  font-size: var(--barneo-font-size-sm);
}

.barneo-search-widget .hint-text strong {
  color: var(--barneo-text-primary);
  font-weight: var(--barneo-font-weight-semibold);
}

/* ===== PRODUCTS ===== */
.barneo-search-widget .popular-products {
  display: flex;
  flex-direction: column;
  gap: var(--barneo-spacing-md);
}

.barneo-search-widget .product-item {
  display: flex;
  align-items: center;
  gap: var(--barneo-spacing-md);
  background: none;
  border: none;
  padding: var(--barneo-spacing-sm);
  border-radius: var(--barneo-radius-md);
  cursor: pointer;
  transition: background-color var(--barneo-transition-normal);
  text-align: left;
  width: 100%;
}

.barneo-search-widget .product-item:hover {
  background: var(--barneo-bg-hover);
}

.barneo-search-widget .product-image {
  width: var(--barneo-avatar-size);
  height: var(--barneo-avatar-size);
  border-radius: var(--barneo-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--barneo-bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barneo-search-widget .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barneo-search-widget .product-placeholder {
  font-size: var(--barneo-font-size-2xl);
  color: var(--barneo-text-muted);
}

.barneo-search-widget .product-info {
  flex: 1;
  min-width: 0;
}

.barneo-search-widget .product-name {
  font-size: var(--barneo-font-size-sm);
  color: var(--barneo-text-primary);
  margin-bottom: var(--barneo-spacing-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barneo-search-widget .product-price {
  font-size: var(--barneo-font-size-sm);
  font-weight: var(--barneo-font-weight-semibold);
  color: var(--barneo-text-primary);
}

.barneo-search-widget .availability-out-of-stock {
  font-size: var(--barneo-font-size-sm);
  color: var(--barneo-text-secondary);
  background-color: rgba(220, 193, 38, 0.1);
  color: var(--barneo-warning);
  width: fit-content;
  padding: var(--barneo-spacing-xs) var(--barneo-spacing-md);
  border-radius: var(--barneo-radius-md);
}

/* ===== SEARCH RESULTS ===== */
.barneo-search-widget .search-results {
  border: 1px solid var(--barneo-gray-200);
  border-radius: var(--barneo-radius-md);
  background-color: var(--barneo-bg-primary);
  box-shadow: var(--barneo-shadow-md);
  overflow: hidden;
}

.barneo-search-widget .search-results__loading {
  padding: var(--barneo-spacing-xl);
  text-align: center;
  color: var(--barneo-text-secondary);
}

.barneo-search-widget .search-results__spinner {
  width: var(--barneo-spacing-xl);
  height: var(--barneo-spacing-xl);
  border: 2px solid var(--barneo-gray-200);
  border-top: 2px solid var(--barneo-primary);
  border-radius: var(--barneo-radius-full);
  animation: barneo-spin 1s linear infinite;
  margin: 0 auto var(--barneo-spacing-sm);
}

.barneo-search-widget .search-results__empty {
  padding: var(--barneo-spacing-xl);
  text-align: center;
  color: var(--barneo-text-secondary);
  font-style: italic;
}

.barneo-search-widget .search-results__list {
  max-height: var(--barneo-results-max-height);
  overflow-y: auto;
}

.barneo-search-widget .search-results__item {
  padding: var(--barneo-spacing-md) var(--barneo-spacing-lg);
  border-bottom: 1px solid var(--barneo-gray-100);
  cursor: pointer;
  transition: background-color var(--barneo-transition-normal);
}

.barneo-search-widget .search-results__item:last-child {
  border-bottom: none;
}

.barneo-search-widget .search-results__item:hover {
  background-color: var(--barneo-bg-hover);
}

.barneo-search-widget .search-results__item--selected {
  background-color: var(--barneo-primary-light);
  border-left: 3px solid var(--barneo-primary);
}

.barneo-search-widget .search-results__item-title {
  font-weight: var(--barneo-font-weight-medium);
  color: var(--barneo-text-primary);
  margin-bottom: var(--barneo-spacing-xs);
}

.barneo-search-widget .search-results__item-description {
  font-size: var(--barneo-font-size-sm);
  color: var(--barneo-text-secondary);
  line-height: var(--barneo-line-height-relaxed);
}

.barneo-search-widget .search-results__highlight {
  background-color: #fef3c7;
  color: #92400e;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: var(--barneo-font-weight-semibold);
}

/* ===== SEARCH CONTAINER ===== */
.barneo-search-widget .search-container {
  position: relative;
  width: 100%;
}

.barneo-search-widget .search-container .search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--barneo-z-dropdown);
  margin-top: var(--barneo-spacing-xs);
}

/* ===== SKELETON LOADING ===== */
.barneo-search-widget .skeleton-title {
  width: 140px;
  height: 18px;
  background: var(--barneo-bg-skeleton);
  border-radius: var(--barneo-radius-sm);
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
  margin: 0;
}

.barneo-search-widget .skeleton-tag {
  height: 28px;
  background: var(--barneo-bg-skeleton);
  border-radius: var(--barneo-radius-xl);
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
  border: none;
  cursor: default;
}

.barneo-search-widget .skeleton-tag:hover {
  background: var(--barneo-bg-skeleton);
  border-color: transparent;
}

.barneo-search-widget .skeleton-image {
  width: var(--barneo-avatar-size);
  height: var(--barneo-avatar-size);
  background: var(--barneo-bg-skeleton);
  border-radius: var(--barneo-radius-full);
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.barneo-search-widget .skeleton-product-name {
  height: 14px;
  background: var(--barneo-bg-skeleton);
  border-radius: var(--barneo-radius-sm);
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
  margin-bottom: var(--barneo-spacing-xs);
}

.barneo-search-widget .skeleton-product-price {
  height: 14px;
  background: var(--barneo-bg-skeleton);
  border-radius: var(--barneo-radius-sm);
  animation: barneo-skeleton-pulse 1.5s ease-in-out infinite;
}

/* ===== STATES ===== */
.barneo-search-widget .error-state {
  padding: var(--barneo-spacing-lg);
  color: var(--barneo-error);
  font-size: var(--barneo-font-size-sm);
  text-align: center;
}

.barneo-search-widget .no-results {
  padding: var(--barneo-spacing-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--barneo-spacing-md);
}

.barneo-search-widget .no-results-icon {
  font-size: var(--barneo-font-size-3xl);
  color: var(--barneo-text-muted);
  margin-bottom: var(--barneo-spacing-sm);
}

.barneo-search-widget .no-results-text {
  display: flex;
  flex-direction: column;
  gap: var(--barneo-spacing-sm);
}

.barneo-search-widget .no-results-title {
  font-size: var(--barneo-font-size-lg);
  font-weight: var(--barneo-font-weight-semibold);
  color: var(--barneo-text-primary);
  margin-bottom: var(--barneo-spacing-xs);
}

.barneo-search-widget .no-results-query {
  font-size: var(--barneo-font-size-sm);
  color: var(--barneo-text-secondary);
  margin-bottom: var(--barneo-spacing-sm);
}

.barneo-search-widget .no-results-query strong {
  color: var(--barneo-text-primary);
  font-weight: var(--barneo-font-weight-semibold);
}

.barneo-search-widget .no-results-suggestions {
  font-size: 13px;
  color: var(--barneo-text-muted);
  font-style: italic;
}