/* ---------------------- */
/* AMAZZING FILTER UPDATE */
/* ---------------------- */

/* Grundlayout + größere Schrift */
#amazzing_filter {
  background-color: #000 !important;
  color: #fff !important;
  font-size: 14px !important; /* Schrift angenehm größer */
  line-height: 1.5 !important;
}

#amazzing_filter * {
  color: #fff !important;
  background-color: black !important;
  text-transform: none !important; /* keine Versalien */
  font-size: 16px !important;
}

/* ========================== */
/*   RADIO + CHECKBOX STYLING */
/* ========================== */

/* Standardlabels */
#af_filters label,
#amazzing_filter label,
#amazzing_filter .af-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  transition: all 0.2s ease;
}

/* Hover-Effekt */
#af_filters label:hover,
#amazzing_filter label:hover {
  border-color: #555 !important;
}

/* Aktives Element (ausgewählt) */
#af_filters input[type="radio"]:checked + span.name,
#af_filters input[type="checkbox"]:checked + span.name,
#amazzing_filter input[type="radio"]:checked + span.name,
#amazzing_filter input[type="checkbox"]:checked + span.name,
#amazzing_filter .item-c-1310.active > label .name,
#amazzing_filter .af-parent-category.active > label .name {
  color: #bccf0f !important;
  font-weight: 600 !important;
}


/* ========================== */
/* SLIDER-STYLING */
/* ========================== */

/* Gesamte Sliderleiste */
#amazzing_filter .slider-bar {
  background-color: #333 !important;
  height: 6px !important;
  border-radius: 3px;
  position: relative;
  margin: 10px 0;
  overflow: visible;
}

/* Sichtbare weiße Linie (aktive Auswahl) */
#amazzing_filter .slider-bar .selected-bar {
  background-color: #ffffff !important;
  height: 6px !important;
  border-radius: 3px;
  position: absolute !important;
  top: 0 !important;
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Slider-Griffe */
#amazzing_filter .slider-bar .pointer,
#amazzing_filter .slider-bar .pointer.from,
#amazzing_filter .slider-bar .pointer.to {
  background-color: #bccf0f !important;
  border: 2px solid #bccf0f !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  top: -4px !important;
  z-index: 5 !important;
}

/* ========================== */
/* PAGINATION / NAVIGATION */
/* ========================== */

nav.pagination {
  background-color: #000 !important;
  padding: 10px 0;
}

nav.pagination ul.page-list li a {
  color: #fff !important;
  text-transform: none !important;
  font-size: 14px !important;
}

nav.pagination ul.page-list li.current a,
nav.pagination ul.page-list li span.current {
  color: #bccf0f !important;
  font-weight: bold !important;
}
/* ========================== */
/* OBERE AUSGEWÄHLTE FILTER   */
/* ========================== */

/* Textfarbe der aktiven Filter oben */
#amazzing_filter .selectedFilters,
#amazzing_filter .selectedFilters *,
#amazzing_filter .af_selected_filters,
#amazzing_filter .af_selected_filters * {
  color: #bccf0f !important;
}


/* Hover-Zustände */
#amazzing_filter .selectedFilters a:hover,
#amazzing_filter .selectedFilters .clearAll:hover {
  color: #fff !important;
  border-color: #bccf0f !important;
}

.horizontal-layout .has-selection .af_subtitle,
.horizontal-layout .has-selection .af_subtitle.toggle-content:before,
.horizontal-layout .has-selection .af_filter_content {
  border-color: #bccf0f !important;
}

/* ========================== */
/* "Weitere Filter" Button   */
/* ========================== */

#amazzing_filter .toggleMoreFilters {
  font-size: 18px !important;         /* Größere Schrift */
  color: #bccf0f !important;          /* Textfarbe */
  display: flex;
  align-items: center;
  gap: 8px;
  background: none !important;        /* Kein Button-Hintergrund */
  border: none !important;            /* Kein Rahmen */
  padding: 8px 0;
}

/* Icon-Farbe "+" und "-" */
#amazzing_filter .toggleMoreFilters i {
  color: #bccf0f !important;
  font-size: 20px !important;         /* Größeres Icon */
}

/* ========================== */
/* PAGINATION / NAVIGATION ANPASSUNG */
/* ========================== */

nav.pagination {
  background-color: #000 !important; /* Schwarzer Hintergrund */
  padding: 10px 0;
}

nav.pagination .col-md-4,
nav.pagination .col-md-6 {
  color: #bccf0f !important; /* Textfarbe #bccf0f für die Artikelangabe */
}

/* Paginierungs-Links */
nav.pagination ul.page-list li a {
  color: #fff !important; /* Weiße Links */
  text-transform: none !important;
  font-size: 14px !important;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Hover-Effekt für Links */
nav.pagination ul.page-list li a:hover {
  background-color: #bccf0f !important; /* Hintergrundfarbe beim Hover */
  color: #000 !important; /* Textfarbe beim Hover */
}

/* Aktuelle Seite */
nav.pagination ul.page-list li.current a {
  color: #bccf0f !important; /* Textfarbe für die aktuelle Seite */
  background-color: #333 !important; /* Dunkler Hintergrund für aktuelle Seite */
  font-weight: bold !important; /* Fett für die aktuelle Seite */
  border-radius: 4px;
}

/* Vorheriger und nächster Link (Zurück und Weiter) */
nav.pagination .previous, 
nav.pagination .next {
  background-color: #333 !important; /* Dunkler Hintergrund für die Pfeile */
  color: #fff !important; /* Weiße Schriftfarbe */
  padding: 6px 12px;
  border-radius: 4px;
}

/* Hover-Effekt für die Pfeile */
nav.pagination .previous:hover, 
nav.pagination .next:hover {
  background-color: #bccf0f !important;
  color: #000 !important; /* Pfeile im Hover-Zustand */
}

/* Disabled (nicht aktiv) */
nav.pagination .disabled a {
  color: #777 !important; /* Graue Farbe für deaktivierte Links */
  background-color: #333 !important; /* Dunkler Hintergrund für deaktivierte Links */
  cursor: not-allowed !important;
}

/* Vor- und Zurück-Pfeil-Icons */
nav.pagination .material-icons {
  font-size: 16px !important;
}

/* Gesamter Bereich der Pagination schwarz */
nav.pagination,
nav.pagination .container,
nav.pagination .row,
nav.pagination .col-md-4,
nav.pagination .col-md-6,
nav.pagination .page-list {
  background-color: #000 !important;
  border: none !important;
}