/*
 * Live-Suche – Design folgt dem Template, nicht festen Werten.
 *
 * Alle Variablen greifen über eine Fallback-Kette zu:
 *   1. SALEPIX-Design-Tokens (--slpx-*): Das Template injiziert sie mit
 *      seinen Theme-Einstellungen in jede Seite – das Plugin färbt sich
 *      auf jedem SALEPIX-Shop automatisch passend ein.
 *   2. Bootstrap-5-Tokens (--bs-*): für BS5-basierte Templates wie Nova.
 *   3. Die hier notierten Werte: früheres TECHNIK-Handtuning.
 * Überschreiben lässt sich alles weiterhin zentral – hier, vom Template
 * oder per inline style auf .jtl-live-search.
 */
.jtl-live-search {
  --jls-primary: var(--slpx-primary, var(--bs-primary, #da1112));
  /* Hover: Primärfarbe abgedunkelt – Templates haben keinen Hover-Token. */
  --jls-primary-hover: color-mix(in srgb, var(--jls-primary) 85%, #000);
  --jls-bg: var(--slpx-white-background, #fff);
  --jls-text: var(--slpx-base-text, var(--bs-body-color, #212529));
  --jls-muted: var(--slpx-muted, var(--bs-secondary-color, #6c757d));
  --jls-border: var(--slpx-base-border, var(--bs-border-color, #ced4da));
  --jls-row-border: color-mix(in srgb, var(--jls-border) 60%, #fff);
  /* Zeilen-Hover: bewusst dunkler als der Stepper-Hintergrund abgeleitet,
     damit der rahmenlose Mengenzähler auch auf der gehoverten Zeile
     erkennbar bleibt (Token-Graus können nahezu identisch sein). */
  --jls-hover-bg: color-mix(in srgb, var(--jls-qty-bg) 90%, #000);
  --jls-success: var(--slpx-success, var(--bs-success, #198754));
  /* Ampel exakt wie die Artikelseite (.status-0/1/2 im SALEPIX-CSS). */
  --jls-stock-red: var(--slpx-productbox-status-error, var(--slpx-error, var(--bs-danger, #dc3545)));
  --jls-stock-yellow: var(--slpx-productbox-status-warning, var(--slpx-warning, var(--bs-warning, #f0ad4e)));
  --jls-stock-green: var(--slpx-productbox-status-success, var(--slpx-success, var(--bs-success, #198754)));
  --jls-qty-bg: var(--slpx-counter-background, #f2f2f2);
  --jls-btn-text: #fff;
  --jls-radius: 4px;
  --jls-btn-radius: 3px;
  --jls-font: var(--slpx-addcart-btn-font-family, var(--bs-body-font-family, 'Roboto Condensed')), 'Arial Narrow', sans-serif;

  position: absolute;
  z-index: 1050;
  display: none;
  max-height: 480px;
  overflow-y: auto;
  background: var(--jls-bg);
  border: 1px solid var(--jls-border);
  border-radius: var(--jls-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  color: var(--jls-text);
}

.jtl-live-search :focus-visible {
  outline: 2px solid var(--jls-primary);
  outline-offset: 1px;
}

.jtl-live-search__hint {
  padding: 0.75rem 1rem;
  color: var(--jls-muted);
}

.jtl-live-search__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--jls-row-border);
}

.jtl-live-search__row:last-of-type {
  border-bottom: 0;
}

.jtl-live-search__row.active,
.jtl-live-search__row:hover {
  background: var(--jls-hover-bg);
  box-shadow: inset 3px 0 0 var(--jls-primary);
}

/* Solange die Tastatur eine Zeile markiert, keine zusätzliche Hover-
   Hervorhebung: Ein geparkter Mauszeiger würde sonst eine zweite
   Zeile grau hervorheben. Die aktive Zeile selbst bleibt markiert,
   auch wenn der Mauszeiger auf ihr steht — deshalb :not(.active).
   Ohne :has-Support (Browser vor 2023) bleibt es beim alten,
   doppelten Highlight. */
.jtl-live-search:has(.jtl-live-search__row.active) .jtl-live-search__row:hover:not(.active) {
  background: transparent;
  box-shadow: none;
}

.jtl-live-search__image {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jtl-live-search__image img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

.jtl-live-search__info {
  flex: 1 1 auto;
  min-width: 0;
}

.jtl-live-search__link {
  font-weight: 600;
  color: var(--jls-text);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jtl-live-search__link:hover {
  color: var(--jls-primary);
}

/* Optionale Artikelnummer zwischen Name und Verfügbarkeit. */
.jtl-live-search__code {
  font-size: 0.8rem;
  color: var(--jls-muted);
}

.jtl-live-search__stock {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--jls-muted);
}

.jtl-live-search__stock-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jls-border);
}

/* Ampel-Status gemäß Shop-Core: 0 = rot, 1 = gelb, 2 = grün. */
.jtl-live-search__stock-dot--0 {
  background: var(--jls-stock-red);
}

.jtl-live-search__stock-dot--1 {
  background: var(--jls-stock-yellow);
}

.jtl-live-search__stock-dot--2 {
  background: var(--jls-stock-green);
}

.jtl-live-search__price {
  font-weight: 600;
}

.jtl-live-search__vpe {
  font-size: 0.8rem;
  color: var(--jls-muted);
}

.jtl-live-search__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

/* Mengen-Stepper wie auf der Artikelseite: rahmenlose Gruppe auf
   hellgrauem Hintergrund (− / Eingabefeld / +). */
.jtl-live-search__qty-group {
  display: inline-flex;
  align-items: stretch;
  border: 0;
  border-radius: var(--jls-btn-radius);
  background: var(--jls-qty-bg);
  overflow: hidden;
}

.jtl-live-search__qty-btn {
  width: 1.75rem;
  border: 0;
  background: transparent;
  color: var(--jls-text);
  font-family: var(--jls-font);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

/* Stepper-Buttons ohne Hover-Effekt; die Minus-Taste ist bei Menge 1
   grau (Template-Muted-Farbe) und gesperrt, wie der Shop-Stepper. */
.jtl-live-search__qty-btn:disabled {
  background: transparent;
  color: var(--jls-muted);
  cursor: default;
}

.jtl-live-search__qty {
  width: 2.75rem;
  padding: 0.15rem 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--jls-font);
  font-size: 0.85rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.jtl-live-search__qty::-webkit-outer-spin-button,
.jtl-live-search__qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jtl-live-search__cart {
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: var(--jls-btn-radius);
  background: var(--jls-primary);
  color: var(--jls-btn-text);
  font-family: var(--jls-font);
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.jtl-live-search__cart:hover:not(:disabled) {
  background: var(--jls-primary-hover);
}

/* Während der Rückmeldung deaktiviert: halbtransparent, kein Hover. */
.jtl-live-search__cart:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Bestätigungszeile in der sticky Fußzeile (statt Text in der Treffer-
   zeile, der auf schmalen Fenstern Titel und Preise überlagert hätte).
   Sichtbar solange die Fußzeile die Klasse "--notice" trägt; in der
   Zeit verdrängt sie die Tastatur-Legende. */
.jtl-live-search__notice {
  display: none;
  padding: 0 0.5rem 0.35rem;
  color: var(--jls-success);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.jtl-live-search__footer--notice .jtl-live-search__legend {
  display: none;
}

.jtl-live-search__footer--notice .jtl-live-search__notice {
  display: block;
}

/* Sekundär-Button (Outline) für Artikel, die nicht direkt bestellbar
   sind — gleiche Form/Schrift wie der Warenkorb-Button. */
.jtl-live-search__details {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--jls-primary);
  border-radius: var(--jls-btn-radius);
  background: transparent;
  color: var(--jls-primary);
  font-family: var(--jls-font);
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.jtl-live-search__details:hover {
  background: var(--jls-primary);
  border-color: var(--jls-primary);
  color: var(--jls-btn-text);
  text-decoration: none;
}

/* Sticky Fußzeile: Paginator und Tastatur-Legende haften gemeinsam am
   unteren Rand des scrollbaren Dropdowns. */
.jtl-live-search__footer {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--jls-row-border);
  background: var(--jls-bg);
}

.jtl-live-search__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem 0.15rem;
  color: var(--jls-muted);
  font-size: 0.85rem;
}

/* Dezente Tastatur-Legende unter dem Paginator. Auf kleinen Bildschirmen
   ausgeblendet — dort gibt es keine Pfeiltasten. Kompakte Zeilenhöhe, die
   beiden Zeilen stehen direkt untereinander; nur die letzte hält den
   Abstand zum Fußzeilen-Rand. */
.jtl-live-search__legend {
  padding: 0 0.5rem;
  color: var(--jls-muted);
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
}

.jtl-live-search__legend + .jtl-live-search__legend {
  padding-bottom: 0.35rem;
}

/* Pfeil-Zeichen in der Legende werden als Inline-SVG gezeichnet (siehe
   legendHtml im JS) — Pfeil-Glyphen aus Fonts wirken bei der kleinen
   Legenden-Größe selbst in Bold kaum fett. Größe passend zur Schrift,
   leicht auf die Grundlinie gerückt. */
.jtl-live-search__legend .jtl-live-search__arrow {
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.08em;
}

@media (max-width: 767.98px) {
  .jtl-live-search__legend {
    display: none;
  }
}

/* Pager-Pfeile als schlichte < / > in Rot, wie im Shop. */
.jtl-live-search__nav {
  padding: 0.15rem 0.4rem;
  border: 0;
  background: transparent;
  color: var(--jls-primary);
  font-family: var(--jls-font);
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
}

.jtl-live-search__nav:hover:not(:disabled) {
  color: var(--jls-primary-hover);
}

.jtl-live-search__nav:disabled {
  color: var(--jls-muted);
  cursor: default;
}