/* =========================================================
   KS Lite Filter — fokus na panel filtera (Kadence-friendly)
   - mekan panel (card), jasni akordeoni, bolji kontrast
   - sticky opcija: dodaj .kslf--sticky na .kslf-filters
   ========================================================= */

/* Wrapperi */
.kslf { margin: 0 0 1.5rem; }
.kslf .widget-title,
.kslf .kslf-title { margin: 0 0 .75rem; }

/* Lista kategorija (shop top + subcats) — koristi Woo klase za nasleđivanje stila */
.kslf .product-categories { margin: 0; padding: 0; }

/* =========================
   PANEL FILTERA (KARTICA)
   ========================= */
.kslf-filters {
  margin: 1rem 0;
  background: #ffffff;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 2px 6px rgba(16,24,40,.04);
  padding: 0.75rem 0.9rem;
}

/* Sticky mod (opciono: dodaj klasu .kslf--sticky na .kslf-filters) */
.kslf-filters.kslf--sticky {
  position: sticky;
  top: clamp(12px, 4vh, 32px); /* ispod headera */
  z-index: 2;
}

/* Header panela */
.kslf-filters__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .25rem;
}

/* Reset dugme — neutralno, ali „materijalno“ */
.kslf-clear {
  font: inherit;
  background: #f4f5f7;
  color: #111827;
  border: 1px solid rgba(16,24,40,.15);
  padding: .28rem .65rem;
  border-radius: .4rem;
  cursor: pointer;
  line-height: 1.1;
}
.kslf-clear:hover { background: #eef0f3; }

/* Tanka separator linija ispod head-a */
.kslf-filters__head + .kslf-form { border-top: 1px solid rgba(16,24,40,.08); }

/* =========================
   GRUPE / AKORDEON
   ========================= */
.kslf-group { border-bottom: 1px solid rgba(16,24,40,.08); }
.kslf-group:last-child { border-bottom: 0; }

.kslf-group--highlight {
  background: linear-gradient(180deg, rgba(245,247,250,.7), rgba(245,247,250,0));
  border-radius: 10px;
}

/* Taster akordeona */
.kslf-acc {
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: .65rem 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.kslf-acc:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.kslf-label { font-weight: 600; color: #111827; }
.kslf-chevron { transform: rotate(0deg); transition: transform .2s ease; opacity: .6; }
.kslf-acc[aria-expanded="true"] .kslf-chevron { transform: rotate(180deg); opacity: .9; }

/* =========================
   TERMINI / CHECKBOX-ovi
   ========================= */
.kslf-terms { list-style: none; margin: 0 0 .6rem; padding: .2rem 0 .5rem; }
.kslf-term {
  display: flex; align-items: center; gap: .55rem;
  padding: .22rem 0; cursor: pointer;
  color: #111827;
}
.kslf-term input { transform: translateY(1px); }

/* istakni čekirane stavke i na hover */
.kslf-term input:checked + span {
  font-weight: 600;
  color: #0f766e; /* diskretno zelena (možeš promeniti) */
}
.kslf-term:hover span { text-decoration: underline; }

/* =========================
   STATUS PORUKA
   ========================= */
.kslf-status {
  margin-top: .35rem;
  font-size: .9rem;
  color: #374151;
  opacity: .9;
}

/* =========================
   MALA EKRAN / RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  .kslf-filters {
    border-radius: 12px;
    padding: .6rem .7rem;
  }
  .kslf-filters__head { flex-wrap: wrap; row-gap: .4rem; }
}

/* =========================
   TAMNI MOD (ako koristite dark mode)
   ========================= */
@media (prefers-color-scheme: dark) {
  .kslf-filters {
    background: #0b0f14;
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  }
  .kslf-clear { background: #0f141a; color: #e5e7eb; border-color: rgba(255,255,255,.14); }
  .kslf-label { color: #e5e7eb; }
  .kslf-term { color: #d1d5db; }
  .kslf-status { color: #cbd5e1; }
  .kslf-group { border-bottom-color: rgba(255,255,255,.06); }
  .kslf-filters__head + .kslf-form { border-top-color: rgba(255,255,255,.06); }
}
/* =========================================================
   KS Lite Filter — lista kategorija (shop top, subcats, "Takođe u:")
   Vizuelno usklađeno sa .kslf-filters karticom
   ========================================================= */

/* Wrapper kartica */
.kslf .kslf-cats,
.kslf .kslf-related {
  background: #fff;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 2px 6px rgba(16,24,40,.04);
  padding: .75rem .9rem;
  margin: 0 0 1rem;
}

/* Naslovi */
.kslf .kslf-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}

/* Sam UL/LI lista (tekstualne podkategorije) */
.kslf .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(16,24,40,.08);
}
.kslf .product-categories > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.kslf .product-categories > li:last-child { border-bottom: 0; }

/* Link stavka — inline "red" sa strelicom i (count) */
.kslf .product-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  text-decoration: none;
  color: #111827;
  transition: background-color .15s ease, color .15s ease;
}
.kslf .product-categories a:hover {
  color: #0f766e;
}

/* Desno mala strelica (pure CSS) */
.kslf .product-categories a::after {
  content: "›";
  font-size: 1rem;
  line-height: 1;
  opacity: .55;
  transform: translateX(0);
  transition: transform .15s ease, opacity .15s ease;
}
.kslf .product-categories a:hover::after {
  transform: translateX(2px);
  opacity: .9;
}

/* (count) iz Kadence/Woo tema često stavlja u <span class="count"> */
.kslf .product-categories .count {
  margin-left: auto;
  font-size: .85rem;
  color: #64748b;
}

/* Kompaktnija varijanta (po želji dodaj .kslf-cats--compact na wrapper) */
.kslf .kslf-cats.kslf-cats--compact .product-categories a { padding: .42rem 0; }

/* „Takođe u:“ naslov unutar .kslf-related */
.kslf .kslf-related h4 {
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 700;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .kslf .kslf-cats,
  .kslf .kslf-related {
    background: #0b0f14;
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
  }
  .kslf .product-categories { border-top-color: rgba(255,255,255,.06); }
  .kslf .product-categories > li { border-bottom-color: rgba(255,255,255,.06); }
  .kslf .product-categories a { color: #e5e7eb; }
  .kslf .product-categories a:hover { color: #34d399; }
  .kslf .product-categories .count { color: #93a3b8; }
}
/* =========================================================
   "Akcija" (on-sale) grupa — diskretan naglasak
   ========================================================= */
.kslf-group--onsale {
  border: 1px dashed rgba(16,24,40,.14);
  border-radius: 12px;
  padding: .25rem .5rem;
  margin-top: .35rem;
}

.kslf-group--onsale .kslf-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #0f766e; /* diskretno zelenkasto */
}

.kslf-group--onsale .kslf-label::before {
  content: "%";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #0f766e;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
}

.kslf-group--onsale .kslf-term {
  padding-top: .35rem;
}

.kslf-group--onsale .kslf-term input:checked + span {
  color: #065f46; /* malo tamnija zelena kad je uključeno */
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  .kslf-group--onsale{
    border-color: rgba(255,255,255,.18);
  }
  .kslf-group--onsale .kslf-label{ color:#34d399; }
  .kslf-group--onsale .kslf-label::before{ background:#34d399; color:#041316; }
}