/*
 * familia-search – functional CSS only.
 *
 * Same contract as familia-catalog/assets/catalog.css: this file makes the listbox usable (it has to sit
 * under the field, above the page, and scroll when long). The LOOK belongs to the theme.
 * Single-class selectors, no !important, safe to override or to dequeue entirely:
 *   wp_dequeue_style('familia-suggest');
 *
 * Every colour and measurement is a custom property that falls back to the theme's own
 * --familia-* tokens (public/wp-content/themes/familia/style.css), so restyling means setting
 * variables, not fighting selectors. See docs/SEARCH.md.
 */

.familia-suggest {
  --familia-suggest-bg: #fff;
  --familia-suggest-text: var(--familia-text, #140e06);
  --familia-suggest-muted: #666;
  --familia-suggest-border: #f0f0f0;
  --familia-suggest-border-strong: #cdd1d6;
  --familia-suggest-hover: #f6f6f6;
  --familia-suggest-accent: var(--familia-accent, #ff0000);
  --familia-suggest-radius: .3rem;
  --familia-suggest-max-height: 70vh;
  --familia-suggest-z: 1000;

  position: absolute;
  z-index: var(--familia-suggest-z);
  top: 100%;
  left: 0;
  right: 0;
  max-height: var(--familia-suggest-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--familia-suggest-bg);
  color: var(--familia-suggest-text);
  border: 1px solid var(--familia-suggest-border-strong);
  border-radius: var(--familia-suggest-radius);
  text-align: left;
}

/* The field sits inside something with overflow != visible, so the panel is placed in the body
   and positioned from the field's own rectangle instead. */
.familia-suggest--fixed { right: auto; }

.familia-suggest-host { position: relative; }

.familia-suggest__group + .familia-suggest__group { border-top: 1px solid var(--familia-suggest-border); }

.familia-suggest__group-title {
  padding: .5rem .75rem .25rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: none;
  color: var(--familia-suggest-muted);
}

.familia-suggest__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .75rem;
  color: inherit;
  text-decoration: none;
}

.familia-suggest__item:hover,
.familia-suggest__item.is-active { background: var(--familia-suggest-hover); }

.familia-suggest__thumb {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.familia-suggest__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.familia-suggest__thumb--empty { background: var(--familia-suggest-border); border-radius: var(--familia-suggest-radius); }

.familia-suggest__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.familia-suggest__brand { font-size: .75rem; color: var(--familia-suggest-muted); }
.familia-suggest__title { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.familia-suggest__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; color: var(--familia-suggest-muted); }
.familia-suggest__stock--outofstock { color: var(--familia-suggest-accent); }

/* legacy card price: the old price struck through, then the current price, bold when discounted */
.familia-suggest__price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: .875rem; white-space: nowrap; }
.familia-suggest__price-sale { color: var(--familia-suggest-text); font-weight: 500; }
.familia-suggest__price-regular { font-size: .75rem; color: var(--familia-suggest-muted); }
.familia-suggest__subtitle { font-weight: 300; color: var(--familia-suggest-text); }

/* legacy "Rezultatų: {count}" */
.familia-suggest__count-line { padding: .6rem .75rem .2rem; font-size: .8125rem; font-weight: 500; color: var(--familia-suggest-muted); }
.familia-suggest__count-line[hidden] { display: none; }

/* The header field is narrow (192px on desktop): the panel opens wider, towards the left. */
.familia-suggest:not(.familia-suggest--fixed) {
  left: auto;
  right: 0;
  width: max(100%, min(30rem, calc(100vw - 2rem)));
}

.familia-suggest__item--category,
.familia-suggest__item--brand { justify-content: space-between; font-size: .875rem; }

.familia-suggest__count { flex: 0 0 auto; font-size: .75rem; color: var(--familia-suggest-muted); }

.familia-suggest__all {
  border-top: 1px solid var(--familia-suggest-border);
  font-size: .8125rem;
  font-weight: 500;
  justify-content: center;
  padding: .65rem .75rem;
}

.familia-suggest__mark { background: none; color: inherit; font-weight: 500; }

.familia-suggest__empty { padding: .85rem .75rem; font-size: .875rem; color: var(--familia-suggest-muted); }

/* Only shown after `familia_search_spinner_after_ms` (300 ms by default). */
.familia-suggest__spinner {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--familia-suggest-border-strong);
  border-top-color: var(--familia-suggest-text);
  border-radius: 50%;
  animation: familia-suggest-spin .7s linear infinite;
}

@keyframes familia-suggest-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .familia-suggest__spinner { animation-duration: 2s; }
}

/* The polite live region: announced, never seen. */
.familia-suggest__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}