/* ==================================================
   TH|DESIGN – EGYSÉGES FILTERRENDSZER
   Checkbox dropdownok + TERMÉKCSOPORT + ÁR dropdown
   ================================================== */

:root {
    --th-filter-bg: #F4F2F2;
    --th-filter-border: #9B9696;
    --th-filter-text: #555153;

    --th-filter-height: 42px;
    --th-filter-padding-x: 13px;
    --th-filter-gap: 6px;
    --th-filter-icon-size: 8px;
    --th-filter-font-size: 13px;

    --th-price-panel-width: 440px;
}


/* ==================================================
   1. FILTERSOR
   ================================================== */

.th-filter-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;

    column-gap: 8px !important;
    row-gap: 8px !important;

    overflow: visible !important;
}

.th-filter-dropdown,
.th-category-filter,
.th-price-dropdown {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 0 0 auto !important;

    overflow: visible !important;
}


/* ==================================================
   2. CHECKBOXOS FILTERGOMBOK
   ================================================== */

.th-filter-dropdown .jet-smart-filters-checkboxes,
.th-filter-dropdown .jet-filter-items-dropdown {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    overflow: visible !important;
}

.th-filter-dropdown .jet-filter-items-dropdown__label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;
    min-width: 0 !important;
    min-height: var(--th-filter-height) !important;

    gap: var(--th-filter-gap) !important;
    padding: 0 var(--th-filter-padding-x) !important;

    box-sizing: border-box !important;

    background: var(--th-filter-bg) !important;
    border: 1px solid var(--th-filter-border) !important;
    border-radius: 0 !important;

    color: var(--th-filter-text) !important;

    text-align: center !important;
    white-space: nowrap !important;

    cursor: pointer !important;
}

/* Eredeti Jet-felirat elrejtése inicializálás után */
.th-filter-dropdown
.jet-filter-items-dropdown__label.th-title-ready {
    font-size: 0 !important;
}

.th-filter-dropdown
.jet-filter-items-dropdown__label.th-title-ready > * {
    display: none !important;
}

/* Saját placeholder */
.th-filter-dropdown
.jet-filter-items-dropdown__label.th-title-ready::before {
    content: attr(data-th-placeholder);

    display: inline-block !important;

    font-family: inherit !important;
    font-size: var(--th-filter-font-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;

    color: inherit !important;
    white-space: nowrap !important;
}

/* Lefelé mutató ikon */
.th-filter-dropdown
.jet-filter-items-dropdown__label::after {
    content: "" !important;

    display: inline-block !important;
    position: static !important;

    width: var(--th-filter-icon-size) !important;
    height: var(--th-filter-icon-size) !important;
    flex: 0 0 var(--th-filter-icon-size) !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/wp-content/uploads/2026/07/dropdown.svg")
        !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    border: 0 !important;
    transform: none !important;
}

/* Felfelé mutató ikon */
.th-filter-dropdown
.jet-filter-items-dropdown.active
.jet-filter-items-dropdown__label::after,

.th-filter-dropdown
.jet-filter-items-dropdown.open
.jet-filter-items-dropdown__label::after,

.th-filter-dropdown
.jet-filter-items-dropdown.jet-dropdown-open
.jet-filter-items-dropdown__label::after,

.th-filter-dropdown
.jet-filter-items-dropdown__label[aria-expanded="true"]::after {
    background-image:
        url("/wp-content/uploads/2026/07/arrow-up.svg")
        !important;
}


/* ==================================================
   3. TERMÉKCSOPORT SELECT FILTER
   ================================================== */

.th-category-filter,
.th-category-filter .jet-select {
    display: inline-flex !important;
    align-items: center !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: 0 0 auto !important;

    overflow: visible !important;
}

/*
 * A JetSmartFilters Select tényleges select eleme.
 * Ugyanazt a dizájnt kapja, mint a többi filtergomb.
 */
.th-category-filter .jet-select__control,
.th-category-filter select {
    display: inline-block !important;

    width: auto !important;
    min-width: 155px !important;
    max-width: min(270px, calc(100vw - 24px)) !important;
    min-height: var(--th-filter-height) !important;

    /*
     * A modern böngészőkben a kiválasztott szöveghez
     * igazítja a mező szélességét.
     */
    field-sizing: content;

    margin: 0 !important;

    padding:
        0
        calc(
            var(--th-filter-padding-x)
            + var(--th-filter-icon-size)
            + var(--th-filter-gap)
        )
        0
        var(--th-filter-padding-x)
        !important;

    box-sizing: border-box !important;

    background-color: var(--th-filter-bg) !important;

    background-image:
        url("/wp-content/uploads/2026/07/dropdown.svg")
        !important;

    background-repeat: no-repeat !important;

    background-position:
        right
        var(--th-filter-padding-x)
        center
        !important;

    background-size:
        var(--th-filter-icon-size)
        var(--th-filter-icon-size)
        !important;

    border: 1px solid var(--th-filter-border) !important;
    border-radius: 0 !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: var(--th-filter-font-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;

    color: var(--th-filter-text) !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Nyitott/fókuszált állapot ikonja */
.th-category-filter.is-open
.jet-select__control,

.th-category-filter.is-open select {
    background-image:
        url("/wp-content/uploads/2026/07/arrow-up.svg")
        !important;
}

/* A natív böngészős nyíl eltávolítása */
.th-category-filter select::-ms-expand {
    display: none;
}


/* ==================================================
   4. FÜGGŐ ATTRIBÚTUMFILTEREK
   ================================================== */

/*
 * Alapállapotban a részletes attribútumszűrők rejtve vannak.
 * Ez már az első kirajzoláskor működik, ezért nem villannak fel
 * egy pillanatra sem a Termékcsoport kiválasztása előtt.
 */
body:not(.th-has-category-selection)
.th-dependent-filters {
    display: none !important;
}

/*
 * Termékcsoport kiválasztása után a segítő szöveg eltűnik.
 * A th-dependent-filters konténernél nem állítunk külön display
 * értéket, így az Elementor eredeti flex/grid beállítása marad meg.
 */
body.th-has-category-selection
.th-category-help {
    display: none !important;
}

/* Kiegészítő biztonsági szabály a JavaScript hidden attribútumához */
.th-dependent-filters[hidden],
.th-category-help[hidden] {
    display: none !important;
}


/* ==================================================
   5. CHECKBOXOS LENYÍLÓ PANELEK
   ================================================== */

.th-filter-dropdown .jet-filter-items-dropdown__body {
    width: max-content !important;
    min-width: 100% !important;

    max-width:
        min(420px, calc(100vw - 24px))
        !important;

    left: 0 !important;
    right: auto !important;

    box-sizing: border-box !important;

    background: var(--th-filter-bg) !important;
    border: 1px solid #D7D3D3 !important;
    border-radius: 0 !important;

    z-index: 99999 !important;
}

.th-filter-dropdown
.jet-filter-items-dropdown__body-inner,

.th-filter-dropdown
.jet-filter-items-dropdown__items {
    width: max-content !important;
    min-width: 100% !important;
}

/* Kompakt checkboxsorok */
.th-filter-dropdown .jet-filter-row,
.th-filter-dropdown .jet-checkboxes-list__row {
    width: max-content !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    box-sizing: border-box !important;
}

.th-filter-dropdown .jet-checkboxes-list__label {
    width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.2 !important;
    white-space: nowrap !important;
}


/* ==================================================
   6. ÁR KÜLSŐ KONTÉNER
   ================================================== */

.th-price-dropdown.e-con,
.th-price-dropdown {
    --width: max-content !important;

    position: relative !important;

    display: inline-flex !important;
    align-items: flex-start !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 0 0 auto !important;

    overflow: visible !important;

    z-index: 20;
}

.th-price-dropdown > .e-con-inner {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

.th-price-dropdown.is-open {
    z-index: 99999 !important;
}


/* ==================================================
   7. ÁR GOMB
   ================================================== */

.th-price-dropdown__trigger {
    all: unset;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: var(--th-filter-height) !important;

    gap: var(--th-filter-gap) !important;
    padding: 0 var(--th-filter-padding-x) !important;

    box-sizing: border-box !important;

    background: var(--th-filter-bg) !important;
    border: 1px solid var(--th-filter-border) !important;
    border-radius: 0 !important;

    color: var(--th-filter-text) !important;

    cursor: pointer !important;
}

.th-price-dropdown__trigger > span {
    display: inline-block !important;

    font-family: inherit !important;
    font-size: var(--th-filter-font-size) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;

    color: inherit !important;
    white-space: nowrap !important;
}

.th-price-dropdown__trigger::after {
    content: "" !important;

    display: inline-block !important;

    width: var(--th-filter-icon-size) !important;
    height: var(--th-filter-icon-size) !important;
    flex: 0 0 var(--th-filter-icon-size) !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        url("/wp-content/uploads/2026/07/dropdown.svg")
        !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    border: 0 !important;
}

.th-price-dropdown.is-open
.th-price-dropdown__trigger::after {
    background-image:
        url("/wp-content/uploads/2026/07/arrow-up.svg")
        !important;
}


/* ==================================================
   8. ÁR LENYÍLÓ PANEL
   ================================================== */

.th-price-dropdown__panel {
    display: none !important;

    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0;
    right: auto !important;

    width:
        min(
            var(--th-price-panel-width),
            calc(100vw - 24px)
        )
        !important;

    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;

    margin: 0 !important;
    padding: 18px !important;

    box-sizing: border-box !important;

    background: var(--th-filter-bg) !important;
    border: 1px solid #D7D3D3 !important;
    border-radius: 0 !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.11)
        !important;

    overflow: visible !important;

    z-index: 99999 !important;
}

.th-price-dropdown.is-open
.th-price-dropdown__panel {
    display: block !important;
}

.th-price-dropdown__panel > .e-con-inner,
.th-price-dropdown__panel .elementor-widget-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.th-price-dropdown__panel
.elementor-widget-jet-smart-filters-range,

.th-price-dropdown__panel
.jet-smart-filters-range,

.th-price-dropdown__panel
.jet-range {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;
}


/* ==================================================
   9. ÁRCSÚSZKA
   ================================================== */

.th-price-dropdown__panel
.jet-range__slider {
    display: block !important;

    width:
        min(
            320px,
            calc(100% - 44px)
        )
        !important;

    min-width: 0 !important;
    max-width: calc(100% - 44px) !important;

    margin:
        3px
        auto
        20px
        auto
        !important;

    box-sizing: border-box !important;
}

.th-price-dropdown__panel
.jet-range__slider .noUi-target,

.th-price-dropdown__panel
.jet-range__slider .noUi-base,

.th-price-dropdown__panel
.jet-range__slider .noUi-connects {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* ==================================================
   10. MINIMUM ÉS MAXIMUM ÁRBEVITEL
   ================================================== */

.th-price-dropdown__panel
.jet-range__inputs {
    display: flex !important;
    align-items: stretch !important;

    gap: 12px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.th-price-dropdown__panel
.jet-range__inputs >
.jet-range__inputs__group {
    display: flex !important;
    align-items: stretch !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 1 1 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Köztes elválasztó elrejtése */
.th-price-dropdown__panel
.jet-range__inputs__separator,

.th-price-dropdown__panel
.jet-range__inputs-separator,

.th-price-dropdown__panel
.jet-range__inputs__sep,

.th-price-dropdown__panel
.jet-range__inputs-sep {
    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 0 !important;
}

/* Esetleges input-wrapper */
.th-price-dropdown__panel
.jet-range__inputs__group__input,

.th-price-dropdown__panel
.jet-range__inputs__input {
    display: block !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Tényleges minimum- és maximuminput */
.th-price-dropdown__panel
.jet-range__inputs input,

.th-price-dropdown__panel
.jet-range__inputs input[type="number"],

.th-price-dropdown__panel
.jet-range__inputs input[type="text"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: 1 1 auto !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    box-sizing: border-box !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums !important;

    color: var(--th-filter-text) !important;
    background: #FFFFFF !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Ft utótag */
.th-price-dropdown__panel
.jet-range__inputs__suffix,

.th-price-dropdown__panel
.jet-range__inputs__group__text,

.th-price-dropdown__panel
.jet-range__inputs__group__suffix {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    flex: 0 0 42px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* ==================================================
   11. AKTÍV FILTEREK
   ================================================== */

.jet-active-filters__list {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.jet-active-filters__item,
.jet-active-filter,
.jet-active-filter__item {
    display: inline-flex !important;
    align-items: center !important;

    width: max-content !important;
    min-width: 0 !important;
    min-height: 0 !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    box-sizing: border-box !important;

    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.jet-active-filter__label,
.jet-active-filter__value {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1 !important;
}

.jet-active-filter__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}


/* ==================================================
   12. MOBIL
   ================================================== */

@media (max-width: 767px) {
    :root {
        --th-filter-height: 40px;
        --th-filter-padding-x: 10px;
        --th-filter-gap: 5px;
        --th-filter-icon-size: 7px;
        --th-filter-font-size: 12px;
    }

    .th-filter-row {
        width: 100% !important;
        max-width: 100% !important;

        column-gap: 5px !important;
        row-gap: 6px !important;
    }

    .th-filter-dropdown,
    .th-category-filter,
    .th-price-dropdown,
    .th-price-dropdown.e-con {
        --width: max-content !important;

        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;

        flex: 0 0 auto !important;
    }

    .th-price-dropdown > .e-con-inner {
        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .th-filter-dropdown
    .jet-smart-filters-checkboxes,

    .th-filter-dropdown
    .jet-filter-items-dropdown,

    .th-filter-dropdown
    .jet-filter-items-dropdown__label,

    .th-price-dropdown__trigger {
        width: max-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Kompakt Termékcsoport Select mobilon */
    .th-category-filter .jet-select,
    .th-category-filter .jet-select__control,
    .th-category-filter select {
        width: auto !important;
        min-width: 138px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .th-price-dropdown__panel {
        width:
            min(
                390px,
                calc(100vw - 20px)
            )
            !important;

        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;

        padding: 14px !important;
    }

    /* Mobilon csak a csúszka rövidül */
    .th-price-dropdown__panel
    .jet-range__slider {
        width:
            min(
                250px,
                calc(100% - 54px)
            )
            !important;

        min-width: 0 !important;
        max-width: calc(100% - 54px) !important;

        margin:
            3px
            auto
            18px
            auto
            !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs {
        gap: 8px !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs >
    .jet-range__inputs__group {
        width: 0 !important;
        min-width: 0 !important;

        flex: 1 1 0 !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs__group__input,

    .th-price-dropdown__panel
    .jet-range__inputs__input {
        width: 0 !important;
        min-width: 0 !important;

        flex: 1 1 auto !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs input,

    .th-price-dropdown__panel
    .jet-range__inputs input[type="number"],

    .th-price-dropdown__panel
    .jet-range__inputs input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 44px !important;

        padding: 8px 7px !important;

        font-size: 14px !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs__suffix,

    .th-price-dropdown__panel
    .jet-range__inputs__group__text,

    .th-price-dropdown__panel
    .jet-range__inputs__group__suffix {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        flex: 0 0 34px !important;

        height: 44px !important;

        padding: 0 4px !important;
    }

    .jet-active-filters__list {
        gap: 4px !important;
    }

    .jet-active-filters__item,
    .jet-active-filter,
    .jet-active-filter__item {
        min-height: 0 !important;

        gap: 3px !important;

        padding: 4px 7px !important;

        font-size: 11px !important;
        line-height: 1 !important;
    }

    .jet-active-filter__label,
    .jet-active-filter__value {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .jet-active-filter__remove {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }
}


/* Extrém keskeny telefon */
@media (max-width: 319px) {
    .th-price-dropdown__panel
    .jet-range__inputs {
        flex-direction: column !important;
    }

    .th-price-dropdown__panel
    .jet-range__inputs >
    .jet-range__inputs__group {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}


/* ==================================================
   MOBIL CHECKBOX DROPDOWN – KÉPERNYŐN BELÜL TARTÁS
   ================================================== */

@media (max-width: 767px) {
    .th-filter-dropdown
    .jet-filter-items-dropdown__body {
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .th-filter-dropdown
    .jet-filter-items-dropdown__body-inner,

    .th-filter-dropdown
    .jet-filter-items-dropdown__items {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .th-filter-dropdown
    .jet-filter-row,

    .th-filter-dropdown
    .jet-checkboxes-list__row {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .th-filter-dropdown
    .jet-checkboxes-list__label {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}