/* ============================================================
   Themeart Live-Suche – Dropdown Stylesheet v1.0.0
   Anpassbar über CSS Custom Properties in :root
   ============================================================ */

:root {
  --ta-ls-bg:             #ffffff;
  --ta-ls-border:         #e2e8f0;
  --ta-ls-shadow:         0 8px 32px rgba(0, 0, 0, 0.12);
  --ta-ls-radius:         8px;
  --ta-ls-accent:         #0066cc;
  --ta-ls-accent-hover:   #0052a3;
  --ta-ls-hover-bg:       #f8fafc;
  --ta-ls-text:           #1e293b;
  --ta-ls-text-muted:     #64748b;
  --ta-ls-section-color:  #94a3b8;
  --ta-ls-mark-bg:        #fef9c3;
  --ta-ls-mark-color:     #92400e;
  --ta-ls-price-color:    #16a34a;
  --ta-ls-z:              9999;
  --ta-ls-max-h:          480px;
  --ta-ls-width:          420px;
  --ta-ls-img-size:       44px;
  --ta-ls-font-size:      0.875rem;
}

/* ============================================================
   Wrapper (wird per JS ins DOM eingefügt)
   ============================================================ */
.ta-ls-dropdown {
  position:         absolute;
  top:              calc(100% + 4px);
  left:             0;
  z-index:          var(--ta-ls-z);
  width:            var(--ta-ls-width);
  max-width:        calc(100vw - 24px);
  max-height:       var(--ta-ls-max-h);
  overflow-y:       auto;
  background:       var(--ta-ls-bg);
  border:           1px solid var(--ta-ls-border);
  border-radius:    var(--ta-ls-radius);
  box-shadow:       var(--ta-ls-shadow);
  font-size:        var(--ta-ls-font-size);
  line-height:      1.45;
  scrollbar-width:  thin;
  scrollbar-color:  var(--ta-ls-border) transparent;
}

.ta-ls-dropdown::-webkit-scrollbar        { width: 5px; }
.ta-ls-dropdown::-webkit-scrollbar-track  { background: transparent; }
.ta-ls-dropdown::-webkit-scrollbar-thumb  { background-color: var(--ta-ls-border); border-radius: 99px; }

/* ============================================================
   Sektionen
   ============================================================ */
.ta-ls-section {
  padding:       6px 0;
  border-bottom: 1px solid var(--ta-ls-border);
}

.ta-ls-section:last-child {
  border-bottom: none;
  padding-bottom: 6px;
}

.ta-ls-section-title {
  padding:        4px 14px 5px;
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--ta-ls-section-color);
  user-select:    none;
}

/* ============================================================
   Liste & Items
   ============================================================ */
.ta-ls-list {
  list-style: none;
  margin:     0;
  padding:    0;
}

.ta-ls-item {
  margin: 0;
}

/* ============================================================
   Ergebnis-Link
   ============================================================ */
.ta-ls-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         7px 14px;
  color:           var(--ta-ls-text);
  text-decoration: none;
  transition:      background-color 0.1s ease;
  outline:         none;
}

.ta-ls-link:hover,
.ta-ls-link:focus-visible {
  background-color: var(--ta-ls-hover-bg);
  color:            var(--ta-ls-text);
  text-decoration:  none;
}

/* ============================================================
   Produktbild
   ============================================================ */
.ta-ls-img-wrap {
  flex-shrink:     0;
  width:           var(--ta-ls-img-size);
  height:          var(--ta-ls-img-size);
  border-radius:   4px;
  overflow:        hidden;
  background:      var(--ta-ls-hover-bg);
  border:          1px solid var(--ta-ls-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ta-ls-img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

.ta-ls-placeholder-svg {
  width:  22px;
  height: 22px;
  color:  var(--ta-ls-section-color);
  display: block;
}

/* ============================================================
   Text-Inhalte
   ============================================================ */
.ta-ls-content {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.ta-ls-name {
  font-weight:   500;
  color:         var(--ta-ls-text);
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.ta-ls-sub {
  font-size: 0.78rem;
  color:     var(--ta-ls-text-muted);
  overflow:  hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ta-ls-price {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--ta-ls-price-color);
  margin-top:  1px;
}

/* ============================================================
   Suchbegriff-Highlight
   ============================================================ */
.ta-ls-mark {
  background:    var(--ta-ls-mark-bg);
  color:         var(--ta-ls-mark-color);
  border-radius: 2px;
  padding:       0 1px;
  font-style:    normal;
  font-weight:   inherit;
}

/* ============================================================
   "Alle Ergebnisse" Button
   ============================================================ */
.ta-ls-all-results {
  display:         block;
  margin:          6px 14px 8px;
  padding:         8px 14px;
  background:      var(--ta-ls-accent);
  color:           #ffffff !important;
  border-radius:   5px;
  text-align:      center;
  font-size:       0.8rem;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background-color 0.15s ease;
}

.ta-ls-all-results:hover {
  background-color: var(--ta-ls-accent-hover);
}

/* ============================================================
   Keine Ergebnisse
   ============================================================ */
.ta-ls-empty {
  padding:    20px 14px;
  color:      var(--ta-ls-text-muted);
  text-align: center;
  font-size:  0.85rem;
}

/* ============================================================
   Lade-Spinner
   ============================================================ */
.ta-ls-loading {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     16px 14px;
  color:       var(--ta-ls-text-muted);
  font-size:   0.85rem;
}

.ta-ls-spinner {
  display:          inline-block;
  flex-shrink:      0;
  width:            16px;
  height:           16px;
  border:           2px solid var(--ta-ls-border);
  border-top-color: var(--ta-ls-accent);
  border-radius:    50%;
  animation:        ta-ls-spin 0.6s linear infinite;
}

@keyframes ta-ls-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 520px) {
  .ta-ls-dropdown {
    --ta-ls-width:    100vw;
    --ta-ls-img-size: 36px;
    left: 0;
    right: 0;
    max-width: 100vw;
  }

  .ta-ls-link {
    padding: 8px 12px;
  }

  .ta-ls-all-results {
    margin: 6px 12px 8px;
  }
}