/* ============================================================
   faq-search.css — Ask. Live-Suche über die FAQ | Kosmetik Mitual
   Version: 1.0 | 2026-07-02
   Ergänzt das bestehende .faq-item-Styling (style.css) rein additiv,
   ändert nichts an den bestehenden FAQ-Regeln.
   ============================================================ */

.faq-search-wrap { max-width: 820px; margin: 0 auto 1.5rem; }

.faq-search-field { position: relative; }

.faq-search-icon {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}

.faq-search-input {
  width: 100%; box-sizing: border-box;
  padding: .9rem 3rem .9rem 3rem;
  font-family: var(--fb); font-size: 1rem; font-weight: 300; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}

.faq-search-input::placeholder { color: var(--muted); }

.faq-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(98, 86, 76, .12);
}

.faq-search-clear {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--greige); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background .15s, color .15s;
}

.faq-search-clear:hover { background: var(--accent); color: #fff; }

.faq-search-count {
  max-width: 820px; margin: 0 auto .85rem;
  font-family: var(--fb); font-size: .8rem; letter-spacing: .03em; color: var(--muted);
}

.faq-search-highlight {
  background: rgba(98, 86, 76, .16); border-radius: 2px; padding: 0 2px;
}

.faq-search-empty {
  max-width: 820px; margin: 0 auto; padding: 2rem 0; text-align: center;
  font-family: var(--fb); color: var(--muted);
}

.faq-search-empty p { margin: 0 0 .5rem; }
.faq-search-empty-hint { font-size: .9rem; }
.faq-search-empty a {
  color: var(--primary); text-decoration: underline;
  text-decoration-color: rgba(98, 86, 76, .35); text-underline-offset: 3px;
}
.faq-search-empty a:hover { text-decoration-color: var(--primary); }

@media (max-width: 600px) {
  .faq-search-input { font-size: .95rem; padding: .85rem 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-search-input, .faq-search-clear { transition: none; }
}