/*============================================================================
   10-tabs.css — filtr bar, sort dropdown, filter/opt chips
============================================================================*/

/*============================================================================
   11 — FILTR / SORT / CHIPS
============================================================================*/

/* Sticky filter bar — pod headerem */
.filter-bar {
    padding: 18px 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 74px;
    z-index: var(--z-sticky);
}
.filter-bar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

.filter-chip {
    padding: 7px 14px;
    background: var(--cream);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: .82rem; font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--t-fast);
}
.filter-chip:hover {
    background: #fff;
    border-color: var(--berry);
    color: var(--ink);
}
.filter-chip.active {
    background: var(--berry);
    border-color: var(--berry);
    color: #fff;
}
.filter-chip .num {
    font-size: .7rem;
    background: rgba(27,31,58,.08);
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.filter-chip.active .num { background: rgba(255,255,255,.25); color: #fff; }

.filter-group {
    display: flex; gap: 6px;
    align-items: center; flex-wrap: wrap;
}
.filter-group__label {
    font-size: .74rem; font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-right: 4px;
}

/* Sort dropdown — custom-styled native select */
.filter-sort select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235B6181' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    border: 1px solid var(--border-soft) !important;
    padding: 7px 36px 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    cursor: pointer;
}

/* Print options chips (opt-chip s premium-lock variantou) */
/* Jednotná geometrie pro VŠECHNY stavy (i kdyby Divi přidalo .et_pb_button).
   !important + pozdější pořadí (10 > 02) přebije univerzální .et_pb_button. */
.opt-chip {
    padding: 7px 14px !important;
    min-height: 0 !important;
    width: auto !important;
    background: var(--cream);
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-pill) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
}
.opt-chip:not(.active) {
    background: var(--cream) !important;
}
.opt-chip:hover {
    background: #fff !important;
    border-color: var(--berry) !important;
    color: var(--ink);
}
.opt-chip.active {
    background: var(--berry) !important;
    border-color: var(--berry) !important;
    color: #fff !important;
}
.opt-chip--premium-lock,
.opt-chip--premium-lock:not(.active) {
    background: var(--yellow-soft) !important;
    border-color: var(--yellow) !important;
    color: var(--ink);
    padding-left: 26px !important;
    position: relative;
}
.opt-chip--premium-lock::before {
    content: "⭐";
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: .78rem;
}
.opt-chip--premium-lock:hover {
    background: var(--yellow);
    border-color: var(--yellow);
}

/* === Filter bar — varianta z výpisu kategorií (filter-inner + sort select) === */
.filter-bar { padding: 24px 0; }
.filter-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-bar .filter-chip { padding: 8px 16px; font-size: .86rem; }
.filter-sort { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-soft); }
.filter-sort label {
    font-weight: 500;
    margin-bottom: 0 !important; /* globální label pravidlo z 07-forms dává 6px a vychyluje vertikální střed */
}
.filter-sort .select { position: relative; }
.filter-sort .select select {
    appearance: none; -webkit-appearance: none;
    background: var(--cream) !important;
    border: 1px solid var(--border-soft) !important;
    padding: 8px 36px 8px 16px !important;
    border-radius: 999px !important;
    font-family: inherit !important; font-size: .86rem !important; font-weight: 600 !important;
    color: var(--ink) !important; cursor: pointer; transition: all .15s;
}
.filter-sort .select select:hover { background: #fff !important; border-color: var(--berry) !important; }
.filter-sort .select::after {
    content: ""; position: absolute; right: 14px; top: 50%;
    transform: translateY(-65%) rotate(45deg); width: 7px; height: 7px;
    border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); pointer-events: none;
}

/* === Filter bar — archiv varianta (skupiny filtrů, toggle, reset) === */
.filter-groups { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.filter-group-label { font-size: .74rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin-right: 4px; }
.filter-right { display: flex; align-items: center; gap: 14px; }
.filter-toggle {
    display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500;
    color: var(--ink); cursor: pointer; padding: 7px 14px; border: 1px solid var(--border-soft);
    border-radius: 999px; background: var(--cream); transition: all .15s;
}
.filter-toggle:hover { background: #fff; border-color: var(--berry); }
.filter-toggle .switch { width: 32px; height: 18px; background: var(--muted); border-radius: 999px; position: relative; transition: background .2s; }
.filter-toggle .switch::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: left .2s; }
.filter-toggle.on .switch { background: var(--berry); }
.filter-toggle.on .switch::after { left: 16px; }
.filter-reset { font-size: .82rem; color: var(--ink-soft); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.filter-reset:hover { color: var(--berry); }

/* Jednotná výška ovládacích prvků filter baru (chips = toggle = select) */
.filter-bar .filter-chip {
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
}
.filter-toggle {
    height: 38px;
    padding: 0 16px;
}
.filter-sort .select select {
    height: 38px !important;
    line-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* FIX: sticky filter bar zajížděl pod fixed header (header je 83px, ne 74,
   a s WP admin lištou sedí ještě níž). --header-bottom = skutečná spodní
   hrana headeru, měří ji assets/js/header-adminbar.js (scroll + resize). */
.filter-bar {
    top: var(--header-bottom, 84px);
}
body.admin-bar .filter-bar {
    top: var(--header-bottom, 116px);
}