/* =====================================================
   DELTA MODERN PRODUCT FILTER
===================================================== */

.filter-box--delta {
    --filter-primary: #07599f;
    --filter-primary-dark: #034788;
    --filter-primary-soft: #edf5fc;
    --filter-text: #263746;
    --filter-muted: #71808d;
    --filter-border: #dce5ec;
    --filter-surface: #ffffff;
    --filter-surface-soft: #f7f9fb;

    width: 100%;
    margin: 0;
    padding: 0 18px 24px;

    color: var(--filter-text);
    background: var(--filter-surface);

    font-family:
        Nunito,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

/* Fejléc */

.filter-box__header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 -18px 4px;
    padding: 18px;

    background:
        linear-gradient(
            135deg,
            #f6faff 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid var(--filter-border);
}

.filter-box__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--filter-primary),
            var(--filter-primary-dark)
        );

    border-radius: 9px;

    box-shadow:
        0 5px 12px rgba(3, 71, 136, 0.18);
}

.filter-box__header-icon .bi {
    font-size: 1.1rem;
}

.filter-box__header-content {
    min-width: 0;
}

.filter-box__header-content h2 {
    margin: 0;

    color: var(--filter-primary-dark);

    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.25;
}

.filter-box__header-content p {
    margin: 2px 0 0;

    color: var(--filter-muted);

    font-size: 0.76rem;
    line-height: 1.3;
}

/* Loading */

.filter-box__loading {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 24px;
}

.filter-box__loading .spinner-border {
    width: 1rem;
    height: 1rem;
    color: var(--filter-primary);
}

/* Szekciók */

.filter-section {
    padding: 15px 0;

    border-bottom: 1px solid #edf1f4;
}

.filter-section:last-of-type {
    border-bottom: 0;
}

.filter-section--primary {
    padding-top: 8px;
}

.filter-label,
.filter-section__title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 8px;

    color: #586976;

    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.015em;
}

.filter-label .bi,
.filter-section__title .bi {
    color: var(--filter-primary);
    font-size: 0.88rem;
}

.filter-section__title {
    justify-content: space-between;
}

.filter-section__title > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.filter-section__title small {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 23px;
    height: 20px;
    padding: 0 6px;

    color: var(--filter-primary-dark);
    background: var(--filter-primary-soft);

    border: 1px solid #d7e7f5;
    border-radius: 6px;

    font-size: 0.66rem;
    font-weight: 700;
}

/* Mezők */

.filter-box--delta .form-control,
.filter-box--delta .form-select {
    min-height: 40px;
    padding: 8px 12px;

    color: #314554;
    background-color: #ffffff;

    border: 1px solid var(--filter-border);
    border-radius: 7px;

    font-size: 0.8rem;

    box-shadow: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.filter-box--delta .form-control:hover,
.filter-box--delta .form-select:hover {
    border-color: #bccbd7;
}

.filter-box--delta .form-control:focus,
.filter-box--delta .form-select:focus {
    background-color: #ffffff;
    border-color: var(--filter-primary);

    box-shadow:
        0 0 0 3px rgba(7, 89, 159, 0.1);
}

.filter-box--delta .form-control::placeholder {
    color: #9aa6af;
}

/* Saját select nyíl */

.filter-select-wrap {
    position: relative;
}

.filter-select-wrap .form-select {
    padding-right: 36px;
    background-image: none;
}

.filter-select-wrap > .bi {
    position: absolute;
    top: 50%;
    right: 12px;

    color: #778692;

    font-size: 0.74rem;

    pointer-events: none;
    transform: translateY(-50%);
}

/* Kereső */

.filter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search .form-control {
    padding-right: 46px;
}

.filter-search__button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;

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

    width: 34px;
    padding: 0;

    color: #ffffff;
    background: var(--filter-primary);

    border: 0;
    border-radius: 6px;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.filter-search__button:hover {
    background: var(--filter-primary-dark);
}

.filter-search__button:active {
    transform: scale(0.95);
}

.filter-search__button:focus-visible {
    outline: 3px solid rgba(7, 89, 159, 0.22);
    outline-offset: 2px;
}

/* Checkboxok */

.filter-options {
    display: grid;
    gap: 5px;
}

.filter-check {
    position: relative;
    min-height: 35px;
    margin: 0;
    padding: 0;
}

.filter-check .form-check-input {
    position: absolute;
    top: 50%;
    left: 10px;

    width: 16px;
    height: 16px;
    margin: 0;

    border-color: #bdcad4;
    border-radius: 4px;

    transform: translateY(-50%);
}

.filter-check .form-check-label {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 35px;
    padding: 6px 10px 6px 36px;

    color: #52636f;
    background: var(--filter-surface-soft);

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 0.78rem;
    line-height: 1.3;

    cursor: pointer;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.filter-check:hover .form-check-label {
    color: var(--filter-primary-dark);
    background: #f1f7fc;
    border-color: #dceaf5;
}

.filter-check .form-check-input:checked {
    background-color: var(--filter-primary);
    border-color: var(--filter-primary);
}

.filter-check .form-check-input:checked + .form-check-label {
    color: var(--filter-primary-dark);
    background: var(--filter-primary-soft);
    border-color: #cfe2f2;
    font-weight: 650;
}

/* PHP által még mt-3 osztállyal renderelt tulajdonságok */

.filter-box--delta > .mt-3 {
    margin-top: 0 !important;
    padding: 15px 0;

    border-bottom: 1px solid #edf1f4;
}

.filter-box--delta > .mt-3 > .form-label {
    display: block;
    margin: 0 0 8px !important;

    color: #586976 !important;

    font-size: 0.74rem !important;
    font-weight: 700;
    line-height: 1.3;
}

/* Normál property checkboxok */

.filter-box--delta > .mt-3 > .form-check {
    position: relative;
    min-height: 34px;
    margin: 5px 0 0;
    padding: 0;
}

.filter-box--delta > .mt-3 > .form-check .form-check-input {
    position: absolute;
    top: 50%;
    left: 10px;

    width: 16px;
    height: 16px;
    margin: 0;

    transform: translateY(-50%);
}

.filter-box--delta > .mt-3 > .form-check .form-check-label {
    display: flex;
    align-items: center;

    min-height: 34px;
    padding: 6px 10px 6px 36px;

    color: #52636f;
    background: var(--filter-surface-soft);

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 0.78rem;
    cursor: pointer;
}

.filter-box--delta > .mt-3 > .form-check
.form-check-input:checked + .form-check-label {
    color: var(--filter-primary-dark);
    background: var(--filter-primary-soft);
    border-color: #cfe2f2;
    font-weight: 650;
}

/* Elválasztó */

.filter-box--delta hr {
    margin: 7px 0 0;

    color: var(--filter-border);
    opacity: 1;
}

/* Találatszám */

#filterResultCount {
    min-height: 34px;
    margin-top: 16px !important;
    padding: 8px 10px;

    color: #637582 !important;
    background: #f7f9fb;

    border: 1px solid #e4eaee;
    border-radius: 7px;

    font-size: 0.76rem;
    font-weight: 650;
}

/* Scrollbar a desktop oldalsávban */

.desktop-filter-panel {
    overflow-y: auto;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Firefox */
.desktop-filter-panel:hover {
    scrollbar-color: #bdcad4 transparent;
}

/* Chrome, Edge, Safari */
.desktop-filter-panel::-webkit-scrollbar {
    width: 6px;
}

.desktop-filter-panel::-webkit-scrollbar-track {
    background: transparent;
}

.desktop-filter-panel::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}

.desktop-filter-panel:hover::-webkit-scrollbar-thumb {
    background: #bdcad4;
}

/* Mobil */

@media (max-width: 991.98px) {
    .filter-box--delta {
        padding-right: 14px;
        padding-bottom: 16px;
        padding-left: 14px;
    }

    .filter-box__header {
        margin-right: -14px;
        margin-left: -14px;
        padding: 14px;
    }

    .filter-section {
        padding: 13px 0;
    }
}
/*RANGE STYLE*/
.modern-range-wrap {
    padding: 10px 2px 2px;
}

.modern-range-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.modern-range-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    padding: 6px 12px;

    border-radius: 8px; /* kevésbé kerek */
    
    background: #e9f2fb; /* világos kék */
    color: #034788;

    font-size: 13px;
    font-weight: 600;

    border: 1px solid #c7d9ee;

    box-shadow: none; /* tisztább */
}

.modern-range-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
}

input[type="range"].modern-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: transparent !important;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Webkit track */
input[type="range"].modern-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #034788;
}

/* Webkit thumb */
input[type="range"].modern-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f8fbff;
    border: 2px solid #034788;
    box-shadow: 0 2px 6px rgba(3, 71, 136, .15);
    cursor: pointer;
    margin-top: -8px;
    transition: transform .15s ease, box-shadow .15s ease;
}

input[type="range"].modern-range:hover::-webkit-slider-thumb,
input[type="range"].modern-range:focus::-webkit-slider-thumb {
    transform: scale(1.04);
    box-shadow: 0 3px 10px rgba(3, 71, 136, .20);
}

/* Firefox track */
input[type="range"].modern-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #034788;
}

/* Firefox thumb */
input[type="range"].modern-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f8fbff;
    border: 2px solid #034788;
    box-shadow: 0 2px 6px rgba(3, 71, 136, .15);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.dual-range-wrap {
    padding: 8px 0 0;
}

.dual-range-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dual-range-value {
    min-width: 64px;
    padding: 6px 10px;

    color: #034788;
    background: #edf5fc;

    border: 1px solid #cfe0ee;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
}

.dual-range-sep {
    color: #7b8794;
    font-size: 14px;
    font-weight: 600;
}

.dual-range-slider {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

.dual-range-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #034788;
}

.dual-range-progress {
    position: absolute;
    height: 8px;
    border-radius: 999px;
    background: rgba(3, 71, 136, 0.18);
    border: 1px solid rgba(3, 71, 136, 0.35);
    pointer-events: none;
}

input[type="range"].dual-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 24px;
    background: transparent !important;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

input[type="range"].dual-range::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border: none;
}

input[type="range"].dual-range::-moz-range-track {
    height: 8px;
    background: transparent;
    border: none;
}

input[type="range"].dual-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f7fbff;
    border: 2px solid #034788;
    box-shadow: 0 2px 6px rgba(3, 71, 136, .12);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -6px;
    position: relative;
    z-index: 2;
}

input[type="range"].dual-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f7fbff;
    border: 2px solid #034788;
    box-shadow: 0 2px 6px rgba(3, 71, 136, .12);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.dual-range-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7785;
}

/* DENSO search and filter controls only */
:is(.delta-denso-catalog,.delta-native-catalog) .delta-denso-filters{width:100%;min-width:0;max-width:none;position:static}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta{--filter-primary:#2b2d42;--filter-primary-dark:#2b2d42;--filter-primary-soft:#f0f1f5;--filter-text:#2b2d42;--filter-muted:#656878;--filter-border:#dcdfe6;--filter-surface:#f5f6f8;--filter-surface-soft:#fff;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:22px;border:1px solid #dcdfe6;border-radius:8px;background:#f5f6f8;box-shadow:none}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__header{grid-column:1/-1;grid-row:1;margin:0;padding:0 0 8px;background:none;border:0}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__header h2{font-size:1.2rem;color:#2b2d42;font-weight:700}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__header p,:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__header-icon{display:none}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__loading{grid-column:1/-1;margin:0}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__loading:has([style*="display:none"]),:is(.delta-denso-catalog,.delta-native-catalog) .filter-box__loading:has([style*="display: none"]){display:none}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--keyword{grid-column:1/4;grid-row:2}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--primary{grid-column:4;grid-row:2}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section,:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta>.mt-3{margin:0!important;padding:0;border:0;min-width:0}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-label,:is(.delta-denso-catalog,.delta-native-catalog) .filter-section__title{color:#2b2d42;font-size:.85rem}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta .form-control,:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta .form-select{border-color:#dcdfe6;background-color:white;color:#2b2d42;border-radius:5px;min-height:40px;box-shadow:none}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-search__button{background:#d62839!important;color:white!important;border-color:#d62839!important;box-shadow:none}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta input:focus,:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta select:focus{border-color:#2b2d42;box-shadow:0 0 0 3px rgba(43,45,66,.1)}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta input{accent-color:#d62839}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta .form-check-input:checked{background-color:#2b2d42;border-color:#2b2d42}
:is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn{align-self:end;width:auto!important;margin:0!important;color:#d62839;border-color:#d62839;min-height:40px}
:is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn:hover{background:#d62839;color:white}
:is(.delta-denso-catalog,.delta-native-catalog) #filterResultCount{grid-column:1/-1;margin:0!important}
:is(.delta-denso-catalog,.delta-native-catalog) #filterResultCount:empty{display:none}

@media(max-width:991px){
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--keyword{grid-column:1;grid-row:2}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--primary{grid-column:2;grid-row:2}
}
@media(max-width:575px){
:is(.delta-denso-catalog,.delta-native-catalog) .filter-box--delta{grid-template-columns:1fr;gap:14px}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--keyword,:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--primary{grid-column:1;grid-row:auto}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-section--keyword{grid-row:2}
}
:is(.delta-denso-catalog,.delta-native-catalog) .dual-range-value{color:#2b2d42;background:#f0f1f5;border-color:#dcdfe6}
:is(.delta-denso-catalog,.delta-native-catalog) .dual-range-track{border-color:#2b2d42}
:is(.delta-denso-catalog,.delta-native-catalog) .dual-range-progress{background:rgba(43,45,66,.18);border-color:#2b2d42}
:is(.delta-denso-catalog,.delta-native-catalog) input[type=range]::-webkit-slider-thumb{background:#fff!important;border-color:#2b2d42!important;box-shadow:none!important}
:is(.delta-denso-catalog,.delta-native-catalog) input[type=range]::-moz-range-thumb{background:#fff!important;border-color:#2b2d42!important;box-shadow:none!important}
:is(.delta-denso-catalog,.delta-native-catalog) .filter-label i,:is(.delta-denso-catalog,.delta-native-catalog) .filter-section__title i,:is(.delta-denso-catalog,.delta-native-catalog) .filter-select-wrap>i{color:#2b2d42!important}


/* Mobile: the existing button opens the same filter instance in offcanvas. */
@media(max-width:991.98px){
  :is(.delta-denso-catalog,.delta-native-catalog) .denso-mobile-filter-toggle{display:block!important}
  :is(.delta-denso-catalog,.delta-native-catalog) #filterSidebar .filter-box--delta{
    grid-template-columns:minmax(0,1fr);padding:16px;gap:14px;
  }
  :is(.delta-denso-catalog,.delta-native-catalog) #filterSidebar .filter-section--keyword,
  :is(.delta-denso-catalog,.delta-native-catalog) #filterSidebar .filter-section--primary{
    grid-column:1;grid-row:auto;
  }
}
:is(.delta-denso-catalog,.delta-native-catalog) #filterToggleBtn,
:is(.delta-denso-catalog,.delta-native-catalog) #mobileApplyFiltersBtn{
  background:#2b2d42;border-color:#2b2d42;color:#fff;
}

/* Desktop reset: Delta red icon and text, without a button frame. */
@media (min-width:992px){
  :is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    justify-self:end;align-self:end;width:auto!important;max-width:100%;
    min-height:40px;margin:0!important;padding:8px 4px;
    border:0!important;border-radius:4px;background:transparent!important;
    color:#d62839!important;box-shadow:none!important;
    font-size:.875rem;font-weight:500;line-height:1.4;
  }
  :is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn i{
    color:inherit;font-size:1.25rem;line-height:1;
  }
  :is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn:hover span{
    text-decoration:underline;text-underline-offset:3px;
  }
  :is(.delta-denso-catalog,.delta-native-catalog) #desktopResetFiltersBtn:focus-visible{
    outline:2px solid #d62839;outline-offset:4px;
  }
}