/* 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;
}

.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__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 — the top strip now carries stay dates next to the name search and
   sort; give the two date fields a steady width so the row reads like a search
   bar instead of collapsing to min-content. */
.hotel-search__toolbar-form wa-input[name="check_in"],
.hotel-search__toolbar-form wa-input[name="check_out"] {
  width: 10rem;
  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. */
  .hotel-search__toolbar {
    flex-wrap: wrap;
  }

  .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);
}

/* 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);
}

.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;
}

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

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

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

  .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;
}

.map-rail__card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  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);
}

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

.map-rail__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
}

.map-rail__name {
  font-weight: 700;
  font-size: 0.9375rem;
}

.map-rail__rate {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.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;
}

.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;
}

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

/* Empty state */

.hotel-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 2rem;
  text-align: center;
}

.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: 320px;
}

/* 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%;
}

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

/* 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;
  background: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
  font-size: 1.0625rem;
  text-decoration: none;
}

.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;
  }
}

/* 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;
  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-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);
}

/* 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);
}