#search_widget,
.search-widget {
  margin-bottom: .625rem;
  overflow: auto;
}

#search_widget form,
.search-widget form {
  position: relative;
}

#search_widget form input,
.search-widget form input {
  width: 360px !important;
  padding: 8px 16px !important;
  outline: none !important;
  background: var(--color-neutral-10, #E5E5E5) !important;

  border: 1px solid #E5E5E5;
  border-radius: 32px !important;
  font-family: var(--font-family-family-primary, Sora) !important;
  font-size: 14px !important;
  color: #000 !important;
  transition: all 0.3s ease !important;
}

#search_widget form input:focus,
.search-widget form input:focus {
  border-radius: 48px !important;
  border: 1px solid #B2B2B2 !important;
  background: var(--color-neutral-white, #FFF) !important;
  padding: 8px 16px !important;
}

.ui-autocomplete.searchbar-autocomplete {
  width: 100%;
  min-height: 100%;
  border-radius: var(--radius-small, 8px);
  border: 1px solid var(--color-neutral-8-base, #B2B2B2);
  background: var(--background-color-base, #FFF);
  box-shadow: 0 4px 12px 0 var(--color-neutral-10, #E5E5E5);
  max-height: 375px;
  overflow-y: auto;
  padding: 8px 8px 8px 8px;
  margin-top: 4px;
  z-index: 9999;
}

/* Stylowanie scrollbara */
.ui-autocomplete.searchbar-autocomplete::-webkit-scrollbar {
  width: 6px;
}

.ui-autocomplete.searchbar-autocomplete::-webkit-scrollbar-track {
  background: transparent;
}

.ui-autocomplete.searchbar-autocomplete::-webkit-scrollbar-thumb {
  background: #E5E5E5;
  border-radius: 3px;
}

.ui-autocomplete.searchbar-autocomplete::-webkit-scrollbar-thumb:hover {
  background: #D0D0D0;
}

/* Dla Firefox */
.ui-autocomplete.searchbar-autocomplete {
  scrollbar-width: thin;
  scrollbar-color: #595959 transparent;
}

.ui-autocomplete.searchbar-autocomplete li {
  border-bottom: none;
  list-style: none;
}

.ui-autocomplete.searchbar-autocomplete li:last-child {
  border-bottom: none;
}

.ui-autocomplete.searchbar-autocomplete li a,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  padding: 0;
  border: none;
  background: transparent;
  margin: 0;
  border-radius: 0;
  display: block;
  text-decoration: none;
  color: #000;
  padding: 0;
}

.ui-autocomplete.searchbar-autocomplete li a:hover,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {

  cursor: pointer;
}

.autocomplete-item-link {
  display: block;
  width: 100%;
}

.autocomplete-item-content {
  display: flex;
  align-items: center;
  padding-left: 1px;
  gap: 12px;
  border-radius: var(--radius-x-small, 4px);
}

.ui-autocomplete.searchbar-autocomplete li a:hover .autocomplete-item-content,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus .autocomplete-item-content {
  background-color: var(--color-brand-two-10, #F3EFEA);
}


.autocomplete-thumbnail {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-x-small, 4px);
  background: #FFFFFF;
}

.autocomplete-item-text {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
}

.autocomplete-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.autocomplete-product-name {
  font-family: var(--font-family-family-primary, Sora);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-color-base-secondary, #595959);
  display: block;
}

.autocomplete-product-name .highlight {
  color: var(--text-color-base-primary, #000);
  font-weight: 600;
}

.autocomplete-product-category {
  font-family: var(--font-family-family-primary, Sora);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: var(--text-color-base-tetriary, #888);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Styl dla separatora strzałki w kategorii */
.autocomplete-product-category .category-separator {
  display: inline-flex;
  align-items: center;
  width: 10px;
  height: 10px;
}

.autocomplete-product-category .category-separator svg {
  width: 10px;
  height: 10px;
}

.autocomplete-item-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z' fill='%23E4FD71'/%3E%3Cmask id='mask0_59_9857' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_59_9857)'%3E%3Cpath d='M4.86154 12L4 11.1385L9.90769 5.23077H4.61538V4H12V11.3846H10.7692V6.09231L4.86154 12Z' fill='%23183030'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.2s;
  align-self: center;
}

.ui-autocomplete.searchbar-autocomplete li a:hover .autocomplete-item-arrow,
.ui-autocomplete.searchbar-autocomplete li a.ui-state-focus .autocomplete-item-arrow {
  opacity: 1;
}

@media only screen and (min-width: 768px) {

  #search_widget,
  .search-widget {
    float: right;
    margin-bottom: 0;
  }

  .ui-autocomplete.searchbar-autocomplete {
    width: 600px;
    min-height: auto;
  }
}

@media only screen and (min-width: 992px) {

  #search_widget,
  .search-widget {
    min-width: 16.5rem;
  }
}