/* ============================================
   SEARCH BAR COMPONENT
   Shared styles for hero and breadcrumb variants
   ============================================ */

.search-bar {
  position: relative;
  overflow: visible;
}

.search-bar__field {
  position: relative;
}

.search-bar__input {
  width: 100%;
  font: inherit;
}

/* Hero variant - form has home-page__search grid from app.css */
.search-bar--hero .search-bar__field {
  position: relative;
}

/* Breadcrumb variant */
.search-bar--breadcrumb {
  position: relative;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  z-index: 10000;
}

.search-bar--breadcrumb .search-bar__form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-bar--breadcrumb .search-bar__field {
  flex: 1;
  min-width: 0;
}

.search-bar--breadcrumb .search-bar__input {
  padding: 8px 12px;
  border: 1px solid var(--vc-border, var(--home-page-border, rgba(20, 30, 60, .10)));
  border-radius: var(--vc-radius-sm, var(--home-page-radius-sm, 12px));
  background: var(--vc-surface, var(--home-page-surface, rgba(255,255,255,.78)));
  color: var(--vc-text, var(--home-page-text, #0b1220));
  font-size: 14px;
  transition: all 0.15s ease;
  box-shadow: var(--vc-shadow-soft, var(--home-page-shadow-soft));
}

.search-bar--breadcrumb .search-bar__input:focus {
  outline: none;
  border-color: var(--vc-blue, var(--home-page-blue, #1557ff));
  box-shadow: 0 0 0 3px rgba(21, 87, 255, 0.1);
}

.search-bar--breadcrumb .search-bar__input::placeholder {
  color: var(--vc-muted, var(--home-page-muted, rgba(11, 18, 32, .62)));
}

.search-bar--breadcrumb .btn {
  flex-shrink: 0;
  padding: 8px 12px;
  min-width: auto;
}

/* EasyAutocomplete - breadcrumb */
.search-bar--breadcrumb .easy-autocomplete {
  width: 100% !important;
  position: relative !important;
  flex: 1;
  z-index: 10000 !important;
}

.search-bar--breadcrumb .easy-autocomplete input {
  width: 100% !important;
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--vc-border, var(--home-page-border));
  border-radius: var(--vc-radius-sm, 12px);
  background: var(--vc-surface, rgba(255,255,255,.78));
  color: var(--vc-text, #0b1220);
  font-size: 14px;
  transition: all 0.15s ease;
  box-shadow: var(--vc-shadow-soft);
}

.search-bar--breadcrumb .easy-autocomplete input:focus {
  outline: none;
  border-color: var(--vc-blue, #1557ff);
  box-shadow: 0 0 0 3px rgba(21, 87, 255, 0.1);
}

.search-bar--breadcrumb .easy-autocomplete-container,
.default__breadcrumbs .search-bar--breadcrumb .easy-autocomplete-container {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  width: 100% !important;
  pointer-events: auto !important;
}

.search-bar--breadcrumb .easy-autocomplete-container ul,
.default__breadcrumbs .search-bar--breadcrumb .easy-autocomplete-container ul {
  position: relative !important;
  margin: 0 !important;
  padding: 4px !important;
  list-style: none !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid var(--vc-border, rgba(20, 30, 60, .10)) !important;
  border-radius: var(--vc-radius-sm, 12px) !important;
  box-shadow:
    0 8px 24px rgba(10, 20, 40, .1),
    0 2px 6px rgba(10, 20, 40, .06) !important;
  overflow: hidden !important;
  z-index: 999999 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  backdrop-filter: blur(12px) !important;
  width: 100% !important;
  pointer-events: auto !important;
}

.search-bar--breadcrumb .easy-autocomplete-container ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

.search-bar--breadcrumb .easy-autocomplete-container ul li .eac-item {
  padding: 8px 12px !important;
  cursor: pointer !important;
  display: block !important;
  transition: background-color .12s ease !important;
  color: var(--vc-text, #0b1220) !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.search-bar--breadcrumb .easy-autocomplete-container ul li .eac-item:hover,
.search-bar--breadcrumb .easy-autocomplete-container ul li.selected .eac-item {
  background-color: rgba(21, 87, 255, .08) !important;
}

.search-bar--breadcrumb .easy-autocomplete-container ul li .eac-item a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .search-bar--breadcrumb {
    min-width: 100%;
    max-width: 100%;
    margin-top: 12px;
  }
}