/* =========================
   Панель фильтров
   ========================= */
.filters-bar {
    margin: 32px 0 24px;
}

.filters-panel {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

/* =========================
   Группа полей (поиск, категория, сортировка)
   ========================= */
.filters__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================
   Группа кнопок (Сбросить, Очистить)
   Всегда идут вместе — переносятся целиком
   ========================= */
.filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* =========================
   Поле с иконкой
   ========================= */
.field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-input);
    border-radius: var(--r-sm);
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}

.field:hover {
    border-color: #94a3b8;
}

.field:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--c-text-faint);
    pointer-events: none;
    user-select: none;
}

.field__input,
.field__select {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 9px 12px 9px 0;
    font-size: 14px;
    color: var(--c-text);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.field__input {
    cursor: text;
}

.field__input::placeholder {
    color: #94a3b8;
}

/* Кастомная стрелка для select */
.field--select::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--c-text-faint);
    border-bottom: 2px solid var(--c-text-faint);
    transform: rotate(45deg) translateY(-2px);
    margin-right: 12px;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform .15s;
}

.field--select:focus-within::after {
    border-color: var(--c-primary);
}

/* Ширины полей — уменьшены, чтобы помещалось больше */
.field--search {
    width: 280px;
    flex-shrink: 1;
    min-width: 180px;
}

.field--category {
    width: 240px;
    flex-shrink: 1;
    min-width: 160px;
}

.field--sort {
    width: 190px;
    flex-shrink: 1;
    min-width: 140px;
}

/* =========================
   Кнопки
   ========================= */
.filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-danger);
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.15);
    border-radius: var(--r-sm);
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    cursor: pointer;
}

.filter-reset:hover {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.3);
    color: var(--c-danger-hover);
    text-decoration: none;
}

.link-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text-body);
    background: var(--c-border-light);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    cursor: pointer;
}

.link-danger:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: var(--c-danger-hover);
}

.filter-submit {
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    border-radius: var(--r-sm);
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
    cursor: pointer;
}

.filter-submit:hover { background: var(--c-primary-hover); }

/* =========================
   Статус фильтра
   ========================= */
.filter-status {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--c-text-body);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-status strong {
    color: var(--c-text-heading);
    font-size: 15px;
}

.filter-status::before {
    content: "🔎";
    font-size: 14px;
}

.filter-status.hidden {
    display: none;
}

/* =========================
   Облако направлений
   ========================= */
.directions-cloud { margin-bottom: 24px; }

.direction-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.direction-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    color: var(--c-dark-2);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    transition: border-color .15s, color .15s, background .15s;
}

.direction-chip:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-light);
    text-decoration: none;
}

.direction-chip__count {
    background: var(--c-border-light);
    border-radius: var(--r-pill);
    padding: 0 6px;
    font-size: 11px;
    color: var(--c-text-faint);
}

.direction-chip:hover .direction-chip__count {
    background: rgba(37,99,235,.1);
    color: var(--c-primary);
}

/* =========================
   Результаты
   ========================= */
.offers-results { transition: opacity .15s; }

.offers-results--loading {
    opacity: 0.45;
    pointer-events: none;
}

.offers-empty {
    text-align: center;
    padding: 40px 0;
    font-size: 15px;
    color: var(--c-text-faint);
}

/* =========================
   Адаптив
   ========================= */
@media (max-width: 1100px) {
    /* Поля переносятся, кнопки держатся в отдельной строке справа */
    .filters {
        justify-content: flex-start;
    }

    .filters__actions {
        margin-left: auto;
    }
}

@media (max-width: 900px) {
    .filters__fields {
        width: 100%;
    }

    .field--search {
        width: 100%;
    }

    .field--category,
    .field--sort {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
        width: auto;
    }

    .filters__actions {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .filters-panel { padding: 12px; }

    .filters {
        gap: 10px;
    }

    .field--search,
    .field--category,
    .field--sort {
        width: 100%;
        flex: none;
    }

    .filters__actions {
        width: 100%;
        gap: 8px;
    }

    .filter-reset,
    .link-danger,
    .filter-submit {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .filter-status { font-size: 13px; }
}