@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Poppins:100,200,400,500,600,700,800|Nunito:300,400,600,700,800";

html, body {
  overscroll-behavior-y: none;
}

.beans-floor-plans-plus div {
  margin-bottom: unset !important;
}

.gm-style iframe + div { border:none!important; }

.gm-style-iw-chr span {
  width: 12px !important;
  height: 12px !important;
  margin: 3px !important;
}

.gm-style-iw-chr button {
  width: 20px !important;
  height: 30px !important;
}

.floorplan-container {
  position: absolute;
  background-color: #fff;
  z-index: 999;
  border-radius: 10px;
}

.floorplan-container-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.floorplan-img-container {
  /* Locks image at 88% of the container's height, preserves aspect ratio
     (width is intrinsic from the chosen height), centers horizontally.
     Wide images that exceed the container width are cropped by the
     overflow:hidden — never shrunk. The bottom 6% strip is reserved for
     the prev/next nav row. */
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floorplan-img {
  height: 88%;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  flex-shrink: 0;
  display: block;
}

.floorplan-iframe {
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  margin-top: 40px;
  border: 1px solid #ccc;
}

/* Fullscreen image viewer — close (X) button + prev/next nav arrows. */
.floorplan-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.floorplan-close:hover { background: #fff; }

/* Bottom-strip nav row — 6% of the white area's height, centered. Both
   buttons sit inside this row instead of anchoring to the left/right
   sides at vertical center. */
.floorplan-nav-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 1000;
}
.floorplan-nav {
  width: 36px;
  height: 36px;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.floorplan-nav:hover { background: #0f172a; }

.esri-view .esri-view-surface:focus::after {
  outline: none !important;
}‍‍‍

.clear {
}

.unitlist-filters-selected {
  margin-top: 10px;
}

.unitlist-filters-crumb-container {
  background-color: #eee;
  border-radius: 20px;
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 5px 10px 5px 10px;
}

.unitlist-filters-crumb {
  font-size: 0.7rem !important;
  display: inline-block;
}

.unitlist-filters-crumb-delete {
  display: inline-block;
  margin-left: 5px;
  background-color: #ccc;
  border-radius: 0.5rem;
  width: 1rem;
  font-size: 0.7rem !important;
  text-align: center;
  cursor: pointer;
}

.unitlist-filter-button {
  cursor: pointer;
}

.unitlist-filter-button:hover {
  cursor: pointer;
  color: #1a0dab;
}

/* v2 pill — funnel icon + "Filters" label + circular count badge. */
.unitlist-filter-button.unitlist-filter-button-v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
}
.unitlist-filter-button.unitlist-filter-button-v2:hover {
  background: #f9fafb;
  color: #0f172a;
}
.unitlist-filter-button-v2 .unitlist-filter-icon {
  width: 13px;
  height: 13px;
  color: #64748b;
  flex-shrink: 0;
}
.unitlist-filter-button-v2 .unitlist-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}
.unitlist-filter-button-v2 .unitlist-filter-badge {
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* Caret flips when the filter panel is open. */
.unitlist-filter-button-v2 .unitlist-filter-caret {
  width: 10px;
  height: 8px;
  margin-left: 6px;
  transition: transform 0.18s ease;
}
.unitlist-filter-button-v2.is-open .unitlist-filter-caret {
  transform: rotate(180deg);
}

.unitlist-filter-container {
  flex-wrap: wrap;
  flex-direction: row;
  display: none;
}

.unitlist-filter-container.active {
  display: flex;
}

/* Modern filters: hidden by default; the Filters button toggles .active. */
.unitlist-filter-container.modern {
  display: none;
}

.unitlist-filter-container.modern.active {
  display: block;
}

.standalone-filters {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  top: 20px;
  left: 20px;
  width: 280px;
  max-width: calc(100% - 100px);
  padding: 10px 10px 20px 30px;
  z-index: 999;
  font-size: 0.8rem;
}

.unitlist-filter-container.standalone {
  flex-wrap: wrap;
  flex-direction: row;
  display: flex;
}

.unitlist-filter-container.standalone .unitlist-filter-select {
  max-width: 90px;
}

.unitlist-filter-container .unitlist-filter-select {
  /* max-width: 95px; */
  padding: 8px;
  border-radius: 4px;
  color: #000;
}

.unitlist-filter-container .unitlist-filter-list {
  display: none;
}

.beans-card.modern .unitlist-filter-container .unitlist-filter-select {
  /* width: 72px; */
  padding: 8px;
  border-radius: 4px;
  color: #000;
}

.unitlist-filter-container .unitlist-filter-title {
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 500 !important;
}

.beans-outside-button-container .list-filters-active, .beans-outside-button-container .list-floors-active {
  border: 1px solid #eee;
}

/* ── Modern filters v2: segmented chips, slider, dropdown, date ───────
   Driven by filter.kind (slider / dropdown / date / chips). All chip
   variants render a horizontal segmented control on a grey track with a
   white "pill" indicating the selection. */

/* display set by the toggle rules above (.modern hidden, .modern.active
   shown); layout styles only here. */
.unitlist-filter-container.modern {
  box-sizing: border-box;
}

.unitlist-filter-container.modern .unitlist-filter-subcontainer {
  display: block;
  margin-bottom: 16px;
  width: 100%;
}

.unitlist-filter-container.modern .unitlist-filter-title {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b8d92;
  margin-bottom: 8px;
}

/* Native select used by chip filters is hidden — chips drive state. */
.unitlist-filter-container.modern .unitlist-filter-kind-chips .unitlist-filter-select {
  display: none;
}

/* Segmented chip group: grey track containing equally-spaced chips. */
.unitlist-filter-container.modern .unitlist-filter-list {
  width: 100%;
  /* Grid lays chips out as equal-width cells. auto-fill keeps the track
     count fixed by container width so a solitary "35-40" on the last
     row stays the same width as the chips above it instead of
     stretching across the whole row. minmax(72px,1fr): each chip is
     at least 72px (comfortably fits "Any" / "20-25"-class labels) and
     expands to share extra horizontal space. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  align-items: stretch;
  background: #f2f2f3;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
  gap: 4px;
}

.unitlist-filter-container.modern .unitlist-filter-option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px 6px;
  white-space: nowrap;
  border-radius: 7px;
  border-bottom: 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #4b4d51;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.unitlist-filter-container.modern .unitlist-filter-option:hover {
  color: #1a1c1f;
}

.unitlist-filter-container.modern .unitlist-filter-option.selected {
  background: #ffffff;
  color: #1a1c1f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
}

/* Dropdown filter — native <select> styled like a clean form field. */
.unitlist-filter-container.modern .unitlist-filter-dropdown {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3e4e7;
  background: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: #1a1c1f;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238b8d92' stroke-width='2'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Slider filter — value readout above the range input. */
.unitlist-filter-container.modern .unitlist-filter-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1c1f;
}
.unitlist-filter-container.modern .unitlist-filter-slider-end {
  color: #1a1c1f;
  font-weight: 600;
}
.unitlist-filter-container.modern input.unitlist-filter-slider {
  display: block;
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(#1a1c1f, #1a1c1f) no-repeat #e3e4e7;
  background-size: 100% 100%;
  border-radius: 2px;
  outline: none;
  margin: 6px 0 4px;
}
.unitlist-filter-container.modern input.unitlist-filter-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1c1f;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.unitlist-filter-container.modern input.unitlist-filter-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1c1f;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Date filter — native date input styled like the dropdown. */
.unitlist-filter-container.modern input.unitlist-filter-date {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3e4e7;
  background: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: #1a1c1f;
  outline: none;
  box-sizing: border-box;
}

/* Footer: Apply (dark pill) + Reset (text link) */
.unitlist-filter-container.modern .unitlist-filter-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
/* Match the onClickData "Apply Now" button (.selectunit-v2-apply-btn). */
.unitlist-filter-container.modern .unitlist-filter-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--beans-color-1, #24453e);
  color: #ffffff;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  user-select: none;
  border: none;
  transition: filter 150ms ease;
}
.unitlist-filter-container.modern .unitlist-filter-apply:hover { filter: brightness(0.92); }
.unitlist-filter-container.modern .unitlist-filter-reset {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4b4d51;
  cursor: pointer;
  padding: 4px 6px;
}
.unitlist-filter-container.modern .unitlist-filter-reset:hover {
  color: #1a1c1f;
  text-decoration: underline;
}

.unitlist-filter-container.modern .break { display: none; }

.beans-map-button-container .beans-map-button-text {
  display: inline-block;
  margin-left: 10px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color:  var(--beans-text-color-1, #fff);
  font-family: "Poppins", sans-serif;
}

.beans-outside-button-container .beans-map-button-text {
  margin-top: 10px;
  font-size: 13px;
  float: left;
  text-transform: capitalize;
  font-weight: 500;
  color:  var(--beans-text-color-1, #fff);
  font-family: "Poppins", sans-serif;
}

.toggleinactive {
  display: none !important;
}

.beans-outside-button-container .beans-map-button-image {
  float: left;
  width: 15px;
  height: 15px;
  margin-top: 12px;
  margin-right: 10px;
}

.beans-outside-button-container .beans-map-button-text-with-image {
  margin-left: calc(50% - 40px);
}

.beans-map-button-container, .beans-map-button-container .beans-toggle-button-container {
  width: 140px;
  border-radius: 15px;
  display: flex;
  background-color: var(--beans-color-1, #24453e);
  margin-top: 10px;
  cursor: pointer;
  box-sizing: content-box;
}

.beans-outside-button-container {
  height: 40px;
  position: absolute;
  top: 0px;
  width: 50%;
  display: flex;
  background-color: var(--beans-color-1, #24453e);
  color:  var(--beans-text-color-1, #fff);
  cursor: pointer;
  z-index: 999;
}

.beans-map-icon {
  height: 30px !important;
  background-size: 30px 30px !important;
  width: 30px !important;
  display: inline-block;
}

.showonmap {
  color: #0645AD !important;
  cursor: pointer;;
  margin-left: 10px;
}

.beans-card div, .beans-card span {
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.65714286em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #484848;
}

.links-card div, .links-card span {
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.65714286em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #484848;
}

.floor-card div, .floor-card span {
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.65714286em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #484848;
}

.parking-card {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 175px;
}
.parking-card div, .parking-card span {
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.65714286em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #484848;
}

/* @media screen and (max-width: 500px) { */
@container body2 (max-width: 500px) {
  .beans-card {
    scroll-behavior: smooth !important;
  }
}

.beans-card .beans-row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* margin-right: -15px;
  margin-left: -15px; */
  margin-top: 10px;
}

.beans-card .beans-col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  position: relative;
  width: 100%;
  padding: 0;
}

.beans-card .result-card {
  display: none;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
}

@container body2 (max-width: 500px) {
  .result-card {
    margin-bottom: 20px;
  }
}

.beans-card .result-card.active {
  display: block;
}

.beans-card .line1 {
  max-width: calc(100vw - 130px);
  font-size: 17px;
  font-weight: 600;
  color: #484848;
  display: inline-block;
  overflow-x: hidden;
}


.beans-card .line2, .beans-card .line3, .beans-card .line4 {
  color: #999;
  max-width: calc(100vw - 130px);
}

/* @media screen and (max-width: 500px) { */
@container body2 (max-width: 500px) {
  .beans-card.big-card .dirfac-card {
    overflow-y: scroll;
  }

  .beans-card.small-card .dirfac-card {
    overflow-y: scroll;
    /* max-height: 195px; */
  }

  .dirfac-spacer-card {
    height: 20px;
  }

  /* ── Modern filters: bottom-sheet on mobile ─────────────────────────
     Filter panel slides up from the bottom and covers most of the
     viewport — clean overlay over the map instead of squeezing into
     the legacy dropdown. */
  .unitlist-filter-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9998;
    pointer-events: none;
    transition: background 0.22s ease;
  }
  .unitlist-filter-backdrop.active {
    background: rgba(0, 0, 0, 0.35);
    pointer-events: auto;
  }
  .unitlist-filter-container.modern.mobile-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    max-height: 85%;
    padding: 14px 18px 18px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    display: block;
  }
  .unitlist-filter-container.modern.mobile-sheet.active {
    transform: translateY(0);
  }
  .unitlist-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef0f3;
  }
  .unitlist-filter-sheet-title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a1c1f;
  }
  .unitlist-filter-sheet-close {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    color: #4b4d51;
    background: #f2f2f3;
  }
  .unitlist-filter-sheet-close:hover { background: #e6e6e8; color: #1a1c1f; }

  /* Floor picker bottom-sheet — same look as the filter sheet. */
  .list-floors.mobile-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    max-height: 70%;
    padding: 14px 18px 18px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    display: block;
    -webkit-animation: none !important;
    animation: none !important;
  }
  .list-floors.mobile-sheet.active {
    transform: translateY(0);
  }
  /* Mobile floor card always hides the inline "FLOORS" title — sheet has
     its own header, and the legacy dropdown doesn't need a redundant
     label either. */
  .list-floors #floor-picker-title,
  .list-floors .floor-picker-title { display: none; }
  /* Grid layout for the floor picker — tiles instead of stacked rows so we
     get four-up on phones and don't waste vertical space. The sheet header
     (Close + title) spans the full row above the grid. */
  .list-floors.mobile-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    padding: 14px 14px 18px;
    align-content: start;
  }
  .list-floors.mobile-sheet > .unitlist-filter-sheet-header {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  /* Each tile is a square cell with the floor label centered. When a count
     exists, a small secondary line sits below the floor label (via ::after).
     The base .floor-picker rules give us 27.5×23 inline-block — these
     overrides reset width/height/display to make the tile work in the grid. */
  .list-floors.mobile-sheet .floor-picker,
  .list-floors.mobile-sheet .floor-picker-active {
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 4px;
    aspect-ratio: 1;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1;
    cursor: pointer;
    background-color: hsl(0, 0%, calc(96% - var(--floor-density, 0) * 22%));
    color: #1a1c1f;
  }
  /* Count line — small caption below the floor label. Hidden entirely when
     count is 0 (selector excludes "0"). */
  .list-floors.mobile-sheet .floor-picker[data-unit-count]:not([data-unit-count="0"])::after,
  .list-floors.mobile-sheet .floor-picker-active[data-unit-count]:not([data-unit-count="0"])::after {
    content: attr(data-unit-count) " units";
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1;
  }
  /* Singular "1 unit" — must come AFTER the plural rule so source order
     resolves the content tie at equal specificity. */
  .list-floors.mobile-sheet .floor-picker[data-unit-count="1"]::after,
  .list-floors.mobile-sheet .floor-picker-active[data-unit-count="1"]::after {
    content: "1 unit";
  }
  .list-floors.mobile-sheet .floor-picker:hover {
    background: hsl(0, 0%, calc(92% - var(--floor-density, 0) * 22%));
  }
  .list-floors.mobile-sheet .floor-picker-active {
    background: #1a1c1f;
    color: #ffffff;
  }
  .list-floors.mobile-sheet .floor-picker-active[data-unit-count]:not([data-unit-count="0"])::after {
    color: rgba(255, 255, 255, 0.72);
  }

  /* Nearby POI picker — same bottom-sheet treatment. min-height keeps
     the sheet visually substantial when there are only a few entries. */
  .list-poi.mobile-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    min-height: 45%;
    max-height: 80%;
    padding: 14px 18px 22px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    display: block;
    -webkit-animation: none !important;
    animation: none !important;
  }
  .list-poi.mobile-sheet.list-poi-active { transform: translateY(0); }
  .list-poi.mobile-sheet .list-poi-element {
    padding: 16px 12px;
    margin: 6px 0;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  .list-poi.mobile-sheet .list-poi-element:hover { background: #f5f5f6; }
  .list-poi.mobile-sheet .list-poi-element-icon {
    float: none;
    margin-right: 14px;
  }
  .list-poi.mobile-sheet .list-poi-element-text { font-size: 14px; }

  /* =====================================================================
     Modern Nearby sheet — category chips + autocomplete + radius slider +
     results. Activated by .list-poi-modern when displayOptions.modernFilters
     is on and we're in mobile view. Built by buildModernNearbySheet().
     ===================================================================== */
  .list-poi.list-poi-modern.mobile-sheet {
    padding: 16px 18px 22px;
    font-family: "Poppins", sans-serif;
    color: #1a1c1f;
  }
  .list-poi.list-poi-modern .list-poi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .list-poi.list-poi-modern .list-poi-header-text { flex: 1 1 auto; min-width: 0; }
  .list-poi.list-poi-modern .list-poi-header-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1c1f;
    line-height: 1.2;
  }
  .list-poi.list-poi-modern .list-poi-header-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
  }
  .list-poi.list-poi-modern .list-poi-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2f2f3;
    color: #4b4d51;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-close:hover { background: #e6e6e8; }

  /* Chips grid. auto-fill with a minmax keeps two columns on narrow phones
     and three on slightly wider viewports without us having to media-query
     per breakpoint. */
  .list-poi.list-poi-modern .list-poi-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 14px;
  }
  .list-poi.list-poi-modern .list-poi-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f2f2f3;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
  }
  .list-poi.list-poi-modern .list-poi-chip:hover { background: #e8e8ea; }
  .list-poi.list-poi-modern .list-poi-chip.selected {
    background: var(--beans-color-1, #24453e);
    color: var(--beans-text-color-1, #ffffff);
  }
  .list-poi.list-poi-modern .list-poi-chip-badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f3b95a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .list-poi.list-poi-modern .list-poi-chip-badge-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
  .list-poi.list-poi-modern .list-poi-chip-label {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-poi.list-poi-modern .list-poi-chip-remove {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Autocomplete input + dropdown panel. */
  .list-poi.list-poi-modern .list-poi-ac-wrap {
    position: relative;
    margin-top: 10px;
  }
  .list-poi.list-poi-modern .list-poi-ac-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
  }
  .list-poi.list-poi-modern .list-poi-ac-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 34px;
    border-radius: 999px;
    border: 1px solid #e2e2e4;
    background: #f7f7f8;
    font-size: 13px;
    font-family: inherit;
    color: #1a1c1f;
    outline: none;
  }
  .list-poi.list-poi-modern .list-poi-ac-input:focus {
    border-color: #b5b6b9;
    background: #ffffff;
  }
  .list-poi.list-poi-modern .list-poi-ac-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e6e6e8;
    color: #4b4d51;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-ac-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e6e6e8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }
  .list-poi.list-poi-modern .list-poi-ac-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-ac-row:hover { background: #f6f6f7; }
  .list-poi.list-poi-modern .list-poi-ac-row-label {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 500;
  }
  .list-poi.list-poi-modern .list-poi-ac-row-code {
    flex: 0 0 auto;
    font-size: 11px;
    color: #9ca3af;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  /* Radius slider section. */
  .list-poi.list-poi-modern .list-poi-radius { margin-top: 14px; }
  .list-poi.list-poi-modern .list-poi-radius-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: #6b7280;
    text-transform: uppercase;
  }
  .list-poi.list-poi-modern .list-poi-radius-value {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    margin-top: 6px;
  }
  .list-poi.list-poi-modern .list-poi-radius-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
  }
  .list-poi.list-poi-modern .list-poi-radius-slider {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e2e2e4;
    outline: none;
  }
  .list-poi.list-poi-modern .list-poi-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #1a1c1f;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-radius-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #1a1c1f;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-radius-icon {
    font-size: 13px;
    color: #6b7280;
    line-height: 1;
  }
  .list-poi.list-poi-modern .list-poi-radius-ticks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 6px;
    padding: 0 28px;
    font-size: 11px;
    color: #9ca3af;
  }
  .list-poi.list-poi-modern .list-poi-radius-tick { text-align: center; }
  .list-poi.list-poi-modern .list-poi-radius-tick:first-child { text-align: left; }
  .list-poi.list-poi-modern .list-poi-radius-tick:last-child { text-align: right; }
  .list-poi.list-poi-modern .list-poi-radius-tick.active {
    color: #1a1c1f;
    font-weight: 600;
  }

  /* "Search this area" CTA. */
  .list-poi.list-poi-modern .list-poi-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--beans-color-1, #24453e);
    color: var(--beans-text-color-1, #ffffff);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 14px;
    user-select: none;
  }
  .list-poi.list-poi-modern .list-poi-search-btn:hover { background: #2a2d31; }
  .list-poi.list-poi-modern .list-poi-search-btn-icon { font-size: 13px; }
  .list-poi.list-poi-modern .list-poi-search-btn-nudge {
    animation: list-poi-search-nudge 0.4s ease;
  }
  @keyframes list-poi-search-nudge {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
  }

  /* Empty state. */
  .list-poi.list-poi-modern .list-poi-empty {
    text-align: center;
    padding: 22px 12px 8px;
  }
  .list-poi.list-poi-modern .list-poi-empty-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2f2f3;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #6b7280;
  }
  .list-poi.list-poi-modern .list-poi-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1c1f;
    margin-top: 10px;
  }
  .list-poi.list-poi-modern .list-poi-empty-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 4px;
  }

  /* Results list. */
  .list-poi.list-poi-modern .list-poi-results { margin-top: 14px; }
  .list-poi.list-poi-modern .list-poi-results-header {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    margin-top: 8px;
  }
  .list-poi.list-poi-modern .list-poi-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f2;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-result:first-of-type {
    border-top: none;
    /* Replaces the legacy .list-poi-results-header { margin-bottom: 6px }
       so client overrides on margin-bottom can't squash this gap. */
    margin-top: 6px;
  }
  .list-poi.list-poi-modern .list-poi-result-meta { flex: 1 1 auto; min-width: 0; }
  .list-poi.list-poi-modern .list-poi-result-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1c1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-poi.list-poi-modern .list-poi-result-addr {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-poi.list-poi-modern .list-poi-result-dist {
    flex: 0 0 auto;
    font-size: 13px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
  }
  .list-poi.list-poi-modern .list-poi-results-footer {
    text-align: center;
    background: #f6f6f7;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #4b4d51;
    margin-top: 12px;
  }
  .list-poi.list-poi-modern .list-poi-widen {
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1c1f;
    cursor: pointer;
  }
  .list-poi.list-poi-modern .list-poi-widen:hover { color: #4b4d51; }

  .list-poi.list-poi-modern .list-poi-loading {
    text-align: center;
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
  }
}

/* =====================================================================
   Modern Nearby — DESKTOP card. Lives outside the mobile @media so it
   applies on wider viewports. Parented to .beans-buttonbar-left so it
   shares the unit-card slot; closed by default, .list-poi-active opens.
   ===================================================================== */
.list-poi.list-poi-modern.desktop-card {
  display: none;
  position: relative;
  width: 100%;
  max-width: 320px;
  /* Right-align inside .beans-buttonbar-left. The buttonbar-left widens to
     calc(100% - 510px) when .wide is added (unit selected with showWideUnitCard);
     without auto-left margin the card would float at the left edge of that
     wide container. */
  margin-left: auto;
  margin-right: 0;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
  padding: 16px 18px 22px;
  /* Buttonbar-left has `height: 100%` on desktop so this percentage
     resolves; mobile would only apply via the bottom-sheet variant (not
     this desktop-card scope). overflow-y handles long result lists. */
  height: auto;
  max-height: calc(100% - 140px);
  overflow-y: auto;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #1a1c1f;
  box-sizing: border-box;
  z-index: 2;
}
.list-poi.list-poi-modern.desktop-card.list-poi-active { display: block; }
/* Legacy .list-poi-active runs `animation: list-poi-animation` which slides
   margin-left to -230px. The modern card reuses .list-poi-active only as a
   visibility flag, so suppress the slide here. The mobile-sheet variant
   already has its own !important animation:none in the @media block. */
.list-poi.list-poi-modern.list-poi-active {
  -webkit-animation: none !important;
  animation: none !important;
  margin-left: auto !important;
}
.list-poi.list-poi-modern.desktop-card .list-poi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-header-text { flex: 1 1 auto; min-width: 0; }
.list-poi.list-poi-modern.desktop-card .list-poi-header-title {
  font-size: 16px; font-weight: 600; line-height: 1.2;
}
.list-poi.list-poi-modern.desktop-card .list-poi-header-subtitle {
  font-size: 11px; color: #6b7280; margin-top: 2px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-close {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: #f2f2f3; color: #4b4d51; font-size: 11px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-close:hover { background: #e6e6e8; }
.list-poi.list-poi-modern.desktop-card .list-poi-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 999px;
  background: #f2f2f3; cursor: pointer; user-select: none;
}
.list-poi.list-poi-modern.desktop-card .list-poi-chip:hover { background: #e8e8ea; }
.list-poi.list-poi-modern.desktop-card .list-poi-chip.selected {
  background: var(--beans-color-1, #24453e); color: var(--beans-text-color-1, #ffffff);
}
.list-poi.list-poi-modern.desktop-card .list-poi-chip-badge {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: #f3b95a; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.list-poi.list-poi-modern.desktop-card .list-poi-chip-badge-img { width: 14px; height: 14px; object-fit: contain; }
.list-poi.list-poi-modern.desktop-card .list-poi-chip-label {
  flex: 1 1 auto; font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-poi.list-poi-modern.desktop-card .list-poi-chip-remove {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); color: #ffffff; font-size: 9px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.list-poi.list-poi-modern.desktop-card .list-poi-ac-wrap { position: relative; margin-top: 10px; }
.list-poi.list-poi-modern.desktop-card .list-poi-ac-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; font-size: 12px; pointer-events: none;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 32px 8px 30px; border-radius: 999px;
  border: 1px solid #e2e2e4; background: #f7f7f8;
  font-size: 12px; font-family: inherit; color: #1a1c1f; outline: none;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-input:focus {
  border-color: #b5b6b9; background: #ffffff;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #e6e6e8; color: #4b4d51; font-size: 9px;
  align-items: center; justify-content: center; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: #ffffff; border: 1px solid #e6e6e8; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); z-index: 10;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-ac-row:hover { background: #f6f6f7; }
.list-poi.list-poi-modern.desktop-card .list-poi-ac-row-label { flex: 1 1 auto; font-size: 13px; font-weight: 500; }
.list-poi.list-poi-modern.desktop-card .list-poi-ac-row-code {
  flex: 0 0 auto; font-size: 10px; color: #9ca3af;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.list-poi.list-poi-modern.desktop-card .list-poi-radius { margin-top: 12px; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.6px;
  color: #6b7280; text-transform: uppercase;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-value {
  text-align: center; font-size: 15px; font-weight: 600; margin-top: 4px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-slider-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-slider {
  flex: 1 1 auto; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; background: #e2e2e4; outline: none;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff; border: 2px solid #1a1c1f; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff; border: 2px solid #1a1c1f; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-icon { font-size: 12px; color: #6b7280; line-height: 1; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-ticks {
  display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 4px;
  padding: 0 24px; font-size: 10px; color: #9ca3af;
}
.list-poi.list-poi-modern.desktop-card .list-poi-radius-tick { text-align: center; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-tick:first-child { text-align: left; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-tick:last-child { text-align: right; }
.list-poi.list-poi-modern.desktop-card .list-poi-radius-tick.active { color: #1a1c1f; font-weight: 600; }

.list-poi.list-poi-modern.desktop-card .list-poi-search-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--beans-color-1, #24453e);
  color: var(--beans-text-color-1, #ffffff);
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  margin-top: 12px; user-select: none;
}
.list-poi.list-poi-modern.desktop-card .list-poi-search-btn:hover { background: #2a2d31; }
.list-poi.list-poi-modern.desktop-card .list-poi-search-btn-icon { font-size: 12px; }
.list-poi.list-poi-modern.desktop-card .list-poi-search-btn-nudge { animation: list-poi-search-nudge 0.4s ease; }

.list-poi.list-poi-modern.desktop-card .list-poi-empty { text-align: center; padding: 18px 8px 4px; }
.list-poi.list-poi-modern.desktop-card .list-poi-empty-icon {
  width: 36px; height: 36px; border-radius: 50%; background: #f2f2f3;
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #6b7280;
}
.list-poi.list-poi-modern.desktop-card .list-poi-empty-title { font-size: 12px; font-weight: 600; margin-top: 8px; }
.list-poi.list-poi-modern.desktop-card .list-poi-empty-sub { font-size: 11px; color: #6b7280; line-height: 1.4; margin-top: 4px; }

.list-poi.list-poi-modern.desktop-card .list-poi-results { margin-top: 12px; }
.list-poi.list-poi-modern.desktop-card .list-poi-results-header {
  font-size: 10px; font-weight: 600; color: #6b7280;
  letter-spacing: 0.5px; margin-top: 8px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-result {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-top: 1px solid #f0f0f2; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-result:first-of-type { border-top: none; margin-top: 4px; }
.list-poi.list-poi-modern.desktop-card .list-poi-result-meta { flex: 1 1 auto; min-width: 0; }
.list-poi.list-poi-modern.desktop-card .list-poi-result-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-poi.list-poi-modern.desktop-card .list-poi-result-addr {
  font-size: 11px; color: #6b7280; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-poi.list-poi-modern.desktop-card .list-poi-result-dist {
  flex: 0 0 auto; font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums;
}
.list-poi.list-poi-modern.desktop-card .list-poi-results-footer {
  text-align: center; background: #f6f6f7; border-radius: 8px;
  padding: 8px 10px; font-size: 11px; color: #4b4d51; margin-top: 10px;
}
.list-poi.list-poi-modern.desktop-card .list-poi-widen {
  text-align: center; margin-top: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.list-poi.list-poi-modern.desktop-card .list-poi-loading {
  text-align: center; padding: 14px; font-size: 12px; color: #6b7280;
}

/* ====================================================================
   Back-to-Availability pill — appears top-center while nearby pins are
   showing. Tap restores amenity pins, clears nearby pins, and pans the
   camera back to its pre-nearby snapshot (via _exitNearbyMode in ESRI).
   ==================================================================== */
.beans-back-to-availability {
  display: none;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #1a1c1f;
  color: #ffffff;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.beans-back-to-availability.active { display: inline-flex; }
.beans-back-to-availability:hover { background: #2a2d31; }
.beans-back-to-availability-arrow {
  font-size: 15px;
  line-height: 1;
  margin-top: -1px;
}
/* Mobile: outside-button mode pushes the top button row up to ~10–14px from
   the viewport top; the back pill must clear it. The 64px nudge also keeps
   it visually separated from any safe-area / notch on iOS. */
@media (max-width: 800px) {
  .beans-back-to-availability { top: 64px; }
}

.dirfac-card {
  margin-top: 30px;
}

.beans-card .distance {
  color: #777;
  max-width: calc(100vw - 130px);
}

.beans-card .tile {
  width: calc(100% - 10px);
  height: 95px;
  background-color: #eee;
  border-radius: 15px;
  padding-top: 20px;
  margin-left: 5px;
  text-align: center;
}

.beans-card .tile .tileiconcontainer {
  width: 60px;
  height: 45px;
  margin-left: calc(50% - 30px);
  padding-top: 15px;
}

.beans-card .tile .tileicon {
  width: 30px;
  height: 30px;
  margin: auto;
}

.beans-card .tile .tileiconcontainer.unknown {
  background-color: #c8c8c8 !important;
}

.beans-card .tile .tiletext.unknown {
  color: #a8a8a8 !important;
}

.beans-card .tile .tileicon.type-parking {
  background-color: #eee;
  mask-size: 30px 30px;
  -webkit-mask-size: 30px 30px;
  mask-image: url(https://www.beans.ai/m/assets/parking.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/parking.svg);
}

.beans-card .tile .tileicon.type-entrance {
  background-color: #eee;
  mask-size: 30px 30px;
  -webkit-mask-size: 30px 30px;
  mask-image: url(https://www.beans.ai/m/assets/entrance.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/entrance.svg);
}

.beans-card .tile .tileicon.type-stair {
  background-color: #eee;
  mask-size: 30px 30px;
  -webkit-mask-size: 30px 30px;
  mask-image: url(https://www.beans.ai/m/assets/stair.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/stair.svg);
}

.beans-card .tile .tileicon.type-elevator {
  background-color: #eee;
  mask-size: 30px 30px;
  -webkit-mask-size: 30px 30px;
  mask-image: url(https://www.beans.ai/m/assets/elevator.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/elevator.svg);
}

.beans-card .tile .tileicon.type-unit {
  background-color: #eee;
  mask-size: 30px 30px;
  -webkit-mask-size: 30px 30px;
  mask-image: url(https://www.beans.ai/m/assets/unit.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/unit.svg);
}

.beans-card .tile .tiletext {
  height: 20px;
}

.beans-card .navigate {
  background-color: rgb(0, 124, 207);
  mask-size: 50px 50px;
  -webkit-mask-size: 50px 50px;
  mask-image: url(https://www.beans.ai/m/assets/navigate.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/navigate.svg);
  width: 50px;
  height: 50px;
  float: right;
}

.beans-highrise-floor-picker {
  position: absolute;
  right: 0px;
  width: 420px;
  top: 0px;
  z-index: 999;
  height: calc(100% - 40px);
  background-color: #E0E0E0;
}

/* Dock the highrise picker on the LEFT (between the modernBeansCard and
   the map) when displayOptions.highriseFloorPickerDock === 'left'. */
.has-highrise-floor-picker-left .beans-highrise-floor-picker {
  left: 320px;
  right: auto;
}

/* Desktop-only horizontal floor picker. Pinned top of map, single row,
   horizontally scrollable via drag + wheel + scrollbar-less overflow-x.
   Same tile visual as the mobile bottom-sheet grid (density gradient,
   count badge) but arranged inline. Hidden on mobile — controlled by
   `displayOptions.showFloorRoller`. Slot on the left of the map and
   stops before the buttonbar (right:80px accommodates the 50px buttonbar
   + 30px gap). */
.beans-floor-roller {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 80px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  height: 52px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide native scrollbar for cleaner look — arrow keys / drag / wheel still work. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-family: "Poppins", sans-serif;
}
.beans-floor-roller::-webkit-scrollbar { display: none; }

/* Floor-picker title (populateFloorCard renders "FLOORS" when modernButtons is on).
   Small inline label at the left edge of the roller. */
.beans-floor-roller .floor-picker-title {
  flex: 0 0 auto;
  margin: 0 8px 0 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #6b7280;
}

/* Tiles — override the base .floor-picker rules (which give a 27.5×23 inline
   pill) so each floor renders as a compact square tile with a count line
   below the label. `.floor-picker` and `.floor-picker-active` share the
   layout; only background/foreground differ. */
.beans-floor-roller .floor-picker,
.beans-floor-roller .floor-picker-active {
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
  height: auto;
  padding: 6px 10px;
  margin: 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  /* Density ramp mirrors the mobile floor sheet — heavier floors darken. */
  background-color: hsl(0, 0%, calc(96% - var(--floor-density, 0) * 22%));
  color: #1a1c1f;
}
.beans-floor-roller .floor-picker[data-unit-count]:not([data-unit-count="0"])::after,
.beans-floor-roller .floor-picker-active[data-unit-count]:not([data-unit-count="0"])::after {
  content: attr(data-unit-count) " units";
  font-size: 9px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1;
}
.beans-floor-roller .floor-picker[data-unit-count="1"]::after,
.beans-floor-roller .floor-picker-active[data-unit-count="1"]::after {
  content: "1 unit";
}
.beans-floor-roller .floor-picker:hover {
  background: hsl(0, 0%, calc(92% - var(--floor-density, 0) * 22%));
}
.beans-floor-roller .floor-picker-active {
  background: #1a1c1f;
  color: #ffffff;
}
.beans-floor-roller .floor-picker-active[data-unit-count]:not([data-unit-count="0"])::after {
  color: rgba(255, 255, 255, 0.72);
}

/* Mobile hides the roller — its bottom-sheet layout replaces it. */
@container body2 (max-width: 500px) {
  .beans-floor-roller { display: none !important; }
}

.beans-buttonbar {
  position: absolute;
  right: 10px;
  width: 50px;
  top: 10px;
}

.beans-buttonbar.modern {
  position: absolute;
  right: 10px;
  width: 150px;
  top: 10px;
}

.beans-buttonbar.outside {
  top: 50px;
}

@container body2 (max-width: 500px) {
  .beans-buttonbar {
    /* left: 10px;
    right: auto; */
  }
  /* Override desktop's height:100% — an empty 320×viewport container would
     intercept map touches on mobile. .wide and the modern nearby sheet
     handle their own sizing without needing parent height. */
  .beans-buttonbar-left {
    height: auto !important;
  }
}

.beans-buttonbar-left {
  position: absolute;
  right: 80px;
  width: 320px;
  top: 10px;
  max-width: calc(100% - 90px);
  /* Height is `auto` here so unit / parking cards size to their content and
     don't reserve a full viewport column. The nearby card is the only child
     that needs a definite parent height (its `max-height: calc(100% - N)`
     doesn't resolve against auto); openSheet in buildModernNearbySheet sets
     `style.height = '100%'` on the container while nearby is open, and
     closeSheet clears it back to auto. */
  /* Hidden by default — the container has no visual chrome of its own, so
     leaving it `display: block` (CSS default) meant any momentarily-visible
     child (or a stale base `.list-poi { background:#fff }`) would surface
     it on the desktop map. JS show paths (showClickData for the unit card,
     openSheet for the nearby card, etc.) flip this to 'block' explicitly. */
  display: none;
}

.beans-buttonbar-left.modern {
  position: absolute;
  right: 180px;
  width: 320px;
  top: 10px;
  max-width: calc(100% - 90px);
}

.beans-buttonbar-left.outside {
  top: 50px !important;
}

.beans-buttonbar .satellite {
  background: url(https://www.beans.ai/m/assets/satellite.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .d3 {
  background: url(https://www.beans.ai/m/assets/3d.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .d2 {
  background: url(https://www.beans.ai/m/assets/2d.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .help {
  background: url(https://www.beans.ai/m/assets/help.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .mylocation {
  background: url(https://www.beans.ai/m/assets/mylocation.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .fullscreen {
  background: url(https://www.beans.ai/m/assets/size.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .mylocation-pinned {
  background: url(https://www.beans.ai/m/assets/mylocation-fill.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .shadow {
  background: url(https://www.beans.ai/m/assets/shadow.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .neighbor {
  background: url(https://www.beans.ai/m/assets/neighbor.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .amenity {
  background: url(https://www.beans.ai/m/assets/amenity.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .immersive {
  background: url(https://www.beans.ai/m/assets/immersive.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .floor {
  display: none;
}

.beans-buttonbar .burger {
  display: none;
}

.beans-buttonbar .poi {
  background: url(https://www.beans.ai/m/assets/teardrop.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .filter {
  background: url(https://www.beans.ai/m/assets/filter.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .close {
  background: url(https://www.beans.ai/m/assets/close.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.beans-buttonbar .sharer {
  background: url(https://www.beans.ai/m/assets/sharer.svg) no-repeat 0px 0px;
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-top: 3px;
  cursor: pointer;
}

.rotate {
  position: absolute;
  bottom: 70px;
  right: 20px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background-color: rgb(255, 255, 255, 0.8);
  border-radius: 50px;
  border: 1px solid var(--beans-color-1, #24453e);
}

.rotate .rotatel, .rotate .rotater, .rotate .rotated, .rotate .rotateu {
  -webkit-mask-repeat: no-repeat;
  background-color: var(--beans-color-1, #24453e);
  cursor: pointer;
  position: absolute;
  opacity: 1;
}

.rotate .rotatel {
  -webkit-mask-size: 5px 30px;
  -webkit-mask-image: url(https://www.beans.ai/m/assets/rotatel.svg);
  mask-image: url(https://www.beans.ai/m/assets/rotatel.svg);
  width: 10px;
  height: 30px;
  top: 15px;
  left: 5px;
  margin-left: 4.5px;
}

.rotate .rotater {
  -webkit-mask-size: 5px 30px;
  -webkit-mask-image: url(https://www.beans.ai/m/assets/rotater.svg);
  mask-image: url(https://www.beans.ai/m/assets/rotater.svg);
  width: 10px;
  height: 30px;
  top: 15px;
  right: 5px;
}

.rotate .rotateu {
  -webkit-mask-image: url(https://www.beans.ai/m/assets/rotateu.svg);
  mask-image: url(https://www.beans.ai/m/assets/rotateu.svg);
  -webkit-mask-size: 30px 5px;
  width: 30px;
  height: 10px;
  top: 5px;
  left: 15px;
  opacity: 1;
  margin-top: 5px;
}

.rotate .rotated {
  -webkit-mask-image: url(https://www.beans.ai/m/assets/rotated.svg);
  mask-image: url(https://www.beans.ai/m/assets/rotated.svg);
  -webkit-mask-size: 30px 5px;
  width: 30px;
  height: 10px;
  bottom: 5px;
  left: 15px;
}

.rotate .rotater:hover, .rotate .rotatel:hover, .rotate .rotateu:hover, .rotate .rotated:hover {
  background-size: 6px 30px;
}

.rotate .rotatec {
  background: url(https://www.beans.ai/m/assets/rotatec.svg) no-repeat 0px 0px;
  background-size: 15px 15px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  position: absolute;
  top: 22.5px;
  left: 22.5px;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

.beans-buttonbar .active {
  background-color: rgba(0, 0, 0, 0) !important;
  /* background-color: var(--beans-color-2, #cc088e) !important; */
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

.beans-buttonbar.modern .active {
  background-color: var(--beans-color-2, #cc088e) !important;
  filter: invert(0%);
  -webkit-filter: invert(0%);
}

.marker {
}

.marker-text {
  position: absolute;
  text-align:center;
  width: 50px;
  /* height: 20px; */
  /* background-color: #f00; */
}

.marker-text-img {
  /* position: absolute; */
  width: 10px;
  height: 10px;
  margin-left: 4px;
  margin-top: 4px;
  /* filter: invert(100%) opacity(0.8); */
  /* -webkit-filter: invert(100%) opacity(0.8); */
}

.marker-text-img-container {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background-color: #EE6F48;
  border: 2px solid white;
}

.marker.inactive {
}

.poimarker {
  width: 42px;
  height: 34px;
  background-size: contain !important;
}

.marker.entrance {
  background: url(https://www.beans.ai/m/assets/ientrance.svg) no-repeat 0px 0px;
}

.marker.parking {
  background: url(https://www.beans.ai/m/assets/iparking.svg) no-repeat 0px 0px;
}

.marker.unit {
  background: url(https://www.beans.ai/m/assets/iunit.svg) no-repeat 0px 0px;
}

.beans-card .text-notes {
  margin-top: 15px;
}

.facilities-card-key {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 40px;
  text-align: center;
  z-index: 999;
  line-height: 20px;
  font-size: 13px;
  background-color: #fafafa;
  text-wrap: nowrap;
  line-height: 26px;
  /* padding-top: 5px; */
}

.beans-card .facilities-card {
  margin-top: 15px;
}

.beans-card .facilities-card .poi-container {
  display: flex;
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}

.facilities-card-key .facilities-card-content {
  display: flex;
  float: right;
  margin-right: 10px;
  margin-top: 2px;
  max-width: calc(100% - 180px);
  overflow-x: scroll;
}

.facilities-card-key .poi-container {
  margin-top: 5px;
  text-align:left;
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer;
  padding-top: 3px;
  display: inline-flex;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.7rem;
}

.beans-card .facilities-card .poi {
  padding-left: 47px;
  background-size: 42px 34px;
  height: 34px;
}

.mapboxgl-popup-content {
  width: 250px;
}

.popup {
  max-width: 250px;
}

.popup-navigate {
  float: right;
  margin-left: 20px;
  background-color: rgb(0, 124, 207);
  mask-size: 25px 25px;
  -webkit-mask-size: 25px 25px;
  mask-image: url(https://www.beans.ai/m/assets/navigate.svg);
  -webkit-mask-image: url(https://www.beans.ai/m/assets/navigate.svg);
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.popup-title {
  display: inline-block;
  margin-top: 5PX;
  margin-bottom: 5px;
}

.popup-name {
  padding: 5px;
  width: 90px;
  display: inline-block;
}

.popup-value {
  padding: 5px;
  width: 140px;
  display: inline-block;
}

.gpopup-title {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.gpopup-img {
  width: 100px;
  margin: 10px 25px 10px 25px;
}

.gpopup-value {
  font-size: 0.8rem;
}

.selectunit-hover {
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
}

.selectunit-container {
  display: block;
  background-color: #fff;
  border: 1px solid #eee;
  padding: 10px;
  /* width: 440px;
  margin-left: -230px; */
  font-family: "Poppins", sans-serif;
  font-size: 12px !important;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.poi-container {
  font-family: "Poppins", sans-serif;
}

.selectunit-container-exit {
  position: absolute;
  cursor: pointer;
  right: 2px;
  top: 8px;
  padding: 0;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 25px;
  text-align: center;
  /* Above the v2-stacked footer (z-index:5) and any in-flow content so
     the X is always tappable on real devices. The selectunit-container
     itself is position:relative for v2 so this resolves correctly. */
  z-index: 20;
}

.selectunit-container-exit:hover {
  color: #a00000;
}

.selectunit-row {
  padding: 1px;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
}

.selectunit-name {
  padding: 5px;
  display: inline-block;
  max-width: calc(100% - 50px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: auto;
  vertical-align: middle
}

.selectunit-value {
  float: right;
  padding: 5px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.selectunit-img {
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}

.selectunit-title {
  font-size: 16px;
  font-weight: 600;
  padding: 5px 5px 5px 0px;
}

.selectunit-drawing {
  max-width: 100%;
  margin-top: 25px;
  text-align: center;
}

.selectunit-drawing-img {
  max-width: 100%;
  max-height: 120px;
  cursor: pointer;
}

.selectunit-leftright {
  display: flex;
  height: 100%;
}

.selectunit-leftright .selectunit-drawing {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  flex: 2;
  height: 100%;
  align-items: center;
}

.selectunit-leftright .selectunit-drawing-img {
  max-width: 100%;
  max-height: 100%;
  width: 90%;
  height: 90%;
  /* height: 100%; */
  display: flex;
  object-fit: contain;
}

.selectunit-leftright .selectunit-content {
  display: flex;
  flex-direction: column;
  flex: 2;
}

.selectunit-leftright .selectunit-title {
  font-size: 24px;
}

.selectunit-leftright .selectunit-subcontent {
  font-size: 0.8rem;
  color: #999;
}

.selectunit-leftright .selectparking-confirm {
  margin-top: 10px;
}

.selectunit-leftright .selectunit-date {
  margin-top: 30px;
  font-size: 0.8rem;
  padding: 8px;
  width: 50%;
}

.beans-btn {
  font-family: "Poppins", sans-serif;
  border-radius: 5px 5px 5px 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  outline: none;
  margin-top: 10px;
  padding: 8px 12px;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  transition: all 0.3s;
  margin-bottom: 6px;
  outline: none;
  line-height: 14px;
  min-width: 100px;
  cursor: pointer;

  border: 1px solid #3079ED !important;
  color: white !important;
  background-color: #4D90FE !important;
}

.selectparking-confirm {
}

.selectparking-cancel {
  border: 1px solid #777777 !important;
  background-color: #AAAAAA !important;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.selectparking-container {
  display: block;
  background-color: #fff;
  border: 1px solid #eee;
  padding: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 12px !important;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.selectparking-name {
  padding: 5px;
  width: 175px;
  display: inline-block;
}

.selectparking-value {
  padding: 5px;
  width: 95px;
  text-align: right;
  display: inline-block;
}

.marker-image-preview-container {
  position: relative;
  width: 85px;
  height: 85px;
  border: 1px solid #ccc;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  text-align: center;
}

.marker-image-preview {
  max-width: 85px !important;
  max-height: 80px !important;
}

.poi-swimmingpool {
  background: url(https://www.beans.ai/m/assets/iswimmingpool.svg) no-repeat 0px 0px;
}

.poi-office {
  background: url(https://www.beans.ai/m/assets/ioffice.svg) no-repeat 0px 0px;
}

.poi-clubhouse {
  background: url(https://www.beans.ai/m/assets/iclubhouse.svg) no-repeat 0px 0px;
}

.poi-laundry {
  background: url(https://www.beans.ai/m/assets/ilaundry.svg) no-repeat 0px 0px;
}

.poi-mailroom {
  background: url(https://www.beans.ai/m/assets/imailroom.svg) no-repeat 0px 0px;
}

.poi-packagelocker {
  background: url(https://www.beans.ai/m/assets/ipackagelocker.svg) no-repeat 0px 0px;
}

.poi-bbq {
  background: url(https://www.beans.ai/m/assets/ibbq.svg) no-repeat 0px 0px;
}

.poi-gym {
  background: url(https://www.beans.ai/m/assets/igym.svg) no-repeat 0px 0px;
}

.poi-trash {
  background: url(https://www.beans.ai/m/assets/itrash.svg) no-repeat 0px 0px;
}

.poi-tennis {
  background: url(https://www.beans.ai/m/assets/itennis.svg) no-repeat 0px 0px;
}

.poi-carwash {
  background: url(https://www.beans.ai/m/assets/icarwash.svg) no-repeat 0px 0px;
}

.poi-cyclestorage {
  background: url(https://www.beans.ai/m/assets/icyclestorage.svg) no-repeat 0px 0px;
}

.marker-mylocation {
  background-image: url('../png/bluecircle-with-horn.png');
  background-size: cover;
  width: 130px;
  height: 130px;
}

.beans-container {
  --fs-top-offset: 0px;
  --fs-bottom-offset: 0px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.beans-container.beans-container-fullscreen {
  position: fixed !important;
  left: 0 !important;
  top: var(--fs-top-offset) !important;
  height: calc(100vh - var(--fs-top-offset) - var(--fs-bottom-offset)) !important;
  margin: 0 !important;
  width: 100vw !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.beans-container-fullscreen > .BeansMapbox,
.beans-container-fullscreen > .BeansEsri {
  height: 100% !important;
  margin-left: 0 !important;
  width: 100% !important;
  border: 0 !important;
}

/* .beans-container-fullscreen > .BeansMapbox {
  height: 100vh !important;
  position: absolute !important;
} */

.beans-container-fullscreen > .beans-card  {
  display: none !important;
}

/* @media screen and (min-width: 500px) { */
@container body2 (min-width: 500px) {
  .beans-card {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;

    position: absolute;
    left: 20px;
    top: 20px;
    padding: 20px;
    margin: 0;
    width: 350px;
    max-width: 33%;
    border-radius: 5px;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
    height: calc(100% - 80px);
    background-color: #fff;
    z-index: 999;

    overflow-y: scroll;
  }

  .beans-card.modern {
    box-shadow: none;
    padding: 0px;
    width: 280px;
  }

  .beans-card.separate-facilities-card {
    height: calc(100% - 60px);
  }

  .beans-card.modern .result-card {
    padding: 0px;
  }

  .beans-buttonbar {
    top: 20px !important;
  }

  .beans-buttonbar-left {
    top: 20px !important;
  }

  .beans-buttonbar-left.wide {
    position: absolute;
    right: 80px;
    width: calc(100% - 510px);
    top: 10px;
    max-width: calc(100% - 90px);
    height: calc(100% - 80px);
  }

  .beans-buttonbar-left.modern.wide {
    position: absolute;
    right: 180px;
    width: calc(100% - 610px);
    top: 10px;
    max-width: calc(100% - 90px);
  }
  .wide .selectunit-container {
    height: calc(100% - 150px);
    padding: 20px;
  }
  .facilities-card-key {
    bottom: 0px;
  }
  .floorplan-container {
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}

.links-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.links-text {
  text-decoration: underline;
  padding-top: 3px;
  margin-left: 10px;
  margin-right: 10px;
}

/* @media screen and (max-width: 500px) { */
@container body2 (max-width: 500px) {
  .links-card {
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: #fff;

    position: absolute;
    top: 15px;
    width: 50%;
    left: 10px;
  }

  .facilities-card-key {
    bottom: 40px;
  }

  .floorplan-container {
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }
}

/* @media screen and (min-width: 500px) { */
@container body2 (min-width: 500px) {
  .links-card {
    background-color: #eee;
    margin-top: 10px;
    height: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-radius: 8px;
  }
}

.floor-card {
  margin-top: 20px;
  text-align: left;
  padding: 7.5px;
  max-height: 230px;
  overflow-y: scroll;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  border-radius: 5px;
  width: unset;
}

.parking-card {
  margin-top: 10px;
}

.directions-row {
  margin-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.directions-card {
  padding-bottom: 20px;
  padding-right: 10px;
}

.directions-img-container {
  display: inline-block;
  width: 30px;
  vertical-align: top;
}

.directions-text {
  display: inline-block;
  width: calc(100% - 30px);
}

.directions-subtext {
  margin-left: 30px;
  font-size: 11px !important;
  color: #777 !important;
}

.clickdata-card {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #eee;
}

.clickdata-container {
  border-bottom: 1px solid #eee;
  padding-top: 5px;
  padding-bottom: 5px;
}

.clickdata-key {
  width: 50%;
  display: inline-block;
}

.clickdata-value {
  width: 50%;
  display: inline-block;
}

.floor-picker {
  font-size: 12px !important;
  font-weight: 500 !important;

  width: 27.5px;
  margin: 0 2.5px 5px 2.5px;
  height: 23px;
  text-align: center;
  display: inline-block;
  padding-top: 2px;
  cursor: pointer;
  /* --floor-density is set per-button in populateFloorCard: 0.0 (no
     selectable units) → 1.0 (most units of any floor). Lightness ramps from
     95% down to 70% so floors with more units sit visibly heavier. */
  background-color: hsl(0, 0%, calc(95% - var(--floor-density, 0) * 25%));
  color: #000;
}

.floor-picker-title {
  font-weight: 600 !important;
  font-size: 0.8rem;
  color: #000;
  text-align: left;
  margin: 0px 2.5px 5px 2.5px;
}

.floor-picker-active {
  font-size: 12px !important;
  font-weight: 500 !important;

  width: 27.5px;
  margin: 0 2.5px 5px 2.5px;
  height: 23px;
  text-align: center;
  display: inline-block;
  padding-top: 2px;
  cursor: pointer;
  background-color: var(--beans-color-1, #24453e);
  color: var(--beans-text-color-1, #fff) !important;
}

.floor-picker:hover {
  background-color: var(--beans-color-2, #027BCF);
  color: #fff;
}

.parking-picker {
  font-size: 12px !important;
  font-weight: 500 !important;

  width: 100%;
  height: 23px;
  margin: 0;
  display: inline-block;
  padding-top: 2px;
  cursor: pointer;
  border: 1px solid #eee;
  background-color: #fff;
}

.parking-picker-circle {
  height: 10px;
  width: 10px;
  background-color: #fff;
  border-radius: 5px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.parking-picker-text {
  float: right;
  margin-right: 10px;
}

.parking-picker-active {
  font-size: 12px !important;
  font-weight: 500 !important;

  width: 320px;
  height: 23px;
  margin: 0;
  display: inline-block;
  padding-top: 2px;
  cursor: pointer;
  border: 1px solid #eee;
  background-color: var(--beans-color-1, #24453e);
  color: #fff !important;
}

.parking-picker:hover {
  background-color: #027BCF;
  color: #fff;
}

/* @media screen and (min-width: 500px) { */
@container body2 (min-width: 500px) {
  .swipe-card {
    display: none;
  }
}

.beans-container {
  container-type: inline-size;
  container-name: body2;
}

/* @media screen and (max-width: 500px) { */
@container body2 (max-width: 500px) {
  .swipe-card {
    height: 5px;
    border-radius: 2.5px;
    width: 20%;
    background-color: #ccc;
    position: relative;
    margin-top: 10px;
    left: 40%;
  }

  .beans-card {
    border-radius: 10px;
    border: 0px;
    border-top: 1px solid #eaeaea;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }

  .beans-card.big-card {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 120px;
    height: calc(100% - 120px);
    background-color: #fff;
    z-index: 999;
  }

  .beans-card.small-card {
    position: absolute;
    left: 0px;
    width: 100%;
    top: calc(100% - 260px);
    height: 260px;
    background-color: #fff;
    z-index: 999;
  }

  .beans-card.active {
    top: 10px;
    height: calc(100% - 10px);
  }
}

@container body2 (max-width: 500px) {
  .esri-ui {
    inset: 0px 0px -40px !important;
  }
}

.esri-daylight {
  position: relative !important;
  /* right: 160px !important; */
  bottom: 0px !important;
  margin-left: 0px !important;
  max-width: calc(100% - 40px);
  border-radius: 10px;
}

.esri-popup, .esri-popup__main-container {
  border-radius: 10px;
}

@container body2 (max-width: 500px) {
  .esri-daylight {
    /* position: fixed !important; */
    right: auto;
    left: 0px !important;
    bottom: 70px !important;
    /* margin-left: 0px !important; */
    max-width: calc(100% - 160px);
    border-radius: 10px;
  }

  .esri-popup, .esri-popup__main-container {
    border-radius: 10px;
  }
}

.unitlist-filter-subcontainer {
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  flex: 2;
}

.available-title {
  margin-top: 20px;
}

.available-disclaimer {
  font-size: 0.6rem !important;
  text-align: justify;
  color: #aaa !important;
  margin-top: 5px;
  margin-bottom: 5px;
}

.unitlist-element-container {
  border: 1px solid #eef0f3;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.unitlist-element-container.selected {
  background-color: var(--beans-color-1, #24453e);
  border: 1px solid var(--beans-color-1, #24453e);
  padding: 12px;
  cursor: pointer;
}

.unitlist-element-container.selected .unitlist-element-title, .unitlist-element-container.selected .unitlist-element-val, .unitlist-element-container.selected .unitlist-element-name {
  color: #fff;
}

.unitlist-element-container.selected .unitlist-element-img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.unitlist-element-container.filteredout {
}

.unitlist-element-container.filteredout div {
  color: #ddd;
}

.unitlist-element-container:hover {
  background-color: #eaeaea;
}

.unitlist-element-container.selected:hover {
  background-color: var(--beans-color-1, #24453e);
  opacity: 0.8;
}

.unitlist-element-name {
  padding: 1px;
  display: inline-block;
}

.unitlist-element-img {
  width: 14px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

/* .unitlist-element-container.selected:hover {
  background-color: #24453e;
  color: #fff;
  border-bottom: 1px solid #eee;
  padding: 10px;
} */

.unitlist-element-title {
  font-weight: 600 !important;
}

/* ── Unit list v2 card layout ──────────────────────────────────────── */
.unitlist-v2-card {
  display: flex;
  gap: 12px;
  align-items: center;
}
.unitlist-v2-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #f3f4f6;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}
.unitlist-v2-thumb svg {
  width: 24px;
  height: 24px;
}
.unitlist-v2-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.unitlist-v2-thumb-code {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.unitlist-v2-info {
  flex: 1;
  min-width: 0;
}
.unitlist-v2-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
/* Specificity crank — .beans-card div/span sets font-weight:400 and
   font-size:0.8rem on every div+span inside the side card, which beats
   single-class rules. Using .unitlist-element-container as an anchor
   raises specificity above the .beans-card descendant rules. */
.unitlist-element-container .unitlist-v2-name {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unitlist-element-container .unitlist-v2-price {
  /* Match the unit name which is forced to 600 by .unitlist-element-title's
     !important rule. Keeping them visually balanced. */
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  flex-shrink: 0;
}
.unitlist-element-container .unitlist-v2-price-unit {
  font-size: 10px;
  font-weight: 400;
  color: #64748b;
  margin-left: 1px;
}
/* "From " prefix on price — smaller and softer than the number. */
.unitlist-element-container .unitlist-v2-price-from {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  margin-right: 2px;
}
.unitlist-element-container.selected .unitlist-v2-price-from {
  color: rgba(255, 255, 255, 0.78);
}
.unitlist-element-container .unitlist-v2-plan {
  font-size: 11px;
  font-weight: 600;
  color: #1a1c1f;
  margin-top: 3px;
  letter-spacing: 0.02em;
  /* Long marketing names get ellipsized on a single line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.unitlist-element-container.selected .unitlist-v2-plan {
  color: #ffffff;
}
.unitlist-element-container .unitlist-v2-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
}
.unitlist-element-container .unitlist-v2-status,
.unitlist-element-container .unitlist-v2-status > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #10b981;
  margin-top: 4px;
  font-weight: 500;
}
.unitlist-element-container .unitlist-v2-status > span {
  display: inline;
  gap: 0;
  margin-top: 0;
}
.unitlist-v2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}
.unitlist-element-container .unitlist-v2-floor-chip {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748b;
  background: #e5e7eb;
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Selected state — invert colors for the v2 card on the dark green background. */
.unitlist-element-container.selected .unitlist-v2-name,
.unitlist-element-container.selected .unitlist-v2-price,
.unitlist-element-container.selected .unitlist-v2-price-unit,
.unitlist-element-container.selected .unitlist-v2-meta {
  color: #fff;
}
.unitlist-element-container.selected .unitlist-v2-status,
.unitlist-element-container.selected .unitlist-v2-status > span {
  color: #4ade80;
}
.unitlist-element-container.selected .unitlist-v2-dot {
  background: #4ade80;
}
.unitlist-element-container.selected .unitlist-v2-thumb {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.unitlist-element-container.selected .unitlist-v2-thumb-code {
  color: #cbd5e1;
}
.unitlist-element-container.selected .unitlist-v2-floor-chip {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.esri-popup__content {
  margin: 0px 15px !important;
}

.esri-popup__main-container {
  width: 250px !important;
  /* max-width: 320px !important; */
}

.popup-image {
  max-width: 100%;
  max-height: 100%;
}

.list-poi {
  width: 200px;
  padding: 10px;
  height: 150px;
  font-size: 13px;
  position: absolute;
  background-color: #fff;
  margin-left: 200px;
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
  box-sizing: content-box;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes list-poi-animation {
    100% {margin-left: -230px;}
}
/* Standard syntax */
@keyframes list-poi-animation {
    100% {margin-left: -230px;}
}

.list-poi-active {
  -webkit-animation: list-poi-animation 1s forwards; /* Chrome, Safari, Opera */
    animation: list-poi-animation 1s forwards;
}

@container body2 (max-width: 500px) {
  .list-poi {
    width: 200px;
    padding: 10px;
    height: 140px;
    position: absolute;
    background-color: #fff;
    margin-left: 60px;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes list-poi-animation-mobile {
      100% {margin-left: -240px;}
  }
  /* Standard syntax */
  @keyframes list-poi-animation-mobile {
      100% {margin-left: -240px;}
  }

  .list-poi-active {
    -webkit-animation: list-poi-animation-mobile 1s forwards; /* Chrome, Safari, Opera */
      animation: list-poi-animation-mobile 1s forwards;
  }
}

.list-poi-element {
  padding: 7.5px 10px 7.5px 10px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

.list-poi-element:hover {
  background-color: #fafafa;
}

.list-poi-element-icon {
  float: left;
  background-color: #D3B32A;
  margin-right: 10px;
  width: 24px;
  height: 16px;
  text-align: center;
  padding: 4px 0px 4px 0px;
  border-radius: 4px;
  box-sizing: content-box;
}

.list-poi-element-text {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
}

.list-poi-element-icon-img {
  width: 16px;
}

.beans-map-button-container .list-filters, .beans-buttonbar .list-filters {
  width: 200px;
  padding: 10px;
  position: absolute;
  background-color: #fff;
  margin-left: 200px;
  border-radius: 5px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes list-filters-animation {
    100% {margin-left: -230px;}
}
/* Standard syntax */
@keyframes list-filters-animation {
    100% {margin-left: -230px;}
}

.beans-map-button-container .list-filters-active, .beans-buttonbar .list-filters-active {
  -webkit-animation: list-filters-animation 0.5s forwards; /* Chrome, Safari, Opera */
    animation: list-filters-animation 0.5s forwards;
}

.beans-mobile-popup-card {
  position: fixed;
  top: 55px;
  max-width: 240px;
  width: 240px;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  left: 15px;
  text-align: center;
  padding: 5px;
  display: none;
  opacity: 0.0;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

@-webkit-keyframes mobile-popup-animation {
  100% {opacity: 1.0;}
}

@keyframes mobile-popup-animation {
  100% {opacity: 1.0;}
}

.beans-mobile-popup-card.active {
  -webkit-animation: mobile-popup-animation 0.5s ease-out forwards; /* Chrome, Safari, Opera */
  animation: mobile-popup-animation 0.5s ease-out forwards;
  display: block !important;
}

@container body2 (max-width: 500px) {
  .beans-map-button-container .list-filters, .beans-buttonbar .list-filters {
    width: 200px;
    padding: 10px;
    position: absolute;
    background-color: #fff;
    margin-left: 60px;
    border-radius: 5px;
  }

  .beans-outside-button-container .list-filters {
    width: calc(100% - 20px);
    padding: 10px;
    position: absolute;
    background-color: #fff;
    color: #000;
    margin-top: -400px;
    border-radius: 5px;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes outside-list-filters-animation-mobile {
      100% {margin-top: 40px;}
  }
  /* Standard syntax */
  @keyframes outside-list-filters-animation-mobile {
      100% {margin-top: 40px;}
  }

  .beans-outside-button-container .list-filters-active {
    -webkit-animation: outside-list-filters-animation-mobile 0.5s forwards; /* Chrome, Safari, Opera */
      animation: outside-list-filters-animation-mobile 0.5s forwards;
  }
}

.beans-map-button-container .list-floors {
  width: 200px;
  padding: 10px;
  height: 140px;
  position: absolute;
  background-color: #fff;
  margin-left: 200px;
  border-radius: 5px;
  font-family: "Poppins", sans-serif;
}

/* .MuiDialogContent-root:has(.beans-container) {
  padding-bottom: 0 !important;
} */

/* Chrome, Safari, Opera */
@-webkit-keyframes list-floors-animation {
    100% {margin-left: -230px;}
}
/* Standard syntax */
@keyframes list-floors-animation {
    100% {margin-left: -230px;}
}

.beans-map-button-container .list-floors-active {
  -webkit-animation: list-floors-animation 0.5s forwards; /* Chrome, Safari, Opera */
    animation: list-floors-animation 0.5s forwards;
}

@container body2 (max-width: 500px) {
  .beans-map-button-container .list-floors {
    width: 200px;
    padding: 10px;
    height: 140px;
    position: absolute;
    background-color: #fff;
    margin-left: -280px;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes list-floors-animation-mobile {
      100% {margin-left: 60px;}
  }
  /* Standard syntax */
  @keyframes list-floors-animation-mobile {
      100% {margin-left: 60px;}
  }

  .beans-outside-button-container .list-floors {
    width: calc(100% - 20px);
    padding: 10px;
    position: absolute;
    background-color: #fff;
    margin-top: -400px;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes outside-list-floors-animation-mobile {
      100% {margin-top: 40px;}
  }
  /* Standard syntax */
  @keyframes outside-list-floors-animation-mobile {
      100% {margin-top: 40px;}
  }

  .beans-map-button-container .list-floors-active {
    -webkit-animation: list-floors-animation-mobile 0.5s forwards; /* Chrome, Safari, Opera */
      animation: list-floors-animation-mobile 0.5s forwards;
  }

  .beans-outside-button-container .list-floors-active {
    -webkit-animation: outside-list-floors-animation-mobile 0.5s forwards; /* Chrome, Safari, Opera */
      animation: outside-list-floors-animation-mobile 0.5s forwards;
  }
}

.list-floors-element {
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

.list-floors-element:hover {
  background-color: #fafafa;
}

.list-floors-element-icon {
  display: inline-block;
  background-color: #D3B32A;
  padding: 2px;
  margin-right: 10px;
}

.list-floors-element-text {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
}

.list-floors-element-icon-img {
  width: 16px;
}

select {
  font-size: 0.8rem;
}

.esri-compass {
  margin-bottom: 20px !important;
}

.pricing-header {
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}

.pricing-row {
  display: flex;
  margin: 10px;
}

.pricing-col-left {
  flex-basis: 50%;
  box-sizing: border-box;
}

.pricing-col-right {
  flex-basis: 50%;
  box-sizing: border-box;
}

.pricing-col-options {
  display: flex;
}

select.pricing-col-options {
  padding: 2px;
  width: 90%;
}

.pricing-col-right-val-2 {
  flex-basis: 50%;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 3px;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
}

.pricing-col-right-val-3 {
  flex-basis: 33%;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 3px;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
}

.pricing-col-right-val-on {
  background-color: #4285F4;
  border-color: #4285F4;
  color: #fff;
}


.autoComplete_wrapper {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  width: calc(100% - 70px);
}

.ac-clearbutton {
  text-align: right;
  float: right;
  width: 50px;
  cursor: pointer;
  color: #aaa;
  padding-top: 5px;
}

.ac-clearbutton:hover {
  cursor: pointer;
  color: #1a0dab;
}


.autoComplete_wrapper > input {
  width: 100%;
  height: 30px;
  padding-left: 10px;
  color: rgb(116, 116, 116);
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
  outline: none;
}

.autoComplete_wrapper > ul {
  box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.autoComplete_wrapper > input::placeholder {
  color: rgba(123, 123, 123, 0.5);
  transition: all 0.3s ease;
}

.autoComplete_wrapper > ul {
  position: absolute;
  max-height: 226px;
  overflow-y: scroll;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0.5rem 0 0 0;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid rgba(33, 33, 33, 0.1);
  z-index: 1000;
  outline: none;
}

.autoComplete_wrapper > ul > li {
  padding: 10px 20px;
  list-style: none;
  text-align: left;
  color: #212121;
  transition: all 0.1s ease-in-out;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.autoComplete_wrapper > ul > li::selection {
  color: rgba(#ffffff, 0);
  background-color: rgba(#ffffff, 0);
}

.autoComplete_wrapper > ul > li:hover {
  cursor: pointer;
  background-color: rgba(123, 123, 123, 0.1);
}

.autoComplete_wrapper > ul > li mark {
  background-color: transparent;
  color: rgba(255, 122, 122, 1);
  font-weight: bold;
}

.autoComplete_wrapper > ul > li mark::selection {
  color: rgba(#ffffff, 0);
  background-color: rgba(#ffffff, 0);
}

.autoComplete_wrapper > ul > li[aria-selected="true"] {
  background-color: rgba(123, 123, 123, 0.1);
}

@media only screen and (max-width: 600px) {
  .autoComplete_wrapper > input {
    width: 18rem;
  }
}

.beans-btn {
  background-color: var(--beans-color-1, #24453e) !important;
  border-color: var(--beans-color-1, #24453e) !important;
  color: var(--beans-text-color-1, #fff) !important;
}

.widget .html-content {
  max-width: 100%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes list-card-animation-mobile {
    100% {top: var(--beans-cardtopspace, 40px);}
}
/* Standard syntax */
@keyframes list-card-animation-mobile {
    100% {top: var(--beans-cardtopspace, 40px);}
}

.force-show {
  -webkit-animation: list-card-animation-mobile 0.5s forwards; /* Chrome, Safari, Opera */
    animation: list-card-animation-mobile 0.5s forwards;

  display: block !important;
  /* top: var(--beans-cardtopspace, 40px) !important; */
  height: var(--beans-cardheight, calc(100% - 120px)) !important;
  overflow-y: scroll;
}

/* ── Wide unit-card v2 (showClickData wide branch) ──────────────────── */
.wide .selectunit-container:has(.selectunit-v2) {
  max-width: 875px;
  /* Explicit (not auto) height — without this, .selectunit-v2 { height:
     100% } collapses because the parent's height resolves to "auto"
     (percentage heights against auto parents don't apply), which means
     the body has no definite height to overflow against and the scroll
     never engages. A fixed-shape card on resize also keeps the footer
     buttons inside the viewport. */
  height: 650px;
  max-height: calc(100% - 20px);
  padding: 0;
  margin-left: auto;
  overflow: hidden;
}

/* Highrise floor picker is on → 320px beansCard on the left + 420px
   floor picker on the right are already eating the viewport. Clamp the
   card so it never extends past the remaining map area; 40px extra is a
   safety margin for shadows/padding. The vw-based form is correct here
   because beansButtonbarLeft is positioned with `right: 600px` from the
   viewport, so we measure card width from the viewport too. */
.has-highrise-floor-picker .wide .selectunit-container:has(.selectunit-v2) {
  max-width: calc(100vw - 960px);
}
.wide .selectunit-container:has(.selectunit-v2) .selectunit-v2 {
  height: 100%;
  min-height: 0;
}
.selectunit-v2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
}
.selectunit-v2-header { margin-bottom: 14px; }
.selectunit-v2-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.selectunit-v2-subtitle {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.08em;
  margin-top: 3px;
  text-transform: uppercase;
}
.selectunit-v2-body {
  display: flex;
  gap: 10px;
  flex: 1;
  min-height: 0;
  /* Body owns the scroll. Header above and footer below stay put. */
  overflow-y: auto;
}
.selectunit-v2-left {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.selectunit-v2-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.selectunit-v2-floorplan {
  /* Square box — drives the rest of the left column's height. Width is
     capped so the modal height stays reasonable even when the left
     column is wide; on narrower columns it shrinks naturally. */
  flex: none;
  align-self: center;
  width: 100%;
  max-height: 300px;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.selectunit-v2-floorplan img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.selectunit-v2-fp-icon {
  width: 38px; height: 38px; color: #d1d5db; margin-bottom: 6px;
}
.selectunit-v2-fp-code {
  font-size: 11px; font-weight: 600; color: #94a3b8; letter-spacing: 0.02em;
}
.selectunit-v2-fp-meta {
  font-size: 10px; color: #94a3b8; margin-top: 4px; text-align: center;
}
.selectunit-v2-price {
  font-size: 22px; font-weight: 700; line-height: 1.1;
}
.selectunit-v2-price-unit {
  font-size: 13px; font-weight: 500; color: #64748b; margin-left: 2px;
}
/* "From " prefix — smaller / softer than the number. */
.selectunit-v2-price-from {
  font-size: 12px; font-weight: 500; color: #64748b; margin-right: 3px;
}
.selectunit-v2-avail-line {
  display: flex; align-items: center; font-size: 11px;
  color: #10b981; margin-top: 3px; font-weight: 500;
}
.selectunit-v2-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; margin-right: 6px; display: inline-block; flex-shrink: 0;
}
.selectunit-v2-btn {
  background: #f5f5f5; color: #0f172a;
  border-radius: 9px; padding: 10px 12px;
  text-align: center; font-size: 12px; font-weight: 600;
  line-height: 1.2; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; transition: background 150ms ease;
  user-select: none;
}
.selectunit-v2-btn:hover { background: #e5e5e5; }
.selectunit-v2-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.selectunit-v2-stat-tile {
  background: #f5f5f5; border-radius: 8px;
  padding: 7px 2px; text-align: center; min-height: 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.selectunit-v2-stat-num {
  font-size: 14px; font-weight: 700; line-height: 1;
}
.selectunit-v2-stat-label {
  font-size: 8px; font-weight: 600; color: #94a3b8;
  letter-spacing: 0.08em; margin-top: 3px; text-transform: uppercase;
}
.selectunit-v2-card {
  background: #f5f5f5; border-radius: 10px;
  padding: 16px 16px;
}
.selectunit-v2-card-label {
  font-size: 9px; font-weight: 600; color: #94a3b8;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px;
}
.selectunit-v2-card-value {
  font-size: 13px; font-weight: 700; line-height: 1.2;
}
.selectunit-v2-card-value-row {
  display: flex; align-items: center;
}
.selectunit-v2-card-sub {
  font-size: 10px; color: #94a3b8; margin-top: 4px;
}
.selectunit-v2-reel-btn {
  background: #0f172a; color: #fff;
  margin: 2px 0;
}
.selectunit-v2-reel-btn:hover { background: #1e293b; }
.selectunit-v2-reel-tm {
  font-size: 0.55em; font-weight: 500; vertical-align: super;
  margin-left: 2px; line-height: 0;
}

/* ── Stacked v2 (non-wide popup, all viewports) ────────────────────── */
/* DOM: .selectunit-container > .selectunit-data > .selectunit-v2-stacked.
   The container needs an EXPLICIT height (not just max-height) for the
   inner percentage heights to resolve and overflow-y:auto to engage.
   That height is set inline from JS based on mainDiv.offsetHeight when
   the popup opens (see showClickData), so the popup always bounds to
   the iframe's actual visible area — vh would resolve against the
   parent page's viewport in many embed setups. */
.selectunit-container:has(.selectunit-v2-stacked) {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.selectunit-v2.selectunit-v2-stacked {
  /* Own the scroll. Reserve room at the bottom for the absolute footer. */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 76px;
}
.selectunit-v2-stacked .selectunit-v2-body {
  flex-direction: column;
  overflow: visible;
  flex: none;
}
.selectunit-v2-stacked .selectunit-v2-left,
.selectunit-v2-stacked .selectunit-v2-right {
  flex: none;
  width: 100%;
  min-width: 0;
}
.selectunit-v2-stacked .selectunit-v2-floorplan {
  max-width: 100%;
}
.selectunit-v2-stacked .selectunit-v2-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Solid background prevents scroll content from showing through.
     Top padding gives the same gap the desktop footer's padding-top:10
     does; horizontal padding aligns the buttons with the rest of v2's
     14/16 padding. */
  background: #fff;
  padding: 10px 16px 14px;
  z-index: 5;
  /* Soft fade-out above the footer so scrolled content tucks under it
     gracefully instead of hard-cutting. */
  box-shadow: 0 -8px 12px -6px rgba(0, 0, 0, 0.08);
}

/* ── Gallery (left column, under Map Reel) ─────────────────────────── */
.selectunit-v2-gallery {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.selectunit-v2-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.selectunit-v2-gallery-tile {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  cursor: pointer;
  position: relative;
}
.selectunit-v2-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.selectunit-v2-tour-tile {
  background: #0f172a;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.selectunit-v2-tour-play {
  width: 22px; height: 22px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  padding-left: 2px;
  box-sizing: border-box;
}
.selectunit-v2-tour-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Pricing calculator (right column, replaces info cards) ────────── */
.selectunit-v2-pricing-label {
  margin-bottom: 2px;
}
.selectunit-v2-pricing {
  /* Calculator brings its own CSS via the customer's <link>. We just
     scope it inside v2 to hide the bits we don't want and keep the
     visual flow consistent with the rest of the card. */
  font-size: 12px;
}
.selectunit-v2-pricing .fees-calc-apply-container,
.selectunit-v2-pricing .fees-calc-breakdown {
  /* Apply Now lives in the footer; breakdown is collapsed by default
     in the design to keep the panel focused on totals. */
  display: none;
}

/* ── Wide v2: mobile (≤ 600px) ──────────────────────────────────────── */
@media only screen and (max-width: 600px) {
  /* FS image viewer — lock image at 50% of viewer height on mobile so
     the image doesn't eat the whole screen. The flex centering on the
     parent handles the surrounding margin (~22% above, ~22% below the
     image before the bottom 6% nav strip). */
  .floorplan-img {
    height: 50%;
  }

  /* Floating card — 100px gap top + bottom, 3% on sides. Card is a
     fixed-size box; the scroll lives INSIDE it. */
  .beans-buttonbar-left.wide {
    /* position: fixed !important; */
    top: 100px;
    bottom: 100px;
    left: 10px;
    right: 10px;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    z-index: 100;
  }
  /* Container is the positioning context for the sticky button row;
     overflow:hidden keeps scroll inside .selectunit-v2 only. */
  .wide .selectunit-container:has(.selectunit-v2) {
    position: relative;
    max-width: none;
    /* width: 100%; */
    height: 100%;
    margin-left: 0;
    max-height: none;
    overflow: hidden;
    border-radius: 12px;
  }
  /* selectunit-v2 fills the card. Header (auto) + Body (flex:1, scrolls)
     + Footer (auto) — buttons stay anchored at the bottom of the card. */
  .selectunit-v2 {
    padding: 14px 14px 14px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .selectunit-v2-body {
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }
  .selectunit-v2-left,
  .selectunit-v2-right {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .selectunit-v2-floorplan {
    max-width: 100%;
  }
  /* Footer keeps its flex-row default — buttons share the bottom strip
     with the same flex:1-each behavior as desktop. */
  .selectunit-v2-footer {
    padding-top: 12px;
  }
  .selectunit-v2-footer > .selectunit-v2-btn,
  .selectunit-v2-footer > .selectunit-v2-apply-btn {
    height: 44px;
    font-size: 13px;
  }
}
.selectunit-v2-apply-btn {
  background: var(--beans-color-1, #24453e); color: #ffffff;
  border-radius: 8px; padding: 9px;
  text-align: center; font-size: 11px; font-weight: 600;
  line-height: 1.2; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; transition: filter 150ms ease;
  user-select: none;
}
.selectunit-v2-apply-btn:hover { filter: brightness(0.92); }

/* Footer holds Schedule Tour + Apply Now as siblings of the scrolling
   body. Flex ratios + gap mirror .selectunit-v2-body (left=1.2, right=1,
   gap=10px) so each button's width matches the column above it. If only
   Apply Now exists, its flex:1 still stretches it to fill the row. */
.selectunit-v2-footer {
  flex: none;
  display: flex;
  gap: 10px;
  padding-top: 10px;
}
.selectunit-v2-footer > .selectunit-v2-schedule-btn {
  flex: 1.2;
  margin: 0;
}
.selectunit-v2-footer > .selectunit-v2-apply-btn {
  flex: 1;
  margin: 0;
}