/* ALM checkbox dropdowns — Figma 120:2793 and 18:3677.
   The menu's scroll limit shows roughly four and a half options, as in Figma. */
.filter_dropdowns {
    --filter_space: 1rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--filter_space) * 2.5);
}

.filter_dropdown {
    position: relative;
}

/* Per-dropdown actions replace ALM's global reset row in this interface. */
.filter_dropdowns.filter_checkbox_only > :is(.alm-filters--controls, .alm-filters--loading) {
    display: none;
}

.filter_dropdowns .filter_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--filter_space);
    padding: calc(var(--filter_space) * 1.6) calc(var(--filter_space) * 2.5);
    border: 0.1rem solid var(--stone);
    background: transparent;
    color: var(--espresso);
    cursor: pointer;
}

.filter_dropdowns .filter_label {
    /* The toggle sits inside ALM's H3; use body typography instead of the heading font. */
    font-family: var(--body-font);
    font-weight: 400;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.filter_dropdowns .filter_toggle::after {
    content: "\f078";
    font: 400 1.2rem/1 'Font Awesome 6 Pro';
}

.filter_dropdowns .filter_open .filter_toggle::after {
    content: "\f077";
}

.filter_dropdowns .filter_dropdown .alm-filter--inner {
    position: absolute;
    inset-block-start: calc(100% + var(--filter_space));
    inset-inline-start: 0;
    /* Intrinsic width fits the options/actions; cap only to prevent viewport overflow. */
    inline-size: max-content;
    max-inline-size: calc(100vw - var(--bs-gutter-x));
    border: 0.1rem solid var(--stone);
    background: var(--wit, #fff);
    color: var(--espresso);
    z-index: 10; /* Overlay adjacent result cards, below the site's fixed navigation. */
}

.filter_dropdowns .filter_align_end .alm-filter--inner {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

#content .filter_dropdowns .filter_dropdown .alm-filter--inner > ul {
    display: flex;
    flex-direction: column;
    gap: var(--filter_space);
    margin: 0;
    padding: var(--filter_space) calc(var(--filter_space) * 1.5);
    list-style: none;
}

.filter_dropdowns .filter_extended .alm-filter--inner > ul {
    /* 4.5 body-text rows plus their gaps and the list padding; avoids a fixed height. */
    max-block-size: calc(4.5 * var(--body-font-size) * var(--body-line-height) + 5 * var(--filter_space));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--stone) transparent;
}

#content .filter_dropdowns .filter_dropdown .alm-filter--inner li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter_dropdowns .alm-filter--link[data-type="checkbox"] {
    display: flex;
    align-items: baseline;
    gap: var(--filter_space);
    cursor: pointer;
}

.filter_dropdowns .alm-filter--link[data-type="checkbox"]::before {
    content: "\f0c8";
    font-family: 'Font Awesome 6 Pro';
    line-height: 1;
}

.filter_dropdowns .alm-filter--link[aria-checked="true"]::before {
    content: "\f14a";
}

.filter_dropdowns .alm-filter--link[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.filter_dropdowns .filter_search {
    display: block;
    inline-size: 100%;
    padding: calc(var(--filter_space) * 1.3) var(--filter_space);
    border: 0;
    border-bottom: 0.1rem solid var(--stone);
    border-radius: 0;
    background: transparent;
    color: var(--espresso);
    text-transform: uppercase;
}

.filter_dropdowns .filter_search::placeholder {
    color: var(--espresso);
    opacity: 0.4;
}

.filter_dropdowns .filter_actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--filter_space) * 2);
    padding: var(--filter_space);
}

.filter_dropdowns .filter_clear {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--espresso);
    cursor: pointer;
}

.filter_dropdowns .filter_apply.button {
    padding: var(--filter_space) calc(var(--filter_space) * 2) !important;
}

.filter_dropdowns .filter_empty {
    padding: var(--filter_space) calc(var(--filter_space) * 1.5);
}

.filter_dropdowns [hidden] {
    display: none !important;
}

.filter_dropdowns :is(.filter_toggle, .filter_clear, .filter_apply, .alm-filter--link):focus-visible {
    outline: 0.1rem solid var(--espresso);
    outline-offset: calc(var(--filter_space) / 3);
}

/* Figma 120:2816: 30px row gap, 10px tag gap/padding, 20px side padding. */
.filter_selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
}

.filter_selected[hidden] {
    display: none;
}

#content .filter_selected_list {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.filter_selected_list > li {
    padding: 0;
    margin: 0;
}

.filter_selected_list .filter_selected_tag {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: var(--licht-taupe);
    border: 0;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.filter_selected_group,
.filter_selected_value {
    grid-column: 1;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.filter_selected_group {
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--taupe);
}

.filter_selected_list .filter_selected_tag::after {
    content: "\f00d";
    grid-column: 2;
    grid-row: 1 / span 2;
    font-family: 'Font Awesome 6 Pro';
    line-height: 1;
}

.filter_selected_clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.filter_selected > span,
.filter_selected_clear {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.filter_selected :is(.filter_selected_tag, button):focus-visible {
    outline: 0.1rem solid var(--espresso);
    outline-offset: 0.3rem;
}

@media (max-width:767px) {
    .filter_dropdowns {
        gap: var(--filter_space);
    }

    .filter_dropdowns .filter_dropdown {
        position: static;
        flex: 1 1 calc((100% - var(--filter_space)) / 2);
        min-inline-size: 0; /* Allow long labels to wrap inside equal-width columns. */
    }

    .filter_dropdowns .filter_toggle {
        inline-size: 100%;
        justify-content: space-between;
        padding-inline: calc(var(--filter_space) * 1.5);
        text-align: start;
    }

    .filter_dropdowns .filter_dropdown .alm-filter--inner,
    .filter_dropdowns .filter_align_end .alm-filter--inner {
        inset-inline: 0;
        inline-size: auto;
    }

    #content .filter_dropdowns .filter_dropdown .alm-filter--inner > ul {
        gap: 0;
    }

    .filter_dropdowns .alm-filter--link[data-type="checkbox"] {
        padding-block: var(--filter_space);
    }

    .filter_dropdowns .filter_search {
        font-size: var(--body-font-size); /* Avoid iOS zooming when the search field receives focus. */
    }

    .filter_dropdowns .filter_actions {
        flex-wrap: wrap;
        gap: var(--filter_space);
    }

    .filter_dropdowns .filter_actions > button {
        flex: 1 1 auto;
        padding-block: calc(var(--filter_space) * 1.5) !important;
    }

    .filter_selected {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        text-align: start;
    }

    .filter_selected_clear {
        justify-self: end;
        padding-block: 1.5rem; /* Matches dropdown action touch padding. */
    }

    #content .filter_selected_list {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .filter_selected_list .filter_selected_tag {
        inline-size: 100%;
        block-size: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        padding-inline: 1.5rem; /* Matches mobile filter toggle padding. */
        text-align: start;
    }
}