/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   Public Marketplace — Filter Component
   File:
   /home/jqkmqvml/public_html/assets/css/components/filters.css

   Purpose:
   - Public marketplace filters
   - Search/category/business/vendor/service/product listings
   - Live API/database-driven UI only
   - No fake/demo/sample data
   - No JavaScript
   - Accessible, responsive, RTL, print and forced-colors support

   Data authority:
   Backend/API/database is authoritative.
   This stylesheet contains presentation only.
   ========================================================================== */


/* ==========================================================================
   1. FILTER ROOT
   ========================================================================== */

.filter,
.filters,
.filter-panel,
[data-component="filter-panel"] {
    width: 100%;
    min-width: 0;
}

.filter-panel {
    position: relative;
    box-sizing: border-box;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1f2937);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
}

.filter-panel *,
.filter-panel *::before,
.filter-panel *::after {
    box-sizing: border-box;
}


/* ==========================================================================
   2. FILTER HEADER
   ========================================================================== */

.filter__header,
.filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.filter__title,
.filter-panel__title {
    margin: 0;
    min-width: 0;
    color: var(--color-heading, #111827);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.filter__subtitle,
.filter-panel__subtitle {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
    line-height: 1.5;
}


/* ==========================================================================
   3. FILTER BODY
   ========================================================================== */

.filter__body,
.filter-panel__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter__content,
.filter-panel__content {
    min-width: 0;
    padding: 1rem;
}


/* ==========================================================================
   4. FILTER GROUP
   ========================================================================== */

.filter__group,
.filter-panel__group {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.filter__group + .filter__group,
.filter-panel__group + .filter-panel__group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.filter__group-header,
.filter-panel__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.filter__group-title,
.filter-panel__group-title {
    margin: 0;
    color: var(--color-heading, #111827);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.filter__group-description,
.filter-panel__group-description {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
}


/* ==========================================================================
   5. FILTER LIST
   ========================================================================== */

.filter__list,
.filter-panel__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter__list--grid,
.filter-panel__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}


/* ==========================================================================
   6. CHECKBOX / RADIO FILTER
   ========================================================================== */

.filter__option,
.filter-panel__option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.filter__option:hover,
.filter-panel__option:hover {
    background: var(--color-surface-hover, #f9fafb);
    border-color: var(--color-border, #e5e7eb);
}

.filter__option:has(input:checked),
.filter-panel__option:has(input:checked) {
    background: var(--color-primary-soft, #eff6ff);
    border-color: var(--color-primary-border, #bfdbfe);
}

.filter__option input,
.filter-panel__option input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.125rem 0 0;
    accent-color: var(--color-primary, #2563eb);
}

.filter__option-label,
.filter-panel__option-label {
    min-width: 0;
    color: var(--color-text, #1f2937);
    font-size: 0.875rem;
    line-height: 1.45;
}

.filter__option-count,
.filter-panel__option-count {
    margin-inline-start: auto;
    flex: 0 0 auto;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.75rem;
    line-height: 1.4;
}


/* ==========================================================================
   7. SEARCHABLE FILTER
   ========================================================================== */

.filter__search,
.filter-panel__search {
    position: relative;
    width: 100%;
    margin-bottom: 0.75rem;
}

.filter__search-input,
.filter-panel__search-input {
    width: 100%;
    min-height: 2.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-input-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-input-bg, #ffffff);
    color: var(--color-text, #1f2937);
    font: inherit;
    line-height: 1.4;
    outline: none;
}

.filter__search-input::placeholder,
.filter-panel__search-input::placeholder {
    color: var(--color-text-placeholder, #9ca3af);
}

.filter__search-input:hover,
.filter-panel__search-input:hover {
    border-color: var(--color-border-hover, #9ca3af);
}

.filter__search-input:focus-visible,
.filter-panel__search-input:focus-visible {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}


/* ==========================================================================
   8. LOCATION FILTER
   ========================================================================== */

.filter__location,
.filter-panel__location {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filter__location-level,
.filter-panel__location-level {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.filter__location-item,
.filter-panel__location-item {
    min-width: 0;
}


/* ==========================================================================
   9. SELECT FILTER
   ========================================================================== */

.filter__select,
.filter-panel__select {
    width: 100%;
    min-height: 2.625rem;
    padding: 0.625rem 2.25rem 0.625rem 0.75rem;
    border: 1px solid var(--color-input-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-input-bg, #ffffff);
    color: var(--color-text, #1f2937);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
}

.filter__select:hover,
.filter-panel__select:hover {
    border-color: var(--color-border-hover, #9ca3af);
}

.filter__select:focus-visible,
.filter-panel__select:focus-visible {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}

.filter__select:disabled,
.filter-panel__select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* ==========================================================================
   10. RANGE FILTER
   ========================================================================== */

.filter__range,
.filter-panel__range {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter__range-values,
.filter-panel__range-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.filter__range-field,
.filter-panel__range-field {
    min-width: 0;
}

.filter__range-label,
.filter-panel__range-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.75rem;
    font-weight: 600;
}

.filter__range-input,
.filter-panel__range-input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-input-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-input-bg, #ffffff);
    color: var(--color-text, #1f2937);
    font: inherit;
    outline: none;
}

.filter__range-input:focus-visible,
.filter-panel__range-input:focus-visible {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(37, 99, 235, 0.16));
}

.filter__range-slider,
.filter-panel__range-slider {
    width: 100%;
    margin: 0;
    accent-color: var(--color-primary, #2563eb);
}


/* ==========================================================================
   11. PRICE FILTER
   ========================================================================== */

.filter__price,
.filter-panel__price {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter__price-fields,
.filter-panel__price-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 0.5rem;
}

.filter__price-separator,
.filter-panel__price-separator {
    padding-bottom: 0.65rem;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
}


/* ==========================================================================
   12. CATEGORY TREE
   ========================================================================== */

.filter__category-tree,
.filter-panel__category-tree {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter__category-item,
.filter-panel__category-item {
    min-width: 0;
}

.filter__category-row,
.filter-panel__category-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.filter__category-expand,
.filter-panel__category-expand {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
}

.filter__category-expand:hover,
.filter-panel__category-expand:hover {
    background: var(--color-surface-hover, #f3f4f6);
}

.filter__category-children,
.filter-panel__category-children {
    margin-inline-start: 1.25rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--color-border, #e5e7eb);
}


/* ==========================================================================
   13. VERIFICATION FILTER
   ========================================================================== */

.filter__verification,
.filter-panel__verification {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter__verification-option,
.filter-panel__verification-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}


/* ==========================================================================
   14. AVAILABILITY FILTER
   ========================================================================== */

.filter__availability,
.filter-panel__availability {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter__availability-option,
.filter-panel__availability-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}


/* ==========================================================================
   15. RATING FILTER
   ========================================================================== */

.filter__rating,
.filter-panel__rating {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.filter__rating-option,
.filter-panel__rating-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

.filter__rating-stars,
.filter-panel__rating-stars {
    display: inline-flex;
    gap: 0.125rem;
    color: var(--color-rating, #f59e0b);
    white-space: nowrap;
}

.filter__rating-label,
.filter-panel__rating-label {
    color: var(--color-text, #1f2937);
    font-size: 0.8125rem;
}


/* ==========================================================================
   16. ACTIVE FILTERS
   ========================================================================== */

.filter__active,
.filter-panel__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.filter__active-title,
.filter-panel__active-title {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    font-weight: 600;
}

.filter__chip,
.filter-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-primary-border, #bfdbfe);
    border-radius: 999px;
    background: var(--color-primary-soft, #eff6ff);
    color: var(--color-primary-text, #1d4ed8);
    font-size: 0.75rem;
    line-height: 1.3;
}

.filter__chip-label,
.filter-panel__chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter__chip-remove,
.filter-panel__chip-remove {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.filter__chip-remove:hover,
.filter-panel__chip-remove:hover {
    background: rgba(37, 99, 235, 0.1);
}


/* ==========================================================================
   17. CLEAR / RESET
   ========================================================================== */

.filter__clear,
.filter-panel__clear,
.filter__reset,
.filter-panel__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #374151);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.filter__clear:hover,
.filter-panel__clear:hover,
.filter__reset:hover,
.filter-panel__reset:hover {
    background: var(--color-surface-hover, #f9fafb);
    border-color: var(--color-border-hover, #9ca3af);
}


/* ==========================================================================
   18. FILTER ACTIONS
   ========================================================================== */

.filter__actions,
.filter-panel__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface-subtle, #f9fafb);
}

.filter__apply,
.filter-panel__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.625rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-primary, #2563eb);
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary, #2563eb);
    color: var(--color-on-primary, #ffffff);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.filter__apply:hover,
.filter-panel__apply:hover {
    background: var(--color-primary-hover, #1d4ed8);
    border-color: var(--color-primary-hover, #1d4ed8);
}

.filter__apply:focus-visible,
.filter-panel__apply:focus-visible,
.filter__clear:focus-visible,
.filter-panel__clear:focus-visible,
.filter__reset:focus-visible,
.filter-panel__reset:focus-visible,
.filter__chip-remove:focus-visible,
.filter-panel__chip-remove:focus-visible,
.filter__category-expand:focus-visible,
.filter-panel__category-expand:focus-visible {
    outline: 3px solid var(--color-focus-ring, rgba(37, 99, 235, 0.3));
    outline-offset: 2px;
}


/* ==========================================================================
   19. MOBILE FILTER TRIGGER
   ========================================================================== */

.filter-trigger,
[data-filter-trigger] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1f2937);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.filter-trigger:hover,
[data-filter-trigger]:hover {
    background: var(--color-surface-hover, #f9fafb);
}


/* ==========================================================================
   20. FILTER DRAWER / OVERLAY
   ========================================================================== */

.filter-drawer,
.filter-panel--drawer {
    width: min(100%, 24rem);
    max-width: 100%;
}

.filter-overlay,
[data-filter-overlay] {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: var(--color-overlay, rgba(15, 23, 42, 0.5));
}

.filter-panel--drawer {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.filter-panel--drawer .filter-panel__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   21. INLINE FILTER BAR
   ========================================================================== */

.filter-bar,
.filters-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    width: 100%;
    min-width: 0;
}

.filter-bar__item,
.filters-bar__item {
    min-width: 0;
}

.filter-bar__item--grow,
.filters-bar__item--grow {
    flex: 1 1 12rem;
}


/* ==========================================================================
   22. RESULTS + FILTER LAYOUT
   ========================================================================== */

.results-layout,
.search-results-layout,
.marketplace-results-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

.results-layout__filters,
.search-results-layout__filters,
.marketplace-results-layout__filters {
    min-width: 0;
}

.results-layout__content,
.search-results-layout__content,
.marketplace-results-layout__content {
    min-width: 0;
}


/* ==========================================================================
   23. FILTER SORT / RESULT CONTROLS
   ========================================================================== */

.results-controls,
.search-results-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.results-controls__left,
.results-controls__right,
.search-results-controls__left,
.search-results-controls__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    min-width: 0;
}

.results-count,
.search-results-count {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
}


/* ==========================================================================
   24. LOADING STATE
   ========================================================================== */

.filter-panel[aria-busy="true"],
.filter[aria-busy="true"] {
    pointer-events: none;
}

.filter-panel[aria-busy="true"] .filter-panel__body,
.filter[aria-busy="true"] .filter__body {
    opacity: 0.65;
}

.filter__loading,
.filter-panel__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 1rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
}


/* ==========================================================================
   25. EMPTY STATE
   ========================================================================== */

.filter__empty,
.filter-panel__empty {
    padding: 1rem 0.5rem;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================================
   26. ERROR STATE
   ========================================================================== */

.filter__error,
.filter-panel__error {
    padding: 0.75rem;
    border: 1px solid var(--color-danger-border, #fecaca);
    border-radius: var(--radius-md, 8px);
    background: var(--color-danger-soft, #fef2f2);
    color: var(--color-danger-text, #b91c1c);
    font-size: 0.8125rem;
    line-height: 1.5;
}


/* ==========================================================================
   27. DISABLED STATES
   ========================================================================== */

.filter__option[aria-disabled="true"],
.filter-panel__option[aria-disabled="true"],
.filter__field[aria-disabled="true"],
.filter-panel__field[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.filter-panel button:disabled,
.filter-panel input:disabled,
.filter-panel select:disabled,
.filter-panel textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* ==========================================================================
   28. VISUALLY HIDDEN ACCESSIBILITY UTILITY
   ========================================================================== */

.filter__visually-hidden,
.filter-panel__visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==========================================================================
   29. RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .filter__price-fields,
[dir="rtl"] .filter-panel__price-fields {
    direction: rtl;
}

[dir="rtl"] .filter__category-children,
[dir="rtl"] .filter-panel__category-children {
    margin-inline-start: 0;
    margin-inline-end: 1.25rem;
    padding-inline-start: 0;
    padding-inline-end: 0.75rem;
    border-inline-start: 0;
    border-inline-end: 1px solid var(--color-border, #e5e7eb);
}


/* ==========================================================================
   30. RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 1024px) {
    .results-layout,
    .search-results-layout,
    .marketplace-results-layout {
        grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
        gap: 1rem;
    }

    .filter__content,
    .filter-panel__content {
        padding: 0.875rem;
    }
}


/* ==========================================================================
   31. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 767px) {
    .filter-trigger,
    [data-filter-trigger] {
        display: inline-flex;
    }

    .results-layout,
    .search-results-layout,
    .marketplace-results-layout {
        display: block;
    }

    .results-layout__filters,
    .search-results-layout__filters,
    .marketplace-results-layout__filters {
        display: none;
    }

    .filter-panel--mobile-visible,
    .filter-panel[data-mobile-visible="true"] {
        display: flex;
        position: fixed;
        z-index: 1001;
        inset: 0 auto 0 0;
        width: min(92vw, 24rem);
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: var(
            --shadow-xl,
            0 20px 50px rgba(15, 23, 42, 0.2)
        );
    }

    .filter-overlay[data-visible="true"],
    .filter-overlay.is-visible {
        display: block;
    }

    .filter__list--grid,
    .filter-panel__list--grid {
        grid-template-columns: 1fr;
    }

    .filter__location-level,
    .filter-panel__location-level {
        grid-template-columns: 1fr;
    }

    .filter__price-fields,
    .filter-panel__price-fields {
        grid-template-columns: 1fr;
    }

    .filter__price-separator,
    .filter-panel__price-separator {
        display: none;
    }

    .filter__actions,
    .filter-panel__actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    .results-controls,
    .search-results-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .results-controls__left,
    .results-controls__right,
    .search-results-controls__left,
    .search-results-controls__right {
        width: 100%;
    }
}


/* ==========================================================================
   32. SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
    .filter-panel--mobile-visible,
    .filter-panel[data-mobile-visible="true"] {
        width: 100%;
    }

    .filter__header,
    .filter-panel__header,
    .filter__content,
    .filter-panel__content,
    .filter__actions,
    .filter-panel__actions {
        padding-inline: 0.875rem;
    }

    .filter__active,
    .filter-panel__active {
        align-items: flex-start;
        flex-direction: column;
    }

    .filter__chip,
    .filter-panel__chip {
        max-width: 100%;
    }
}


/* ==========================================================================
   33. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .filter__option,
    .filter-panel__option {
        transition: none;
    }
}


/* ==========================================================================
   34. FORCED COLORS / HIGH CONTRAST
   ========================================================================== */

@media (forced-colors: active) {
    .filter-panel,
    .filter__option,
    .filter-panel__option,
    .filter__select,
    .filter-panel__select,
    .filter__search-input,
    .filter-panel__search-input,
    .filter__range-input,
    .filter-panel__range-input,
    .filter__clear,
    .filter-panel__clear,
    .filter__reset,
    .filter-panel__reset {
        border-color: CanvasText;
    }

    .filter__apply,
    .filter-panel__apply {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .filter__option:has(input:checked),
    .filter-panel__option:has(input:checked) {
        outline: 2px solid Highlight;
    }
}


/* ==========================================================================
   35. PRINT
   ========================================================================== */

@media print {
    .filter-panel,
    .filter,
    .filter-trigger,
    [data-filter-trigger],
    .filter-overlay,
    [data-filter-overlay] {
        box-shadow: none !important;
    }

    .filter-trigger,
    [data-filter-trigger],
    .filter__actions,
    .filter-panel__actions,
    .filter-overlay,
    [data-filter-overlay] {
        display: none !important;
    }

    .filter-panel {
        border: 1px solid #000;
        background: #fff;
        color: #000;
    }
}


/* ==========================================================================
   36. DARK THEME COMPATIBILITY
   ========================================================================== */

[data-theme="dark"] .filter-panel,
.dark .filter-panel {
    background: var(--color-surface, #111827);
    color: var(--color-text, #f3f4f6);
}

[data-theme="dark"] .filter__option:hover,
[data-theme="dark"] .filter-panel__option:hover,
.dark .filter__option:hover,
.dark .filter-panel__option:hover {
    background: var(--color-surface-hover, #1f2937);
}

[data-theme="dark"] .filter__select,
[data-theme="dark"] .filter-panel__select,
[data-theme="dark"] .filter__search-input,
[data-theme="dark"] .filter-panel__search-input,
[data-theme="dark"] .filter__range-input,
[data-theme="dark"] .filter-panel__range-input,
.dark .filter__select,
.dark .filter-panel__select,
.dark .filter__search-input,
.dark .filter-panel__search-input,
.dark .filter__range-input,
.dark .filter-panel__range-input {
    background: var(--color-input-bg, #111827);
    color: var(--color-text, #f3f4f6);
}