/* Base container for the live search component. */
.rcom-live-search {
  position: relative;
  max-width: 480px;
  width: 100%;
  /* Ensure that the live search wrapper sits on top of other header elements
     when the results panel is displayed. A high z-index on the parent
     creates a new stacking context and prevents siblings from overlapping
     the dropdown. */
  z-index: 30000;
}

/* Input styling: pill shape with a soft border and focus halo. */
.rcom-live-input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.rcom-live-input:focus {
  border-color: #2774f0;
  box-shadow: 0 0 0 3px rgba(39, 116, 240, 0.25);
}

/* Results panel. Hidden by default and absolutely positioned relative to its container. */
.rcom-live-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Place the results panel above everything else on the page.
     This value must be greater than the z-index on the parent and any
     theme elements in the header to avoid being overlapped. */
  z-index: 30001;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  display: none;
  /* Increase the maximum height so more results can be displayed without scrolling */
  max-height: 450px;
  overflow-y: auto;
  /* Slightly wider by default to better accommodate long product names */
  min-width: 350px;
}

/* Show the panel when we toggle the visible class from JS. */
.rcom-live-results.visible {
  display: block;
}

/* Group headings and list items. */
.rcom-group-title {
  padding: 6px 12px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  border-bottom: 1px solid #f3f4f6;
}

.rcom-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  color: #111827;
  text-decoration: none;
  /* Ensure each result item is opaque with a white background to avoid bleeding through underlying content */
  background: #ffffff;
}

.rcom-item:hover,
.rcom-item.active {
  background: #f3f4f6;
}

.rcom-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #f9fafb;
}

.rcom-name {
  font-size: 0.95rem;
  line-height: 1.3;
}

.rcom-price {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Desktop: enlarge the search bar. On viewports wider than 992px,
   we explicitly set a larger width for the search container and
   its list item to occupy more horizontal space. This makes the
   search bar roughly twice as wide as the default. Mobile styling
   remains unchanged. */
@media (min-width: 992px) {
  /* For nav placement: give the <li> containing the search a fixed
     basis so it doesn't shrink and aligns nicely in the flex row. */
  .rcom-live-li {
    /* Set a fixed width on desktop that's large enough to fit the
       placeholder “Wyszukiwanie produktów i kategorii” without
       dominating the header. Increasing this value slightly helps
       accommodate the full text while keeping the nav items on one line. */
    flex: 0 0 480px;
  }
  .rcom-live-search {
    max-width: 480px;
  }
  /* Prevent nav items from wrapping onto multiple lines on larger screens. */
  .rcom-inline-ul {
    flex-wrap: nowrap;
  }
}

/* When our search bar is inside a <ul>, flex the row automatically. */
.rcom-inline-ul {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Push the search bar to the far right when placed in nav */
.rcom-inline-ul > li:last-child {
  margin-left: auto;
}

/* Remove default list bullets when the search bar is inserted into a <li>. */
.rcom-live-li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* When the live search <li> is inside an inline UL, remove bullets explicitly */
.rcom-inline-ul .rcom-live-li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Widen the results panel so that product names and prices have more space. */
.rcom-live-results {
  min-width: 300px;
}

/* Mobile responsiveness: wrap nav items and let the search bar take full width */
@media (max-width: 991px) {
  .rcom-inline-ul {
    flex-wrap: wrap;
    gap: 12px;
  }
  .rcom-inline-ul > li:last-child {
    margin-left: 0;
    flex-basis: 100%;
  }
  .rcom-live-search {
    width: 100%;
    max-width: none;
  }
  .rcom-live-results {
    left: 0;
    right: 0;
  }
}