/* FILTERS-LEDGER-2026 — the Filters dropdown as a ledger: three chapters, twenty lines, each with its emblem, what is chosen and a find field on the long rows. Same plate chrome as the mode selector. FILTERS-SHOWN-2026 (2026-11-04): the left column is a tick list that decides which rows the right column shows (.fp-off hides the rest); on narrow screens it becomes a horizontal strip of tick chips under the head. Row names, left and right, are set in the header's sans face at the region picker's size (--font-display, --header-control-fs) so the two dropdowns share type while the Filters plate keeps its serif title and chapter heads. Colour: each chapter takes one of the mode selector's nine tones, re-tuned per era × theme in mode-selector.css (sea for Where, brass for The hotel, plum for Rewards, honors & amenities); density rows keep the pink-to-orange heat map and the Honors and Amenities chips are tinted by family. Only applies once filters-panel.js has run (.fp-enhanced). */ #filtersPanel.fp-enhanced { --fp-gold-soft: color-mix(in srgb, var(--gold) 55%, transparent); --fp-rule: color-mix(in srgb, var(--text) 12%, transparent); --fp-rule-gold: color-mix(in srgb, var(--gold) 38%, transparent); --fp-wash: color-mix(in srgb, var(--gold) 7%, var(--surface)); --fp-wash-strong: color-mix(in srgb, var(--gold) 14%, var(--surface)); --fp-ink-on-gold: var(--surface); --fp-radius: 12px; --fp-emblem-radius: 50%; --fp-font-title: var(--font-serif, 'Cormorant Garamond', Georgia, serif); --fp-font-kicker: var(--font-display, system-ui, sans-serif); /* Row names share the region picker's face and size (styles.css .region-select). */ --fp-font-name: var(--font-display, system-ui, sans-serif); --fp-name-size: var(--header-control-fs, 0.9375rem); --fp-on-tone: var(--ms-on-tone, #fff); /* Chapter accents: the mode selector's tones (mode-selector.css :root). */ --fp-lapis: var(--ms-t-sea, #2f6f7e); --fp-lapis-ink: var(--ms-t-sea, #2f6f7e); --fp-plum: var(--ms-t-plum, #6b4a7a); --fp-plum-ink: var(--ms-t-plum, #6b4a7a); --fp-jade: var(--ms-t-moss, #5f7a3a); --fp-brass: var(--ms-t-brass, var(--gold)); --fp-accent: var(--fp-brass); --fp-accent-ink: var(--fp-brass); width: min(880px, calc(100vw - 32px)); padding: 0; border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border-strong)); border-radius: var(--fp-radius); background: radial-gradient(120% 50% at 50% -10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%), var(--surface); background-size: auto; background-position: 0 0; background-repeat: no-repeat; box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent); color: var(--text); font: 13px/1.45 var(--font-body, system-ui, sans-serif); overflow: hidden; display: flex; flex-direction: column; } #filtersPanel.fp-enhanced[hidden] { display: none; } #filtersPanel.fp-enhanced::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--fp-rule-gold); border-radius: calc(var(--fp-radius) - 5px); pointer-events: none; z-index: 5; } #filtersPanel.fp-enhanced .filters-panel-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0; overflow: hidden; } #filtersPanel.fp-enhanced svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } #filtersPanel.fp-enhanced button { font: inherit; color: inherit; } /* Chapter accent per row */ #filtersPanel.fp-enhanced [data-filter="country"], #filtersPanel.fp-enhanced [data-filter="city"], #filtersPanel.fp-enhanced [data-filter="neighborhood"], #filtersPanel.fp-enhanced [data-fp-row="country"], #filtersPanel.fp-enhanced [data-fp-row="city"], #filtersPanel.fp-enhanced [data-fp-row="neighborhood"], #filtersPanel.fp-enhanced #fp-chapter-where, #filtersPanel.fp-enhanced .fp-rail-chapter:nth-of-type(1) { --fp-accent: var(--fp-lapis); --fp-accent-ink: var(--fp-lapis-ink); } #filtersPanel.fp-enhanced [data-filter="rewards"], #filtersPanel.fp-enhanced [data-filter="awards"], #filtersPanel.fp-enhanced [data-filter="amenities"], #filtersPanel.fp-enhanced [data-filter="guest-echo"], #filtersPanel.fp-enhanced [data-fp-row="rewards"], #filtersPanel.fp-enhanced [data-fp-row="awards"], #filtersPanel.fp-enhanced [data-fp-row="amenities"], #filtersPanel.fp-enhanced [data-fp-row="guest-echo"], #filtersPanel.fp-enhanced #fp-chapter-standing, #filtersPanel.fp-enhanced .fp-rail-chapter:nth-of-type(3) { --fp-accent: var(--fp-plum); --fp-accent-ink: var(--fp-plum-ink); } /* ---------- Head ---------- */ #filtersPanel.fp-enhanced .filters-panel-head { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px 8px; border: 0; flex: none; } #filtersPanel.fp-enhanced .filters-panel-head::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--fp-lapis) 0 34%, var(--fp-brass) 34% 67%, var(--fp-plum) 67%); opacity: .8; } #filtersPanel.fp-enhanced .filters-panel-head-text { gap: 0; } #filtersPanel.fp-enhanced .fp-kicker { margin: 0 0 1px; font: 700 10px/1.2 var(--fp-font-kicker); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } #filtersPanel.fp-enhanced .filters-panel-title { font: 500 26px/1.05 var(--fp-font-title); letter-spacing: -.01em; text-transform: none; color: var(--text); } #filtersPanel.fp-enhanced .filters-panel-match { margin-top: 2px; font: 600 10.5px/1.3 var(--fp-font-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } #filtersPanel.fp-enhanced .filters-panel-match.is-zero { color: #b03020; } #filtersPanel.fp-enhanced .clear-all-btn--inline { margin: 0; padding: 7px 10px; border: 0; background: none; box-shadow: none; font: 600 10.5px/1.2 var(--fp-font-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); border-radius: 999px; } #filtersPanel.fp-enhanced .clear-all-btn--inline:hover { color: var(--text); background: var(--fp-wash-strong); } #filtersPanel.fp-enhanced .filters-panel-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--fp-rule-gold); transition: background .18s, color .18s; } #filtersPanel.fp-enhanced .filters-panel-close:hover { background: var(--fp-wash-strong); color: var(--text); } #filtersPanel.fp-enhanced .filters-panel-close svg { width: 15px; height: 15px; stroke-width: 1.5; } /* ---------- Chosen filters: pills in the head, beside the title ---------- */ #filtersPanel.fp-enhanced .filters-panel-head-text { flex: 0 0 auto; } #filtersPanel.fp-enhanced .filters-active-summary { display: flex; flex: 1 1 auto; min-width: 0; margin: 0 0 0 10px; padding: 0 0 0 16px; border: 0; border-left: 1px solid var(--fp-rule-gold); gap: 7px; align-items: center; flex-wrap: wrap; align-self: stretch; } #filtersPanel.fp-enhanced .filters-active-summary[hidden] { display: none; } #filtersPanel.fp-enhanced .filters-active-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 7px 6px 14px; border: 0; box-shadow: inset 0 0 0 1.5px var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--surface)); font: 700 14.5px/1 var(--fp-font-title); letter-spacing: 0; color: var(--text); border-radius: 999px; transition: background .16s, color .16s, transform .16s; } #filtersPanel.fp-enhanced .filters-active-pill-x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--fp-ink-on-gold); font-size: 15px; line-height: 1; opacity: 1; } :root[data-theme="light"] #filtersPanel.fp-enhanced .filters-active-pill-x { color: #fff; } #filtersPanel.fp-enhanced .filters-active-pill:hover { background: var(--gold); color: var(--fp-ink-on-gold); transform: translateY(-1px); } :root[data-theme="light"] #filtersPanel.fp-enhanced .filters-active-pill:hover { color: #fff; } #filtersPanel.fp-enhanced .filters-active-pill:hover .filters-active-pill-x { background: var(--surface); color: var(--gold); } #filtersPanel.fp-enhanced .filters-active-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- Layout: tick list + ledger ---------- */ #filtersPanel.fp-enhanced .fp-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 0; flex: 1; overflow: hidden; } #filtersPanel.fp-enhanced .fp-rail { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; padding: 12px 10px 12px 14px; background: linear-gradient(180deg, var(--fp-wash), transparent 70%); border-right: 1px solid var(--fp-rule-gold); scrollbar-width: thin; } #filtersPanel.fp-enhanced .fp-rail-head { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px 6px; } #filtersPanel.fp-enhanced .fp-rail-title { font: 700 10.5px/1.2 var(--fp-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } #filtersPanel.fp-enhanced .fp-rail-hint { font: 500 12px/1.35 var(--font-body, system-ui, sans-serif); color: var(--text-muted); } #filtersPanel.fp-enhanced .fp-rail-chapter { margin: 10px 0 3px 6px; font: 700 10px/1.2 var(--fp-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--fp-accent); } #filtersPanel.fp-enhanced .fp-rail-chapter[hidden] { display: none; } #filtersPanel.fp-enhanced .fp-rail-entry { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 8px 5px 6px; border: 0; background: none; border-radius: 8px; color: var(--text-muted); cursor: pointer; text-align: left; transition: background .16s, color .16s, box-shadow .16s; } #filtersPanel.fp-enhanced .fp-rail-entry[hidden] { display: none; } /* The tick box: the row's emblem in its chapter tone while off; solid tone with a check while on. */ #filtersPanel.fp-enhanced .fp-rail-check { position: relative; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--fp-emblem-radius); color: var(--fp-accent); background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fp-accent) 70%, transparent); transition: background .16s, box-shadow .16s, color .16s; } #filtersPanel.fp-enhanced .fp-rail-check svg { position: absolute; width: 14px; height: 14px; transition: opacity .16s, transform .16s; } #filtersPanel.fp-enhanced .fp-rail-check svg:last-child { opacity: 0; transform: scale(.6); stroke-width: 2.4; } #filtersPanel.fp-enhanced .fp-rail-entry.is-shown .fp-rail-check { background: var(--fp-accent); color: var(--fp-on-tone); box-shadow: inset 0 0 0 1.5px var(--fp-accent), 0 0 0 3px color-mix(in srgb, var(--fp-accent) 20%, transparent); } #filtersPanel.fp-enhanced .fp-rail-entry.is-shown .fp-rail-check svg:first-child { opacity: 0; transform: scale(.6); } #filtersPanel.fp-enhanced .fp-rail-entry.is-shown .fp-rail-check svg:last-child { opacity: 1; transform: none; } #filtersPanel.fp-enhanced .fp-rail-name { flex: 1; min-width: 0; font: 600 var(--fp-name-size)/1.2 var(--fp-font-name); letter-spacing: .02em; color: inherit; } #filtersPanel.fp-enhanced .fp-rail-entry.is-shown { color: var(--text); } #filtersPanel.fp-enhanced .fp-rail-count { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font: 700 11px/1 var(--fp-font-kicker); background: var(--fp-accent); color: var(--fp-on-tone); } #filtersPanel.fp-enhanced .fp-rail-count:empty { display: none; } /* A choice that is on while its row is off the list: hollow count, so it reads as "still counting". */ #filtersPanel.fp-enhanced .fp-rail-entry.has-active:not(.is-shown) .fp-rail-count { background: var(--surface); color: var(--fp-accent-ink); box-shadow: inset 0 0 0 1.5px var(--fp-accent); } #filtersPanel.fp-enhanced .fp-rail-entry.has-active:not(.is-shown) .fp-rail-check { box-shadow: inset 0 0 0 1.5px var(--fp-accent), 0 0 0 3px color-mix(in srgb, var(--fp-accent) 18%, transparent); } #filtersPanel.fp-enhanced .fp-rail-entry:hover { background: color-mix(in srgb, var(--fp-accent) 10%, var(--surface)); color: var(--text); } #filtersPanel.fp-enhanced .fp-rail-entry.is-open { color: var(--text); box-shadow: inset 2px 0 0 var(--fp-accent); background: var(--surface); } #filtersPanel.fp-enhanced .fp-rail-entry:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: -2px; } #filtersPanel.fp-enhanced .fp-ledger { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--fp-gold-soft) transparent; padding: 2px 16px 10px 14px; } #filtersPanel.fp-enhanced .filter-bar { display: block; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; } /* ---------- Chapter heads inside the ledger ---------- */ #filtersPanel.fp-enhanced .fp-chapter { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; padding: 0 0 4px 2px; border-bottom: 2px solid color-mix(in srgb, var(--fp-accent) 55%, transparent); } #filtersPanel.fp-enhanced .fp-chapter:first-of-type { margin-top: 4px; } #filtersPanel.fp-enhanced .fp-chapter[hidden] { display: none; } #filtersPanel.fp-enhanced .fp-chapter-num { font: 500 12px/1 var(--fp-font-title); font-style: italic; letter-spacing: .08em; color: var(--fp-accent); } #filtersPanel.fp-enhanced .fp-chapter-title { font: 500 18px/1.15 var(--fp-font-title); letter-spacing: -.01em; color: var(--text); } /* ---------- One line of the ledger ---------- */ #filtersPanel.fp-enhanced .fp-row { display: block; min-height: 0; gap: 0; border-bottom: 1px solid var(--fp-rule); } #filtersPanel.fp-enhanced .fp-row:last-child { border-bottom: 0; } #filtersPanel.fp-enhanced .fp-row[hidden], #filtersPanel.fp-enhanced .fp-row.fp-off { display: none !important; } #filtersPanel.fp-enhanced .fp-row-head { display: flex; align-items: center; gap: 6px; } #filtersPanel.fp-enhanced .fp-row-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 48px; padding: 6px 4px 6px 2px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; transition: background .16s; } #filtersPanel.fp-enhanced .fp-row-toggle:hover { background: color-mix(in srgb, var(--fp-accent) 7%, var(--surface)); } #filtersPanel.fp-enhanced .fp-row-toggle:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: -2px; } #filtersPanel.fp-enhanced .fp-emblem { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--fp-emblem-radius); color: var(--fp-accent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fp-accent) 20%, transparent), transparent 72%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-accent) 60%, transparent), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--fp-accent) 25%, transparent); transition: background .18s, box-shadow .18s, color .18s; } #filtersPanel.fp-enhanced .fp-emblem svg { width: 15px; height: 15px; } #filtersPanel.fp-enhanced .fp-row.has-active .fp-emblem { background: var(--fp-accent); color: var(--fp-on-tone); box-shadow: inset 0 0 0 1px var(--fp-accent), 0 0 0 3px color-mix(in srgb, var(--fp-accent) 22%, transparent); } #filtersPanel.fp-enhanced .fp-row-copy { flex: 1; min-width: 0; } #filtersPanel.fp-enhanced .fp-row-title { display: block; font: 600 var(--fp-name-size)/1.2 var(--fp-font-name); letter-spacing: .02em; color: var(--text); } #filtersPanel.fp-enhanced .fp-row-title .filter-label { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; padding: 0; min-width: 0; } #filtersPanel.fp-enhanced .fp-row-summary { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #filtersPanel.fp-enhanced .fp-row-summary.is-chosen { font-style: normal; color: var(--text); font-weight: 600; } #filtersPanel.fp-enhanced .fp-row-summary.is-chosen::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--fp-accent); } #filtersPanel.fp-enhanced .fp-row.is-open .fp-row-summary { white-space: normal; } #filtersPanel.fp-enhanced .fp-row-count { flex: none; font: 600 10.5px/1.2 var(--fp-font-kicker); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } #filtersPanel.fp-enhanced .fp-row.has-active .fp-row-count { color: var(--fp-accent-ink); } #filtersPanel.fp-enhanced .fp-row-chevron { flex: none; color: var(--text-muted); transition: transform .22s cubic-bezier(.2, .8, .2, 1), color .16s; } #filtersPanel.fp-enhanced .fp-row-chevron svg { width: 13px; height: 13px; } #filtersPanel.fp-enhanced .fp-row.is-open .fp-row-chevron { transform: rotate(180deg); color: var(--fp-accent); } #filtersPanel.fp-enhanced .fp-row-clear { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 30px; padding: 3px 9px 3px 7px; border: 0; background: none; border-radius: 999px; color: var(--text-muted); font: 600 10.5px/1 var(--fp-font-kicker); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 1px var(--fp-rule); transition: background .16s, color .16s, box-shadow .16s; } #filtersPanel.fp-enhanced .fp-row-clear svg { width: 11px; height: 11px; } #filtersPanel.fp-enhanced .fp-row-clear:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--fp-accent); background: color-mix(in srgb, var(--fp-accent) 8%, var(--surface)); } #filtersPanel.fp-enhanced .fp-row-clear[hidden] { display: none; } #filtersPanel.fp-enhanced .fp-row-body { padding: 0 2px 10px 40px; } #filtersPanel.fp-enhanced .fp-row-body[hidden] { display: none; } #filtersPanel.fp-enhanced .fp-row-find { display: flex; align-items: center; gap: 7px; width: min(100%, 270px); min-height: 32px; margin: 0 0 8px; padding: 0 3px 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-accent) 45%, transparent); background: var(--surface); transition: box-shadow .16s; } #filtersPanel.fp-enhanced .fp-row-find:focus-within { box-shadow: inset 0 0 0 1px var(--fp-accent), 0 0 0 3px color-mix(in srgb, var(--fp-accent) 16%, transparent); } #filtersPanel.fp-enhanced .fp-row-find-glyph { color: var(--fp-accent); } #filtersPanel.fp-enhanced .fp-row-find-glyph svg { width: 13px; height: 13px; } #filtersPanel.fp-enhanced .fp-row-find input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 5px 0; font: 500 13.5px/1.2 var(--font-body, system-ui, sans-serif); color: var(--text); box-shadow: none; } #filtersPanel.fp-enhanced .fp-row-find input::placeholder { color: var(--text-muted); font-style: italic; } #filtersPanel.fp-enhanced .fp-row-find input::-webkit-search-cancel-button { display: none; } #filtersPanel.fp-enhanced .fp-row-find-clear { display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; border-radius: 50%; color: var(--text-muted); cursor: pointer; } #filtersPanel.fp-enhanced .fp-row-find-clear svg { width: 11px; height: 11px; } #filtersPanel.fp-enhanced .fp-row-find-clear:hover { background: var(--fp-wash-strong); color: var(--text); } #filtersPanel.fp-enhanced .fp-row-find-clear[hidden] { display: none; } /* ---------- Chips ---------- */ #filtersPanel.fp-enhanced .filter-chips { gap: 6px; } #filtersPanel.fp-enhanced .filter-chip { padding: 6px 10px; min-height: 30px; border: 1px solid var(--fp-rule-gold); background: var(--surface); color: var(--text); font: 500 12px/1.2 var(--font-body, system-ui, sans-serif); letter-spacing: 0; border-radius: 999px; transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s; } #filtersPanel.fp-enhanced .filter-chip:hover:not(.is-active):not([disabled]) { border-color: var(--text); transform: translateY(-1px); } /* Chosen: the chapter's colour, solid, with a check. */ #filtersPanel.fp-enhanced .filter-chip.is-active { position: relative; z-index: 0; padding: 6px 10px 6px 9px; border: 1px solid var(--fp-accent); border-radius: 999px; background: var(--fp-accent); color: var(--fp-on-tone); font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-accent) 22%, transparent); } #filtersPanel.fp-enhanced .filter-chip.is-active::before { content: "\2713"; margin-right: 5px; font-weight: 700; } #filtersPanel.fp-enhanced .filter-chip.is-active::after { display: none; } #filtersPanel.fp-enhanced .filter-chip.filter-chip--zero-match { opacity: .38; filter: none; } /* Independents: jade, the opposite of a brand. */ #filtersPanel.fp-enhanced .filter-chip--independent { border-color: var(--fp-jade); color: var(--fp-jade); background: color-mix(in srgb, var(--fp-jade) 12%, var(--surface)); font-weight: 600; } #filtersPanel.fp-enhanced .filter-chip--independent.is-active { background: var(--fp-jade); border-color: var(--fp-jade); color: var(--fp-on-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-jade) 25%, transparent); } /* Metro region chips: dashed lapis, so a region reads differently from its city. */ #filtersPanel.fp-enhanced .filter-chip--metro-region { border: 1px dashed var(--fp-lapis); color: var(--fp-lapis-ink); background: color-mix(in srgb, var(--fp-lapis) 9%, var(--surface)); font-style: italic; } #filtersPanel.fp-enhanced .filter-chip--metro-region:hover:not(.is-active) { border-color: var(--fp-lapis); background: color-mix(in srgb, var(--fp-lapis) 18%, var(--surface)); } #filtersPanel.fp-enhanced .filter-chip--metro-region.is-active { font-style: normal; border-style: dashed; border-color: var(--fp-on-tone); } /* "Show more": the row's accent, dashed. */ #filtersPanel.fp-enhanced .filter-chip--more, #filtersPanel.fp-enhanced .filter-chip--more-country { border: 1px dashed var(--fp-accent); background: color-mix(in srgb, var(--fp-accent) 8%, var(--surface)); color: var(--fp-accent-ink); font: 700 10px/1.2 var(--fp-font-kicker); letter-spacing: .14em; text-transform: uppercase; } #filtersPanel.fp-enhanced .filter-chip--more:hover, #filtersPanel.fp-enhanced .filter-chip--more-country:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: var(--fp-on-tone); } /* Heat: the region density map, pink to orange, as before (Country, City, Neighborhood, Brand, Rewards). Honors and Amenities use family tints instead. */ #filtersPanel.fp-enhanced .filter-chip[class*="-heat-1"]:not(.is-active) { background: rgba(214, 51, 108, .10); border-color: rgba(214, 51, 108, .40); color: #8a2e4d; } #filtersPanel.fp-enhanced .filter-chip[class*="-heat-2"]:not(.is-active) { background: rgba(214, 51, 108, .20); border-color: rgba(214, 51, 108, .58); color: #7d1f3e; } #filtersPanel.fp-enhanced .filter-chip[class*="-heat-3"]:not(.is-active) { background: rgba(206, 30, 84, .62); border-color: rgba(206, 30, 84, .9); color: #fff5f8; font-weight: 700; } #filtersPanel.fp-enhanced .filter-chip[class*="-heat-4"]:not(.is-active) { background: rgba(206, 24, 78, .74); border-color: #d6002f; color: #fff; font-weight: 700; box-shadow: 0 0 0 1px rgba(214, 0, 47, .5), 0 0 10px rgba(214, 0, 47, .28); } #filtersPanel.fp-enhanced .filter-chip[class*="-heat-5"]:not(.is-active) { background: linear-gradient(135deg, rgba(230, 95, 35, .82) 0%, rgba(206, 24, 78, .78) 100%); border-color: #e86a1a; color: #fff; font-weight: 700; box-shadow: 0 0 0 1px rgba(232, 106, 26, .55), 0 0 12px rgba(230, 95, 35, .38); } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[class*="-heat-1"]:not(.is-active) { background: rgba(236, 120, 160, .12); border-color: rgba(236, 120, 160, .4); color: #f4c6d6; } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[class*="-heat-2"]:not(.is-active) { background: rgba(236, 96, 150, .24); border-color: rgba(236, 96, 150, .6); color: #fbd9e5; } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[class*="-heat-3"]:not(.is-active) { background: rgba(233, 60, 110, .4); border-color: rgba(233, 60, 110, .8); color: #fff0f4; } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[class*="-heat-4"]:not(.is-active) { background: rgba(229, 45, 90, .5); border-color: #ff2d55; box-shadow: 0 0 0 1px rgba(255, 45, 85, .55), 0 0 10px rgba(255, 45, 85, .3); } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[class*="-heat-5"]:not(.is-active) { background: linear-gradient(135deg, rgba(255, 115, 45, .62), rgba(255, 45, 90, .56)); border-color: #ff9a4d; box-shadow: 0 0 0 1px rgba(255, 154, 77, .65), 0 0 14px rgba(255, 120, 50, .48); } #filtersPanel.fp-enhanced .filter-chip[class*="-heat-"]:not(.is-active):hover { border-color: #ff5e82; } /* Family tints — a chip is tinted by what it stands for. */ #filtersPanel.fp-enhanced .fp-tint { --t: var(--fp-accent); } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint]:not(.is-active) { background: color-mix(in srgb, var(--t) 14%, var(--surface)); border-color: color-mix(in srgb, var(--t) 60%, transparent); color: color-mix(in srgb, var(--t) 70%, var(--text)); font-weight: 600; } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[data-fp-tint]:not(.is-active) { background: color-mix(in srgb, var(--t) 22%, var(--surface)); border-color: color-mix(in srgb, var(--t) 70%, transparent); color: color-mix(in srgb, var(--t) 45%, #fff); } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint]:not(.is-active):hover { border-color: var(--t); background: color-mix(in srgb, var(--t) 24%, var(--surface)); } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint].is-active { background: var(--t); border-color: var(--t); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="w50"].is-active, :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="family"].is-active { color: #141418; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="step"].is-active, #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="place"].is-active, #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="praise"].is-active, #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="clean"].is-active { color: var(--fp-on-tone); } /* Honors families */ #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="forbes"] { --t: #8c1d2f; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="michelin"] { --t: #c8102e; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="aaa"] { --t: #1f4e9e; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="w50"] { --t: #2b2b2b; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="press"] { --t: #2f7f8a; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="design"] { --t: #5b5f6b; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="membership"] { --t: #8e4d86; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="award"] { --t: #b8860b; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="palace"] { --t: #1d2d6b; } /* Amenity families */ #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="water"] { --t: #1a8fa8; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="wellness"] { --t: #7c5cbf; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="sport"] { --t: #3a8f3a; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="dining"] { --t: #c0562a; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="service"] { --t: #a0763a; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="family"] { --t: #d4a017; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="night"] { --t: #5a3d8a; } /* Size, entry room and era: a ladder, pale to deep, left to right. */ #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="step"] { --t: color-mix(in srgb, var(--fp-accent) var(--step, 40%), #5a4a25); } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="step"] { --t: color-mix(in srgb, var(--fp-accent) var(--step, 40%), #f0d9a0); } :root[data-theme="dark"] #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="w50"] { --t: #cfcfcf; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="place"] { --t: var(--fp-lapis); } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="praise"] { --t: var(--fp-plum); } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="heritage"] { --t: #7a5a3a; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="reborn"] { --t: #2f8f83; } #filtersPanel.fp-enhanced .filter-chip[data-fp-tint="clean"] { --t: var(--fp-jade); } /* Sub-head inside a chip row (Honors → Memberships). */ #filtersPanel.fp-enhanced .filter-subhead { flex-basis: 100%; margin: 6px 0 -2px 4px; font: 700 10px/1.2 var(--fp-font-kicker); letter-spacing: .18em; text-transform: uppercase; color: var(--fp-plum-ink); display: flex; align-items: center; gap: 10px; } #filtersPanel.fp-enhanced .filter-subhead::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--fp-plum) 35%, transparent); } /* Makers: a minimum atlas footprint beside the chip. */ #filtersPanel.fp-enhanced .filter-min { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px 0 2px; margin-right: 6px; font: 500 11px/1 var(--font-body, system-ui, sans-serif); color: var(--text-muted); } #filtersPanel.fp-enhanced .filter-min input { width: 48px; min-height: 26px; padding: 2px 6px; border: 1px solid var(--fp-rule-gold); border-radius: 6px; background: var(--surface); color: var(--text); font: 600 12px/1 var(--font-body, system-ui, sans-serif); text-align: center; } #filtersPanel.fp-enhanced .filter-min input:focus { outline: 2px solid var(--fp-accent); outline-offset: 1px; } /* Row note: how much of the view a dimension can see. */ #filtersPanel.fp-enhanced .fp-row-note { margin: 6px 0 0; font: 500 12px/1.4 var(--font-body, system-ui, sans-serif); font-style: italic; color: var(--text-muted); } #filtersPanel.fp-enhanced .fp-row-note[hidden] { display: none; } /* Guest echo: plum. */ #filtersPanel.fp-enhanced [data-filter="guest-echo"] .filter-chip:not(.is-active) { border-color: var(--fp-plum); color: var(--fp-plum-ink); background: color-mix(in srgb, var(--fp-plum) 10%, var(--surface)); } /* ---------- Footer ---------- */ #filtersPanel.fp-enhanced .fp-foot { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 18px 9px; flex: none; background: var(--surface); } #filtersPanel.fp-enhanced .fp-foot::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fp-rule-gold) 55%, var(--gold)); } #filtersPanel.fp-enhanced .fp-foot-match { flex: 1; font: 500 16px/1.2 var(--fp-font-title); color: var(--text); } #filtersPanel.fp-enhanced .fp-foot-match.is-zero { color: #b03020; } #filtersPanel.fp-enhanced .fp-foot-clear { border: 0; background: none; padding: 7px 10px; border-radius: 999px; font: 600 10.5px/1.2 var(--fp-font-kicker); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; } #filtersPanel.fp-enhanced .fp-foot-clear:hover { color: var(--text); background: var(--fp-wash-strong); } #filtersPanel.fp-enhanced .fp-foot-clear[hidden] { display: none; } #filtersPanel.fp-enhanced .fp-foot-done { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 14px 7px 16px; border: 1px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--fp-ink-on-gold); font: 700 12.5px/1 var(--fp-font-title); letter-spacing: .02em; cursor: pointer; transition: transform .16s, box-shadow .16s; } :root[data-theme="light"] #filtersPanel.fp-enhanced .fp-foot-done { color: #fff; } #filtersPanel.fp-enhanced .fp-foot-done svg { width: 14px; height: 14px; transition: transform .16s; } #filtersPanel.fp-enhanced .fp-foot-done:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px var(--gold); } #filtersPanel.fp-enhanced .fp-foot-done:hover svg { transform: translateX(2px); } #filtersPanel.fp-enhanced .fp-foot-done:focus-visible, #filtersPanel.fp-enhanced .fp-foot-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- Era shapes ---------- */ :root[data-era="artdeco"] #filtersPanel.fp-enhanced { --fp-radius: 3px; --fp-emblem-radius: 2px; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-emblem { position: relative; box-shadow: none; background: color-mix(in srgb, var(--fp-accent) 60%, transparent); clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%); } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-emblem::before { content: ""; position: absolute; inset: 1px; clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fp-accent) 18%, transparent), transparent 72%), var(--surface); } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-emblem svg { position: relative; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-row.has-active .fp-emblem, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-row.has-active .fp-emblem::before { background: var(--fp-accent); box-shadow: none; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .filter-chip, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .filter-chip.is-active, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-row-find, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-foot-done, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .filters-active-pill, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-row-toggle, :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-rail-entry { border-radius: 2px; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-rail-check { border-radius: 2px; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-kicker { letter-spacing: .3em; } :root[data-era="midcentury"] #filtersPanel.fp-enhanced { --fp-radius: 16px; --fp-emblem-radius: 10px; --fp-font-title: var(--font-display, system-ui, sans-serif); } :root[data-era="midcentury"] #filtersPanel.fp-enhanced .filters-panel-title { font-size: 23px; font-weight: 600; letter-spacing: -.02em; } :root[data-era="midcentury"] #filtersPanel.fp-enhanced .fp-row-toggle, :root[data-era="midcentury"] #filtersPanel.fp-enhanced .fp-rail-entry { border-radius: 12px; } :root[data-era="editorial"] #filtersPanel.fp-enhanced { --fp-radius: 0px; --fp-emblem-radius: 0; --fp-rule-gold: color-mix(in srgb, var(--text) 22%, transparent); --fp-gold-soft: color-mix(in srgb, var(--text) 45%, transparent); --fp-wash: color-mix(in srgb, var(--text) 4%, var(--surface)); --fp-wash-strong: color-mix(in srgb, var(--text) 8%, var(--surface)); --fp-font-title: var(--font-wordmark, var(--font-serif, Georgia, serif)); background: var(--surface); } :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-foot::before { background: var(--text); } :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-kicker { color: var(--text-muted); letter-spacing: .26em; } :root[data-era="editorial"] #filtersPanel.fp-enhanced .filter-chip, :root[data-era="editorial"] #filtersPanel.fp-enhanced .filter-chip.is-active, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-row-find, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-foot-done, :root[data-era="editorial"] #filtersPanel.fp-enhanced .filters-active-pill, :root[data-era="editorial"] #filtersPanel.fp-enhanced .filters-panel-close, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-row-toggle, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-rail-entry, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-row-clear, :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-rail-check { border-radius: 0; } /* ---------- Narrow and phone ---------- */ @media (max-width: 960px) { #filtersPanel.fp-enhanced .fp-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } /* The tick list as one scrolling strip of chips: tick a chip to add its row below. */ #filtersPanel.fp-enhanced .fp-rail { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px 18px 10px; border-right: 0; border-bottom: 1px solid var(--fp-rule-gold); background: var(--fp-wash); scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 18px; } #filtersPanel.fp-enhanced .fp-rail::-webkit-scrollbar { display: none; } #filtersPanel.fp-enhanced .fp-rail-head { flex: none; margin: 0 4px 0 0; } #filtersPanel.fp-enhanced .fp-rail-hint { display: none; } #filtersPanel.fp-enhanced .fp-rail-title { font-size: 10px; white-space: nowrap; } #filtersPanel.fp-enhanced .fp-rail-chapter { display: none; } #filtersPanel.fp-enhanced .fp-rail-entry { flex: none; width: auto; min-height: 40px; padding: 4px 12px 4px 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--fp-rule-gold); background: var(--surface); scroll-snap-align: start; gap: 8px; } #filtersPanel.fp-enhanced .fp-rail-entry.is-shown { box-shadow: inset 0 0 0 1.5px var(--fp-accent); background: color-mix(in srgb, var(--fp-accent) 9%, var(--surface)); } #filtersPanel.fp-enhanced .fp-rail-entry.is-open { box-shadow: inset 0 0 0 1.5px var(--fp-accent); } #filtersPanel.fp-enhanced .fp-rail-check { width: 28px; height: 28px; } #filtersPanel.fp-enhanced .fp-rail-name { white-space: nowrap; } :root[data-era="artdeco"] #filtersPanel.fp-enhanced .fp-rail-entry { border-radius: 2px; } :root[data-era="editorial"] #filtersPanel.fp-enhanced .fp-rail-entry { border-radius: 0; } } @media (max-width: 720px) { #filtersPanel.fp-enhanced { width: auto; } #filtersPanel.fp-enhanced::before { display: none; } #filtersPanel.fp-enhanced .filters-panel-head { padding: 12px 18px 10px; } #filtersPanel.fp-enhanced .filters-panel-head::after, #filtersPanel.fp-enhanced .fp-foot::before { left: 18px; right: 18px; } #filtersPanel.fp-enhanced .filters-panel-title { font-size: 26px; } #filtersPanel.fp-enhanced .filters-panel-head { flex-wrap: wrap; row-gap: 8px; } #filtersPanel.fp-enhanced .filters-panel-head-text { flex: 1 1 auto; } #filtersPanel.fp-enhanced .filters-active-summary { flex-basis: 100%; order: 10; margin: 0; padding: 2px 0 2px; border-left: 0; } #filtersPanel.fp-enhanced .filters-active-pill { min-height: 40px; font-size: 15px; } #filtersPanel.fp-enhanced .fp-ledger { padding: 2px 18px 10px; } #filtersPanel.fp-enhanced .fp-rail { padding: 8px 14px; } #filtersPanel.fp-enhanced .fp-rail-entry { min-height: 44px; } #filtersPanel.fp-enhanced .fp-row-toggle { min-height: 52px; pointer-events: none; } #filtersPanel.fp-enhanced .fp-emblem { width: 34px; height: 34px; } #filtersPanel.fp-enhanced .fp-row-chevron, #filtersPanel.fp-enhanced .fp-row-count { display: none; } #filtersPanel.fp-enhanced .fp-row-summary { display: none; } #filtersPanel.fp-enhanced .fp-row-body { display: block !important; padding: 0 0 12px 46px; } #filtersPanel.fp-enhanced .fp-row-body .fp-row-find { display: none; } #filtersPanel.fp-enhanced .filter-select-wrap { display: block; } #filtersPanel.fp-enhanced .filter-select { font-size: 16px; min-height: 44px; } #filtersPanel.fp-enhanced .fp-row[data-filter="guest-echo"] .fp-row-body { padding-bottom: 8px; } #filtersPanel.fp-enhanced .fp-row[data-filter="guest-echo"] .filter-chips { display: flex; } #filtersPanel.fp-enhanced .fp-foot { padding: 8px 18px 10px; gap: 8px; } #filtersPanel.fp-enhanced .fp-foot-match { font-size: 15px; } #filtersPanel.fp-enhanced .fp-foot-done { min-height: 44px; } } @media (max-width: 360px) { #filtersPanel.fp-enhanced .fp-row-body { padding-left: 0; } } @media (prefers-reduced-motion: reduce) { #filtersPanel.fp-enhanced * { transition-duration: 0s !important; } }