/* Kivanom Oldalsáv Szűrő v2.2 */
:root {
    --ksf-pink:     #ff69b4;
    --ksf-pink-d:   #e0559a;
    --ksf-dark:     #1a1a2e;
    --ksf-input-bg: #0f0f23;
    --ksf-border:   #2a2a4a;
    --ksf-text:     #e8e8f0;
    --ksf-muted:    #8888aa;
}

.ksf-sidebar-wrap { width: 100%; }

/* ── Aktív szűrők sáv ── */
.ksf-active-filters {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; margin-bottom: 14px; padding: 10px 14px;
    background: var(--ksf-dark);
    border: 2px solid var(--ksf-pink);
    border-radius: 20px;
}
.ksf-active-label { font-size: 11px; color: var(--ksf-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
.ksf-active-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,105,180,.12); border: 1px solid rgba(255,105,180,.3); color: var(--ksf-pink); border-radius: 20px; padding: 3px 10px; font-size: 12px; text-decoration: none; transition: background .2s; }
.ksf-active-badge:hover { background: rgba(255,105,180,.22); color: var(--ksf-pink); }
.ksf-active-remove { font-size: 10px; opacity: .7; }
.ksf-active-clear { margin-left: auto; font-size: 11px; color: var(--ksf-muted); text-decoration: none; transition: color .2s; }
.ksf-active-clear:hover { color: var(--ksf-text); }

/* ══ SIDEBAR – Desktop ══ */
.ksf-sidebar {
    position: sticky;
    top: 100px;
    /* A fül-gomb kilóg a jobb oldalon, overflow visible kell */
    overflow: visible;
    /* Becsukható animáció */
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    transition: width .3s ease, min-width .3s ease, opacity .25s ease, margin-right .3s ease;
}

/* Becsukott állapot */
.ksf-sidebar.ksf-collapsed {
    width: 0;
    min-width: 0;
    opacity: 0;
    margin-right: -24px;
    pointer-events: none;
}
/* A fül-gomb mindig kattintható */
.ksf-sidebar.ksf-collapsed .ksf-toggle-tab {
    pointer-events: all;
    opacity: 1;
}

/* ── Fül-gomb ── */
.ksf-toggle-tab {
    position: absolute;
    top: 20px;
    /* A sidebar jobb szélétől épp kilóg */
    right: -20px;
    width: 20px;
    height: 52px;
    padding: 0;
    background: var(--ksf-dark);
    border: 2px solid var(--ksf-pink);
    border-left: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .2s;
}
.ksf-toggle-tab:hover { background: rgba(255,105,180,.15); }
.ksf-toggle-tab-arrow {
    font-size: 16px;
    color: var(--ksf-pink);
    line-height: 1;
    transition: transform .3s;
    font-style: normal;
    display: block;
}
.ksf-sidebar.ksf-collapsed .ksf-toggle-tab-arrow {
    transform: rotate(180deg);
}

/* ── Belső doboz ── */
.ksf-sidebar-inner {
    background: var(--ksf-dark);
    border: 2px solid var(--ksf-pink);
    border-radius: 20px;
    overflow: hidden;
    /* fix szélesség, hogy collapse ne deformálja */
    width: 280px;
}

/* ── Section ── */
.ksf-section { padding: 14px 16px; border-bottom: 1px solid var(--ksf-border); }
.ksf-section:last-child { border-bottom: none; }
.ksf-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ksf-pink); margin-bottom: 10px; }

/* ── Szöveges kereső ── */
.ksf-search-box { display: flex; align-items: center; gap: 8px; background: var(--ksf-input-bg); border: 1px solid var(--ksf-border); border-radius: 10px; padding: 9px 12px; transition: border-color .2s, box-shadow .2s; }
.ksf-search-box:focus-within { border-color: var(--ksf-pink); box-shadow: 0 0 0 3px rgba(255,105,180,.1); }
.ksf-text-input { flex: 1; background: none; border: none; outline: none; color: var(--ksf-text); font-size: 13px; min-width: 0; }
.ksf-text-input::placeholder { color: var(--ksf-muted); }
.ksf-text-clear { background: none; border: none; color: var(--ksf-muted); cursor: pointer; font-size: 12px; padding: 0 2px; opacity: 0; transition: opacity .2s; }
.ksf-search-box:focus-within .ksf-text-clear,
.ksf-text-input:not(:placeholder-shown) ~ .ksf-text-clear { opacity: 1; }

/* ── Chips ── */
.ksf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ksf-chip { background: var(--ksf-input-bg); border: 1px solid var(--ksf-border); border-radius: 20px; color: var(--ksf-muted); font-size: 12px; padding: 5px 11px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ksf-chip:hover { border-color: var(--ksf-pink); color: var(--ksf-text); }
.ksf-chip-active, .ksf-chip.selected { background: rgba(255,105,180,.15); border-color: var(--ksf-pink); color: var(--ksf-pink); font-weight: 600; }
.ksf-chip-count { background: rgba(255,255,255,.07); border-radius: 10px; padding: 1px 5px; font-size: 10px; color: var(--ksf-muted); }

/* ── Ár csúszka ── */
.ksf-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ksf-price-field { flex: 1; position: relative; }
.ksf-price-field label { display: block; font-size: 10px; color: var(--ksf-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.ksf-price-field input { width: 100%; background: var(--ksf-input-bg); border: 1px solid var(--ksf-border); border-radius: 6px; color: var(--ksf-text); font-size: 13px; padding: 7px 26px 7px 9px; outline: none; transition: border-color .2s; -moz-appearance: textfield; }
.ksf-price-field input::-webkit-inner-spin-button,
.ksf-price-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ksf-price-field input:focus { border-color: var(--ksf-pink); }
.ksf-price-currency { position: absolute; right: 7px; bottom: 8px; font-size: 10px; color: var(--ksf-pink); font-weight: 700; pointer-events: none; }
.ksf-price-sep { color: var(--ksf-muted); font-size: 14px; padding-top: 16px; flex-shrink: 0; }

.ksf-range-wrap { position: relative; height: 28px; display: flex; align-items: center; }
.ksf-range-track { position: absolute; width: 100%; height: 4px; background: var(--ksf-border); border-radius: 4px; z-index: 1; }
.ksf-range-fill { position: absolute; height: 100%; background: linear-gradient(90deg, var(--ksf-pink), var(--ksf-pink-d)); border-radius: 4px; }
.ksf-range { position: absolute; width: 100%; height: 4px; background: none; -webkit-appearance: none; pointer-events: none; z-index: 2; }
.ksf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ksf-pink); border: 2px solid #fff; cursor: pointer; pointer-events: all; box-shadow: 0 2px 8px rgba(255,105,180,.35); transition: transform .15s; }
.ksf-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ksf-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ksf-pink); border: 2px solid #fff; cursor: pointer; pointer-events: all; }

/* ── Checkboxok ── */
.ksf-checkboxes { display: flex; flex-direction: column; gap: 5px; }
.ksf-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ksf-muted); transition: color .2s; padding: 2px 0; }
.ksf-checkbox-label:hover { color: var(--ksf-text); }
.ksf-checkbox { display: none; }
.ksf-checkbox-custom { width: 16px; height: 16px; border: 1px solid var(--ksf-border); border-radius: 4px; background: var(--ksf-input-bg); flex-shrink: 0; position: relative; transition: all .2s; }
.ksf-checkbox:checked + .ksf-checkbox-custom { background: var(--ksf-pink); border-color: var(--ksf-pink); }
.ksf-checkbox:checked + .ksf-checkbox-custom::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.ksf-checkbox:checked ~ .ksf-checkbox-text { color: var(--ksf-text); }

/* ── Select ── */
.ksf-select { width: 100%; background: var(--ksf-input-bg); border: 1px solid var(--ksf-border); border-radius: 8px; color: var(--ksf-text); font-size: 13px; padding: 9px 12px; outline: none; cursor: pointer; transition: border-color .2s; }
.ksf-select:focus { border-color: var(--ksf-pink); }

/* ── Gombok ── */
.ksf-buttons { display: flex; flex-direction: column; gap: 8px; }
.ksf-filter-btn { width: 100%; background: linear-gradient(135deg, var(--ksf-pink), var(--ksf-pink-d)); color: #fff; border: none; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,105,180,.28); transition: transform .15s, box-shadow .15s; letter-spacing: .3px; }
.ksf-filter-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,105,180,.42); }
.ksf-filter-btn:active { transform: translateY(0); }
.ksf-reset-btn { display: block; width: 100%; text-align: center; background: transparent; border: 1px solid var(--ksf-border); color: var(--ksf-muted); padding: 10px; border-radius: 10px; font-size: 13px; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s; }
.ksf-reset-btn:hover { border-color: var(--ksf-muted); color: var(--ksf-text); }

/* ── Mobil toggle – JS szúrja be, itt csak a stílus ── */
.ksf-mobile-toggle {
    display: flex;
    align-items: center; gap: 8px; width: 100%;
    background: var(--ksf-dark);
    border: 2px solid var(--ksf-pink);
    border-radius: 20px;
    color: var(--ksf-text); font-size: 14px; font-weight: 600;
    padding: 12px 16px; cursor: pointer; margin-bottom: 12px;
}
.ksf-toggle-arrow { margin-left: auto; transition: transform .3s; display: inline-block; }
.ksf-mobile-toggle.open .ksf-toggle-arrow { transform: rotate(180deg); }

/* ══ MOBIL ══ */
@media ( max-width: 768px ) {
    /* Fül-gomb csak desktopón */
    .ksf-toggle-tab { display: none !important; }

    /* Sidebar: mobilon overlay drawer */
    .ksf-sidebar {
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        min-width: unset !important;
        margin: 0 !important;
        opacity: 1 !important;
        background: rgba(0,0,0,.7);
        backdrop-filter: blur(4px);
        display: flex !important;
        align-items: flex-end;
        z-index: 99999;
        pointer-events: none;
        transition: opacity .3s !important;
        overflow: visible !important;
    }
    .ksf-sidebar.ksf-sidebar-open {
        pointer-events: all;
    }
    .ksf-sidebar-inner {
        width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.34,1.2,.64,1);
        border-bottom: none !important;
    }
    .ksf-sidebar.ksf-sidebar-open .ksf-sidebar-inner {
        transform: translateY(0);
    }
    body.ksf-body-locked { overflow: hidden; }
}