/* ==========================================================================
   M חשמל — Live Product Search dropdown (Stage 19). Design System v1.1 tokens only.
   Shell (.np-search, __field, __clear, __submit, __results position) lives in np-header.css; this file = states + results.
   ========================================================================== */

/* ---------- Loading (small, inside the field: the search icon becomes a spinner) ---------- */
.np-search__loading { display: none; }
.np-search--loading .np-search__submit .np-search__icon { display: none; }
.np-search--loading .np-search__submit::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--np-color-brand-primary); border-inline-end-color: transparent; animation: np-spin .8s linear infinite;
}

/* ---------- Results container (positioned in np-header.css: absolute under the field, --np-z-dropdown) ---------- */
.np-search__results { padding: var(--np-space-1) 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.np-search__section + .np-search__section { border-top: 1px solid var(--np-color-border); margin-top: var(--np-space-1); padding-top: var(--np-space-1); }
.np-search__section-title { padding: var(--np-space-2) var(--np-space-4) var(--np-space-1); font-size: var(--np-font-caption-size); line-height: var(--np-font-caption-lh); font-weight: 600; color: var(--np-color-text-muted); }

/* ---------- Product result ---------- */
.np-search-result {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--np-space-3); align-items: center;
  padding: var(--np-space-2) var(--np-space-4); min-height: 64px; color: inherit; text-decoration: none; cursor: pointer;
  transition: background-color var(--np-motion-fast) var(--np-ease);
}
.np-search-result:hover, .np-search-result.is-active, .np-search-result[aria-selected="true"] { background: var(--np-color-bg-subtle); color: inherit; text-decoration: none; }
.np-search-result__image { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--np-color-neutral-0); border: 1px solid var(--np-color-border); border-radius: var(--np-radius-sm); overflow: hidden; }
.np-search-result__image--placeholder { background: var(--np-color-bg-subtle); }
.np-search-result__img, .np-search-result__image img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; box-sizing: border-box; }
.np-search-result__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-search-result__meta { display: flex; flex-wrap: wrap; gap: var(--np-space-1) var(--np-space-2); font-size: var(--np-font-caption-size); line-height: var(--np-font-caption-lh); color: var(--np-color-text-muted); }
.np-search-result__brand { font-weight: 600; color: var(--np-color-text-secondary); }
.np-search-result__model { direction: ltr; unicode-bidi: isolate; }
.np-search-result__title {
  font-size: var(--np-font-body-small-size); line-height: 1.35; font-weight: 600; color: var(--np-color-neutral-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.np-search-result__bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--np-space-1) var(--np-space-3); }
.np-search-result__price { gap: var(--np-space-1); }
.np-search-result__price .np-price__current { font-size: var(--np-font-body-small-size); font-weight: 700; line-height: 1.3; }
.np-search-result__price .np-price__old { font-size: var(--np-font-caption-size); }
.np-search-result__price .np-price__prefix, .np-search-result__price .np-price__installments { display: none; }
.np-search-result__price .woocommerce-Price-amount { white-space: nowrap; }
.np-search-result__stock { font-size: var(--np-font-caption-size); font-weight: 500; }

/* ---------- Category / brand result ---------- */
.np-search-term { display: flex; align-items: center; gap: var(--np-space-2); min-height: var(--np-touch); padding: var(--np-space-2) var(--np-space-4); color: var(--np-color-text); text-decoration: none; font-size: var(--np-font-body-small-size); }
.np-search-term:hover, .np-search-term.is-active, .np-search-term[aria-selected="true"] { background: var(--np-color-bg-subtle); color: var(--np-color-brand-primary); text-decoration: none; }
.np-search-term__type { font-size: var(--np-font-caption-size); color: var(--np-color-text-muted); }
.np-search-term__name { font-weight: 600; }

/* ---------- Footer: all results ---------- */
.np-search__all {
  display: flex; align-items: center; justify-content: center; min-height: var(--np-touch); margin-top: var(--np-space-1);
  border-top: 1px solid var(--np-color-border); font-size: var(--np-font-body-small-size); font-weight: 600; color: var(--np-color-brand-primary); text-decoration: none;
}
.np-search__all:hover, .np-search__all.is-active, .np-search__all[aria-selected="true"] { background: var(--np-color-brand-primary-soft); color: var(--np-color-brand-primary); text-decoration: none; }

/* ---------- Empty / error ---------- */
.np-search-empty, .np-search-error { padding: var(--np-space-4); }
.np-search-empty__title, .np-search-error__title { margin: 0 0 var(--np-space-1); font-size: var(--np-font-body-small-size); font-weight: 600; color: var(--np-color-neutral-900); overflow-wrap: anywhere; }
.np-search-error__title { color: var(--np-color-error); }
.np-search-empty__hint, .np-search-error__hint { margin: 0; font-size: var(--np-font-caption-size); line-height: var(--np-font-caption-lh); color: var(--np-color-text-secondary); }

/* ---------- Focus (the field keeps focus; the active option is marked visually) ---------- */
.np-search-result:focus-visible, .np-search-term:focus-visible, .np-search__all:focus-visible { outline: var(--np-focus-ring); outline-offset: -2px; }

/* ---------- Mobile: the field row is full-width; results panel below it (same DOM, no overlay) ---------- */
@media (max-width: 767px) {
  .np-search-result { grid-template-columns: 48px minmax(0, 1fr); min-height: 56px; }
  .np-search-result__image { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) { .np-search--loading .np-search__submit::after { animation-duration: 1.6s; } .np-search-result { transition: none; } }

/* ---------- Search results page ---------- */
.np-archive__empty-text { margin: 0 0 var(--np-space-3); font-size: var(--np-font-body-small-size); color: var(--np-color-text-secondary); }