/**
 * Search Dropdown Position Fix
 * Attaches dropdown directly under search pill
 * Compact no-results, larger search icon
 */

/* ============================================
   Search Container - Must Be Relative
   ============================================ */

.stitch-search,
.lula-search-wrapper,
.lula-smart-search {
  position: relative !important;
}

/* Remove Bootstrap form margin that creates gap below pill */
.stitch-search form,
.stitch-search .input-group,
.stitch-search .mb-3 {
  margin-bottom: 0 !important;
}

/* ============================================
   Dropdown - Attached Under Pill
   ============================================ */

.lula-search-dropdown,
.lula-autocomplete-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(107, 102, 97, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(31, 31, 28, 0.12) !important;
  max-height: 420px !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  transform: none !important;
}

/* Results scrollable area inside dropdown */
.lula-search-dropdown .lula-search-results {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px !important;
}

/* ============================================
   No-Results State - Compact 120-150px
   ============================================ */

.lula-search-no-results {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 20px !important;
  gap: 6px !important;
  min-height: 120px !important;
  max-height: 150px !important;
  text-align: center !important;
  color: #6B6661 !important;
}

.lula-search-no-results svg {
  width: 28px !important;
  height: 28px !important;
  color: rgba(107, 102, 97, 0.4) !important;
  margin-bottom: 2px !important;
}

.lula-search-no-results p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2D2A27 !important;
}

.lula-search-hint {
  font-size: 12px !important;
  color: #8A8580 !important;
}

/* ============================================
   Search Icon - Larger & Clearer
   ============================================ */

.lula-search-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  color: #4C6358 !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.lula-search-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.5 !important;
}

.stitch-search input[name="search"]:focus ~ .lula-search-icon,
.lula-search-wrapper:focus-within .lula-search-icon {
  color: #3F5148 !important;
  opacity: 1 !important;
}

/* Adjust input left padding to fit larger icon */
.stitch-search input[name="search"] {
  padding-left: 54px !important;
}

/* ============================================
   Mobile - Wider Dropdown, Smaller Icon
   ============================================ */

@media (max-width: 767px) {
  .lula-search-dropdown,
  .lula-autocomplete-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  .lula-search-icon {
    width: 20px !important;
    height: 20px !important;
    left: 16px !important;
  }

  .lula-search-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .stitch-search input[name="search"] {
    padding-left: 48px !important;
  }

  .lula-search-no-results {
    min-height: 120px !important;
    max-height: 150px !important;
    padding: 22px 20px !important;
  }
}