/**
 * NEPTUN DESIGN SYSTEM — ANHÄNGER-ARCHIV (Phase 4)
 */

.finder-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: var(--line-hairline);
  border-radius: var(--radius-m);
  background: var(--neptun-surface-050);
  font-size: var(--fs-body-s);
}

.archive__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 1023px) { .archive__layout { grid-template-columns: 1fr; } }

.archive-filters { position: sticky; top: var(--sticky-offset); }
@media (max-width: 1023px) { .archive-filters { display: none; } }

.archive-filters__empty { color: var(--color-text-on-light-muted); font-size: var(--fs-body-s); }

.filter-search { margin-bottom: var(--space-l); }
.filter-search input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  background: var(--neptun-white);
}
.filter-search input:focus-visible { border-color: var(--neptun-orange); }
.filter-search--drawer { margin-bottom: var(--space-xl); }

/* ---------- Filter als natives <details>-Accordion ---------- */
.filter-group { border: none; border-bottom: var(--line-hairline); margin: 0; padding: 0; }
.filter-group:first-child { border-top: var(--line-hairline); }
.filter-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-s);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none; /* Standard-Marker in Safari/Chrome entfernen */
  user-select: none;
}
.filter-group__title::-webkit-details-marker { display: none; }
.filter-group__title:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-s); }
.filter-group__chevron {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--neptun-graphite-950);
  border-bottom: 1.5px solid var(--neptun-graphite-950);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
  margin-top: -3px;
}
.filter-group[open] > .filter-group__title .filter-group__chevron { transform: rotate(-135deg); margin-top: 3px; }
.filter-group__options { display: flex; flex-direction: column; gap: var(--space-xs); padding-bottom: var(--space-m); }
.filter-group [data-filter-overflow][hidden] { display: none; }
.filter-group__more {
  font-size: var(--fs-caption);
  color: var(--neptun-orange-hover);
  font-weight: var(--fw-medium);
  padding-bottom: var(--space-m);
}
.filter-group__more:hover { text-decoration: underline; }
.filter-group .filter-range { padding-bottom: var(--space-m); }

.filter-checkbox { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-body-s); cursor: pointer; }
.filter-checkbox input { accent-color: var(--neptun-orange); width: 16px; height: 16px; }
.filter-checkbox__count { margin-left: auto; color: var(--color-text-on-light-muted); font-size: var(--fs-caption); font-family: var(--font-data); }

.filter-range { display: flex; align-items: center; gap: var(--space-xs); }
.filter-range__field input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  font-family: var(--font-data);
}
.filter-range__sep { color: var(--neptun-steel-400); }

/* ---------- Toolbar ---------- */
.archive__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-m);
  border-bottom: var(--line-hairline);
}
.archive__toolbar-controls {
  display: flex;
  gap: var(--space-s);
  align-items: center;
}
.archive__result-count { font-size: var(--fs-body-s); color: var(--color-text-on-light-muted); }
.archive__sort { flex: 1 1 auto; min-width: 0; }
.archive__sort select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--neptun-steel-200);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  background: var(--neptun-white);
}

/* ---------- Aktive Filter — Chips oberhalb der Ergebnisse ---------- */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.active-filters:empty { display: none; }
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--neptun-graphite-800);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  background: var(--neptun-white);
}
.active-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-on-light-muted);
}
.active-filter-chip__remove:hover { color: var(--neptun-graphite-950); }
.active-filters__reset {
  font-size: var(--fs-caption);
  color: var(--neptun-orange-hover);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.active-filters__reset:hover { text-decoration: underline; }

.archive-filters__mobile-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--neptun-graphite-800);
  border-radius: var(--radius-m);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  flex: 1 1 auto;
  white-space: nowrap;
}
.archive-filters__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--neptun-orange); color: var(--neptun-graphite-950);
  border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: var(--fw-semibold);
}

/* Mobile/Tablet ohne Sidebar (<1024px): Filter-Button + Sortierung in einer
   Zeile, Anzahl darunter. */
@media (max-width: 1023px) {
  .archive-filters__mobile-trigger { display: inline-flex; }
}

/* Sehr kleine Screens: Filter + Sortierung jeweils volle Breite, gestapelt. */
@media (max-width: 399px) {
  .archive__toolbar-controls { flex-direction: column; align-items: stretch; }
}

/* Desktop mit sichtbarer Sidebar: eine Zeile, Anzahl links, Sortierung rechts. */
@media (min-width: 1024px) {
  .archive__toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .archive__toolbar-controls { flex: 0 0 auto; }
  .archive__sort { flex: 0 0 auto; min-width: 220px; }
}

.archive__empty { grid-column: 1 / -1; color: var(--color-text-on-light-muted); }
.archive__empty button { color: var(--neptun-orange-hover); text-decoration: underline; font-weight: var(--fw-medium); }

/* Nachladebereich: Fortschrittsangabe über dem Button, damit sichtbar ist,
   wie viel des Sortiments bereits gezeigt wird — ein alleinstehendes
   „Weitere Modelle laden" verrät nicht, ob noch 3 oder 300 folgen. */
.archive__load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
}

.archive__pagination-status {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--color-text-on-light-muted);
  font-variant-numeric: tabular-nums;
}

.archive__main[aria-busy="true"] .product-grid { opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-standard); }

/* ---------- Mobile Filter-Drawer (gleiches Muster wie Mobile-Nav) ---------- */
.filter-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; }
.filter-drawer.is-open { visibility: visible; }
.filter-drawer__scrim { position: absolute; inset: 0; background: rgba(18,18,20,0.55); opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); }
.filter-drawer.is-open .filter-drawer__scrim { opacity: 1; }
.filter-drawer__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  background: var(--neptun-white);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-l);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--duration-standard) var(--ease-standard);
}
.filter-drawer.is-open .filter-drawer__panel { transform: translateY(0); }

/* Griff-Leiste — signalisiert "wischbares Bottom-Sheet", vermeidet den
   Standard-Plugin-Look eines simplen aufklappenden Kastens. */
.filter-drawer__handle {
  width: 36px; height: 4px;
  background: var(--neptun-steel-200);
  border-radius: var(--radius-full);
  margin: var(--space-s) auto 0;
  flex: 0 0 auto;
}

.filter-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-m) var(--space-l) var(--space-s);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-heading-m);
  flex: 0 0 auto;
}
.filter-drawer__body { padding: var(--space-s) var(--space-l) var(--space-l); overflow-y: auto; flex: 1; }
.filter-drawer__body .filter-checkbox { padding-block: 0.375rem; } /* größeres Touch-Target */
.filter-drawer__body .filter-checkbox input { width: 20px; height: 20px; }
.filter-drawer__footer {
  display: flex; gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-top: var(--line-hairline);
  flex: 0 0 auto;
  padding-bottom: max(var(--space-m), env(safe-area-inset-bottom));
}
.filter-drawer__footer .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .filter-drawer__panel, .filter-drawer__scrim { transition: none; }
}

/* ---------- hidden-Attribut wirksam machen ----------
   Das Archiv-JS steuert den Nachlade-Button und den mobilen Filter-Zähler
   ausschließlich über das hidden-Attribut. Der Browser setzt hidden aber nur
   über die eigene Regel [hidden] { display: none } um — und die verliert
   gegen jede display-Angabe aus dem Theme-Stylesheet
   (.btn { display: inline-flex }, .archive-filters__count { display: inline-flex }).
   Folge: Unter „Keine passenden Anhänger gefunden." stand weiterhin ein
   „Weitere Modelle laden"-Button, und der Filter-Zähler zeigte nach dem
   Zurücksetzen die alte Zahl weiter an. Beide Elemente bekommen die Regel
   deshalb hier ausdrücklich. */
.archive__load-more .btn[hidden],
.archive-filters__count[hidden] { display: none; }