/* ================================================================
   search_bar.css  —  Full production-ready search styles
   Paste inside your main stylesheet or load as separate file
   ================================================================ */

/* ── Wrapper (your existing .custom_search_box must be relative) ── */
.custom_search_box {
  position: relative;
}

/* ── Result dropdown ─────────────────────────────────────────────── */
#resultBox {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  right:         0;
  min-width:     340px;
  background:    #ffffff;
  border:        1px solid #e5e1dc;
  border-radius: 12px;
  box-shadow:    0 12px 32px rgba(0,0,0,0.11);
  max-height:    540px;
  overflow-y:    auto;
  overflow-x:    hidden;
  z-index:       99999;
  display:       none;
  scrollbar-width: thin;
  scrollbar-color: #d4c9bc transparent;
}
#resultBox::-webkit-scrollbar       { width: 4px; }
#resultBox::-webkit-scrollbar-thumb { background: #d4c9bc; border-radius: 4px; }

/* ── Section label ───────────────────────────────────────────────── */
.sug-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          #a89f96;
  padding:        12px 16px 5px;
  margin:         0;
  display:        flex;
  align-items:    center;
  gap:            5px;
}
.trend-fire {
  color: #e8772e;
  font-size: 11px;
}
.prod-count {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background:       #f0ece7;
  color:            #7a6e65;
  font-size:        10px;
  font-weight:      600;
  border-radius:    10px;
  padding:          1px 7px;
  margin-left:      4px;
  letter-spacing:   0;
}

/* ── Suggestion list ─────────────────────────────────────────────── */
.sug-list {
    list-style: none;
    margin: 0;
    padding: 0 15px 6px;
}
.sug-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     8px 16px;
  font-size:   13px;
  color:       #2d2926;
  cursor:      pointer;
  transition:  background 0.10s;
  user-select: none;
}
.sug-item:hover,
.sug-item.active {
  background: #f7f3ef;
}
.sug-item.active {
  background: #f0ece7;
}
.sug-icon {
  font-size:  12px;
  color:      #c4b8ad;
  flex-shrink: 0;
  width:      14px;
  text-align: center;
}
.sug-item mark {
  background:  none;
  color:       #c47c2b;
  font-weight: 700;
  padding:     0;
}
.sug-no-result {
  font-size: 13px;
  color:     #b0a79e;
  padding:   10px 16px 14px;
  margin:    0;
}

/* ── Divider between sections ────────────────────────────────────── */
.prod-section {
  border-top: 1px solid #f0ece7;
}

/* ── Product item ────────────────────────────────────────────────── */
.prod-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     9px 16px;
  cursor:      pointer;
  transition:  background 0.10s;
  outline:     none;
}
.prod-item:hover,
.prod-item:focus {
  background: #faf8f5;
}
.prod-thumb {
  width:         54px;
  height:        54px;
  flex-shrink:   0;
  border-radius: 7px;
  overflow:      hidden;
  border:        1px solid #ece7e1;
  background:    #fdfcfb;
}
.prod-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.prod-info {
  flex:      1;
  min-width: 0;
}
.prod-code {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   10px;
  color:       #a09890;
  margin:      0 0 2px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prod-name {
  font-size:     13px;
  font-weight:   500;
  color:         #1e1b18;
  margin:        0 0 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.prod-name mark {
  background:  none;
  color:       #c47c2b;
  font-weight: 700;
  padding:     0;
}
.prod-meta {
  font-size:     11px;
  color:         #b0a79e;
  margin:        0 0 3px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.prod-price {
  font-size:   13px;
  font-weight: 700;
  color:       #1e1b18;
  margin:      0;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .05em;
  padding:        2px 7px;
  border-radius:  4px;
  text-transform: uppercase;
  line-height:    1.6;
}
.badge-stock {
  background: #e4f5ec;
  color:      #256b40;
}
.badge-order {
  background: #fef3e2;
  color:      #9a5c0a;
}

/* ── View all link ───────────────────────────────────────────────── */
.view-all-row {
  padding:    8px 16px 13px;
  border-top: 1px solid #f0ece7;
}
.view-all-link {
  font-size:   12px;
  color:       #c47c2b;
  font-weight: 500;
  text-decoration: none;
  display:     block;
  transition:  color 0.10s;
}
.view-all-link:hover {
  color:           #a05e18;
  text-decoration: underline;
}
.view-all-link strong {
  font-weight: 700;
}

/* ── Loading ─────────────────────────────────────────────────────── */
.loading-msg {
  font-size: 13px;
  color:     #b0a79e;
  padding:   14px 16px;
  margin:    0;
}
.loading-msg .fa-spinner {
  margin-right: 6px;
  color:        #c47c2b;
}