/* ==========================================================================
   Stay search results
   A sticky search bar with quick filters, photo-led cards and, on wide
   screens, the map beside the list. The dialogs (edit search, dates,
   filters) follow at the end of this file.
   ========================================================================== */

/* The search bar takes over the sticky slot, so the site header scrolls away. */
body.guest-search-results .guest-header {position: relative}
body.guest-search-results #app {overflow-x: clip}

.stay-listing-page {--results-bar-h: 132px; --results-gutter: 24px; padding-bottom: 56px}
.results-container {width: min(calc(100% - var(--results-gutter, 24px) * 2), var(--container, 1200px)); margin-inline: auto}

/* --------------------------------------------------------------------------
   Search bar
   -------------------------------------------------------------------------- */
.results-bar {position: sticky; z-index: 60; top: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); transition: box-shadow 240ms ease; backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px)}
.results-bar.is-stuck {box-shadow: 0 10px 30px rgb(52 24 38 / 8%)}
:root[data-home-theme="dark"] .results-bar.is-stuck {box-shadow: 0 10px 30px rgb(0 0 0 / 35%)}
.results-bar__inner {display: grid; gap: 12px; padding-block: 14px 12px}

.results-search-row {display: flex; align-items: center; gap: 14px}
.results-search {flex: 1; min-width: 0; max-width: 1080px; min-height: 66px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) auto; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--elev-1)}
.results-search__part {position: relative; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background-color 180ms ease}
.results-search__part + .results-search__part::before {content: ""; position: absolute; top: 13px; bottom: 13px; inset-inline-start: -1px; width: 1px; background: var(--border); transition: opacity 180ms ease}
.results-search__part:hover {background: var(--soft)}
.results-search__part:hover::before, .results-search__part:hover + .results-search__part::before {opacity: 0}
.results-search__icon {width: 36px; height: 36px; display: grid; flex: 0 0 36px; place-items: center; border-radius: 11px; background: var(--tint); color: var(--brand)}
.results-search__icon .ui-icon {width: 18px; height: 18px}
.results-search__text {min-width: 0; display: grid; gap: 1px; line-height: 1.4}
.results-search__text small {display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap}
.results-search__text small em {padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .66rem; font-style: normal; font-weight: 700}
.results-search__text strong {overflow: hidden; color: var(--ink-strong); font-size: .9rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis}
.results-search__date.needs-value strong {color: var(--brand)}
.results-search__go {min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-inline-start: 6px; padding: 0 24px; border: 0; border-radius: 14px; background: var(--home-action); color: var(--home-on-action); font: 700 .9rem/1 var(--font-ui); cursor: pointer; transition: background-color 180ms ease, scale 180ms ease}
.results-search__go:hover {background: var(--home-action-hover)}
.results-search__go:active {scale: .97}
.results-search__go .ui-icon {width: 18px; height: 18px}

.results-mobile-search {display: none}

.results-filters {min-width: 0; display: flex; align-items: center; gap: 12px}
.results-filters__scroll {min-width: 0; display: flex; flex: 1; align-items: center; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent)}
.results-filters__scroll::-webkit-scrollbar {display: none}
.results-filters__sep {width: 1px; height: 24px; flex: 0 0 1px; margin-inline: 2px; background: var(--border)}

.results-chip {min-height: 38px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .82rem/1 var(--font-ui); white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease}
.results-chip:hover {border-color: color-mix(in srgb, var(--ink) 55%, var(--border)); color: var(--ink)}
.results-chip.is-active {border-color: var(--brand); background: var(--tint); color: var(--brand-dark)}
.results-chip[aria-expanded="true"] {border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink)}
.results-chip .ui-icon {width: 16px; height: 16px; flex: 0 0 16px}
.results-chip .results-chip__caret {width: 14px; height: 14px; flex-basis: 14px; opacity: .55}
.results-chip b {min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--home-action); color: var(--home-on-action); font-size: .7rem}
.results-chip--date {display: none}
.results-chip--date.needs-value {border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: var(--tint); color: var(--brand)}
.results-chip--tag.is-active .ui-icon {width: 14px; height: 14px}

.results-map-switch {min-height: 48px; display: none; flex: 0 0 auto; align-items: center; gap: 10px; padding-block: 0; padding-inline: 14px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .82rem/1 var(--font-ui); cursor: pointer}
.results-map-switch:hover {border-color: color-mix(in srgb, var(--ink) 55%, var(--border))}
.results-map-switch i {position: relative; width: 38px; height: 22px; flex: 0 0 38px; border-radius: 11px; background: var(--color-disabled-surface); transition: background-color 200ms ease}
.results-map-switch i::after {content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: translate 220ms cubic-bezier(.34, 1.4, .64, 1)}
.results-map-switch[aria-checked="true"] i {background: var(--home-action)}
.results-map-switch[aria-checked="true"] i::after {translate: -16px 0}

/* --------------------------------------------------------------------------
   Heading, sort and applied filters
   -------------------------------------------------------------------------- */
.results-head {padding-top: 24px; margin-bottom: 18px}
.results-crumbs {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: .78rem}
.results-crumbs a {color: inherit; text-decoration: none}
.results-crumbs a:hover {color: var(--brand); text-decoration: underline}
.results-crumbs span[aria-hidden] {opacity: .5}
.results-head__row {display: flex; align-items: flex-end; justify-content: space-between; gap: 16px}
.results-head__copy {min-width: 0}
.results-head h1 {margin: 0; color: var(--ink-strong); font: 800 clamp(1.2rem, .95rem + .9vw, 1.7rem)/1.35 var(--font-display); letter-spacing: -.01em}
.results-head__page {color: var(--muted); font-weight: 600}
.results-head__count {display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 4px 0 0; color: var(--muted); font-size: .88rem}
.results-head__count strong {color: var(--ink); font-weight: 700}
.results-head__count span::before {content: ""; width: 1px; height: 13px; display: inline-block; margin-inline: 10px; background: var(--border); vertical-align: -1px}

.results-sort {position: relative; min-height: 40px; display: inline-flex; flex: 0 0 auto; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 180ms ease}
.results-sort:hover {border-color: color-mix(in srgb, var(--ink) 55%, var(--border))}
.results-sort > .ui-icon {position: absolute; inset-inline-start: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none}
.results-sort::after {content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--muted); border-width: 0 0 1.6px 1.6px; rotate: -45deg; pointer-events: none}
.results-sort select {min-height: 38px; padding-block: 0; padding-inline: 36px 34px; border: 0; border-radius: 12px; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); font: 600 .84rem/1 var(--font-ui); cursor: pointer}
.results-sort:focus-within {border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow)}

.results-applied {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px}
.results-applied a {min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .78rem; font-weight: 600; text-decoration: none; transition: background-color 180ms ease, color 180ms ease}
.results-applied a:hover {background: var(--tint); color: var(--brand-dark)}
.results-applied a .ui-icon {width: 14px; height: 14px; opacity: .7}
.results-applied a.results-applied__clear {padding-inline: 6px; background: transparent; color: var(--brand); text-decoration: underline; text-underline-offset: 3px}

.results-date-nudge {display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 10px; padding-inline-start: 16px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: 16px; background: var(--tint)}
.results-date-nudge > .ui-icon {width: 22px; height: 22px; flex: 0 0 22px; color: var(--brand)}
.results-date-nudge p {flex: 1; margin: 0; color: var(--ink); font-size: .86rem; line-height: 1.7}
.results-date-nudge button {min-height: 38px; flex: 0 0 auto; padding: 0 16px; border: 0; border-radius: 11px; background: var(--home-action); color: var(--home-on-action); font: 700 .8rem/1 var(--font-ui); cursor: pointer}
.results-date-nudge button:hover {background: var(--home-action-hover)}

/* --------------------------------------------------------------------------
   Result cards
   -------------------------------------------------------------------------- */
.stay-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px}

.stay-grid__refine {grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(135deg, var(--tint), var(--soft))}
.stay-grid__refine strong {display: block; color: var(--ink-strong); font-size: 1rem}
.stay-grid__refine span {color: var(--muted); font-size: .84rem}
.stay-grid__refine-actions {display: flex; flex-wrap: wrap; gap: 8px}
.stay-grid__refine-actions button {min-height: 40px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .82rem/1 var(--font-ui); cursor: pointer; transition: border-color 180ms ease, color 180ms ease}
.stay-grid__refine-actions button:hover {border-color: var(--brand); color: var(--brand)}

/* --------------------------------------------------------------------------
   Empty, error and pagination
   -------------------------------------------------------------------------- */
.results-empty {display: grid; justify-items: center; gap: 8px; padding: 64px 20px; text-align: center}
.results-empty[hidden], .results-error[hidden], .results-end[hidden] {display: none}
.results-empty__mark {width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--brand)}
.results-empty__mark .ui-icon {width: 30px; height: 30px}
.results-empty h2 {margin: 10px 0 0; color: var(--ink-strong); font-size: 1.2rem}
.results-empty p {max-width: 420px; margin: 0; color: var(--muted); line-height: 1.8}
.results-empty__actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px}
.results-error {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--color-danger-border); border-radius: 18px; background: var(--color-danger-surface); color: var(--color-danger-text)}
.results-error h2 {margin: 0 0 4px; font-size: 1rem}
.results-error p {margin: 0; font-size: .84rem}
.results-end {margin: 36px 0 0; color: var(--muted); font-size: .82rem; text-align: center}
.load-more-sentinel {height: 1px}

.stay-pagination {display: flex; align-items: center; justify-content: center; gap: 10px; margin: 52px 0 8px}
.stay-pagination__pages {display: flex; align-items: center; gap: 4px}
.stay-pagination__page {min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); font-weight: 700; text-decoration: none; transition: background-color 180ms ease}
.stay-pagination__page:hover {background: var(--soft)}
.stay-pagination__page.is-current {background: var(--ink-strong); color: var(--surface)}
.stay-pagination__ellipsis {padding: 0 4px; color: var(--muted)}
.stay-pagination__direction {min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: .86rem; font-weight: 700; text-decoration: none; transition: border-color 180ms ease}
.stay-pagination__direction:hover {border-color: var(--ink)}
.stay-pagination__direction .ui-icon {width: 16px; height: 16px}
.stay-pagination__page:focus-visible, .stay-pagination__direction:focus-visible {outline: 3px solid var(--color-focus-ring); outline-offset: 2px}
.stay-pagination__summary {margin: 0; color: var(--muted); font-size: .8rem; text-align: center}

/* --------------------------------------------------------------------------
   Map: beside the list on wide screens, full width in place of it below
   -------------------------------------------------------------------------- */
.results-map {display: none}
:root.results-map-open .results-map {display: block}
.results-map__frame {position: relative; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--soft)}
.stay-map {position: absolute; inset: 0}
.stay-map .ol-zoom {top: 14px; right: auto; left: 14px}
.stay-map .ol-zoom button {width: 34px; height: 34px; margin: 0; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 1.1rem; box-shadow: var(--elev-2)}
.stay-map .ol-zoom .ol-zoom-in {margin-bottom: 6px}
.results-map__count {position: absolute; z-index: 2; top: 14px; inset-inline-start: 14px; padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 700; box-shadow: var(--elev-2)}
.results-map__note {position: absolute; z-index: 2; bottom: 10px; inset-inline-end: 12px; margin: 0; padding: 3px 8px; border-radius: 7px; background: rgb(255 255 255 / 82%); color: #4f4049; font-size: .68rem}
.results-map__message {position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); font-size: .86rem}
.results-map__message[hidden] {display: none}
.results-map__message > span {width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: results-map-spin 800ms linear infinite}
.results-map__message .ui-icon {width: 30px; height: 30px; color: var(--muted)}
@keyframes results-map-spin {to {rotate: 1turn}}

.results-map__card {position: absolute; z-index: 4; bottom: 16px; inset-inline: 16px; max-width: 440px; margin-inline: auto; overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: var(--elev-3); animation: results-map-card-in 280ms cubic-bezier(.2, .8, .2, 1)}
.results-map__card[hidden] {display: none}
@keyframes results-map-card-in {from {opacity: 0; translate: 0 16px}}
.results-map__card-link {display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; padding-inline-end: 46px; color: inherit; text-decoration: none}
.results-map__card-link img {width: 112px; height: 104px; border-radius: 14px; object-fit: cover; background: var(--soft)}
.results-map__card-link > span {min-width: 0; display: grid; align-content: center; gap: 2px}
.results-map__card-link small {color: var(--muted); font-size: .74rem}
.results-map__card-link strong {overflow: hidden; color: var(--ink-strong); font-size: .95rem; white-space: nowrap; text-overflow: ellipsis}
.results-map__card-link em {color: var(--muted); font-size: .78rem; font-style: normal}
.results-map__card-link b {margin-top: 4px; color: var(--ink); font-size: .86rem}
.results-map__card-close {position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer}
.results-map__card-close .ui-icon {width: 16px; height: 16px}

.stay-map-price {min-height: 30px; padding: 0 10px; border: 1px solid rgb(0 0 0 / 8%); border-radius: 999px; background: #fff; color: #231a20; font: 800 .78rem/28px var(--font-ui); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 20%); cursor: pointer; transition: scale 160ms ease, background-color 160ms ease, color 160ms ease}
.stay-map-price:hover, .stay-map-price.is-active {scale: 1.1}
.stay-map-price.is-active, .stay-map-price.is-selected {border-color: transparent; background: #231a20; color: #fff}
.stay-map-price.is-selected {background: var(--home-action)}
.ol-overlay-container:has(.stay-map-price.is-active, .stay-map-price.is-selected) {z-index: 5}
.stay-map-price:focus-visible, .results-map__card-close:focus-visible {outline: 3px solid var(--color-focus-ring); outline-offset: 2px}

.results-view-toggle {position: fixed; z-index: 70; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; min-height: 48px; display: none; align-items: center; gap: 8px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink-strong); color: var(--surface); font: 700 .88rem/1 var(--font-ui); box-shadow: 0 12px 30px rgb(0 0 0 / 28%); translate: -50% 0; cursor: pointer; transition: scale 180ms ease}
.results-view-toggle:active {scale: .96}
.results-view-toggle .ui-icon {width: 18px; height: 18px}
.results-view-toggle__list, .results-view-toggle.is-map .results-view-toggle__map {display: none}
.results-view-toggle.is-map .results-view-toggle__list {display: block}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
    .results-map-switch {display: inline-flex}
    :root.results-map-open .results-container {width: calc(100% - var(--results-gutter) * 2); max-width: 1760px}
    :root.results-map-open .results-layout {display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 41%); align-items: start; gap: 28px}
    :root.results-map-open .stay-grid {grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 18px}
    :root.results-map-open .results-map {position: sticky; top: calc(var(--results-bar-h) + 16px); height: calc(100dvh - var(--results-bar-h) - 32px); margin-top: 24px}
}

@media (max-width: 1099px) {
    .results-search {max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto}
    .results-search__icon {display: none}
    .results-search__go {width: 52px; padding: 0}
    .results-search__go span {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
    .stay-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .results-view-toggle {display: inline-flex}
    :root.results-map-open .results-list {display: none}
    :root.results-map-open .results-map {height: calc(100dvh - var(--results-bar-h) - 24px); min-height: 420px; margin-top: 12px}
    .results-map__card {bottom: 84px}
}

@media (max-width: 767px) {
    .stay-listing-page {--results-gutter: 16px; padding-bottom: 32px}
    .results-bar__inner {gap: 10px; padding-block: 10px}
    .results-search-row, .results-chip--filters {display: none}
    .results-mobile-search {display: flex; gap: 8px}
    .results-mobile-search__main {min-width: 0; min-height: 54px; display: flex; flex: 1; align-items: center; gap: 12px; padding: 6px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; text-align: start; box-shadow: var(--elev-2); cursor: pointer}
    .results-mobile-search__main > .ui-icon {width: 20px; height: 20px; flex: 0 0 20px; color: var(--ink)}
    .results-mobile-search__main > span {min-width: 0; display: grid; line-height: 1.45}
    .results-mobile-search__main strong {overflow: hidden; color: var(--ink-strong); font-size: .9rem; white-space: nowrap; text-overflow: ellipsis}
    .results-mobile-search__main small {overflow: hidden; color: var(--muted); font-size: .74rem; white-space: nowrap; text-overflow: ellipsis}
    .results-mobile-search__filters {position: relative; width: 54px; height: 54px; display: grid; flex: 0 0 54px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer}
    .results-mobile-search__filters.is-active {border-color: var(--brand); color: var(--brand)}
    .results-mobile-search__filters .ui-icon {width: 21px; height: 21px}
    .results-mobile-search__filters b {position: absolute; top: -2px; inset-inline-end: -2px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--surface); border-radius: 999px; background: var(--home-action); color: var(--home-on-action); font-size: .66rem}
    .results-filters__scroll {margin-inline: calc(var(--results-gutter) * -1); padding-inline: var(--results-gutter); mask-image: none; -webkit-mask-image: none}
    .results-chip {min-height: 36px; padding: 0 13px; font-size: .78rem}
    .results-chip--date {display: inline-flex}

    .results-head {padding-top: 16px; margin-bottom: 16px}
    .results-crumbs {display: none}
    .results-head__row {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px}
    .results-head__copy {display: contents}
    .results-head h1 {grid-column: 1 / -1; font-size: 1.1rem}
    .results-head__count {flex-direction: column; align-items: flex-start; margin: 0; font-size: .78rem; line-height: 1.6}
    .results-head__count span::before {display: none}
    .results-sort > .ui-icon {display: none}
    .results-sort select {padding-inline: 12px 30px; font-size: .78rem}
    .results-sort::after {inset-inline-end: 12px}
    .results-date-nudge {display: none}

    .stay-grid {grid-template-columns: 1fr; gap: 30px}
    .stay-grid .stay-card__media {aspect-ratio: 16 / 11; border-radius: 16px}
    .stay-grid .stay-card__title {font-size: 1.02rem}
    .stay-grid__refine {flex-direction: column; align-items: stretch; padding: 18px}
    .stay-grid__refine-actions button {flex: 1}

    :root.results-map-open .results-map {height: calc(100dvh - var(--results-bar-h)); margin: 0 calc(var(--results-gutter) * -1)}
    :root.results-map-open .results-map__frame {border-width: 0; border-radius: 0}
    :root.results-map-open .stay-listing-page {padding-bottom: 0}
    .stay-pagination {gap: 6px; margin-top: 40px}
    .stay-pagination__direction {padding: 0 12px}
}

@media (max-width: 767px) {
    .results-view-toggle {bottom: calc(82px + env(safe-area-inset-bottom))}
    :root.results-map-open .results-map {height: calc(100dvh - var(--results-bar-h) - 66px - env(safe-area-inset-bottom))}
    .results-map__card {bottom: 76px}
}

@media (max-width: 380px) {
    .stay-pagination__direction span {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
}

@media (prefers-reduced-motion: reduce) {
    .results-bar, .results-chip, .results-search__part, .results-search__go, .filter-presets button, .filter-pill span, .filter-segmented span, .results-map-switch i, .results-map-switch i::after, .stay-map-price, .results-view-toggle {transition: none}
    .results-map__card, .filter-panel, .filter-modal__backdrop {animation: none}
    .results-map__message > span {animation-duration: 1.6s}
}

/* ==========================================================================
   Dialogs: edit search, travel dates and filters
   ========================================================================== */
.search-edit-modal[hidden],
.search-edit-options[hidden],
.search-edit-empty[hidden] { display: none; }
.search-edit-modal { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 24px; }
.search-edit-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(31, 22, 26, .62); cursor: default; backdrop-filter: blur(5px); }
.search-edit-panel { position: relative; width: min(100%, 720px); max-height: min(90vh, 860px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .58); border-radius: 25px; outline: 0; background: var(--surface); box-shadow: 0 36px 100px rgba(32, 18, 24, .32); animation: search-edit-in .2s ease both; }
@keyframes search-edit-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.search-edit-panel__header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 0 0 auto; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.search-edit-panel__header .eyebrow { margin: 0 0 2px; font-size: .72rem; }
.search-edit-panel__header .eyebrow:before { width: 18px; }
.search-edit-panel__header h2 { margin: 0; font-size: 1.5rem; }
.search-edit-panel__close { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; padding: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--canvas); color: var(--ink); cursor: pointer; }
.search-edit-panel__close .ui-icon { width: 20px; height: 20px; }
.search-edit-form { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.search-edit-panel__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; }
.search-edit-section { margin: 0; padding: 22px 0; border: 0; border-bottom: 1px solid var(--border); }
.search-edit-section legend { padding: 0; color: var(--ink); font-family: Peyda; font-size: 1.14rem; font-weight: 700; }
.search-edit-section > p { margin: 3px 0 15px; color: var(--muted); font-size: .75rem; }
.search-edit-selected { min-height: 58px; display: flex; align-items: center; gap: 11px; margin-bottom: 11px; padding: 8px 11px; border: 1px solid #e5ccd6; border-radius: 14px; background: var(--tint); }
.search-edit-selected > span,
.search-edit-dates > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 11px; background: var(--surface); color: var(--brand); }
.search-edit-selected .ui-icon,
.search-edit-dates > span:first-child .ui-icon { width: 19px; height: 19px; }
.search-edit-selected div { min-width: 0; display: grid; gap: 1px; }
.search-edit-selected small { color: var(--muted); font-size: .66rem; }
.search-edit-selected strong { overflow: hidden; color: var(--brand-dark); font-size: .86rem; white-space: nowrap; text-overflow: ellipsis; }
.search-edit-search { min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.search-edit-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.search-edit-search .ui-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); }
.search-edit-search input { width: 100%; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 16px/1.5 var(--font-ui); }
.search-edit-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 0 8px; padding: 4px; border-radius: 13px; background: var(--soft); }
.search-edit-tabs button { min-height: 42px; padding: 7px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 650 .78rem/1.5 var(--font-ui); cursor: pointer; }
.search-edit-tabs button.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 3px 12px rgba(49, 27, 37, .08); }
.search-edit-options { max-height: 245px; overflow-y: auto; overscroll-behavior: contain; padding: 3px 0 3px 4px; }
.search-edit-options__list { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.search-edit-options__list--global { grid-template-columns: 1fr; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.search-edit-options__list button { min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ink); text-align: right; font-family: var(--font-ui); cursor: pointer; }
.search-edit-options__list button:hover,
.search-edit-options__list button:focus-visible,
.search-edit-options__list button.is-selected { border-color: #ead4dc; outline: 0; background: var(--tint); color: var(--brand-dark); }
.search-edit-options__list button > span { min-width: 0; display: grid; gap: 1px; }
.search-edit-options__list b,
.search-edit-options__list small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-edit-options__list b { font-size: .78rem; }
.search-edit-options__list small { color: var(--muted); font-size: .62rem; }
.search-edit-options__list .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: transparent; }
.search-edit-options__list button.is-selected .ui-icon { color: var(--brand); }
.search-edit-empty { padding: 20px 0 5px; text-align: center; }
.search-edit-select { position: relative; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--canvas); }
.search-edit-select > span { flex: 1; color: var(--muted); font-size: .76rem; }
.search-edit-select select { min-height: 50px; padding: 0 4px 0 28px; border: 0; outline: 0; appearance: none; background: transparent; color: var(--ink); font: 650 .84rem/1.5 var(--font-ui); cursor: pointer; }
.search-edit-select .ui-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-edit-dates { width: 100%; min-height: 68px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--canvas); color: var(--ink); text-align: right; font-family: var(--font-ui); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.search-edit-dates:hover { border-color: rgba(142, 23, 79, .34); background: var(--soft); }
.search-edit-dates.needs-value { border-color: rgba(142, 23, 79, .28); background: var(--tint); }
.search-edit-dates__points { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr); align-items: center; gap: 9px; }
.search-edit-dates__points > span { min-width: 0; display: grid; gap: 1px; }
.search-edit-dates__points small { color: var(--muted); font-size: .62rem; }
.search-edit-dates__points strong { overflow: hidden; font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.search-edit-dates__points > i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.search-edit-dates > b { min-height: 40px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--brand); font-size: .7rem; white-space: nowrap; }
.search-edit-panel__footer { min-height: 78px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -12px 30px rgba(62, 31, 43, .05); }
.search-edit-panel__footer .button { min-width: 145px; }
.has-search-edit-modal { overflow: hidden; }
.search-edit-panel__close:focus-visible,
.search-edit-tabs button:focus-visible,
.search-edit-select:focus-within,
.search-edit-panel__footer .button:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.listing-date-modal[hidden] { display: none; }
.listing-date-modal { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 24px; }
.listing-date-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(31, 22, 26, .64); cursor: default; backdrop-filter: blur(4px); }
.listing-date-panel { position: relative; width: min(100%, 980px); max-height: min(92vh, 860px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .58); border-radius: 25px; outline: 0; background: var(--surface); box-shadow: 0 38px 110px rgba(32, 18, 24, .34); animation: search-edit-in .2s ease both; }
.listing-date-panel__header { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 0 0 auto; padding: 15px 22px; border-bottom: 1px solid var(--border); }
.listing-date-panel__header .eyebrow { margin: 0 0 2px; font-size: .7rem; }
.listing-date-panel__header .eyebrow:before { width: 18px; }
.listing-date-panel__header h2 { margin: 0; font-size: 1.45rem; }
.listing-date-panel__header p { margin: 2px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.65; }
.listing-date-panel__close { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; padding: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--canvas); color: var(--ink); cursor: pointer; }
.listing-date-panel__close .ui-icon { width: 20px; height: 20px; }
.listing-date-form { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.listing-date-panel__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 20px; }
.listing-date-range { display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.listing-date-range__point { min-width: 0; min-height: 72px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 15px; color: var(--ink); background: var(--canvas); text-align: right; font-family: var(--font-ui); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.listing-date-range__point:hover { border-color: rgba(142, 23, 79, .34); background: var(--soft); }
.listing-date-range__point.is-active { border-color: var(--brand); background: var(--tint); box-shadow: 0 0 0 3px rgba(142, 23, 79, .09); }
.listing-date-range__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 12px; color: var(--brand); background: var(--surface); }
.listing-date-range__icon .ui-icon { width: 20px; height: 20px; }
.listing-date-range__point > span:last-child { min-width: 0; display: grid; gap: 1px; }
.listing-date-range__point small { color: var(--muted); font-size: .64rem; }
.listing-date-range__point strong { overflow: hidden; font-size: .86rem; white-space: nowrap; text-overflow: ellipsis; }
.listing-date-range__point em { color: var(--muted); font-size: .58rem; font-style: normal; }
.listing-date-range__connector { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--soft); }
.listing-date-range__connector .ui-icon { width: 18px; height: 18px; }
.listing-date-status { min-height: 24px; margin: 9px 2px 11px; color: var(--brand-dark); font-size: .7rem; line-height: 1.7; }
.listing-date-calendar__toolbar { min-height: 50px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 5px 0 10px; border-top: 1px solid var(--border); }
.listing-date-calendar__toolbar button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; color: var(--brand); background: var(--tint); cursor: pointer; }
.listing-date-calendar__toolbar button:disabled { color: #b7afb3; background: var(--soft); cursor: not-allowed; }
.listing-date-calendar__toolbar button .ui-icon { width: 19px; height: 19px; }
.listing-date-calendar__toolbar > strong { text-align: center; font-size: .82rem; }
.listing-date-calendar__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.listing-date-calendar__month { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
.listing-date-calendar__month[hidden] { display: none; }
.listing-date-calendar__month h3 { margin: 0 0 8px; color: var(--ink); font-size: .84rem; text-align: center; }
.listing-date-calendar__weekdays,
.listing-date-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.listing-date-calendar__weekdays { margin-bottom: 4px; }
.listing-date-calendar__weekdays span { padding: 4px 0; color: var(--muted); font-size: .62rem; font-weight: 650; text-align: center; }
.listing-date-calendar__weekdays span:last-child { color: #a83232; }
.listing-date-calendar__blank { min-height: 44px; }
.listing-date-calendar__days button { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 3px 1px; border: 1px solid transparent; border-radius: 11px; color: var(--ink); background: var(--surface); font-family: var(--font-ui); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.listing-date-calendar__days button:hover:not(:disabled) { border-color: rgba(142, 23, 79, .3); background: var(--tint); }
.listing-date-calendar__days button b { font-size: .72rem; }
.listing-date-calendar__days button small { color: var(--brand); font-size: .47rem; }
.listing-date-calendar__days button:disabled { color: #b9b2b6; background: var(--soft); cursor: not-allowed; }
.listing-date-calendar__days button.is-range { border-radius: 6px; background: #f7e5ec; }
.listing-date-calendar__days button.is-entry,
.listing-date-calendar__days button.is-exit { border-color: var(--brand); border-radius: 11px; color: #fff; background: var(--brand); box-shadow: 0 0 0 3px rgba(142, 23, 79, .1); }
.listing-date-calendar__days button.is-entry small,
.listing-date-calendar__days button.is-exit small { color: #fff; }
.listing-date-panel__footer { min-height: 82px; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -12px 30px rgba(62, 31, 43, .055); }
.listing-date-panel__selection { min-width: 150px; display: grid; gap: 1px; flex: 1; }
.listing-date-panel__selection small { color: var(--muted); font-size: .62rem; }
.listing-date-panel__selection strong { font-size: .8rem; }
.listing-date-panel__footer .button { min-width: 150px; }
.listing-date-panel__footer .button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.has-listing-date-modal { overflow: hidden; }
.listing-date-panel__close:focus-visible,
.listing-date-range__point:focus-visible,
.listing-date-calendar__toolbar button:focus-visible,
.listing-date-calendar__days button:focus-visible,
.listing-date-panel__footer .button:focus-visible,
.search-edit-dates:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@keyframes filter-panel-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row label { position: relative; cursor: pointer; }
.choice-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-row span { min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: .82rem; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.choice-row input:checked + span { border-color: var(--brand); background: var(--tint); color: var(--brand-dark); font-weight: 650; }
.choice-row--type span { min-width: 100px; }
.choice-row input:focus-visible + span { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@media (max-width: 650px) {
    .search-edit-modal { align-items: end; padding: 0; }
    .search-edit-panel { width: 100%; max-height: 92dvh; border: 0; border-radius: 24px 24px 0 0; animation-name: filter-sheet-in; }
    .search-edit-panel__header { min-height: 76px; padding: 13px 18px; }
    .search-edit-panel__body { padding: 0 18px; }
    .search-edit-section { padding: 20px 0; }
    .search-edit-options { max-height: 230px; }
    .search-edit-options__list { grid-template-columns: 1fr; gap: 2px; }
    .search-edit-panel__footer { min-height: 76px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .search-edit-panel__footer .button { min-width: 0; flex: 1; }
    .search-edit-dates { grid-template-columns: 38px minmax(0, 1fr); }
    .search-edit-dates > b { display: none; }
    .listing-date-modal { align-items: end; padding: 0; }
    .listing-date-panel { width: 100%; height: 94dvh; max-height: 94dvh; border: 0; border-radius: 24px 24px 0 0; animation-name: filter-sheet-in; }
    .listing-date-panel__header { min-height: 82px; padding: 13px 16px; }
    .listing-date-panel__header h2 { font-size: 1.25rem; }
    .listing-date-panel__header p { max-width: 260px; font-size: .62rem; }
    .listing-date-panel__body { padding: 14px 14px 16px; }
    .listing-date-range { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 5px; }
    .listing-date-range__point { min-height: 64px; gap: 7px; padding: 8px; }
    .listing-date-range__icon { width: 34px; height: 34px; flex-basis: 34px; }
    .listing-date-range__icon .ui-icon { width: 17px; height: 17px; }
    .listing-date-range__point strong { font-size: .75rem; }
    .listing-date-range__point em { display: none; }
    .listing-date-range__connector { width: 24px; height: 24px; background: transparent; }
    .listing-date-range__connector .ui-icon { width: 15px; height: 15px; }
    .listing-date-status { margin-block: 8px; font-size: .63rem; }
    .listing-date-calendar__toolbar { padding-bottom: 7px; }
    .listing-date-calendar__months { grid-template-columns: 1fr; gap: 0; }
    .listing-date-calendar__month { padding: 9px; }
    .listing-date-calendar__blank,
    .listing-date-calendar__days button { min-height: 43px; }
    .listing-date-panel__footer { min-height: 106px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
    .listing-date-panel__selection { min-width: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    .listing-date-panel__footer .button { min-width: 0; width: 100%; }
}

@keyframes filter-sheet-in {
    from { opacity: 0; transform: translateY(28px); }
}

@media (prefers-reduced-motion: reduce) {
    .search-edit-panel,
    .listing-date-panel,
    .listing-date-range__point,
    .listing-date-calendar__days button,
    .search-edit-tabs button { animation: none; transition: none; }
}

@media (max-width: 650px) {
    .search-edit-panel { padding-top:8px; border-radius:26px 26px 0 0; }
    .search-edit-panel:before { position:absolute; z-index:2; top:7px; right:50%; width:42px; height:4px; border-radius:99px; background:#d8cbd0; content:""; transform:translateX(50%); }
    .search-edit-panel__header { padding-top:18px; }
    .search-edit-panel__header .eyebrow { display:none; }
    .search-edit-panel__header h2 { font-size:1.25rem; }
    .search-edit-panel__footer { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

.search-edit-panel,
.listing-date-panel { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--home-shadow); }
.search-edit-panel__header,
.search-edit-panel__footer,
.listing-date-panel__header,
.listing-date-panel__footer { background: var(--surface); border-color: var(--border); }
.search-edit-panel__header h2,
.listing-date-panel__header h2 { font-size: 1.4rem; }
.search-edit-field > span { font-size: .875rem; }
.search-edit-panel input,
.search-edit-panel select { background: var(--canvas); color: var(--ink); font-size: 16px; border-color: var(--border); }
.listing-date-day.is-entry,
.listing-date-day.is-exit { background: var(--home-action); color: var(--on-action); border-color: var(--home-action); }
@media(max-width:767px) {
    .listing-date-panel__footer .button { font-size: .8125rem; }
}

.listing-date-calendar__days button { background: var(--surface); color: var(--ink); min-height: 48px; }
.listing-date-calendar__days button:disabled { background: var(--soft); color: var(--muted); }
.listing-date-calendar__days button.is-range { background: var(--tint); }
.listing-date-calendar__days button.is-entry,
.listing-date-calendar__days button.is-exit { background: var(--home-action); color: var(--on-action); border-color: var(--home-action); }
.listing-date-calendar__days button b { font-size: .8125rem; }
.listing-date-calendar__days button small { font-size: .5625rem; }
.search-edit-section > p,
.listing-date-panel__header p,
.listing-date-status { font-size: .8125rem; line-height: 1.8; }
.search-edit-section legend { font-size: 1.0625rem; }
.listing-date-range__point small,
.listing-date-range__point em { font-size: .75rem; }
.listing-date-range__point strong { font-size: .9375rem; }
.listing-date-panel__selection small { font-size: .75rem; }
.listing-date-panel__selection strong { font-size: .875rem; }
.listing-date-calendar__weekdays span { font-size: .75rem; }
.listing-date-panel__header .eyebrow { display: none; }
.choice-row input:checked + span { color: var(--brand); background: var(--tint); border-color: var(--brand); box-shadow: none; }
.search-edit-panel,
.listing-date-panel { box-shadow: var(--elev-3); }
.search-edit-panel__footer .button,
.listing-date-panel__footer .button { border-radius: var(--radius-pill); }
.search-edit-destinations { max-height: 340px; margin-top: 10px; padding: 0 0 4px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.search-edit-destinations [hidden] { display: none !important; }
.search-edit-destinations.is-searching { display: flex; flex-direction: column; }
.search-edit-destinations.is-searching > [data-search-edit-heading="provinces"],
.search-edit-destinations.is-searching > [data-search-edit-section="provinces"] { order: 1; }
.search-edit-destinations.is-searching > [data-search-edit-heading="cities"],
.search-edit-destinations.is-searching > [data-search-edit-section="cities"] { order: 2; }
.search-edit-options__heading { position: sticky; top: 0; z-index: 1; display: block; padding: 10px 2px 6px; background: var(--surface); color: var(--muted); font-size: .8125rem; font-weight: 600; }
.search-edit-options__list b { font-size: .875rem; }
.search-edit-options__list small { font-size: .75rem; }
.search-edit-options__list button.is-empty b { color: var(--muted); font-weight: 500; }
@media (max-width: 767px) {
    .search-edit-destinations { max-height: 300px; }
    .search-edit-options__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Filters: the full panel, or one group opened from its chip
   -------------------------------------------------------------------------- */
.has-filter-modal {overflow: hidden}
:is(.has-filter-modal, .has-search-edit-modal, .has-listing-date-modal) .results-view-toggle {visibility: hidden}
.filter-modal[hidden] {display: none}
.filter-modal {position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 24px}
.filter-modal__backdrop {position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgb(31 22 26 / 55%); cursor: default; animation: filter-fade-in 200ms ease; backdrop-filter: blur(4px)}
.filter-panel {position: relative; width: min(100%, 680px); max-height: min(88dvh, 820px); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; outline: 0; background: var(--surface); box-shadow: var(--elev-3); animation: filter-panel-rise 260ms cubic-bezier(.2, .8, .2, 1)}
.filter-panel__header {min-height: 64px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; padding-inline: 22px 12px; border-bottom: 1px solid var(--border)}
.filter-panel__header h2 {margin: 0; color: var(--ink-strong); font: 800 1.12rem/1.4 var(--font-display)}
.filter-panel__close {width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 180ms ease}
.filter-panel__close:hover {background: var(--soft)}
.filter-panel__close .ui-icon {width: 20px; height: 20px}
.filter-form {min-height: 0; display: flex; flex: 1; flex-direction: column}
.filter-panel__body {min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px}
.filter-group {padding: 22px 0; border-bottom: 1px solid var(--border)}
.filter-group:last-of-type {border-bottom: 0}
.filter-group__head {margin-bottom: 14px}
.filter-group__head h3 {margin: 0; color: var(--ink-strong); font: 700 1rem/1.5 var(--font-ui)}
.filter-group__head p {margin: 2px 0 0; color: var(--muted); font-size: .8rem}

.filter-presets {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px}
.filter-pills {display: flex; flex-wrap: wrap; gap: 8px}
.filter-pill {position: relative}
.filter-pill input, .filter-segmented input {position: absolute; width: 1px; height: 1px; opacity: 0}
.filter-presets button, .filter-pill span {min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .82rem/1 var(--font-ui); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease}
.filter-presets button:hover, .filter-pill span:hover, .filter-segmented span:hover {border-color: color-mix(in srgb, var(--ink) 50%, var(--border))}
.filter-presets button[aria-pressed="true"], .filter-pill input:checked + span, .filter-segmented input:checked + span {border-color: var(--brand); background: var(--tint); color: var(--brand-dark)}
.filter-pill input:focus-visible + span, .filter-segmented input:focus-visible + span {outline: 2px solid var(--brand); outline-offset: 2px}
.filter-pill .ui-icon {width: 18px; height: 18px; color: var(--muted)}
.filter-pill input:checked + span .ui-icon {color: var(--brand)}
.filter-pill__dot {width: 8px; height: 8px; border-radius: 50%; background: var(--filter-tag-color, var(--brand))}

.filter-price {display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 8px}
.filter-price__field {min-width: 0; display: grid; grid-template-areas: "label label" "input unit"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: text; transition: border-color 180ms ease, box-shadow 180ms ease}
.filter-price__field:focus-within {border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow)}
.filter-price__field span {grid-area: label; color: var(--muted); font-size: .72rem}
.filter-price__field input {grid-area: input; width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink-strong); font: 700 1rem/1.6 var(--font-ui)}
.filter-price__field input::placeholder {color: var(--muted); font-size: .86rem; font-weight: 500}
.filter-price__field small {grid-area: unit; color: var(--muted); font-size: .74rem}
.filter-price__dash {height: 1px; background: var(--border)}

.filter-segmented {display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 6px}
.filter-segmented label {position: relative; min-width: 0}
.filter-segmented span {min-height: 44px; display: grid; place-items: center; padding: 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 .84rem/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease}

.filter-panel__footer {display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface)}
.filter-panel__reset {min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font: 700 .88rem/1 var(--font-ui); text-decoration: underline; text-underline-offset: 4px; cursor: pointer}
.filter-panel__reset:hover {color: var(--brand)}
.guest-body .filter-panel__apply {min-width: 210px; transition: opacity 180ms ease, background-color 180ms ease}
.guest-body .filter-panel__apply.is-counting {opacity: .7}

/* One group from its chip: no inner title, a narrower panel. */
.filter-modal.is-single .filter-group:not(.is-focused) {display: none}
.filter-modal.is-single .filter-group.is-focused {padding-top: 18px; border-bottom: 0}
.filter-modal.is-single .filter-group.is-focused .filter-group__head h3 {display: none}
.filter-modal.is-single .filter-group.is-focused .filter-group__head:not(:has(p)) {display: none}
.filter-modal.is-single .filter-panel {width: min(100%, 460px)}
.filter-modal.is-popover {display: block; padding: 0}
.filter-modal.is-popover .filter-modal__backdrop {background: transparent; backdrop-filter: none}
.filter-modal.is-popover .filter-panel {position: fixed; top: var(--popover-top, 120px); right: var(--popover-right, 24px); width: 420px; max-height: calc(100dvh - var(--popover-top, 120px) - 16px); border: 1px solid var(--border); border-radius: 20px; animation: filter-pop-in 200ms cubic-bezier(.2, .8, .2, 1); transform-origin: top right}
.filter-modal.is-popover .filter-panel__header {min-height: 54px; padding-inline: 18px 8px}
.filter-modal.is-popover .filter-panel__header h2 {font-size: 1rem}
.filter-modal.is-popover .filter-panel__body {padding: 0 18px}
.filter-modal.is-popover .filter-panel__footer {padding: 10px 14px 10px 18px}
.guest-body .filter-modal.is-popover .filter-panel__apply {min-width: 0; min-height: 44px; padding-inline: 18px}
@keyframes filter-fade-in {from {opacity: 0}}
@keyframes filter-panel-rise {from {opacity: 0; translate: 0 14px}}
@keyframes filter-pop-in {from {opacity: 0; scale: .97; translate: 0 -6px}}
@keyframes filter-sheet-up {from {translate: 0 100%}}

@media (max-width: 767px) {
    .filter-modal {align-items: end; padding: 0}
    .filter-panel {width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; animation: filter-sheet-up 300ms cubic-bezier(.2, .8, .2, 1)}
    .filter-modal:not(.is-single) .filter-panel {height: 92dvh}
    .filter-modal.is-single .filter-panel {width: 100%}
    .filter-panel::before {content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border)}
    .filter-panel__header {min-height: 62px; padding-top: 18px; padding-inline: 18px 10px}
    .filter-panel__body {padding: 0 16px}
    .filter-panel__footer {padding: 12px 16px calc(12px + env(safe-area-inset-bottom))}
    .guest-body .filter-panel__apply {min-width: 0; flex: 1}
    .filter-segmented {grid-template-columns: 1.75fr repeat(5, minmax(0, 1fr)); gap: 5px}
    .filter-segmented span {padding: 0 2px; font-size: .78rem}
    .filter-price {grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); gap: 6px}
    .filter-price__field {padding: 8px 11px}
}