/* =========================================================
   DS Market – filtr nad výpisem produktů v kategorii
   Soubor: /user/documents/filters-top.css
   Funguje spolu s filters-top.js (rozbalovací záložky).
   Platí jen pro desktop/tablet (od 768 px), mobil zůstává
   ve výchozím zobrazení Shoptetu.
   ========================================================= */

:root {
  --fts-accent: #1f861d;
  --fts-accent-light: #eef7ef;
  --fts-border: #a9cfa9;
  --fts-bar-border: #b9dcb9;
  --fts-bg: #eef7ef;
  --fts-text: #292b32;
  --fts-title: #1d3b1d;
}

@media (min-width: 768px) {

  /* 1) Skrytím boxu v levém sloupci Shoptet sám přesune filtr nad výpis */
  .type-category .sidebar .box-filters {
    display: none !important;
  }

  /* 2) Filtr nahoru, řazení (Nejprodávanější / Nejlevnější…) až pod něj */
  .type-category .category-content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .type-category .category-content-wrapper > * {
    min-width: 0;
  }
  .type-category #filters-wrapper,
  .type-category .category-content-wrapper > #filters {
    order: -1;
  }

  /* 3) Lišta filtrů */
  .type-category .category-content-wrapper #filters {
    display: flex !important; /* po AJAX přenačtení Shoptet odebere třídu .visible */
    box-sizing: border-box;
    width: 100% !important;     /* šablona omezuje #filters na max. 1030 px */
    max-width: none !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    margin: 0 0 18px;
    padding: 16px 20px 18px;
    background: var(--fts-bg);
    border: 1px solid var(--fts-bar-border);
    border-left: 5px solid var(--fts-accent);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(31, 134, 29, .10);
  }

  /* nadpis lišty s ikonou trychtýře (text jde změnit v "content") */
  .type-category .category-content-wrapper #filters::before {
    content: "Vyberte si podle svých potřeb";
    order: -1;
    flex: 0 0 100%;
    display: block;
    margin-bottom: 2px;
    padding-left: 30px;
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: var(--fts-title);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f861d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8.5V19l-4 2v-7.5z'/%3E%3C/svg%3E") no-repeat left center / 22px 22px;
  }
  .type-category .category-content-wrapper #filters .filter-sections,
  .type-category .category-content-wrapper #filters #category-filter-hover {
    display: contents;
  }
  .type-category .category-content-wrapper #filters .filter-section,
  .type-category .category-content-wrapper #filters .slider-wrapper {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: none;
  }

  /* skrytý formulář ceny (jen hidden inputy) nesmí zabírat místo */
  .type-category .category-content-wrapper #price-filter-form {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  /* 4) Tlačítka záložek */
  .type-category #filters .fts-dd {
    position: relative;
  }
  .type-category #filters .fts-dd > h4 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fts-text);
    background: #fff;
    border: 1px solid var(--fts-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s;
  }
  .type-category #filters .fts-dd > h4::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s;
  }
  .type-category #filters .fts-dd > h4:hover,
  .type-category #filters .fts-dd > h4:focus-visible {
    color: var(--fts-accent);
    border-color: var(--fts-accent);
    outline: none;
  }
  .type-category #filters .fts-dd.is-open > h4 {
    border-color: var(--fts-accent);
  }
  .type-category #filters .fts-dd.is-open > h4::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  /* záložka s vybranou hodnotou = plné zelené tlačítko s bílým odznakem */
  .type-category #filters .fts-dd.fts-active > h4 {
    color: #fff;
    background: var(--fts-accent);
    border-color: var(--fts-accent);
  }
  .type-category #filters .fts-dd.fts-active .fts-badge {
    color: var(--fts-accent);
    background: #fff;
  }
  .type-category #filters .fts-badge:empty {
    display: none;
  }
  .type-category #filters .fts-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--fts-accent);
    border-radius: 999px;
  }

  /* 5) Rozbalovací panel */
  .type-category #filters .fts-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 240px;
    max-width: min(620px, 90vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--fts-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  }
  .type-category #filters .fts-dd.is-open > .fts-panel {
    display: block;
  }
  .type-category #filters .fts-dd--right > .fts-panel {
    left: auto;
    right: 0;
  }
  .type-category #filters .fts-panel fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .type-category #filters .fts-panel fieldset > div {
    width: auto !important;       /* šablona dává položkám pevnou šířku sloupce */
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 3px 0;
    break-inside: avoid;
  }
  .type-category #filters .fts-panel label.filter-label {
    width: auto !important;
  }
  .type-category #filters .fts-panel .advanced-filters-wrapper:empty {
    display: none !important;
  }
  .type-category #filters .fts-cols-2 .fts-panel {
    width: 440px;
  }
  .type-category #filters .fts-cols-2 .fts-panel fieldset {
    columns: 2;
    column-gap: 24px;
  }
  .type-category #filters .fts-cols-3 .fts-panel {
    width: 620px;
  }
  .type-category #filters .fts-cols-3 .fts-panel fieldset {
    columns: 3;
    column-gap: 24px;
  }

  /* cena */
  .type-category #filters .slider-wrapper .fts-panel {
    width: 300px;
    overflow: visible;
  }
  .type-category #filters .slider-wrapper .slider-header {
    margin-bottom: 10px;
  }
  .type-category #filters .slider-wrapper .slider-content {
    padding: 0 10px 6px;
  }

  /* 6) "Na skladě" jako samostatný přepínač na konci lišty */
  .type-category #filters .filter-section-boolean {
    order: 1;
  }
  .type-category #filters .filter-section-boolean fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .type-category #filters .filter-section-boolean fieldset > div {
    display: block !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  /* celý štítek (zaškrtávátko + text + počet) jako jedno tlačítko */
  .type-category #filters .filter-section-boolean label.filter-label {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px;
    width: auto !important;          /* šablona dává štítku pevnou šířku */
    max-width: none !important;
    margin: 0;
    padding: 7px 14px 7px 40px !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--fts-border);
    border-radius: 999px;
    cursor: pointer;
  }
  .type-category #filters .filter-section-boolean label.filter-label::before {
    left: 14px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%);
  }
  .type-category #filters .filter-section-boolean label.filter-label::after {
    left: 14px !important;
    top: 50% !important;
    margin-top: 0 !important;
  }
  .type-category #filters .filter-section-boolean .filter-count {
    position: static !important;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 400;
    color: #888;
  }
  .type-category #filters .filter-section-boolean label.filter-label:hover {
    border-color: var(--fts-accent);
  }
  .type-category #filters .filter-section-boolean input:checked + label.filter-label {
    color: var(--fts-accent);
    background: var(--fts-accent-light);
    border-color: var(--fts-accent);
  }

  /* řádek "Váš výběr:" se zvolenými hodnotami (klik na štítek = odebrat) */
  .type-category #filters .fts-summary {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--fts-bar-border);
    font-size: 14px;
    text-align: left;
  }
  .type-category #filters .fts-summary__lead {
    font-weight: 700;
    color: var(--fts-title);
  }
  .type-category #filters .fts-summary__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .type-category #filters .fts-summary__title {
    color: #555;
  }
  .type-category #filters .fts-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 6px 3px 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fts-accent);
    background: #fff;
    border: 1px solid var(--fts-accent);
    border-radius: 999px;
    cursor: pointer;
  }
  .type-category #filters .fts-chip:hover {
    color: #b3261e;
    border-color: #b3261e;
    background: #fdecea;
  }
  .type-category #filters .fts-chip[disabled] {
    opacity: .5;
    cursor: wait;
  }
  .type-category #filters .fts-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 15px;
    line-height: 1;
    border-radius: 50%;
    background: var(--fts-accent-light);
  }
  .type-category #filters .fts-chip:hover .fts-chip__x {
    background: #f8d0cc;
  }

  /* nadpis "Filtry" z levého sloupce (objeví se při prázdném výsledku) skrýt */
  .type-category .category-content-wrapper .filters-wrapper > h4 {
    display: none !important;
  }

  /* hláška při prázdném výsledku filtrování */
  .type-category .fts-empty {
    margin: 0 0 18px;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #5a3b00;
    background: #fff8e6;
    border: 1px solid #f0d48a;
    border-left: 5px solid #e0a800;
    border-radius: 10px;
  }
  .type-category .fts-empty a {
    font-weight: 700;
    color: #b3261e;
    text-decoration: underline;
  }

  /* 7) "Vymazat filtry" vpravo na konci lišty (zobrazí se jen při aktivním filtru) */
  .type-category #filters .filter-section-count {
    order: 2;
    margin-left: auto !important;
  }
  .type-category #filters #clear-filters {
    margin: 0;
  }
  .type-category #filters #clear-filters a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #b3261e;
    text-decoration: none;
    border-radius: 999px;
  }
  .type-category #filters #clear-filters a:hover {
    background: #fdecea;
  }
}