/* Location filter: chips + tabbed popover (Variant 4). Uses theme CSS tokens. */ /* Bar holds the selected chips and the "+ Add" button in one wrapping flex row, so Add always trails the chips inline instead of sitting on its own line. */ .rf-location__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block-end: 8px; } /* display:contents lets the chip spans become flex items of .rf-location__bar directly, while JS still owns this element's innerHTML. */ .rf-location__chips { display: contents; } .rf-location__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--black, #000); color: var(--white, #fff); padding: 6px 10px; border-radius: 20px; font-size: 13px; line-height: 1.2; } .rf-location__chip--topo { background: color-mix(in srgb, var(--brand, #EB4D00) 10%, transparent); color: var(--brand, #EB4D00); border: 1px solid var(--brand, #EB4D00); } .rf-location__chip-x { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } /* Add button */ .rf-location__add { display: inline-flex; align-items: center; gap: 5px; border: 1.5px dashed var(--brand, #EB4D00); color: var(--brand, #EB4D00); background: transparent; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out; } /* mouse, touch pad — matches the theme's hover guard */ @media (hover: hover) and (pointer: fine) { .rf-location__add:hover { background: var(--brand, #EB4D00); border-color: var(--brand, #EB4D00); color: var(--white, #fff); } } .rf-location__add-icon { /* sized/coloured by the theme .icon / .icon_14 classes (stroke: currentColor) */ display: block; } /* Popover is portaled to by JS so it escapes the accordion's overflow:hidden and any ancestor stacking context (otherwise it slips under the category block). JS sets position (absolute on desktop → scrolls natively with the page, no jitter; fixed inside the mobile filter panel), top/left/width. High z-index keeps it above page content. */ .rf-location__popover { position: fixed; z-index: 9999; background: var(--white, #fff); border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15)); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); overflow: hidden; } .rf-location__popover[hidden] { display: none; } /* Tabs */ .rf-location__tabs { display: flex; border-bottom: 1px solid var(--black-01, rgba(0, 0, 0, 0.1)); } .rf-location__tab { flex: 1; text-align: center; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; background: transparent; color: var(--black-05, rgba(0, 0, 0, 0.5)); border-bottom: 2px solid transparent; margin-block-end: -1px; /* overlap the container's 1px bottom border */ } .rf-location__tab.is-active { color: var(--brand, #EB4D00); border-bottom-color: var(--brand, #EB4D00); } .rf-location__tab:focus-visible { outline: 2px solid var(--brand, #EB4D00); outline-offset: -2px; } /* Search */ .rf-location__search { padding: 8px; border-bottom: 1px solid var(--black-01, rgba(0, 0, 0, 0.1)); } .rf-location__search-input { width: 100%; box-sizing: border-box; border: 1px solid var(--black-015, rgba(0, 0, 0, 0.15)); border-radius: 3px; padding: 9px 11px; font-size: 13px; outline: none; } .rf-location__search-input:focus { border-color: var(--brand, #EB4D00); box-shadow: 0 0 0 1px var(--brand, #EB4D00); } /* List / tree */ .rf-location__list { max-height: 280px; overflow-y: auto; padding: 6px; } .rf-location__row { display: flex; align-items: center; padding: 7px 6px; border-radius: 3px; cursor: pointer; } .rf-location__row:hover { background: var(--black-005, rgba(0, 0, 0, 0.05)); } .rf-location__row--district { padding-inline-start: 22px; } .rf-location__row--muni { padding-inline-start: 42px; } .rf-location__row--topo.is-on { background: color-mix(in srgb, var(--brand, #EB4D00) 8%, transparent); } .rf-location__toggle-area { display: flex; align-items: center; flex: 1; gap: 0; min-width: 0; } .rf-location__name { font-size: 13px; color: var(--dark-800, #333); } .rf-location__count { font-size: 12px; color: var(--black-04, rgba(0, 0, 0, 0.4)); margin-inline: 8px; } .rf-location__expand { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--black-04, rgba(0, 0, 0, 0.4)); padding: 2px 4px; line-height: 1; } .rf-location__empty { padding: 10px; font-size: 12px; color: var(--black-04, rgba(0, 0, 0, 0.4)); } /* Tri-state checkbox — matches the theme's .input__checkboxLabel__check: 16px square (no radius), 1px black-03 border, brand fill + white mark when set. */ .rf-location__box { width: 16px; height: 16px; flex-shrink: 0; margin-inline-end: 12px; border: 1px solid var(--black-03, rgba(0, 0, 0, 0.3)); background: var(--white, #fff); box-sizing: border-box; } .rf-location__box.is-on, .rf-location__box.is-mixed { border-color: var(--brand, #EB4D00); background: var(--brand, #EB4D00); color: var(--white, #fff); /* the sprite check icon strokes with currentColor */ display: flex; align-items: center; justify-content: center; } .rf-location__check { width: 14px; height: 14px; } .rf-location__box.is-mixed::after { content: ""; width: 8px; height: 2px; background: var(--white, #fff); border-radius: 1px; /* centered as a flex item of the box (is-mixed sets display:flex + center) */ } /* Toponym text */ .rf-location__topo-text { display: flex; flex-direction: column; } .rf-location__topo-type { font-size: 11px; color: var(--brand, #EB4D00); } /* Keyboard focus visibility for the filter's interactive buttons */ .rf-location__add:focus-visible, .rf-location__chip-x:focus-visible, .rf-location__expand:focus-visible { outline: 2px solid var(--brand, #EB4D00); outline-offset: 1px; }