/* ==================================================================
   BeOrganic.sk – Filter redesign v2 (13. 5. 2026)
   Přesune filtry z horního dropdownu do levého sidebaru
   pod kategorie. Designově ladí s Be Organic stylem.

   ✅ OTESTOVÁNO LIVE na /plet/c102 — funguje na desktopu i mobilu.

   KAM VLOŽIT:
   1) Admin → Úložisko súborov → nahraj tento soubor
      jako `filter-redesign_v1.css`
   2) Admin → Globálny HTML Kód → Hlavička stránky →
      v sekci s ostatními <link rel="stylesheet"> přidej:
      <link rel="stylesheet" href="https://beorganic.sk/storage/kody_css/nove/filter-redesign_v1.css">
   3) Vlož ho jako jeden z POSLEDNÍCH (aby přepsal stávající styly)
   ================================================================== */


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 1. SCHOVAT horní filter toolbar (kromě třídění)                ║
   ║    Filtry se přesouvají do levého sidebaru                     ║
   ╚════════════════════════════════════════════════════════════════╝ */

.c-toolbar .c-title,
.c-toolbar .c-filter-items,
.c-toolbar .c-categories-link {
    display: none !important;
}

.c-toolbar {
    justify-content: flex-end !important;
}
.c-toolbar .sorting-navigator {
    margin-left: auto !important;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 2. LEVÝ SIDEBAR — hlavní styl                                  ║
   ╚════════════════════════════════════════════════════════════════╝ */

#page_panel.panel-filter {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    box-sizing: border-box;
    z-index: 1;
}

/* Custom scrollbar */
#page_panel.panel-filter::-webkit-scrollbar {
    width: 6px;
}
#page_panel.panel-filter::-webkit-scrollbar-track {
    background: transparent;
}
#page_panel.panel-filter::-webkit-scrollbar-thumb {
    background: rgba(100, 119, 93, 0.3);
    border-radius: 3px;
}
#page_panel.panel-filter::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 119, 93, 0.5);
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 3. KATEGORIE PANEL                                             ║
   ╚════════════════════════════════════════════════════════════════╝ */

#categoryPanel::before {
    content: 'KATEGÓRIE';
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgb(100, 119, 93);
    margin-bottom: 14px;
}

/* Skrýt první odkaz (je už v h1) */
#categoryPanel > a:first-of-type {
    display: none !important;
}

#categoryPanel ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#categoryPanel ul li {
    margin: 0 !important;
    padding: 0 !important;
}

#categoryPanel ul li a {
    display: block !important;
    padding: 7px 8px !important;
    margin: 0 -8px !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgb(52, 49, 45) !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

#categoryPanel ul li a:hover {
    background: rgba(100, 119, 93, 0.08) !important;
    color: rgb(100, 119, 93) !important;
}

#categoryPanel ul li.active a,
#categoryPanel ul li a.active,
#categoryPanel ul li[class*="active"] a {
    background: rgba(100, 119, 93, 0.12) !important;
    color: rgb(100, 119, 93) !important;
    font-weight: 600 !important;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 4. FILTR SEKCE – titulek "FILTROVAŤ PODĽA"                     ║
   ╚════════════════════════════════════════════════════════════════╝ */

#panel-filter-list::before {
    content: 'FILTROVAŤ PODĽA';
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgb(100, 119, 93);
    margin: 28px 0 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 5. JEDNOTLIVÉ FILTRY                                           ║
   ╚════════════════════════════════════════════════════════════════╝ */

#categoryFilters.categoryFilters-moved {
    display: block !important;
}

.categoryFiltersRow {
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.categoryFiltersRow:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.categoryFilterName {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgb(52, 49, 45) !important;
    margin-bottom: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.categoryFilterValues label,
.categoryFilterValues > div,
.categoryFilterValues a {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgb(52, 49, 45) !important;
    cursor: pointer !important;
    transition: color 0.12s ease;
}

.categoryFilterValues label:hover,
.categoryFilterValues > div:hover,
.categoryFilterValues a:hover {
    color: rgb(100, 119, 93) !important;
}

.categoryFilterValues input[type="checkbox"],
.categoryFilterValues input[type="radio"] {
    margin-right: 10px !important;
    accent-color: rgb(100, 119, 93) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

.categoryFilterValues .filterCount,
.categoryFilterValues span[class*="count"] {
    color: rgba(52, 49, 45, 0.5) !important;
    font-size: 12px !important;
    margin-left: 4px;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 6. CENA – slider                                               ║
   ╚════════════════════════════════════════════════════════════════╝ */

.price-slider {
    padding: 8px 4px !important;
}

.price-slider .noUi-connect,
.price-slider [class*="connect"] {
    background: rgb(100, 119, 93) !important;
}

.price-slider .noUi-handle,
.price-slider [class*="handle"] {
    background: #ffffff !important;
    border: 2px solid rgb(100, 119, 93) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 7. MOBIL — sidebar jako fullscreen panel                       ║
   ║    Otevírá se tlačítkem „Filter" v hlavičce                    ║
   ║    ✅ Otestováno live, vypadá přesně jako wireframe            ║
   ╚════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {

    #page_panel.panel-filter {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 88% !important;
        max-width: 360px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 16px 16px 0 !important;
        z-index: 9999 !important;
        transform: translateX(-100%);
        transition: transform 0.28s ease !important;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.18) !important;
        padding: 50px 20px 100px !important;
        overflow-y: auto !important;
    }

    body.bo-filter-open #page_panel.panel-filter {
        transform: translateX(0);
    }

    /* Backdrop tmavé pozadí */
    body.bo-filter-open::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
    }

    /* Tlačítko Filter v toolbaru */
    .c-toolbar .bo-filter-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: #ffffff;
        border: 1px solid rgba(100, 119, 93, 0.3);
        border-radius: 100px;
        font-family: 'Montserrat', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: rgb(52, 49, 45);
        cursor: pointer;
    }
    .c-toolbar .bo-filter-toggle::before {
        content: '⚙';
        font-size: 16px;
    }

    /* Zavírací křížek v sidebaru */
    #page_panel.panel-filter .bo-filter-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(52, 49, 45);
    }

    /* Sticky button „Zobraziť produkty" dole */
    body.bo-filter-open .bo-filter-apply {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 88%;
        max-width: 360px;
        padding: 14px 20px;
        background: rgb(100, 119, 93);
        color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        border: none;
        z-index: 10000;
        cursor: pointer;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    }
    body:not(.bo-filter-open) .bo-filter-apply {
        display: none;
    }
}

/* Desktop – mobilní prvky skryté */
@media (min-width: 769px) {
    .c-toolbar .bo-filter-toggle,
    #page_panel.panel-filter .bo-filter-close,
    .bo-filter-apply {
        display: none !important;
    }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ 8. AKTIVNÍ FILTRY – „Zrušiť všetky filtre"                      ║
   ╚════════════════════════════════════════════════════════════════╝ */

a.removeAllFilters,
.activeFilters a[href*="remove"],
[class*="clear-filter"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgb(100, 119, 93) !important;
    text-decoration: underline;
}