/* ==========================================================================
   State / city search page header (search.css)
   ========================================================================== */
.search-head { padding: 14px 0 6px; }

.custom-breadcrumb { font-size: 0.85rem; margin: 0 0 6px; padding: 0; }
.custom-breadcrumb a { font-size: 0.85rem; color: var(--tb-muted) !important; text-decoration: none; font-weight: 500; }
.custom-breadcrumb a:hover { color: var(--tb-primary) !important; text-decoration: none; }
.custom-breadcrumb .breadcrumb-item.active a { color: var(--tb-ink) !important; font-weight: 600; }
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/" !important; font-family: inherit !important; font-weight: 400 !important; padding: 0 0.5rem; color: #cbd5e1; }
nav[aria-label='Breadcrumb'] li + li::before { content: none; }

.search-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h1.show_location { position: static; display: block; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--tb-ink); letter-spacing: -0.02em; }
.location-label { display: inline-flex; gap: 0.4rem; align-items: center; }
.location-label .dynamic-city:empty, .location-label .dynamic-state:empty { display: none; }
#listing_count { font-size: 0.6em !important; font-weight: 600; color: var(--tb-muted) !important; vertical-align: middle; }

/* Segmented view toggle */
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow-sm); flex: 0 0 auto; }
.view-toggle img { width: 36px !important; height: 36px !important; margin: 0 !important; padding: 7px; border-radius: 9px; cursor: pointer; transition: background-color 0.15s; }
.view-toggle img:hover { background: var(--tb-primary-soft); }

/* Unified search panel */
.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 10px;
  padding: 12px;
  margin-bottom: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow);
}
.search-field { position: relative; min-width: 0; }
.search-field > svg { position: absolute; z-index: 4; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--tb-muted); transform: translateY(-50%); pointer-events: none; }
.search-field .form-control, .search-field .form-select, .search-field #search_box {
  height: 50px;
  padding-left: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--tb-line);
  background-color: var(--tb-surface);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tb-ink);
  box-shadow: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.search-field .form-select { padding-right: 2.5rem; cursor: pointer; }
.search-field .form-control::placeholder, .search-field #search_box::placeholder { color: var(--tb-muted); opacity: 1; font-weight: 400; }
.search-field .form-control:hover, .search-field .form-select:hover, .search-field #search_box:hover { background-color: #fff; border-color: #cbd5e1; }
.search-field .form-control:focus, .search-field .form-select:focus, .search-field #search_box:focus { background-color: #fff; border-color: var(--tb-primary); box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12); }
.search-field .form-control.is-invalid { border-color: #dc3545; }

/* Panels below the search bar */
#sub_keywords_panel, #biz_results_panel { margin: 12px 0 0 !important; padding: 0 4px; }
#biz_results_panel { margin-bottom: 40px !important; }
#results2 { padding-bottom: 40px; }
#sub_keywords_panel .card, #biz_results_panel .card { margin: 0; border: 1px solid var(--tb-line); border-radius: 16px; overflow: hidden; }
#biz_results_panel .card-body { padding: 0; }
.biz-empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 18px; text-align: center; color: var(--tb-muted); font-size: 0.9rem; line-height: 1.5; }
.biz-empty-state svg { width: 40px; height: 40px; margin-bottom: 6px; color: #cbd5e1; }
.biz-empty-state strong { color: var(--tb-ink); font-size: 1.02rem; }
.biz-empty-state em { font-style: normal; font-weight: 600; color: var(--tb-ink); }
.biz-empty-mobile { background: #fff; border: 1px solid var(--tb-line); border-radius: 16px; margin-bottom: 12px; padding: 24px 18px; }
#biz_list_mobile_toggle { background: var(--tb-surface) !important; border-bottom: 1px solid var(--tb-line) !important; }
#biz_list_mobile_toggle .small { font-size: 0.9rem; color: var(--tb-ink) !important; }
.biz-empty-mobile strong { display: block; }

/* Keyword field internals (kept from search.php) */
.search, .search_box { margin: 0; padding: 0; }
.keyword-search-wrapper { position: relative; width: 100%; }
#search_box { padding-right: 2.5rem !important; }
#search_box_spinner {
  display: none; position: absolute; right: 14px; top: 50%; z-index: 10;
  width: 18px; height: 18px; transform: translateY(-50%);
  border: 2px solid #cce0ff; border-top-color: var(--tb-primary); border-radius: 50%;
  animation: kw-spin 0.7s linear infinite; pointer-events: none;
}
@keyframes kw-spin { to { transform: translateY(-50%) rotate(360deg); } }
#search_result { position: absolute; z-index: 999; left: 0; right: 0; top: calc(100% + 6px); }
#search_result .list-group { border-radius: 12px; box-shadow: var(--tb-shadow-lg); overflow: hidden; }
#search_result .list-group-item { border-color: var(--tb-line); }
#search_result .search_box a, #search_result a { color: var(--tb-ink); text-decoration: none; }
.autocomplete-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000;
  display: none; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--tb-line); border-radius: 12px;
  box-shadow: var(--tb-shadow-lg);
}
.autocomplete-item { padding: 11px 16px; cursor: pointer; font-size: 0.93rem; border-bottom: 1px solid #f1f5f9; color: var(--tb-ink); }
.autocomplete-item:hover, .autocomplete-item.active { background-color: var(--tb-primary-soft); color: var(--tb-primary); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-count { font-size: 0.78em; color: var(--tb-muted); margin-left: 0.35rem; }

@media (max-width: 991.98px) {
  .search-panel { grid-template-columns: 1fr 1fr; }
  .search-panel .search-field-keyword { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .search-head { padding-top: 10px; }
  .search-title-row { flex-wrap: wrap; }
  .search-panel { grid-template-columns: 1fr; padding: 10px; border-radius: 14px; }
  .search-field .form-control, .search-field .form-select, .search-field #search_box { height: 46px; }
}
