/* ============================================
   Компонент: land.filter
   Шаблон: air
   Стилизация согласно дизайну
   ============================================ */

/* Контейнер фильтра */
.land-filter {
    width: 100% !important;
}

/* Форма фильтра */
.land-filter-form {
    width: 100% !important;
}

/* Строка с полями фильтра */
.land-filter-form .top-filter-body-content-selects,
.top-filter-body-content-selects {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Обертка для каждого поля фильтра */
.land-filter .top-filter-body-content-selects-wrap,
.land-filter-form .top-filter-body-content-selects-wrap,
.top-filter-body-content-selects-wrap {
    padding: 0 !important;
    flex: 1 !important;
    border-right: none !important;
    margin-right: 16px !important;
    display: flex !important;
    align-items: center !important;
}

.top-filter-body-content-selects-wrap:last-child {
    margin-right: 0 !important;
    flex: 0 0 auto !important;
}

/* Мобильная ширина: перенос полей фильтра, чтобы все были видны */
@media screen and (max-width: 992px) {
    .land-filter-form .top-filter-body-content-selects,
    .top-filter-body-content-selects {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .land-filter .top-filter-body-content-selects-wrap,
    .land-filter-form .top-filter-body-content-selects-wrap,
    .top-filter-body-content-selects-wrap {
        margin-right: 0 !important;
        flex: 1 1 auto !important;
        min-width: 140px;
    }
}

/* Обертка для инпута с выпадающим списком */
.filter-input-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* Контейнер для инпута и бейджа */
.filter-input-container {
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    display: block !important;
}

/* Инпут фильтра - стиль как на скриншоте */
.filter-input,
.land-filter .filter-input,
.land-filter-form .filter-input {
    width: 100% !important;
    height: 48px !important;
    padding: 14px 40px 14px 16px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    outline: none !important;
    cursor: text !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 !important;
    display: block !important;
    vertical-align: middle !important;
}

/* Скрываем курсор только для инпутов с выпадающими списками (select) */
.filter-input-container .filter-input,
.land-filter .filter-input-container .filter-input,
.land-filter-form .filter-input-container .filter-input {
    caret-color: transparent !important;
}

.filter-input::placeholder,
.land-filter .filter-input::placeholder,
.land-filter-form .filter-input::placeholder {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
}

.filter-input:focus,
.land-filter .filter-input:focus,
.land-filter-form .filter-input:focus {
    border-color: #008F43 !important;
    outline: none !important;
}

/* Иконка стрелки вниз справа в инпуте */
.land-filter .filter-input-container::after,
.land-filter-form .filter-input-container::after,
.filter-input-container::after {
    content: '' !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Бейдж с выбранным значением */
.filter-badge {
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px 8px 16px !important;
    background-color: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
}

/* Бейдж видимый */
.filter-badge.show {
    display: flex !important;
}

.filter-badge-text {
    flex: 1 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.filter-badge-remove {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: #999 !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
    margin-right: 4px !important;
}

.filter-badge-remove:hover {
    color: #333 !important;
}

.filter-badge-remove svg {
    width: 12px !important;
    height: 12px !important;
}

/* Скрываем иконку стрелки когда показывается бейдж */
.filter-input-container:has(.filter-badge[style*="flex"])::after {
    display: none !important;
}

/* Выпадающий список */
.filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.filter-dropdown.show {
    display: block;
}

/* Контейнер элементов выпадающего списка */
.filter-dropdown-items {
    padding: 8px 0;
}

/* Элемент выпадающего списка */
.filter-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    color: #212529;
    font-size: 16px;
    line-height: 20px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.filter-dropdown-item:hover {
    background-color: #F5F5F5;
    color: #212529;
}

.filter-dropdown-item:active {
    background-color: #E8E8E8;
    color: #212529;
}

/* Текст элемента выпадающего списка */
.filter-dropdown-item-text {
    flex: 1;
    min-width: 0;
}

/* Галочка для выбранного элемента */
.filter-dropdown-item-check {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    display: none;
    color: #018d42;
}

/* Выбранный элемент */
.filter-dropdown-item.selected {
    background-color: #F0F9F4;
    color: #212529;
}

.filter-dropdown-item.selected .filter-dropdown-item-check {
    display: block;
}

/* Стилизация скроллбара для выпадающего списка */
.filter-dropdown::-webkit-scrollbar {
    width: 6px;
}

.filter-dropdown::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.filter-dropdown::-webkit-scrollbar-thumb {
    background: #018d42;
    border-radius: 3px;
}

.filter-dropdown::-webkit-scrollbar-thumb:hover {
    background: #016d32;
}

/* Обертка для кнопки Фильтры (стилизована как инпут) */
.filter-button-wrapper {
    width: 100% !important;
    position: relative !important;
}

.filter-button-wrapper::after {
    display: none !important;
}

/* Кнопка Фильтры */
.land-filter .filter-modal-btn,
.land-filter-form .filter-modal-btn,
.filter-modal-btn {
    width: 60% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    color: #5C5653 !important;
    background-color: #FFFFFF !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    white-space: nowrap !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.land-filter .filter-modal-btn:hover,
.land-filter-form .filter-modal-btn:hover,
.filter-modal-btn:hover {
    color: #5C5653 !important;
    background-color: #FFFFFF !important;
    border-color: #008F43 !important;
}

.land-filter .filter-modal-btn:focus,
.land-filter-form .filter-modal-btn:focus,
.filter-modal-btn:focus {
    color: #5C5653 !important;
    background-color: #FFFFFF !important;
    border-color: #008F43 !important;
    outline: none !important;
}

.filter-modal-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Кнопка Подобрать */
.top-filter-body-content-selects-button {
    display: flex;
    align-items: center;
    padding-left: 0;
    height: 48px;
}

.top-filter-body-content-selects-button .btn-success {
    background-color: #008F43;
    border-color: #008F43;
    color: #fff;
    font-size: 16px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
    height: 48px;
    border: none;
}

.top-filter-body-content-selects-button .btn-success:hover {
    background-color: #006630;
    border-color: #006630;
    color: #fff;
}

.top-filter-body-content-selects-button .btn-success:focus {
    background-color: #006630;
    border-color: #006630;
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(0, 143, 67, 0.25);
}

/* Модальное окно фильтров */
.land-filter .modal-dialog,
.filterModal .modal-dialog,
[id^="filterModal-"] .modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100% - 1rem) !important;
    margin: 0.5rem auto !important;
    position: relative !important;
}

.land-filter .modal-content,
.filterModal .modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    margin: auto !important;
}

.land-filter .modal-header,
.filterModal .modal-header {
    border-bottom: 1px solid #E0E0E0 !important;
    padding: 20px 24px !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.land-filter .modal-title,
.filterModal .modal-title,
.land-filter .modal-header .modal-title,
.filterModal .modal-header .modal-title {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: #212529 !important;
    margin: 0 !important;
    text-align: center !important;
    flex: 1 !important;
}

.land-filter .btn-close,
.filterModal .btn-close {
    opacity: 0.5 !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.land-filter .btn-close:hover,
.filterModal .btn-close:hover {
    opacity: 1 !important;
}

.land-filter .modal-body,
.filterModal .modal-body {
    padding: 24px !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.filter-modal-field {
    margin-bottom: 0 !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #F0F0F0 !important;
}

.filter-modal-field:first-child {
    padding-top: 0 !important;
}

.filter-modal-field:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.filter-modal-label {
    display: block;
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #212529 !important;
    margin-bottom: 12px !important;
}

.filter-modal-form .filter-input-wrapper {
    width: 100%;
}

.filter-modal-form .filter-input {
    width: 100%;
    margin-bottom: 0 !important;
}

/* Скрываем курсор только для инпутов с выпадающими списками в модальном окне */
.filter-modal-form .filter-input-container .filter-input {
    caret-color: transparent !important;
}

.filter-modal-form .filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
}

/* Переключатели валюты для полей стоимости */
.filter-currency-switcher {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.filter-currency-btn {
    padding: 8px 16px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 6px !important;
    background-color: #F5F5F5 !important;
    color: #5C5653 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.filter-currency-btn:hover:not(:disabled) {
    background-color: #E8E8E8 !important;
    border-color: #D0D0D0 !important;
}

.filter-currency-btn.active {
    background-color: #5C5653 !important;
    border-color: #5C5653 !important;
    color: #FFFFFF !important;
}

.filter-currency-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Диапазон значений (от-до) в модальном окне */
.filter-range-input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 400px !important;
    min-width: 280px !important;
    height: 48px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.filter-range-input {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: 180px !important;
    height: 100% !important;
    padding: 14px 12px !important;
    border: none !important;
    outline: none !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    caret-color: auto !important;
    vertical-align: middle !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

.filter-range-input::placeholder {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
}

.filter-range-input:focus {
    outline: none !important;
}

.filter-range-input-group:focus-within {
    border-color: #008F43 !important;
}

.filter-range-divider {
    width: 1px !important;
    height: 24px !important;
    background-color: #E0E0E0 !important;
    flex-shrink: 0 !important;
}

/* Строковое поле (обычный input) */
.land-filter-form .form-control,
.filter-modal-form .form-control {
    width: 100% !important;
    height: 48px !important;
    padding: 14px 16px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    margin-bottom: 0 !important;
}

/* Переопределяем margin-bottom для всех инпутов в модальном окне */
.filter-modal-form input[type=text],
.filter-modal-form input[type=password],
.filter-modal-form input[type=number],
.filter-modal-form input[type=email],
.filter-modal-form input[type=tel] {
    margin-bottom: 0 !important;
}

.land-filter-form .form-control:focus,
.filter-modal-form .form-control:focus {
    outline: none !important;
    border-color: #008F43 !important;
    box-shadow: none !important;
}

.land-filter-form .form-control::placeholder,
.filter-modal-form .form-control::placeholder {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.005em !important;
    color: #5C5653 !important;
}

/* Кнопки в модальном окне - переопределяем Bootstrap */
.land-filter .modal .modal-content .modal-footer,
.filterModal .modal .modal-content .modal-footer,
.land-filter .modal-footer,
.filterModal .modal-footer,
.land-filter .modal .modal-footer,
.filterModal .modal .modal-footer,
.modal .modal-footer.land-filter,
.modal-content .modal-footer.land-filter {
    border-top: 1px solid #E0E0E0 !important;
    padding: 16px 24px !important;
    display: flex !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #FFFFFF !important;
    gap: 12px !important;
}

/* Переопределяем margin для элементов внутри modal-footer */
.land-filter .modal-footer > *,
.filterModal .modal-footer > *,
.land-filter .modal .modal-footer > *,
.filterModal .modal .modal-footer > * {
    margin: 0 !important;
}

/* Переопределяем стили Bootstrap для кнопок в модальном окне */
.land-filter .modal-footer button,
.filterModal .modal-footer button,
.modal-footer button.filter-modal-apply,
.modal-footer button.filter-modal-reset {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.land-filter .modal-footer .filter-modal-reset,
.filterModal .modal-footer .filter-modal-reset,
.land-filter .modal-footer button.filter-modal-reset,
.filterModal .modal-footer button.filter-modal-reset,
.modal-footer button.filter-modal-reset,
button.filter-modal-reset {
    color: #0D6EFD !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.land-filter .modal-footer .filter-modal-reset:hover,
.filterModal .modal-footer .filter-modal-reset:hover,
.land-filter .modal-footer button.filter-modal-reset:hover,
.filterModal .modal-footer button.filter-modal-reset:hover,
.modal-footer button.filter-modal-reset:hover,
button.filter-modal-reset:hover,
.land-filter .modal-footer .filter-modal-reset:focus,
.filterModal .modal-footer .filter-modal-reset:focus,
.land-filter .modal-footer button.filter-modal-reset:focus,
.filterModal .modal-footer button.filter-modal-reset:focus,
.modal-footer button.filter-modal-reset:focus,
button.filter-modal-reset:focus,
.land-filter .modal-footer .filter-modal-reset:active,
.filterModal .modal-footer .filter-modal-reset:active,
.land-filter .modal-footer button.filter-modal-reset:active,
.filterModal .modal-footer button.filter-modal-reset:active,
.modal-footer button.filter-modal-reset:active,
button.filter-modal-reset:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    color: #0D6EFD !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.land-filter .modal-footer .filter-modal-apply,
.filterModal .modal-footer .filter-modal-apply,
.land-filter .modal-footer button.filter-modal-apply,
.filterModal .modal-footer button.filter-modal-apply,
.modal-footer button.filter-modal-apply,
button.filter-modal-apply {
    background-color: #008F43 !important;
    background: #008F43 !important;
    border: 1px solid #008F43 !important;
    border-color: #008F43 !important;
    color: #FFFFFF !important;
    padding: 6px 6px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.land-filter .modal-footer .filter-modal-apply:hover,
.filterModal .modal-footer .filter-modal-apply:hover,
.land-filter .modal-footer button.filter-modal-apply:hover,
.filterModal .modal-footer button.filter-modal-apply:hover,
.modal-footer button.filter-modal-apply:hover,
button.filter-modal-apply:hover,
.land-filter .modal-footer .filter-modal-apply:focus,
.filterModal .modal-footer .filter-modal-apply:focus,
.land-filter .modal-footer button.filter-modal-apply:focus,
.filterModal .modal-footer button.filter-modal-apply:focus,
.modal-footer button.filter-modal-apply:focus,
button.filter-modal-apply:focus,
.land-filter .modal-footer .filter-modal-apply:active,
.filterModal .modal-footer .filter-modal-apply:active,
.land-filter .modal-footer button.filter-modal-apply:active,
.filterModal .modal-footer button.filter-modal-apply:active,
.modal-footer button.filter-modal-apply:active,
button.filter-modal-apply:active {
    background-color: #006d32 !important;
    background: #006d32 !important;
    border-color: #006d32 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Мобильная версия */
@media (max-width: 767.98px) {
    .land-filter-form .top-filter-body-content-selects {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    
    .top-filter-body-content-selects-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .top-filter-body-content-selects-wrap:last-child {
        margin-right: 0 !important;
        flex: 0 0 100% !important;
    }
    
    .filter-input-wrapper {
        width: 100% !important;
    }
    
    .filter-button-wrapper {
        width: 100% !important;
    }
    
    /* Кнопка Фильтры - полная ширина в мобильной версии */
    .land-filter .filter-modal-btn,
    .land-filter-form .filter-modal-btn,
    .filter-modal-btn {
        width: 100% !important;
    }
    
    .top-filter-body-content-selects-button {
        margin-top: 0;
        width: 100%;
        padding-left: 0;
    }
    
    .top-filter-body-content-selects-button .btn {
        width: 100%;
    }
    
    .filter-dropdown {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        z-index: 1000 !important;
    }
    
    .land-filter .modal-dialog,
    .filterModal .modal-dialog,
    [id^="filterModal-"] .modal-dialog {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
        max-width: calc(100% - 1rem) !important;
        width: auto !important;
    }
    
    .land-filter .modal-content,
    .filterModal .modal-content {
        width: 100% !important;
        margin: auto !important;
    }
}