.location-filter {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 4px 24px;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    color: #1a2742;
}

.location-filter__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.location-filter__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.location-filter__description {
    margin: 0;
    font-size: 13px;
    color: #5c6a85;
}

.location-filter__body {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.location-filter__pane {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 240px;
}

.location-filter__pane--selected {
    background: #f1f4fb;
    border: 1px solid #d6ddeb;
    border-radius: 12px;
    padding: 18px;
}

.location-filter__columns {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

.location-filter__group {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid #d6ddeb;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-filter__legend {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    border: 0;
}

.location-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.location-filter__option--parent span {
    font-weight: 600;
    font-size: 14px;
}

.location-filter__children {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.location-filter__children--nested {
    margin-left: 22px;
    padding-left: 14px;
}

.location-filter__children .location-filter__option span {
    font-weight: 500;
}

.location-filter__option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #78b93e;
    cursor: pointer;
}

.location-filter__empty {
    margin: 0;
    font-size: 13px;
    color: #6a7895;
}

.location-filter__selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.location-filter__selected-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a2742;
}

.location-filter__selected-reset {
    border: none;
    background: none;
    color: #4662a9;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.location-filter__selected-reset:hover {
    color: #2f4d96;
    text-decoration: underline;
}

.location-filter__selected {
    flex: 1 1 auto;
    min-height: 120px;
}

.location-filter__selected-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-filter__selected-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #d6ddeb;
    border-radius: 10px;
    padding: 10px 12px;
}

.location-filter__selected-remove {
    border: none;
    background: transparent;
    color: #7382a2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.location-filter__selected-remove:hover {
    color: #d04747;
}

.location-filter__selected-empty {
    margin: 0;
    font-size: 13px;
    color: #6a7895;
}

.location-filter__footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.location-filter__button {
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.location-filter__button--apply {
    background: linear-gradient(135deg, #78b93e 0%, #5d8f2f 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(120, 185, 62, 0.25);
}

.location-filter__button--apply:hover {
    box-shadow: 0 12px 24px rgba(120, 185, 62, 0.35);
}

.location-filter__button--reset {
    background: #eef3fc;
    color: #1a2742;
}

.location-filter__button--reset:hover {
    background: #dee7fb;
}

@media (max-width: 820px) {
    .location-filter__body {
        flex-direction: column;
    }

    .location-filter__pane--selected {
        order: -1;
    }
}

@media (max-width: 540px) {
    .location-filter__pane {
        min-width: 100%;
    }
}


.list-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin: 20px 0 10px;
}

.list-filter__field {
    position: relative;
    flex: 1 1 140px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-family: 'Circe';
}

.list-filter__field--dropdown {
    min-width: 180px;
}

.list-filter__control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d7dce6;
    border-radius: 10px;
    background: #f6f9f2;
    color: #131c35;
    font-size: 12px;
    line-height: 1.3;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.list-filter__control:focus {
    border-color: #f3f4f6;
    box-shadow: 0 0 0 3px rgba(120, 185, 62, 0.2);
    outline: none;
    background: #ffffff;
}

.list-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    border: 1px solid #d7dce6;
    color: #131c35;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    background: #fff url('/media_new/img/select.svg') no-repeat right 10px top 50%;
}

.list-filter__open-modal {
    background: #f3f4f6;
    color: white;
    line-height: 19px;
    font-weight: 600;
}

.list-filter__hidden-inputs {
    display: none;
}

.list-filter__field--dropdown.is-open .list-filter__toggle {
    background: #fff url('/media_new/img/select2.svg') no-repeat right 10px top 50%;
}

.list-filter__toggle-text {
    font-weight: 600;
    font-size: 14px;
    color: black;
}

.list-filter__toggle-value {
    flex: 1 1 auto;
    text-align: right;
    color: #4f5b75;
    font-size: 12px;
    margin-right: 15px;
}

.list-filter__toggle-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1.41 0l4.59 4.58L10.59 0 12 1.41l-6 6-6-6z" fill="%23f3f4f6"/></svg>') center/contain no-repeat;
}

.list-filter__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
    margin-top: 8px;
    padding: 14px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 35, 95, 0.14);
}

.list-filter__field--dropdown.is-open .list-filter__dropdown {
    display: block;
}

.list-filter__dropdown-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.list-filter__dropdown-row:last-of-type {
    margin-bottom: 0;
}

.list-filter__dropdown-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64708c;
}

.list-filter__dropdown-input {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d7dce6;
    background: white;
    color: #131c35;
    font-size: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.list-filter__dropdown-input:focus {
    box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.2);
    outline: none;
    background: #ffffff;
}

.list-filter__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 220px;
    overflow-y: auto;
}

.list-filter__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.list-filter__option:hover {
    background: #eef6e8;
}

.list-filter__option input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.list-filter__option span {
    font-size: 12px;
    color: #102039;
}

.list-filter__dropdown-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.list-filter__dropdown-button {
    padding: 8px 14px;
    background: #78B93E;
    color: white;
    font-family: 'CRC55';
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    border: none;
}

.list-filter__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 180px;
}

.list-filter__action-button {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #d7dce6;
    background: #f6f9f2;
    color: #21311f;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.list-filter__action-button:hover {
    border-color: #f3f4f6;
    background: #eef6e8;
}

.list-filter__action-button--ghost {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-filter__action-button--apply {
    border-color: #f3f4f6;
    background: linear-gradient(135deg, #f3f4f6 0%, #5D8F2F 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(120, 185, 62, 0.25);
}

.list-filter__action-button--apply:hover {
    box-shadow: 0 16px 28px rgba(120, 185, 62, 0.32);
}

@media (max-width: 1024px) {
    .list-filter__field {
        flex: 1 1 calc(50% - 12px);
    }

    .list-filter__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .list-filter {
        padding: 16px;
    }

    .list-filter__field {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .list-filter__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .list-filter__action-button {
        width: 100%;
        text-align: center;
    }
}

.list-filter__modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 220;
    padding: 20px;
}

.list-filter__modal.is-visible {
    display: flex;
}

.list-filter__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 24, 44, 0.55);
}

.list-filter__modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 35, 95, 0.25);
    padding: 24px 28px;
}

.list-filter__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #1a2842;
    cursor: pointer;
}

.list-filter__modal-close:hover {
    color: #f3f4f6;
}

.list-filter__modal-content {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

body.has-location-modal {
    overflow: hidden;
}

@media (max-width: 768px) {
    .list-filter__modal-dialog {
        padding: 20px;
        border-radius: 12px;
    }
}