/* Hotel search layout - sidebar, header, grid */

.hotel-search {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Sidebar with filters */

.hotel-search__sidebar {
  width: 260px;
  flex-shrink: 0;
}

.filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.filter-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-sidebar__heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-sidebar__amenity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

/* HMS-561 — the truncate toggle is a bare <button> so it submits nothing; it
   reads as a quiet link under the last visible option. */
.filter-sidebar__toggle {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--wa-color-brand);
  cursor: pointer;
}
.filter-sidebar__toggle:hover { text-decoration: underline; }

/* Same [hidden] trap as .hotel-search__suggestions below: WA's native.css gives
   every <button> display:inline-flex, which beats the UA [hidden] rule, so the
   filter-truncate controller's .hidden flag never hid the toggle on short
   sections. State it explicitly. */
.filter-sidebar__toggle[hidden] { display: none; }

.filter-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

/* Content area */

.hotel-search__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Results header */

.hotel-search__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hotel-search__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.hotel-search__date-range {
  white-space: nowrap;
}

.hotel-search__count-split {
  font-size: 1rem;
  font-weight: 400;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}

.hotel-search__toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  /* The header is space-between, so the toolbar must be allowed to shrink
     below its content width - without min-width:0 the flex items bottom out at
     min-content and the Search button overflows the viewport edge. */
  min-width: 0;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wa-color-neutral-fill-normal);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-raised);
}

.hotel-search__toolbar-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

/* HMS-440/HMS-1115 — the top strip carries the range picker next to the name
   search and sort; it keeps a steady footprint so the row reads like a search
   bar instead of collapsing to min-content. */
.hotel-search__toolbar-form .stay-range {
  width: 21rem;
  max-width: 100%;
  flex: 0 0 auto;
}

.hotel-search__toolbar-form wa-select[name="sort"] {
  min-width: 140px;
  flex: 0 0 auto;
}

/* Name suggestions.

   The wrapper is the positioning context; the list hangs under the field rather
   than pushing the toolbar down, because a toolbar that grows on every keystroke
   moves the Search button out from under the pointer.

   Colours come from --wa-* tokens. A brand hex here is a bug and there is a test
   asserting it. */

.hotel-search__suggest {
  position: relative;
  display: flex;
  flex-direction: column;
  /* The only flexible piece of the toolbar form: it absorbs whatever width the
     sort select and Search button leave, instead of the row overflowing. */
  flex: 1 1 auto;
  min-width: 0;
}

.hotel-search__suggest wa-input {
  width: 100%;
}

.hotel-search__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-fill-normal);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-m);
}

/* [hidden] loses to `display: flex`/`block` on specificity ties, and the
   controller toggles the property rather than a class. Stated explicitly so an
   empty list cannot render as an empty box. */
.hotel-search__suggestions[hidden] {
  display: none;
}

.hotel-search__suggestion {
  padding: 0.5rem 0.625rem;
  border-radius: var(--wa-border-radius-s);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__suggestion:hover,
.hotel-search__suggestion:focus {
  background: var(--wa-color-neutral-fill-quiet);
  outline: none;
}

/* Responsive grid - 3-up desktop, 2-up tablet, 1-up mobile */

.hotel-search__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .hotel-search__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3-up starts at 1280, not 1024: at exactly 1024 the sidebar (260px) plus
   three columns squeezes each card under ~200px — names wrap mid-word and the
   price range breaks after its own dash. Two columns stays comfortable until
   the sidebar leaves enough room for a real third. */
@media (min-width: 1280px) {
  .hotel-search__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: collapse sidebar into a top filter bar */

@media (max-width: 1023px) {
  .hotel-search {
    flex-direction: column;
  }

  .hotel-search__sidebar {
    width: 100%;
  }
}

/* Narrow desktop / tablet: keep the toolbar from overflowing the content area
   while the sidebar is still visible. With the 260px sidebar beside it, the
   header does not fit the title plus the full toolbar until the ~1400px
   container cap is reached - the collision band runs 640–1400px, not just to
   1200px. Above the cap the search input shrinks instead (see min-width:0 on
   .hotel-search__suggest). */

@media (max-width: 1400px) and (min-width: 640px) {
  .hotel-search__header {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hotel-search__toolbar {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Mobile: simplify header */

@media (max-width: 639.98px) {
  .hotel-search {
    padding: 1rem 1rem 6rem;
  }

  .hotel-search__header {
    flex-direction: column;
    align-items: stretch;
  }

  /* The toolbar row (view toggle + Filters + search form) is wider than a 390px
     viewport laid side by side. Let the form drop to its own full-width row. */
  /* The fixed view-fab owns a 3rem-wide column pinned 1rem off the right edge
     (bottom: 8.75rem, above the chat bubble). Without this clearance its top
     half lands on the Sort-by select's chevron and a tap there navigates to
     map view instead of opening the sort menu. */
  .hotel-search__toolbar {
    flex-wrap: wrap;
    padding-right: 4rem;
  }

  .hotel-search__toolbar-form {
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 100%;
  }
}

/* View toggle */

.hotel-search__view-toggle-group {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--wa-color-surface-raised);
  border-radius: var(--wa-border-radius-m);
}

.hotel-search__view-toggle {
  padding: 0.5rem 0.75rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.875rem;
  color: var(--wa-color-text-normal);
  text-decoration: none;
  white-space: nowrap;
}

.hotel-search__view-toggle--active {
  background: var(--wa-color-surface-default);
  font-weight: 600;
}

.hotel-search__mobile-filter-button {
  display: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-neutral-fill-normal);
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font-size: 0.875rem;
  cursor: pointer;
}

.hotel-search__filter-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
  background: var(--wa-color-surface-default);
  align-items: stretch;
}

/* HMS-117 - sponsored listings are separated above organic results. */
.hotel-search__sponsored {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hotel-search__sponsored-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

/* HMS-741/749 — the results section heading and the notes that keep the
   sponsored block visually distinct from the actual results. */
.hotel-search__results-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__sponsored-note,
.hotel-search__no-matches {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hotel-search__recommended {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-search__recommended-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.hotel-search__recommended-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__filter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.hotel-search__filter-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--wa-color-neutral-fill-quiet);
}

.hotel-search__filter-dialog-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.hotel-search__filter-dialog-close {
  padding: 0.375rem 0.75rem;
  border: none;
  background: transparent;
  /* fill-normal resolves to brand-90 (var(--wa-color-brand-90)): ~1.3:1 on white — see
     portal_header.css. Text links use --wa-color-text-link. */
  color: var(--wa-color-text-link);
  font-size: 0.875rem;
  cursor: pointer;
}

/* HMS-1404 — the dialog body had no padding (header carried the only inset), so
   fields hugged the edges, and the actions row sat at the bottom of a ~1400px
   scroll. Internal padding plus a sticky actions bar keeps the controls
   uniformly spaced and the bottom action reachable while scrolling. */
.hotel-search__filter-dialog .filter-sidebar {
  padding: 1rem;
}

.hotel-search__filter-dialog .filter-sidebar__actions {
  position: sticky;
  bottom: 0;
  padding-block: 0.75rem;
  background: var(--wa-color-surface-default);
}

@media (max-width: 1023px) {
  .hotel-search__sidebar--desktop {
    display: none;
  }

  .hotel-search__mobile-filter-button {
    display: inline-flex;
  }
}

/* Map view */

.hotel-search__map {
  flex: 1;
  min-width: 0;
  min-height: 30rem;
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}

/* Figma 516:5528 — results rail: the map fills the space beside it, so the
   wrap owns the height and both children stretch. 14rem approximates the
   portal header + page padding + search toolbar above the fold; the min
   keeps the map usable when the toolbar wraps tall. */
.hotel-search__map-wrap {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  height: max(30rem, calc(100dvh - 14rem));
}

.hotel-search__map-wrap .hotel-search__map {
  min-height: 0;
  height: auto;
}

.hotel-search__map-rail {
  width: 20rem;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hotel-search__map-rail-title {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.hotel-search__map-rail-search {
  margin-bottom: 0.75rem;
}

.map-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  /* HMS-575 — hide the scrollbar entirely: a rendered scrollbar shrinks the
     cards but not the rail search above them, so the edges never line up on
     classic-scrollbar platforms. Figma shows no rail scrollbar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.map-rail__list::-webkit-scrollbar {
  display: none;
}

/* HMS-575 — native.css indents every li 1.125em for marker space; these
   markerless items must sit flush with the rail search above them. */
.map-rail__list > li {
  margin-inline-start: 0;
}

/* HMS-575 — two-row grid: name+"from" on row 1, stars/distance+price on row 2
   (Figma 516:5528). The .map-rail__price wrapper is display:contents so its two
   spans land in their own grid areas. */
.map-rail__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price-from"
    "meta price-rate";
  column-gap: 0.625rem;
  row-gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  text-decoration: none;
  color: var(--wa-color-text-normal);
  transition: border-color .15s;
}

.map-rail__card:hover {
  border-color: var(--wa-color-brand);
}

.map-rail__name {
  grid-area: name;
  font-weight: 700;
  font-size: 0.9375rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-rail__price {
  display: contents;
  line-height: 1.2;
}

.map-rail__price-from {
  grid-area: price-from;
  justify-self: end;
  font-size: 0.6875rem;
  color: var(--wa-color-text-quiet);
}

.map-rail__price-rate {
  grid-area: price-rate;
  justify-self: end;
  align-self: center;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.map-rail__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.map-rail__card--active {
  border-color: var(--wa-color-brand);
  box-shadow: 0 0 0 1px var(--wa-color-brand);
  background: var(--wa-color-brand-fill-quiet);
}

.map-rail__empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.map-rail__list > li[hidden] {
  display: none;
}

.map-rail__stars {
  color: var(--wa-color-warning);
  font-size: 0.75rem;
}

.map-rail__distance {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-loud);
  color: var(--wa-color-neutral-on-loud);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.hotel-map-popup {
  min-width: 180px;
  position: relative;
}

.hotel-map-popup__image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--wa-border-radius-s);
  margin-bottom: 0.5rem;
}

.hotel-map-popup__name {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.hotel-map-popup__rate {
  margin: 0 0 0.5rem;
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.hotel-map-popup__link {
  /* fill-normal resolves to brand-90 (var(--wa-color-brand-90)): ~1.3:1 on the white popup. */
  color: var(--wa-color-text-link);
  text-decoration: none;
  font-weight: 600;
}

/* HMS-922 — the popup heart sits inline after the details link. */
.hotel-map-popup > form.button_to {
  display: inline;
  margin: 0;
}
.hotel-map-popup__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}
.hotel-map-popup__fav--saved {
  color: var(--wa-color-brand);
}
.hotel-map-popup__fav:focus-visible {
  outline: 2px solid var(--wa-color-brand);
  outline-offset: 2px;
}

.hotel-search__map-error {
  padding: 2rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
}

/* Mobile overrides MUST come after the base map rules above — equal
   specificity resolves by source order, which is why the earlier attempt
   (overrides before the base block) never applied. The wrap-qualified
   selector is required: `.hotel-search__map-wrap .hotel-search__map` base
   (0,2,0) outranks a bare `.hotel-search__map` (0,1,0) regardless of order.
   height:auto on the wrap + all-absolute Mapbox children would otherwise
   collapse the map to zero height on mobile. */
@media (max-width: 1023px) {
  .hotel-search__map-wrap {
    height: auto;
  }

  .hotel-search__map-wrap .hotel-search__map {
    min-height: 60dvh;
  }

  .hotel-search__map-rail {
    display: none;
  }
}

/* Empty state */

/* HMS-577 — Figma 516:5528: the empty state sits on a quiet gray panel with a
   building-in-orbit illustration — a central dashed ring and four satellite
   chips — not a single icon. */
.hotel-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-l);
}

.hotel-search__empty h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-search__empty p {
  margin: 0;
  color: var(--wa-color-text-quiet);
  max-width: 26rem;
}

.hotel-search__empty > i {
  font-size: 3rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__empty-count {
  font-weight: 400;
}

.hotel-search__empty-cluster {
  position: relative;
  width: 9rem;
  height: 9rem;
  margin-bottom: 0.5rem;
}

.hotel-search__empty-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--wa-color-neutral-on-quiet);
  border-radius: 50%;
  font-size: 1.75rem;
  color: var(--wa-color-neutral-on-quiet);
}

.hotel-search__empty-sat {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px dashed var(--wa-color-neutral-on-quiet);
  font-size: 0.6875rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__empty-sat--tl { top: 0; left: 0.5rem; }
.hotel-search__empty-sat--tr { top: 0.375rem; right: 0; }
.hotel-search__empty-sat--bl { bottom: 0.375rem; left: 0; }
.hotel-search__empty-sat--br { bottom: 0; right: 0.5rem; }

/* Was three inline style attributes in the markup. Moved here so style-src-attr
   can stay strict in the CSP: the only inline styles left on the page are the
   <style> blocks Web Awesome injects, which we cannot remove and do not control. */
.filter-sidebar__actions wa-button {
  width: 100%;
}

/* Add Room banner — Figma 516:7972. The slim strip that sits above the search
   results when the attendee is mid-way through the add-room journey: the linked
   booking on the left, the change link on the right. role="status" is on the
   element itself, so no aria rules here. */
.add-room-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.625rem 1rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}

.add-room-banner__text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.add-room-banner__text i {
  color: var(--wa-color-brand);
}

.add-room-banner__text strong {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.add-room-banner__note {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.add-room-banner__change {
  color: var(--wa-color-brand);
  font-weight: 600;
  text-decoration: none;
}

.add-room-banner__change:hover,
.add-room-banner__change:focus {
  text-decoration: underline;
}

/* ── Floating map/list toggle — mobile only (Figma 576:3733) ────────── */

/* A fixed bottom-right pill stacked ABOVE the chatbot bubble: the toggle is a
   3.5rem circle pinned 1.5rem off the corner, so this sits 0.75rem above its
   top edge rather than colliding with it. */
.hotel-search__view-fab {
  position: fixed;
  bottom: 5.75rem;
  right: 1rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--wa-shadow-l);
}

.hotel-search__view-fab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  /* HMS-1393 — Figma's inactive FAB half: Neutral/Fill/Quiet fill and a 1px
     Neutral/Border/Normal edge; plain surface-raised read as a white ghost
     on the lowered page. */
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-normal);
  font-size: 1.0625rem;
  text-decoration: none;
}

/* HMS-1393 — the border belongs to the inactive half alone; the selected
   half keeps its plain brand fill. */
.hotel-search__view-fab-item:not(.hotel-search__view-fab-item--active) {
  border: 1px solid var(--wa-color-neutral-border-normal);
}

.hotel-search__view-fab-item--active {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

@media (min-width: 640px) {
  .hotel-search__view-fab {
    display: none;
  }
}

/* The floating pill REPLACES the toolbar toggle on phones (Figma 576:3733) —
   showing both would be the same control twice on one screen. The doubled
   class on the second selector is a specificity pin: --segment's rules are
   declared LATER in this file, and an equal-specificity later display would
   win and re-show the toggle alongside the pill. */
@media (max-width: 639.98px) {
  .hotel-search__view-toggle-group,
  .hotel-search__view-toggle-group.hotel-search__view-toggle-group--segment {
    display: none;
  }
}

/* Event-named hero band on the listing (HMS-402): the brand gradient carries
   the wordmark + name/dates; the already-booked link sits on the right. */
.event-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.25rem;
  border-radius: var(--wa-border-radius-l, 0.75rem);
  /* Stops come from the emit, not a fixed pair: white on-loud means the
     gradient must stay at or below stop 50 (40→30 keeps AA margin even at the
     boundary primary), dark on-loud means it should stay pale (70→80).
     var(--wa-color-brand-*) fallbacks cover any page that does not emit. */
  background-image: linear-gradient(135deg,
    var(--ek-hero-grad-a, var(--wa-color-brand-50)),
    var(--ek-hero-grad-b, var(--wa-color-brand-40)));
  /* on-loud, not white: the emit flips it to the darkest stop for light brand
     colors — white on a #f4d03f gradient is a 1.4:1 WCAG failure. */
  color: var(--wa-color-brand-on-loud, white);
}

.event-hero__brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.event-hero__logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  flex-shrink: 0;
}

.event-hero__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wa-color-brand-on-loud, white);
}

.event-hero__dates {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-brand-on-loud, white);
}

.event-hero__booked {
  flex-shrink: 0;
  padding: 0.5rem 0.875rem;
  border-radius: var(--wa-border-radius-m);
  background: color-mix(in srgb, var(--wa-color-brand-on-loud, white) 14%, transparent);
  color: var(--wa-color-brand-on-loud, white);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.event-hero__booked:hover {
  background: color-mix(in srgb, var(--wa-color-brand-on-loud, white) 24%, transparent);
  color: var(--wa-color-brand-on-loud, white);
}

@media (max-width: 40rem) {
  .event-hero {
    padding: 1rem;
  }

  .event-hero__logo {
    max-width: 8rem;
  }

  .event-hero__brand {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* HMS-429 — photographic hero: the demo pack ships a CC-licensed photo per
   event at /demo/heroes/<short_code>.jpg. A two-stop dark scrim keeps white
   text readable on any photograph, so the photo variant always uses white
   (never --wa-color-brand-on-loud — that var exists for the brand gradient). */
.event-hero--photo {
  min-height: 12rem;
  align-items: flex-end;
  padding-block: 1.75rem 1.25rem;
  background-image:
    linear-gradient(180deg, rgba(6, 14, 24, 0.18) 0%, rgba(6, 14, 24, 0.62) 100%),
    var(--ek-hero-photo);
  background-size: cover;
  background-position: center;
  color: white;
}

/* The name/dates keep --wa-color-brand-on-loud on the gradient, but the photo
   variant's scrim is dark by design — force white so a light-primary brand can
   never paint dark text on the scrim. */
.event-hero--photo .event-hero__name,
.event-hero--photo .event-hero__dates {
  color: white;
}

.event-hero--photo .event-hero__booked {
  color: white;
  border-color: rgba(255, 255, 255, 0.75);
}

.event-hero--photo .event-hero__booked:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.event-hero__policy {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 46ch;
  opacity: 0.92;
}

@media (max-width: 640px) {
  .event-hero--photo {
    min-height: 9.5rem;
  }
}

/* HMS-433 — the Concierge-class policy block: 2-3 concrete housing facts as a
   compact dot-separated strip under the tagline. White-on-scrim like the
   rest of the photo variant; wraps on narrow widths. */
.event-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.875rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.event-hero__facts li {
  display: flex;
  align-items: baseline;
}

.event-hero__facts li + li::before {
  content: "\00b7";
  margin-right: 0.875rem;
  opacity: 0.6;
}

/* HMS-437 — the view toggle gets segmented-control chrome so the Map entry
   reads at scan distance instead of a quiet text link (Groupize parity). */
.hotel-search__view-toggle-group--segment {
  display: inline-flex;
  padding: 0.1875rem;
  gap: 0.125rem;
  border-radius: 9999px;
  background: var(--wa-color-surface-raised);
  box-shadow: var(--wa-shadow-l);
}

.hotel-search__view-toggle-group--segment .hotel-search__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-weight: 600;
}

.hotel-search__view-toggle-group--segment .hotel-search__view-toggle:not(.hotel-search__view-toggle--active):hover {
  background: var(--wa-color-neutral-fill-quiet);
}

/* HMS-1393 — the unselected segment wears the same Figma chrome as the FAB's
   inactive half: Neutral/Fill/Quiet fill with a Neutral/Border/Normal edge.
   Without it the segment read as a white ghost on the raised track — the same
   QA finding the FAB fix answered, on the control tablets and desktops get. */
.hotel-search__view-toggle-group--segment .hotel-search__view-toggle:not(.hotel-search__view-toggle--active) {
  background: var(--wa-color-neutral-fill-quiet);
  border-color: var(--wa-color-neutral-border-normal);
}

/* HMS-506 — the active segment needs a fill that reads: surface-default on
   surface-raised is two near-whites and QA could not tell which view was
   live. Same brand fill the mobile FAB uses for its own active state. */
.hotel-search__view-toggle-group--segment .hotel-search__view-toggle--active {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

/* HMS-437 — custom hotel pin, now a Figma price pill: white pill, brand text,
   the nightly rate the guest cares about instead of a generic icon. Sizing is
   em-based so the JS zoom-shrink writes font-size only and the pill follows.
   --generic covers recommended hotels whose rate is nil. */
.hotel-map-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-brand);
  border: 1.5px solid var(--wa-color-brand);
  box-shadow: var(--wa-shadow-s);
}

.hotel-map-marker--generic {
  padding: 0.35em 0.5em;
}

/* The pinned-open popup's pill inverts, like the rail card's selected state. */
.hotel-map-marker--active {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

/* Figma draws the venue as a yellow pill with a star — the old stock red
   teardrop made it look like a hotel pin. */
.hotel-map-venue {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
  border: 1.5px solid var(--wa-color-warning);
  box-shadow: var(--wa-shadow-s);
}

.hotel-map-venue i {
  color: var(--wa-color-warning);
}

.hotel-map-venue[role="button"] { cursor: pointer; }
.hotel-map-venue:focus-visible { outline: 2px solid var(--wa-color-focus, #2b6cb0); outline-offset: 2px; }
.hotel-map-venue-pop { font-size: var(--wa-font-size-s); }
.hotel-map-venue-pop__name { font-weight: 600; margin: 0 0 0.25rem; }
.hotel-map-venue-pop__venue, .hotel-map-venue-pop__address, .hotel-map-venue-pop__dates { margin: 0 0 0.25rem; color: var(--wa-color-neutral-on-quiet, #555); }
.hotel-map-venue-pop__directions { display: inline-block; margin-top: 0.25rem; }
.hotel-map-venue-pop__near { display: block; margin-top: 0.5rem; padding: 0.3rem 0.6rem; border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m, 6px); background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet, inherit); cursor: pointer; font: inherit; }

/* HMS-437 — concierge popup card: the stock popup carried only a name, rate
   and link; the card now carries stars, badges and a CTA. The existing
   .hotel-map-popup* rules above are untouched. */
.hotel-map-popup {
  max-width: 15rem;
}

.hotel-map-popup__stars {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--wa-color-brand);
  font-size: 0.75rem;
}

.hotel-map-popup__badge {
  display: inline-block;
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hotel-map-popup__badge--negotiated {
  background: var(--wa-color-brand);
  color: var(--wa-color-brand-on-loud);
}

.hotel-map-popup__badge--recommended {
  background: var(--wa-color-neutral-fill-normal);
  color: var(--wa-color-text-normal);
}

.hotel-map-popup__address,
.hotel-map-popup__distance,
.hotel-map-popup__rooms {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

.hotel-map-popup__cta {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--wa-color-brand-on-loud);
  background: var(--wa-color-brand-fill-loud);
}

/* HMS-368 — active-filter chips under the search header */
.hotel-search__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.hotel-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.hotel-search__chip:hover {
  background: var(--wa-color-brand-fill-normal);
  text-decoration: none;
}

.hotel-search__chip i {
  font-size: 0.6875rem;
}

.hotel-search__chips-clear {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  text-decoration: underline;
}

/* HMS-368 — hotels that count as available but cannot be pinned */
.hotel-search__unmapped {
  margin-top: 1.5rem;
}

.hotel-search__unmapped-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-search__unmapped-note {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-search__unmapped-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hotel-search__unmapped-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.hotel-search__unmapped-link {
  color: var(--wa-color-text-link);
  font-weight: 600;
}

.hotel-search__unmapped-city {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

@media (max-width: 639.98px) {
  .hotel-search__unmapped-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
}

/* HMS-560 — the noscript fallback for Apply filters. A native <button>
   (a <wa-button> never upgrades without JS and could not submit); styled to
   match the accent wa-button it stands in for. */
.filter-sidebar__apply {
  width: 100%;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--wa-border-radius-pill, 999px);
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* ── HMS-1392 — Figma 576:3733: on phones the brand bar pins and the toolbar
   becomes one compact quickbar — [search][funnel][sort] — pinned directly
   beneath it. ─────────────────────────────────────────────────────────── */

/* The sort affordance on the quickbar is a square icon menu that only exists
   on phones; the wa-select inside the form owns sort everywhere else. */
.hotel-search__sort-menu {
  display: none;
  flex: 0 0 auto;
}

/* Square quickbar icon buttons — the same Figma chrome HMS-1393 put on the
   view FAB: Neutral/Fill/Quiet fill, Neutral/Border/Normal edge. */
.hotel-search__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-normal);
  font-size: 1rem;
  cursor: pointer;
}

/* Sort menu panel — the same dark-on-white link list the portal header's
   hamburger renders (a raised panel, not the brand bar). */
.hotel-search__sort-menu-panel {
  min-width: 12rem;
  padding: 0.25rem;
}

.hotel-search__sort-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.hotel-search__sort-menu-link i {
  color: var(--wa-color-brand);
}

.hotel-search__sort-menu-link:hover {
  background: var(--wa-color-neutral-fill-quiet);
}

.hotel-search__sort-menu-link--current {
  font-weight: 600;
}

/* The magnifier slot inside the search input is a mobile-Figma detail —
   desktop keeps its plain field. */
.hotel-search__suggest-icon {
  display: none;
}

/* The funnel icon inside the Filters button only shows on phones; at tablet
   widths the button still reads as the "Filters" text pill. */
.hotel-search__mobile-filter-button i {
  display: none;
}

@media (max-width: 639.98px) {
  /* The header wrapper dissolves so its children (title, toolbar, chips)
     join the full-height content column — the containing block a sticky
     element needs to hold its pin for the whole scroll. The title and
     filter chips keep scrolling with the results; only the toolbar pins. */
  .hotel-search__header {
    display: contents;
  }

  /* Sticky, not fixed: flow reserves its space, so cards can never slide
     under it (the ticket's "must not overlap the hotel cards"). 3.25rem is
     .portal-header's min-height — the bar this row pins beneath. The old
     4rem right padding only existed to clear the bottom-right view FAB; a
     top-pinned row is out of its reach. */
  .hotel-search__toolbar {
    position: sticky;
    top: 3.25rem;
    z-index: 930;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.5rem;
  }

  /* One row: the search field grows, the icon buttons hold their square.
     Dates live on in the filter sheet's Dates section, the select yields to
     the sort menu, and Enter (or a suggestion pick) submits the form. */
  .hotel-search__toolbar-form {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .hotel-search__toolbar-form .stay-range,
  .hotel-search__toolbar-form wa-select[name="sort"],
  .hotel-search__toolbar-form wa-button[type="submit"] {
    display: none;
  }

  /* Single-line Figma search box: the floating label drops to accessible-
     name-only (same clip recipe as .visually-hidden /
     .booking-mgmt__search wa-input::part(label)). */
  .hotel-search__suggest wa-input::part(label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .hotel-search__suggest-icon {
    display: inline;
  }

  /* The funnel becomes the second square quickbar icon: the label collapses
     to its accessible name, the icon takes the button over. */
  .hotel-search__mobile-filter-button {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-neutral-fill-quiet);
    font-size: 1rem;
  }

  .hotel-search__mobile-filter-button i {
    display: inline-flex;
  }

  .hotel-search__mobile-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .hotel-search__sort-menu {
    display: block;
  }
}