.filters-button {
    position: fixed;
    left: 21vw;
    top: 3vw;
    display: block;
    width: 15vw;
    height: 15vw;
    background-image: url("../img/filters_button.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.filters {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 96%;
    height: 98%;
    padding: 2%;
    background-color: rgb(255, 255, 255);
    z-index: 100;
    overflow-x: hidden;
    overflow-y: scroll;
}

.filters .title{
    display: flex;
    width: 100%;
    line-height: 4vw;
    height: 4vw;
    font-size: 5vw;
    font-weight: bold;
    padding: 2vw;
}

.filters .content {
    display: block;
    width: 100%;
    height: auto;
    transition: padding-bottom 0.3s ease;
}

.filters .content.has-save-button {
    padding-bottom: 10vw; /* Высота кнопки сохранить + отступ */
}

.filters .save-button-wrap {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12vw;
    padding: 1vw;
    box-sizing: border-box;
    align-items: center;
    background: white;
    box-shadow: 0 -0.2vw 1vw rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.filters .save-button-wrap.visible {
    transform: translateY(0);
}

.filters .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff7e;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.filters .button {
    display: flex;
    width: 100%;
    height: auto;
    padding: 1.5vw 3vw;
    font-size: 5vw;
    font-weight: 600;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: white;
    background: #007bff;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
}

.filters .close-button {
    position: fixed;
    top: 3vw;
    right: 3vw;
    width: 7vw;
    height: 7vw;
    cursor: pointer;
    z-index: 9990;
    background-image: url("/img/close.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.filters .button-close {
    background: #6c757d;
}

.filters .content .field-wrap {
    display: block;
    width: auto;
    height: auto;
    border-radius: 2vw;
    background-color: #f1f4f5;
    margin-top: 5vw;
    padding: 1vw;
}

.filters .content .text {
    display: flex;
    width: auto;
    height: auto;
    font-size: 5vw;
}

.filters .content .text.bold {
    font-weight: bold;
}

.filters .label {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 1vw;
    font-weight: bold;
    font-size: 4vw;
}

.filters .radio-group {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    margin: 1vw;
    font-family: system-ui, sans-serif;
}

.filters .radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    align-items: center;
}

.filters .radio-circle {
    display: flex;
    width: 5vw;
    height: 5vw;
    margin-top: 1vw;
    margin-right: 1.2vw;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/img/profile_radio_0.svg');
}

.filters .radio-circle.checked {
    background-image: url('/img/profile_radio_1.svg');
}

.filters .radio-label {
    display: flex;
    font-size: 3.9vw;
    color: #333;
    font-weight: 500;
    align-items: center;
}

.filters .radio-item input[type="radio"] {
    position: absolute;
    display: flex;
    opacity: 0;
    width: 0;
    height: 0;
}

.filters .checkbox-group {
    display: flex;
    flex-wrap: wrap; /* 🔥 Перенос на новую строку */
    width: 100%;
    box-sizing: border-box;
    gap: 1vw; /* Отступы между чекбоксами */
}

.filters .checkbox-group.column {
    display: block;
    width: 100%;
    box-sizing: border-box;
    gap: 1vw; /* Отступы между чекбоксами */
}

.filters .checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    max-width: 50vw;
    min-height: 4vw; /* Минимальная высота для удобства клика */
    /* 🔥 КЛЮЧЕВОЕ: все чекбоксы в строке растягиваются равномерно */
    flex: 1 1 0%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% — растягиваем на всю доступную ширину строки */
    box-sizing: border-box;
    text-align: left;
    padding-left: 0.9vw;
}

.filters .checkbox-item.column {
    max-width: 100%;
    min-height: auto;
    flex: 0 1 auto;
}

.filters .checkbox-circle {
    width: 5vw;
    height: 5vw;
    margin-right: 1vw;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/img/profile_check_0.svg');
}

.filters .checkbox-circle.checked {
    background-image: url('/img/profile_check_1.svg');
}

.filters .checkbox-label {
    font-size: 3.9vw;
    color: #333;
    font-weight: 500;
    white-space: normal; /* 🔥 ВСЁ ВИДНО — текст ломается на строки внутри чекбокса! */
    word-wrap: break-word; /* 🔥 Дополнительно: разрешаем перенос внутри ячейки */
    overflow: visible; /* 🔥 Никакого обрезания */
    padding: 0.8vw 1.2vw;
    border-radius: 1.6vw;
    background-color: #f5f5f5;
    flex-grow: 1; /* 🔥 Растягиваем текст на всю оставшуюся ширину чекбокса */
    text-align: left;
    line-height: 1.3;
    box-sizing: border-box;
}

.filters .checkbox-label.column {
    white-space: normal;
    word-wrap: normal;
    flex-grow: 0;
    width: 100%;
}

.filters .checkbox-label-field-show {
    font-size: 3.9vw;
    color: #706b6b;
    font-weight: 500;
    overflow: visible;
    padding: 0.8vw 1.2vw;
    text-align: left;
    line-height: 1.3;
    box-sizing: border-box;
    width: auto;
}

.filters .checkbox-label.checked {
    box-shadow: inset 0 0 0 0.3vw #ffbe79;
    background-color: #ffe7cd;
}

.filters .checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filters .field-show {
    position: relative;
    width: 50vw;
    display: flex;
    justify-content: left;
    padding: 1vw 1vw 1vw 1vw;
}

.filters .range-slider-container {
    display: block;
    width: 100%;
    max-width: 80vw;
    margin: 2vw auto 5vw;
    text-align: center;
}

.filters .range-values {
    font-size: 4.5vw;
    font-weight: bold;
    color: #f79227;
    margin-bottom: 0.8vw;
}

.filters .range-track {
    position: relative;
    width: 100%;
    height: 1.8vw;
    background: #ddd;
    border-radius: 1.4vw;
    cursor: pointer;
}

.filters .range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: #ffbe79; /* оранжевая полоса между ползунками */
    border-radius: 1.4vw;
    pointer-events: none;
}

.filters .range-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background: #ffbe79;
    cursor: grab;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);
    z-index: 2;
}

.filters .range-thumb:active {
    cursor: grabbing;
}

.filters .slider-container {
    display: block;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto 5vw;
    justify-content: center;
    text-align: center;
}

.filters .slider-container label {
    display: block;
    margin-bottom: 0.8vw;
    font-size: 4.5vw;
    font-weight: bold;
    color: #f79227;
}

.filters .slider-container input[type="range"] {
    width: 100%;
    height: 0.8vw;
    border-radius: 0.4vw;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Стиль "заполненной" части слайдера (в разных браузерах) */
.filters .slider-container input[type="range"]::-webkit-slider-runnable-track {
    height: 1.8vw;
    border-radius: 1.4vw;
    background: linear-gradient(to right, #fae3cb 0%, #ffbe79 var(--val), #ddd var(--val), #ddd 100%);
}

.filters .slider-container input[type="range"]::-moz-range-track {
    height: 1.8vw;
    border-radius: 1.4vw;
    background: #ddd;
}

.filters .slider-container input[type="range"]::-moz-range-progress {
    background: #ffbe79;
    height: 1.8vw;
    border-radius: 1.4vw;
}

/* Стиль ползунка (бегунка) */
.filters .slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background: #ffbe79;
    cursor: pointer;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);
    margin-top: -0.9vw; /* центрируем по высоте трека */
}

.filters .slider-container input[type="range"]::-moz-range-thumb {
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background: #ffbe79;
    cursor: pointer;
    border: none;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.2);
}

.filters .detected-wrap {
    display: grid;
    grid-template-columns: auto 12vw;
    width: 100%;
    height: 10vw;
    margin-bottom: 3vw;
    justify-self: end;
    transition: height 0.3s ease-in-out;
}

.filters .detected-wrap > * {
    justify-self: end;
}

.filters .city-detected {
    display: flex;
    font-size: 5vw;
    width: 100%;
    height: 100%;
    line-height: 5vw;
    background-color: #ffffff;
    border-radius: 1.5vw;
    padding: 2vw;
    overflow: hidden;
    box-sizing: border-box;
}

.filters .city-detected.disable {
    display: flex;
    color: #8d959b;
}

.filters .autocomplete-container {
    position: relative;
    width: 100%;
    min-height: 10vw;
    transition: height 0.3s ease-in-out;
    overflow: visible;
}

.filters .distance-wrap {
    display: flex;
    width: 100%;
    height: 17vw;
    transition: height 0.3s ease-in-out;
    overflow: hidden;
    justify-content: center;
}

.filters .collapse {
    overflow: hidden;
    height: 0;
    padding: 0;
    border: none;
}

.filters .city-input {
    width: 100%;
    padding: 2vw;
    font-size: 4.5vw;
    border: 0.1vw solid #ccc;
    border-radius: 1.5vw;
    box-sizing: border-box;
}

.proffiltersile .city-input.warning {
    border-color: red;
}

.filters .city-input.blink {
  animation: blink-border 0.5s infinite;
}

.filters .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    border: 0.1vw solid #ccc;
    border-top: none;
    max-height: 50vw;
    overflow-y: auto;
    z-index: 101;
    box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.1);
    display: none; /* изначально скрыт */
}

.filters .dropdown-list strong {
    font-weight: bold;
    color: #007bff;
}

.filters .dropdown-list li {
    padding: 1vw 1.2vw;
    cursor: pointer;
    border-bottom: 0.1vw solid #f0f0f0;
    font-size: 4.5vw;
}

.filters .dropdown-list li:hover {
    background-color: #f5f5f5;
}

.filters .dropdown-list li:last-child {
    border-bottom: none;
}

.filters .distance-warning {
    margin-top: 8px;
    font-size: 14px;
    color: #e74c3c;
}

.filters .distance-warning a {
    color: #3498db;
    text-decoration: underline;
    cursor: pointer;
}