/*
   Filter bars on the Questions, Tags, Tagged and Users list pages.
   Shared by _FilterQuestionsForm, _FilterTagged, _FilterTags and _FilterUsersForm.
   Logical properties (inline-start/end) are used throughout so the RTL theme
   variant keeps working.
*/

.rh-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* The sort pills scroll sideways on a narrow screen instead of wrapping into
   a tall stack that pushes the toggle button off the first fold. */
.rh-filter-pills {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rh-filter-pills::-webkit-scrollbar {
    display: none;
}

.rh-filter-pills .nav {
    flex-wrap: nowrap;
}

.rh-filter-pills .nav-link {
    white-space: nowrap;
}

.rh-filter-toggle {
    flex: 0 0 auto;
}

.rh-filter-heading {
    margin-bottom: 0.5rem;
}

/* Auto-fits one column on a phone and two on anything wider, without having to
   guess a breakpoint per group — the groups hold different numbers of options. */
.rh-filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    column-gap: 1rem;
}

@media (max-width: 767.98px) {
    /* Toggle drops onto its own full-width line under the pills. */
    .rh-filter-bar {
        flex-wrap: wrap;
    }

    .rh-filter-toggle,
    .rh-filter-go {
        width: 100%;
    }

    /* 16px keeps iOS Safari from zooming the page in on focus. */
    .rh-filter-search {
        font-size: 16px;
    }

    /* Roomier tap targets for the radios and switches. Bootstrap places the
       input with float + a negative inline margin, which a flex row ignores —
       so both are reset and the gap does the spacing instead. */
    .rh-filter-options .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.5rem;
        margin-bottom: 0;
        padding-inline-start: 0;
    }

    .rh-filter-options .form-check .form-check-input {
        float: none;
        flex: 0 0 auto;
        margin-inline-start: 0;
        margin-top: 0;
    }

    .rh-filter-options .form-check-label {
        cursor: pointer;
        padding-block: 0.25rem;
        flex: 1;
    }
}