/** * Destination Filter — tabbed "Find Your Destination" popup. * * Companion to assets/js/destination-filter.js. All classes are prefixed * `hrtk-dfilter-`. Every color/font/spacing token is a CSS custom property * declared on `.hrtk-dfilter-popup`, so a host site can retheme the whole * popup by overriding a handful of vars. The mockup's Heavenly Vacations * values are the defaults. Fonts are inherited from the site (no @import). * * BUILD: edit this file only. The committed .min.css/.debug.css are generated * (`npm run build:css`) and are what production/SCRIPT_DEBUG load. The build * raises every selector here to (2,x,0) via :not(#\9); see * scripts/postcss-hrtk-scope.js and scripts/css-manifest.js. */ /* ========================================================================= Isolation boundary — see assets/css/searchbar-pro.css for the full doctrine (why `all: revert` + specificity armor, NOT !important; why svg is excluded via zero-specificity :where(); why this rule MUST STAY FIRST — later same-specificity rules win by source order). TWO ROOTS: the JS portals BOTH .hrtk-dfilter-backdrop and .hrtk-dfilter-popup to (destination-filter.js), so each carries its own root here. This is a BLEND-IN component: it owns its palette via the --hrtk-dfilter-* tokens but inherits the host's typography (header contract above), so `font-family: inherit` and `color: inherit` are restored AFTER `all: revert` — the UA stylesheet sets its own font/color on form controls, and without re-inheritance the reset would break the blend-in contract on every button and input. ========================================================================= */ .hrtk-dfilter-backdrop:not(#\9):not(#\9), .hrtk-dfilter-backdrop:not(#\9):not(#\9)::before, .hrtk-dfilter-backdrop:not(#\9):not(#\9)::after, .hrtk-dfilter-backdrop:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *)), .hrtk-dfilter-backdrop:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *))::before, .hrtk-dfilter-backdrop:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *))::after, .hrtk-dfilter-popup:not(#\9):not(#\9), .hrtk-dfilter-popup:not(#\9):not(#\9)::before, .hrtk-dfilter-popup:not(#\9):not(#\9)::after, .hrtk-dfilter-popup:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *)), .hrtk-dfilter-popup:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *))::before, .hrtk-dfilter-popup:not(#\9):not(#\9) *:where(:not(svg, svg *, .hrtk-dsearch, .hrtk-dsearch *))::after { all: revert; box-sizing: border-box; color: inherit; font-family: inherit; } /* ^ The .hrtk-dsearch subtree is excluded (zero-specificity :where, like the svg exclusion): the embedded destination-search component carries its OWN `all: revert` reset in destination-search.css. Armor makes both files' selectors equal specificity, so whichever stylesheet loads later would win by source order — this popup reset once clobbered the entire search field (3.141.1: giant magnifier icon, unstyled input) because the component sheet loads first as a dependency. Excluding the subtree makes the cascade order-independent. */ /* Body scroll-lock while any popup is open (set on by the JS). */ html.hrtk-dfilter-open:not(#\9):not(#\9) { overflow: hidden; } .hrtk-dfilter-backdrop:not(#\9):not(#\9) { position: fixed; inset: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } /* Theming tokens — override these on the site to retheme. This rule sets ONLY public --hrtk-dfilter-* vars, so the build leaves it UNARMORED (postcss-hrtk-scope publicVarPrefixes): a site's plain single-class `.hrtk-dfilter-popup { --hrtk-dfilter-accent: … }` override must keep winning. Do not add non-var declarations here — that would arm the rule and silently outrank every documented override. */ .hrtk-dfilter-popup { --hrtk-dfilter-accent: #c9a959; --hrtk-dfilter-accent-hover: #b8963f; --hrtk-dfilter-accent-soft: #faf5e8; --hrtk-dfilter-accent-softer: #fdfbf5; --hrtk-dfilter-header-bg: #2c3e50; --hrtk-dfilter-header-fg: #ffffff; --hrtk-dfilter-surface: #ffffff; --hrtk-dfilter-surface-alt: #f7f9fb; --hrtk-dfilter-text: #2c3e50; --hrtk-dfilter-text-muted: #8899aa; --hrtk-dfilter-border: #e8ecf0; --hrtk-dfilter-radius: 14px; } .hrtk-dfilter-popup:not(#\9):not(#\9) { position: relative; z-index: 1000000; box-sizing: border-box; width: 520px; max-width: 100%; max-height: 80vh; /* Dark (header color), NOT the white surface: on a transform-composited layer the border-radius clip leaks the element's own background square corners a subpixel beyond the arc. The body and footer paint their own white surface, so the visible content is unchanged, but the corner leak is now dark-on-photo (invisible) instead of a white halo. */ background: var(--hrtk-dfilter-header-bg); border-radius: var(--hrtk-dfilter-radius); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; font-family: inherit; color: var(--hrtk-dfilter-text); } .hrtk-dfilter-popup:not(#\9):not(#\9) *, .hrtk-dfilter-popup:not(#\9):not(#\9) *::before, .hrtk-dfilter-popup:not(#\9):not(#\9) *::after { box-sizing: border-box; } .hrtk-dfilter-popup:not(#\9):not(#\9) svg { display: block; width: 100%; height: 100%; } /* ---- Header ---- */ .hrtk-dfilter-header:not(#\9):not(#\9) { /* No own radius: the popup's overflow:hidden + border-radius clips the square dark header into rounded top corners. Giving the header its own radius carves the dark fill inward and lets the white surface halo through at the corners (worse on transform-composited layers). */ padding: 22px 28px 0; background: var(--hrtk-dfilter-header-bg); flex-shrink: 0; } .hrtk-dfilter-header-top:not(#\9):not(#\9) { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .hrtk-dfilter-header-left:not(#\9):not(#\9) { display: flex; align-items: center; gap: 12px; min-width: 0; } .hrtk-dfilter-header-icon:not(#\9):not(#\9) { width: 20px; height: 20px; flex-shrink: 0; color: var(--hrtk-dfilter-accent); /* All-caps title has no descenders, so its optical center sits above the flex line-box center; lift the pin ~2px so it reads centered on the caps. */ margin-top: -2px; } .hrtk-dfilter-title:not(#\9):not(#\9) { margin: 0; font-size: 16px; font-weight: 500; color: var(--hrtk-dfilter-header-fg); letter-spacing: 0.5px; } .hrtk-dfilter-close:not(#\9):not(#\9) { width: 28px; height: 28px; flex-shrink: 0; border: none; background: rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s; } .hrtk-dfilter-close:hover:not(#\9):not(#\9) { background: rgba(255, 255, 255, 0.2); } .hrtk-dfilter-close:not(#\9):not(#\9) svg { width: 13px; height: 13px; color: rgba(255, 255, 255, 0.8); } /* ---- Global search (between title row and tabs) ---- */ .hrtk-dfilter-headsearch:not(#\9):not(#\9) { padding: 0 0 16px; } /* Remap the search component's public tokens onto the popup palette so a site retheming the popup (--hrtk-dfilter-*) restyles the embedded search for free. Sets ONLY public --hrtk-dsearch-* vars → stays UNARMORED, and correctly outranks a site's single-class .hrtk-dsearch override INSIDE the popup (two classes) while leaving standalone mounts alone. The field itself goes glassy on the dark header; the results panel keeps the light surface. */ .hrtk-dfilter-header .hrtk-dsearch { --hrtk-dsearch-accent: var(--hrtk-dfilter-accent); --hrtk-dsearch-accent-hover: var(--hrtk-dfilter-accent-hover); --hrtk-dsearch-accent-soft: var(--hrtk-dfilter-accent-soft); --hrtk-dsearch-heading-bg: var(--hrtk-dfilter-header-bg); --hrtk-dsearch-heading-fg: var(--hrtk-dfilter-accent); --hrtk-dsearch-surface: var(--hrtk-dfilter-surface); --hrtk-dsearch-surface-alt: var(--hrtk-dfilter-surface-alt); --hrtk-dsearch-text: var(--hrtk-dfilter-text); --hrtk-dsearch-text-muted: var(--hrtk-dfilter-text-muted); --hrtk-dsearch-border: var(--hrtk-dfilter-border); --hrtk-dsearch-field-bg: rgba(255, 255, 255, 0.08); --hrtk-dsearch-field-fg: var(--hrtk-dfilter-header-fg); --hrtk-dsearch-field-border: rgba(255, 255, 255, 0.16); --hrtk-dsearch-field-placeholder: rgba(255, 255, 255, 0.45); --hrtk-dsearch-ring: rgba(201, 169, 89, 0.25); --hrtk-dsearch-radius: 10px; } .hrtk-dfilter-header:not(#\9):not(#\9) .hrtk-dsearch-field:hover { background: rgba(255, 255, 255, 0.12); } .hrtk-dfilter-header:not(#\9):not(#\9) .hrtk-dsearch-icon { color: rgba(255, 255, 255, 0.55); } .hrtk-dfilter-header:not(#\9):not(#\9) .hrtk-dsearch-clear { color: rgba(255, 255, 255, 0.6); } .hrtk-dfilter-header:not(#\9):not(#\9) .hrtk-dsearch-clear:hover { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); } .hrtk-dfilter-header:not(#\9):not(#\9) .hrtk-dsearch-input { padding: 10px 0; font-size: 13px; } /* A search pick pulses the revealed row so the eye lands on it. */ @keyframes hrtk-dfilter-flash { 0%, 55% { box-shadow: inset 0 0 0 2px var(--hrtk-dfilter-accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } } .hrtk-dfilter-flash:not(#\9):not(#\9) { animation: hrtk-dfilter-flash 1.4s ease-out 1; } /* ---- Tabs ---- */ .hrtk-dfilter-tabs:not(#\9):not(#\9) { display: flex; gap: 0; } .hrtk-dfilter-tab:not(#\9):not(#\9) { flex: 1; padding: 12px 8px; background: transparent; border: none; font-family: inherit; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); cursor: pointer; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; } .hrtk-dfilter-tab:hover:not(#\9):not(#\9) { color: rgba(255, 255, 255, 0.85); } .hrtk-dfilter-tab-active:not(#\9):not(#\9) { color: var(--hrtk-dfilter-accent); border-bottom-color: var(--hrtk-dfilter-accent); font-weight: 600; } /* ---- Body / panels ---- */ .hrtk-dfilter-body:not(#\9):not(#\9) { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--hrtk-dfilter-surface); } .hrtk-dfilter-panel:not(#\9):not(#\9) { flex: 1; min-height: 0; display: none; flex-direction: column; } .hrtk-dfilter-panel-active:not(#\9):not(#\9) { display: flex; } .hrtk-dfilter-search:not(#\9):not(#\9) { padding: 12px 20px; border-bottom: 1px solid var(--hrtk-dfilter-border); background: var(--hrtk-dfilter-surface); flex-shrink: 0; } .hrtk-dfilter-search-input:not(#\9):not(#\9) { width: 100%; padding: 10px 14px; border: 1px solid var(--hrtk-dfilter-border); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--hrtk-dfilter-text); background: var(--hrtk-dfilter-surface); } .hrtk-dfilter-search-input:focus:not(#\9):not(#\9) { outline: none; border-color: var(--hrtk-dfilter-accent); box-shadow: 0 0 0 3px var(--hrtk-dfilter-accent-soft); } .hrtk-dfilter-list:not(#\9):not(#\9) { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hrtk-dfilter-list:not(#\9):not(#\9)::-webkit-scrollbar { width: 5px; } .hrtk-dfilter-list:not(#\9):not(#\9)::-webkit-scrollbar-track { background: transparent; } .hrtk-dfilter-list:not(#\9):not(#\9)::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; } .hrtk-dfilter-list:not(#\9):not(#\9)::-webkit-scrollbar-thumb:hover { background: #aaa; } /* ---- Checkbox glyph ---- */ .hrtk-dfilter-checkbox-box:not(#\9):not(#\9) { width: 18px; height: 18px; min-width: 18px; border: 2px solid #c0c8d0; border-radius: 4px; margin-right: 12px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; } .hrtk-dfilter-checkbox-box:not(#\9):not(#\9) svg { width: 12px; height: 12px; color: #fff; display: none; } .hrtk-dfilter-checked:not(#\9):not(#\9) .hrtk-dfilter-checkbox-box { background: var(--hrtk-dfilter-accent); border-color: var(--hrtk-dfilter-accent); } .hrtk-dfilter-checked:not(#\9):not(#\9) .hrtk-dfilter-checkbox-box svg { display: block; } /* ---- Island tab: island rows + nested sides ---- */ .hrtk-dfilter-island-section:not(#\9):not(#\9) { border-bottom: 1px solid var(--hrtk-dfilter-border); } .hrtk-dfilter-island-section:last-child:not(#\9):not(#\9) { border-bottom: none; } .hrtk-dfilter-island-row:not(#\9):not(#\9) { display: flex; align-items: center; padding: 14px 28px; cursor: pointer; background: var(--hrtk-dfilter-surface); transition: background 0.12s; } .hrtk-dfilter-island-row:hover:not(#\9):not(#\9) { background: var(--hrtk-dfilter-surface-alt); } .hrtk-dfilter-island-row.hrtk-dfilter-checked:not(#\9):not(#\9) { background: var(--hrtk-dfilter-accent-soft); } .hrtk-dfilter-island-name:not(#\9):not(#\9) { flex: 1; font-size: 14px; font-weight: 600; color: var(--hrtk-dfilter-text); letter-spacing: 0.3px; } .hrtk-dfilter-island-count:not(#\9):not(#\9) { font-size: 11px; color: var(--hrtk-dfilter-text-muted); margin-right: 12px; } .hrtk-dfilter-chevron:not(#\9):not(#\9) { width: 16px; height: 16px; color: var(--hrtk-dfilter-text-muted); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); } .hrtk-dfilter-chevron.hrtk-dfilter-open:not(#\9):not(#\9) { transform: rotate(180deg); } /* Accordion reveal: grid-template-rows 0fr -> 1fr animates the natural content height with no JS measurement. The inner wrapper carries the visual styling and clips (overflow:hidden + min-height:0) so the row collapses to a true zero. Unsupported browsers just snap open. */ .hrtk-dfilter-region-list:not(#\9):not(#\9) { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s cubic-bezier(0.4, 0, 0.2, 1); } .hrtk-dfilter-region-list.hrtk-dfilter-open:not(#\9):not(#\9) { grid-template-rows: 1fr; } .hrtk-dfilter-region-inner:not(#\9):not(#\9) { min-height: 0; overflow: hidden; background: var(--hrtk-dfilter-surface-alt); border-top: 1px solid var(--hrtk-dfilter-border); padding: 4px 0; opacity: 0; transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1); } .hrtk-dfilter-region-list.hrtk-dfilter-open:not(#\9):not(#\9) .hrtk-dfilter-region-inner { opacity: 1; } .hrtk-dfilter-region-item:not(#\9):not(#\9) { display: flex; align-items: center; padding: 10px 28px 10px 56px; cursor: pointer; transition: background 0.12s; } .hrtk-dfilter-region-item:hover:not(#\9):not(#\9) { background: #eef2f6; } .hrtk-dfilter-region-item.hrtk-dfilter-checked:not(#\9):not(#\9) { background: var(--hrtk-dfilter-accent-softer); } .hrtk-dfilter-region-item:not(#\9):not(#\9) .hrtk-dfilter-label { color: var(--hrtk-dfilter-text-muted); } .hrtk-dfilter-region-item.hrtk-dfilter-checked:not(#\9):not(#\9) .hrtk-dfilter-label { color: var(--hrtk-dfilter-text); font-weight: 500; } /* ---- Grouped tabs: sticky island headers ---- */ .hrtk-dfilter-group-header:not(#\9):not(#\9) { display: flex; align-items: center; padding: 10px 28px; background: var(--hrtk-dfilter-header-bg); position: sticky; top: 0; z-index: 2; } .hrtk-dfilter-group-label:not(#\9):not(#\9) { font-size: 11px; font-weight: 600; color: var(--hrtk-dfilter-accent); letter-spacing: 1.5px; text-transform: uppercase; } .hrtk-dfilter-group-line:not(#\9):not(#\9) { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.15); margin-left: 12px; } /* Collapsible group header: the whole header toggles the group open. The chevron reuses .hrtk-dfilter-chevron (rotates on .hrtk-dfilter-open). The group body reuses the region-list reveal but drops the nested-row surface styling so the rows read exactly like the flat grouped list. */ .hrtk-dfilter-group-header.hrtk-dfilter-accordion:not(#\9):not(#\9) { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .hrtk-dfilter-group-header:not(#\9):not(#\9) .hrtk-dfilter-chevron { margin-left: 12px; color: var(--hrtk-dfilter-accent); flex: none; } .hrtk-dfilter-region-inner.hrtk-dfilter-group-body:not(#\9):not(#\9) { background: transparent; border-top: 0; padding: 0; } /* ---- Plain filter rows (city / resort / location) ---- */ .hrtk-dfilter-row:not(#\9):not(#\9) { display: flex; align-items: center; padding: 11px 28px 11px 40px; cursor: pointer; border-bottom: 1px solid #f0f2f4; transition: background 0.12s; } .hrtk-dfilter-row:last-child:not(#\9):not(#\9) { border-bottom: none; } .hrtk-dfilter-row:hover:not(#\9):not(#\9) { background: var(--hrtk-dfilter-surface-alt); } .hrtk-dfilter-row.hrtk-dfilter-checked:not(#\9):not(#\9) { background: var(--hrtk-dfilter-accent-soft); } .hrtk-dfilter-label:not(#\9):not(#\9) { flex: 1; font-size: 13px; font-weight: 400; color: var(--hrtk-dfilter-text); } .hrtk-dfilter-row.hrtk-dfilter-checked:not(#\9):not(#\9) .hrtk-dfilter-label { font-weight: 500; } .hrtk-dfilter-count:not(#\9):not(#\9) { font-size: 11px; color: var(--hrtk-dfilter-text-muted); margin-left: 8px; } /* ---- Empty / no-results ---- */ .hrtk-dfilter-empty:not(#\9):not(#\9) { padding: 48px 28px; text-align: center; font-size: 13px; color: var(--hrtk-dfilter-text-muted); } /* ---- Focus visibility (a11y) ---- */ .hrtk-dfilter-tab:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-close:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-clear:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-apply:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-row:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-region-item:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-island-row:focus-visible:not(#\9):not(#\9), .hrtk-dfilter-checkbox-box:focus-visible:not(#\9):not(#\9) { outline: 2px solid var(--hrtk-dfilter-accent); outline-offset: -2px; } /* ---- Footer ---- */ .hrtk-dfilter-footer:not(#\9):not(#\9) { /* No own radius: popup clip handles the bottom corners (see header note). */ padding: 16px 28px; border-top: 1px solid var(--hrtk-dfilter-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--hrtk-dfilter-surface); flex-shrink: 0; } .hrtk-dfilter-footer-info:not(#\9):not(#\9) { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hrtk-dfilter-applied:not(#\9):not(#\9) { font-size: 13px; color: var(--hrtk-dfilter-text-muted); } .hrtk-dfilter-applied:not(#\9):not(#\9) b { font-weight: 600; color: var(--hrtk-dfilter-header-bg); } .hrtk-dfilter-livecount:not(#\9):not(#\9) { font-size: 12px; color: var(--hrtk-dfilter-text-muted); } .hrtk-dfilter-livecount:not(#\9):not(#\9) b { font-weight: 600; color: var(--hrtk-dfilter-accent-hover); } .hrtk-dfilter-footer-actions:not(#\9):not(#\9) { display: flex; gap: 10px; flex-shrink: 0; } .hrtk-dfilter-clear:not(#\9):not(#\9) { padding: 10px 18px; border: 1px solid var(--hrtk-dfilter-border); background: var(--hrtk-dfilter-surface); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--hrtk-dfilter-text-muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .hrtk-dfilter-clear:hover:not(#\9):not(#\9) { border-color: #bbb; color: var(--hrtk-dfilter-text); } .hrtk-dfilter-apply:not(#\9):not(#\9) { padding: 10px 28px; border: none; background: var(--hrtk-dfilter-accent); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: #fff; letter-spacing: 1px; cursor: pointer; transition: background 0.2s; } .hrtk-dfilter-apply:hover:not(#\9):not(#\9) { background: var(--hrtk-dfilter-accent-hover); } /* ---- Mobile: full-height bottom sheet ---- */ @media (max-width: 768px) { .hrtk-dfilter-backdrop:not(#\9):not(#\9) { align-items: flex-end; padding: 0; } .hrtk-dfilter-popup:not(#\9):not(#\9) { width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--hrtk-dfilter-radius) var(--hrtk-dfilter-radius) 0 0; transform: translateY(100%); } .hrtk-dfilter-footer:not(#\9):not(#\9) { border-radius: 0; } .hrtk-dfilter-visible:not(#\9):not(#\9) .hrtk-dfilter-popup { transform: none; } } @media (prefers-reduced-motion: reduce) { .hrtk-dfilter-backdrop:not(#\9):not(#\9), .hrtk-dfilter-popup:not(#\9):not(#\9), .hrtk-dfilter-popup.hrtk-dfilter-h-anim:not(#\9):not(#\9) { transition: none; } .hrtk-dfilter-flash:not(#\9):not(#\9) { animation: none; } .hrtk-dfilter-popup:not(#\9):not(#\9) { opacity: 1; transform: none; } .hrtk-dfilter-chevron:not(#\9):not(#\9), .hrtk-dfilter-tab:not(#\9):not(#\9), .hrtk-dfilter-apply:not(#\9):not(#\9), .hrtk-dfilter-clear:not(#\9):not(#\9), .hrtk-dfilter-close:not(#\9):not(#\9), .hrtk-dfilter-checkbox-box:not(#\9):not(#\9), .hrtk-dfilter-region-list:not(#\9):not(#\9), .hrtk-dfilter-region-inner:not(#\9):not(#\9) { transition: none; } } /* ---- Open/close + tab-height animation ------------------------------ */ /* Hidden state; .hrtk-dfilter-visible on the backdrop animates in. The same transition runs in reverse on close (JS delays unmount 300ms). */ .hrtk-dfilter-backdrop:not(#\9):not(#\9) { opacity: 0; transition: opacity 0.22s ease; } .hrtk-dfilter-backdrop.hrtk-dfilter-visible:not(#\9):not(#\9) { opacity: 1; } .hrtk-dfilter-popup:not(#\9):not(#\9) { transition: opacity 0.24s ease, transform 0.24s ease; } @media (min-width: 769px) { .hrtk-dfilter-popup:not(#\9):not(#\9) { opacity: 0; transform: translateY(-18px); } .hrtk-dfilter-visible:not(#\9):not(#\9) .hrtk-dfilter-popup { opacity: 1; transform: none; } } /* Tab switches: JS pins the height and animates to the new content size. */ .hrtk-dfilter-popup.hrtk-dfilter-h-anim:not(#\9):not(#\9) { transition: height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---- Explorer takeover (bridge) ------------------------------------- */ /* The native zone trigger stays in the DOM (its modal carries the hidden location/city inputs the explorer serializes) but is hidden once the bridge mounts its own trigger. */ .hrtk-dfilter-on:not(#\9):not(#\9) .hfse-form-zone-options-trigger { display: none !important; } .hrtk-dfilter-trigger:not(#\9):not(#\9) { cursor: pointer; }