.ew-lts-filters-wrapper {
    .filters-wrapper {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 30px 20px;
    }

    .filter-wrapper {
        position: relative;

        &.open {
            .filter-button {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);

                svg {
                    transform: rotate(180deg);
                }
            }

            .filter-popup {
                display: block;
            }
        }
    }

    .filter-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        cursor: pointer;
        line-height: 1.2;
        font-size: 14px;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;

        &:hover {
            border-color: #9ca3af;
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .35);
            border-color: #3b82f6;
        }

        svg {
            transition: transform .15s ease;
            color: #6b7280;
        }
    }

    .filter-popup {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 220px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .06);
        z-index: 50;
        display: none;
        overflow: hidden;
    }

    .filter-content {
        .flex-row {
            display: flex;
            width: 100%;
            gap: 10px;
        }
    }

    .filter-select-options-col {
        max-height: 280px;
        overflow: auto;
        width: 100%;
        padding: 10px;
    }

    .filter-select-option {
        display: block;
        padding: 8px 10px;
        border-radius: 6px;
        cursor: pointer;
        color: #111827;

        &:hover {
            background: #f3f4f6;
        }
    }

    .price-range-filter-content {
        padding: 10px 20px;

        .slider-container {
            width: 100%;
            max-width: 400px;
        }

        .noUi-connect {
            background: var(--global-color-9) !important;
        }

        .noUi-handle {
            border-radius: 50%;
            background: var(--global-color-8);
            border: none;
            width: 16px;
            height: 16px;
            box-shadow: none;
            top: -11px;

            @media screen and (max-width: 768px) {
                width: 24px;
                height: 24px;
            }
        }

        .noUi-handle:before,
        .noUi-handle:after {
            content: none;
        }

        .noUi-horizontal {
            height: 4px;
        }

        .noUi-tooltip {
            display: none;
        }

        .actions-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;

            @media screen and (max-width: 768px) {
                flex-direction: column;
                gap: 15px;
            }

            .price-range-wrapper {
                display: flex;
                align-items: center;
                font-size: 14px;

                @media screen and (max-width: 768px) {
                    font-size: 16px;
                }
            }

            label {
                padding-right: 10px;
            }

            span + span {
                padding-left: 5px;
            }

            button {
                padding: 0.5rem 1.5rem;
                margin: 0;


                font-size: 0.875rem;
                font-weight: 600;
                letter-spacing: 0.05em;
                line-height: 1.25;
                text-align: center;
                color: #0e7490;
                text-transform: uppercase;
                white-space: nowrap;
                word-break: normal;
                overflow-wrap: break-word;

                background-color: #ffffff;
                border-radius: 0.375rem;
                border: 1px solid #164e63;

            }

        }
    }

    .histogram-container {
        width: 400px;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(var(--buckets-count), 1fr);
        gap: 2px;
        margin-top: 10px;

        .bucket {
            align-self: flex-end;
            background: var(--global-color-9);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;

            &.outside {
                background: var(--global-color-12);
            }
        }
    }
}