:root{ --filters-width: 380px; --filters-bg: #fff; --overlay-bg: rgba(0,0,0,.5); --shadow: -2px 0 24px rgba(0,0,0,.18); } /* Lock scroll when open */ body.no-scroll { overflow: hidden; } /* The panel itself (works if class is on .fl-module wrapper OR inner) */ .fl-module.archive-filters, .archive-filters { position: fixed !important; /* ensure fixed after we move it to */ top: 0; right: 0; /* slide from right */ height: 100dvh; width: var(--filters-width); max-width: 100vw; background: var(--filters-bg); box-shadow: var(--shadow); transform: translateX(100%); /* hidden */ visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s; z-index: 999999; /* higher than headers/offcanvas */ overflow: auto; -webkit-overflow-scrolling: touch; outline: 0; /* remove default focus outline */ } /* TEMP: debug border to confirm the panel actually exists — remove when verified */ .fl-module.archive-filters::before, .archive-filters::before{ content:""; position:absolute; inset:0; outline:2px dashed rgba(0,128,255,.35); pointer-events:none; } /* Open state */ .fl-module.archive-filters.is-open, .archive-filters.is-open { transform: translateX(0); visibility: visible; transition: transform .35s ease; } /* Mobile full width */ @media (max-width: 768px){ .fl-module.archive-filters, .archive-filters{ width: 100vw; } } /* Inner padding (works for widget/module markup) */ .fl-module.archive-filters .fl-module-content, .archive-filters .fl-module-content, .archive-filters .widget, .archive-filters .btf-widget, .archive-filters .widget-area{ padding: 16px; } /* Overlay (created by JS) */ .filters-overlay{ position: fixed; inset: 0; background: var(--overlay-bg); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; z-index: 999998; } .filters-overlay.is-active{ opacity: 1; visibility: visible; } /* Close button (injected if missing) */ .filters-close-btn{ position: absolute; top: 10px; right: 12px; appearance: none; border: 0; background: transparent; width: 36px; height: 36px; font-size: 18px; color: #666; line-height: 1; border-radius: 8px; cursor: pointer; } .filters-close-btn:hover{ background: rgba(0,0,0,.06); } /* Force close button to stay pinned in the top-right, regardless of theme styles */ .filters-close-btn, .filters-close-btn:focus, .filters-close-btn:active { position: absolute !important; top: 10px !important; right: 12px !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; z-index: 2 !important; box-shadow: none !important; } .filters-close-btn span, .filters-close-btn i, .filters-close-btn svg { pointer-events: none; } .filters-close-btn:hover { color: #666 !important; background: rgba(0,0,0,.06) !important; } /* Trigger styling (optional) */ .filters-toggle-btn { display: block; padding: .6rem 1rem; margin: 0 0 0 auto; border-radius: 3px; font-size: 12px; background: rgb(179, 179, 179); color: #fff; text-decoration: none; border: 0; cursor: pointer; } .filters-toggle-btn:hover { border: none; background: rgb(145, 145, 145); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .fl-module.archive-filters, .archive-filters, .filters-overlay{ transition: none !important; } } /* Lift common JS-enhanced dropdowns ABOVE the panel/overlay when filters are open */ body.filters-open .select2-container, body.filters-open .select2-container--open, body.filters-open .select2-container .select2-dropdown { z-index: 100010 !important; } body.filters-open .choices, body.filters-open .choices__list--dropdown, body.filters-open .choices__list--dropdown.is-active { z-index: 100010 !important; } body.filters-open .nice-select, body.filters-open .nice-select .list, body.filters-open .nice-select.open .list { z-index: 100010 !important; } body.filters-open .ui-datepicker, body.filters-open .flatpickr-calendar, body.filters-open .pikaday { z-index: 100010 !important; } /* Defensive: any dropdown popper-like menus commonly used */ body.filters-open .tippy-box, body.filters-open .dropdown-menu, body.filters-open .autocomplete-suggestions, body.filters-open .autocomplete-results { z-index: 100010 !important; } /* (Optional) if your theme forces overflow on body children, ensure they can show */ body.filters-open { overscroll-behavior: contain; } /* If you still have the debug dashed outline from earlier, you can remove it now: */ .fl-module.archive-filters::before, .archive-filters::before { content: none !important; }