/* ============================================================
   Agnes Herbal Store — Search Upgrade v2
   Voice search, live suggestions, category search, search history,
   trending/popular searches, search by symptom/health goal, and
   rich "no results" suggestions. Kept separate so style.css /
   ahs-extra.css stay untouched.
   ============================================================ */

/* ---------- search bar: room for the extra voice-search icon + AI icon ---------- */
.search-input{ padding-right:128px; }
.voice-search-btn{
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1.05rem;
  color:var(--green-deep); padding:4px; line-height:1;
  transition:transform .15s ease, color .15s ease;
}
.voice-search-btn:hover{ transform:translateY(-50%) scale(1.12); }
.voice-search-btn.listening{ color:#d64545; animation:svMicPulse 1s ease-in-out infinite; }
.voice-search-btn.unsupported{ opacity:.35; cursor:not-allowed; }
.voice-search-btn.unsupported:hover{ transform:translateY(-50%); }
@keyframes svMicPulse{
  0%,100%{ transform:translateY(-50%) scale(1); }
  50%{ transform:translateY(-50%) scale(1.28); }
}
@media (max-width:420px){
  .search-input{ padding-right:116px; }
  .voice-search-btn{ right:64px; font-size:.95rem; }
  .img-search-btn{ right:40px; font-size:.95rem; }
}

/* ---------- suggestions dropdown: sectioned layout ---------- */
.search-suggestions{ padding:4px 0; }
.sugg-section{ padding:12px 16px; border-bottom:1px solid var(--line); }
.sugg-section:last-child{ border-bottom:none; }
.sugg-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.72rem; font-weight:700; color:var(--green-deep);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:9px;
}
.sugg-section-head.with-back{
  justify-content:flex-start; text-transform:none; font-size:.88rem;
  padding:12px 16px 0; margin-bottom:0;
}
.sugg-back-btn{
  border:none; background:var(--green-soft); color:var(--green-deep);
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:14px; cursor:pointer;
}
.sugg-back-btn:hover{ background:var(--gold-soft); }
.sugg-clear-all{
  border:none; background:none; color:var(--ink-soft); font-size:.68rem;
  font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer; text-decoration:underline;
}
.sugg-clear-all:hover{ color:#d64545; }

/* ---------- chips (history / trending / popular / category / symptom / goal) ---------- */
.sugg-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sugg-chip-row.wrap-chips{ padding:12px 16px; }
.sugg-chip-row.centered{ justify-content:center; }
.sugg-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--green-soft);
  border:1px solid var(--line); color:var(--ink); font-size:.76rem; font-weight:600;
  padding:6px 12px; border-radius:16px; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease; font-family:inherit;
}
.sugg-chip:hover{ background:var(--gold-soft); border-color:var(--gold); }
.sugg-chip .chip-count{
  background:var(--card-bg); color:var(--green-deep); font-size:.64rem; font-weight:700;
  padding:1px 6px; border-radius:10px;
}
.sugg-chip .chip-x{
  border:none; background:none; color:var(--ink-soft); font-size:.72rem; cursor:pointer;
  padding:0 0 0 2px; line-height:1;
}
.sugg-chip .chip-x:hover{ color:#d64545; }
.sugg-chip.dym-chip{ background:var(--gold-soft); border-color:var(--gold); }

/* ---------- explore entry buttons (Symptom / Health Goal) ---------- */
.sugg-explore-links{ display:flex; gap:10px; flex-wrap:wrap; padding:14px 16px; }
.sugg-explore-links.centered{ justify-content:center; }
.sugg-explore-btn{
  flex:1; min-width:150px; background:var(--card-bg); border:1.5px solid var(--green-deep);
  color:var(--green-deep); font-size:.78rem; font-weight:700; padding:10px 14px;
  border-radius:14px; cursor:pointer; text-align:center; font-family:inherit;
  transition:background .15s ease, color .15s ease;
}
.sugg-explore-btn:hover{ background:var(--green-deep); color:#fff; }

/* ---------- live product suggestions (richer than before) ---------- */
.sugg-item img{ width:44px; height:44px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.sugg-item-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.sugg-item-body b{ font-size:.86rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.sugg-item-body mark{ background:var(--gold-soft); color:var(--green-deep); padding:0 1px; border-radius:2px; }
.sugg-item-effect{ font-size:.7rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sugg-item-meta{ font-size:.72rem; color:var(--gold); font-weight:700; display:flex; align-items:center; gap:6px; }
.sugg-stars{ color:var(--gold); font-size:.66rem; letter-spacing:-1px; }

/* ---------- rich "no results" state (dropdown + main grid) ---------- */
.sugg-empty-rich{ padding:18px 16px; text-align:center; }
.no-results-grid{ padding:54px 16px; text-align:center; }
.sugg-empty-title{ font-size:.92rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.no-results-help{ font-size:.82rem; color:var(--ink-soft); margin:0 auto 16px; max-width:420px; line-height:1.6; }
.sugg-dym-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  font-size:.78rem; color:var(--ink-soft); margin-bottom:12px;
}
.sugg-empty-rich .sugg-chip-row{ justify-content:center; margin-bottom:4px; }
.sugg-whatsapp-cta{
  display:inline-flex; align-items:center; gap:6px; background:#25D366; color:#fff !important;
  font-weight:700; font-size:.8rem; padding:10px 18px; border-radius:20px; margin-top:8px;
  transition:filter .15s ease;
}
.sugg-whatsapp-cta:hover{ filter:brightness(1.06); }

@media (max-width:600px){
  .sugg-explore-btn{ min-width:120px; font-size:.72rem; }
  .no-results-grid{ padding:40px 12px; }
}