/* Growshop365 – SEO Filter / Sortierleiste Kontrast-Hotfix
   Ziel: bessere Lesbarkeit auf Desktop und mobil */

:root{
  --gs365-seo-text-strong: #f8fafc;
  --gs365-seo-text-body: #e2e8f0;
  --gs365-seo-text-muted: #cbd5e1;
  --gs365-seo-border-strong: rgba(203, 213, 225, 0.34);
  --gs365-seo-surface-1: rgba(2, 6, 23, 0.84);
  --gs365-seo-surface-2: rgba(15, 23, 42, 0.94);
  --gs365-seo-green: #22c55e;
  --gs365-seo-green-2: #86efac;
}

/* SEO-Filterbox oben */
.gr21-seo-filter-box{
  background:
    radial-gradient(circle at 0 0, rgba(34, 197, 94, .16), transparent 58%),
    radial-gradient(circle at 100% 0, rgba(56, 189, 248, .10), transparent 56%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.92)) !important;
  border: 1px solid var(--gs365-seo-border-strong) !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .52) !important;
  color: var(--gs365-seo-text-body) !important;
}

.gr21-seo-filter-head strong,
.gr21-seo-filter-box h2,
.gr21-seo-filter-box h3,
.gr21-seo-filter-group-title{
  color: var(--gs365-seo-text-strong) !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
}

.gr21-seo-filter-box p,
.gr21-seo-filter-box .gr21-seo-filter-intro,
.gr21-seo-filter-box .small,
.gr21-seo-filter-box small{
  color: var(--gs365-seo-text-muted) !important;
  opacity: 1 !important;
}

.gr21-seo-filter-box .gr21-seo-filter-label{
  color: #dcfce7 !important;
  font-weight: 800 !important;
}

/* Filter-Chips */
.gr21-seo-filter-chip{
  background: rgba(2, 6, 23, .70) !important;
  color: var(--gs365-seo-text-strong) !important;
  border: 1px solid rgba(203, 213, 225, .40) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .34) !important;
  font-weight: 800 !important;
}

.gr21-seo-filter-chip:hover,
.gr21-seo-filter-chip:focus{
  background: rgba(22, 163, 74, .38) !important;
  color: #ffffff !important;
  border-color: rgba(187, 247, 208, .86) !important;
  text-decoration: none !important;
}

.gr21-seo-filter-chip.is-active,
.gr21-seo-filter-chip[aria-current="page"]{
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #052e16 !important;
  border-color: #dcfce7 !important;
  box-shadow: 0 12px 28px rgba(34, 197, 94, .30) !important;
}

/* Sortierleiste */
.gr21-filter-toolbar{
  background:
    radial-gradient(circle at 0 0, rgba(34, 197, 94, .12), transparent 58%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.88), rgba(15, 23, 42, 0.88)) !important;
  border: 1px solid var(--gs365-seo-border-strong) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .46) !important;
  color: var(--gs365-seo-text-body) !important;
}

.gr21-filter-toolbar .gr21-sort-label,
.gr21-filter-toolbar strong,
.gr21-filter-toolbar .label,
.gr21-filter-toolbar .gr21-filter-toolbar-title{
  color: var(--gs365-seo-text-muted) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.gr21-filter-sort{
  background: rgba(2, 6, 23, .70) !important;
  color: var(--gs365-seo-text-strong) !important;
  border: 1px solid rgba(203, 213, 225, .40) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .30) !important;
  font-weight: 800 !important;
}

.gr21-filter-sort:hover,
.gr21-filter-sort:focus{
  background: rgba(22, 163, 74, .38) !important;
  color: #ffffff !important;
  border-color: rgba(187, 247, 208, .86) !important;
  text-decoration: none !important;
}

.gr21-filter-sort.is-active,
.gr21-filter-sort[aria-current="page"]{
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #052e16 !important;
  border-color: #dcfce7 !important;
  box-shadow: 0 12px 28px rgba(34, 197, 94, .30) !important;
}

/* Ausreichende Abstände und responsives Verhalten */
.gr21-seo-filter-groups,
.gr21-seo-filter-groups-merged{
  gap: 14px !important;
}

.gr21-seo-filter-group{
  min-width: 0;
}

.gr21-filter-toolbar,
.gr21-seo-filter-box{
  overflow: hidden;
}

@media (max-width: 991.98px){
  .gr21-filter-toolbar,
  .gr21-seo-filter-box{
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .gr21-filter-toolbar .gr21-sort-label,
  .gr21-filter-toolbar strong,
  .gr21-filter-toolbar .label,
  .gr21-filter-toolbar .gr21-filter-toolbar-title{
    display: block;
    margin-bottom: 8px;
  }
}

@media (max-width: 767.98px){
  .gr21-seo-filter-box{
    padding: 14px !important;
  }

  .gr21-seo-filter-box h2,
  .gr21-seo-filter-box h3,
  .gr21-seo-filter-head strong,
  .gr21-seo-filter-group-title{
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
  }

  .gr21-seo-filter-box p,
  .gr21-seo-filter-box .small,
  .gr21-seo-filter-box small{
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }

  .gr21-seo-filter-chip,
  .gr21-filter-sort{
    min-height: 44px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    font-size: .98rem !important;
    line-height: 1.3 !important;
  }

  .gr21-filter-toolbar{
    padding: 12px !important;
  }

  .gr21-filter-toolbar .gr21-sort-buttons,
  .gr21-filter-toolbar .gr21-filter-sort-wrap{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}