/* ==========================================================================
   Active filter chips for the classic property search form.

   Sits above the form so the filters set from the keyword autosuggest, which
   live inside the collapsed Advanced Options panel, are always visible.
   ========================================================================== */

#activeFilterChips {
    margin-bottom: 0.75rem;
}

#activeFilterChips[hidden] {
    display: none;
}

.filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background: #eef4ff;
    border: 1px solid #c7dbff;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.2;
    overflow: hidden;
}

/* A filter whose control is tucked inside Advanced Options. */
.filter-chip-advanced {
    background: #fff7e6;
    border-color: #ffe0a3;
}

.filter-chip-label {
    max-width: 14rem;
    padding: 0.3rem 0.25rem 0.3rem 0.65rem;
    border: 0;
    background: none;
    color: #1d3c73;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.filter-chip-advanced .filter-chip-label {
    color: #7a4b00;
}

.filter-chip-label:hover,
.filter-chip-label:focus-visible {
    text-decoration: underline;
}

.filter-chip-remove {
    padding: 0.3rem 0.6rem 0.3rem 0.35rem;
    border: 0;
    background: none;
    color: #5a6b8c;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.filter-chip-remove:hover,
.filter-chip-remove:focus-visible {
    color: #c62828;
}

/* Count of active filters hidden inside the collapsed panel. */
b.advanced-options-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #ffc107;
    color: #3d2c00;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Chips wrap rather than scroll sideways at every width. A sideways strip
   would push chips off screen, which is the problem these exist to solve. Long
   values truncate instead, and the full text stays in the title attribute. */
@media (max-width: 575.98px) {
    .filter-chip {
        font-size: 0.75rem;
    }

    .filter-chip-label {
        max-width: 10rem;
    }
}