/* 地圖搜尋頁：左側手機風格列表 + 右側地圖 */
:root {
  --ms-color-primary: #e2540a;
  --ms-color-primary-dark: #c44708;
  --ms-color-link: #ef5a00;
  --ms-color-accent: #1a1a1a;
  --ms-color-text-soft: #666666;
  --ms-color-border: #e5e5e5;
  --ms-color-bg: #ffffff;
  --ms-color-cluster: rgba(226, 84, 10, 0.35);
  --ms-color-cluster-inner: rgba(226, 84, 10, 0.9);
  --ms-color-cluster-text: #ffffff;
  --ms-color-cluster-active-ring: rgba(226, 84, 10, 0.55);
  --ms-color-cluster-active-outer: rgba(196, 71, 8, 0.45);
  --ms-color-map-bg: #fff8f2;
  --ms-color-list-active: #fff3e8;
  --ms-space-md: 1rem;
  --ms-radius-sm: 0.25rem;
  --ms-list-width: 22.5rem;
  --ms-sheet-shadow: rgba(0, 0, 0, 0.14);
  --ms-sheet-bar: #d0d0d0;
  --ms-sheet-peek: 4.5rem;
  --ms-sheet-mid: 42vh;
  --ms-sheet-full: 85vh;
}

.map-search-body {
  margin: 0;
  padding: 0;
}

.map-search-body .bottom2-outer,
.map-search-body .bottom2,
.map-search-body .bottomlist,
.map-search-body .popular_district,
.map-search-body .gotop,
.map-search-body .topnav,
.map-search-body .copyright,
.map-search-body .wa-enquiry {
  display: none !important;
}

/* 桌面隱藏頂欄／側欄；手機顯示 .top */
@media (min-width: 768px) {
  .map-search-body .top,
  .map-search-body .toptools,
  .map-search-body .header,
  .map-search-body nav#sidebar,
  .map-search-body .overlay,
  .map-search-body .top-spacer-mobile {
    display: none !important;
  }

  /* top.php 桌面預留高度，頂欄隱藏後唔好留空 */
  .map-search-body > div.d-md-block[style*="110px"] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .map-search-body .top {
    display: block !important;
  }

  .map-search-body .header {
    display: block !important;
  }
}

.map-search-page {
  /* padding-top: var(--ms-space-md); */
  padding-bottom: 0;
  background: var(--ms-color-bg);
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-search-page__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  /* padding: 0 var(--ms-space-md); */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.map-search-page__title {
  margin: 0 0 var(--ms-space-md);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ms-color-accent);
  flex-shrink: 0;
}

.map-search-page .findForm {
  margin-bottom: 5px;
  flex-shrink: 0;
}

/* 篩選列貼喺「租樓」右側同一行 */
.map-search-page__topsearch {
  /* gap: 0.75rem; */
  flex-wrap: wrap;
  align-items: center;
}

.map-search-page__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.5rem;
  line-height: 0;
  margin-left: 0.5rem;
}

.map-search-page__brand-logo {
  display: block;
  height: 3.25rem;
  width: auto;
  /* max-width: 9rem; */
  object-fit: contain;
}

/* 桌面／平板：買賣類型（所有／買樓／租樓）改喺其他篩選左側同一行 */
@media (min-width: 768px) {
  .map-search-page__topsearch {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .map-search-page__topsearch .search-type {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    overflow-x: visible;
  }

  .map-search-page__topsearch .search-type > div {
    flex: 0 0 auto;
  }

  .map-search-page__topsearch .search-type a {
    width: auto;
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .map-search-page__filters {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* 手機已有 .top 頂欄 Logo，篩選列唔重複顯示 */
  .map-search-page__brand {
    display: none;
  }
}

.map-search-page__filters {
  min-width: 0;
  overflow-x: auto;
}

.map-search-page__filters > .d-flex {
  flex-wrap: nowrap;
  align-items: center;
}

.map-search-page__status {
  margin: 0 0 0 0.75rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--ms-color-text-soft);
  align-self: center;
  flex-shrink: 0;
}

.map-search-page__body {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  overflow: hidden;
  margin-bottom: 0;
}

.map-search-page__list-wrap {
  flex: 0 0 var(--ms-list-width);
  width: var(--ms-list-width);
  max-width: 40%;
  border-right: 1px solid var(--ms-color-border);
  background: var(--ms-color-bg);
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.map-search-page__list-title {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem 0.75rem 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ms-color-accent);
  border-bottom: 1px solid var(--ms-color-border);
}

.map-search-page__list {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.map-search-page__list-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--ms-color-text-soft);
  font-size: 0.95rem;
}

.map-search-page__list-loading,
.map-search-page__list-nomore {
  padding: 0.85rem 0.5rem;
  text-align: center;
  color: var(--ms-color-text-soft);
  font-size: 0.85rem;
}

.map-search-page__list-loading .spinner-border {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.35rem;
}

/* 手機風格列表卡 */
.map-search-page #prop_list .item {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 5px 0 0;
  margin: 0;
  cursor: default;
}

.map-search-page__list .item.is-active {
  background-color: var(--ms-color-list-active);
}

.map-search-page__list-row {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
}

/* 覆蓋 property_search.css #prop_list .picbr 高度（原 230px 減 30%） */
.map-search-page #prop_list .picbr {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 10rem;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--ms-color-map-bg);
}

.map-search-page #prop_list .picbr img,
.map-search-page #prop_list .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-search-page__list-body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding: 5px;
}

.map-search-page__list .pricearea {
  position: static;
  margin: 0 0 0.2rem;
  text-align: left;
}

.map-search-page #prop_list .saleprice {
  font-size: 21px;
  color: #cb0000;
  background-color: #ffffff;
  font-weight: bold;
  line-height: 1.25;
}

.map-search-page #prop_list .rentprice {
  font-size: 21px;
  color: #0087ff;
  background-color: #ffffff;
  font-weight: bold;
  line-height: 1.25;
}

.map-search-page #prop_list .bname {
  margin-bottom: 0.15rem;
  margin-right: 0;
}

.map-search-page #prop_list .bname a {
  font-size: 21px;
  font-weight: bold;
  color: #000000 !important;
  text-decoration: none;
  line-height: 1.3;
}

.map-search-page__list .bname a:hover {
  color: var(--ms-color-link) !important;
}

.map-search-page__list .dist {
  margin-bottom: 0.1rem;
}

.map-search-page__list .dist span {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.3;
}

.map-search-page #prop_list .sizearea {
  margin-top: 5px;
  color: #000000;
  font-size: 0.9rem;
  line-height: 1.4;
}

.map-search-page__list .sizearea .info_list_detail {
  display: block;
  font-size: 16px;
}

.map-search-page__list .refno {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #888;
  line-height: 1.35;
}

.map-search-page__list .refno span {
  display: block;
}

.map-search-page__map-wrap {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.map-search-page__map {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  background: var(--ms-color-map-bg);
  z-index: 0;
}

.map-search-page__popup {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 14rem;
  max-width: 18rem;
}

.map-search-page .leaflet-popup-content {
  margin: 0.75rem;
}

.map-search-page .leaflet-popup-content p {
  margin: 0.3em 0;
}

.map-search-page__popup-photo {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-map-bg);
}

.map-search-page__popup-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-search-page__popup-body {
  flex: 1 1 auto;
  min-width: 0;
}

.map-search-page__popup-title {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ms-color-accent);
  text-decoration: none;
  line-height: 1.35;
}

a.map-search-page__popup-title:hover {
  color: var(--ms-color-link);
  text-decoration: underline;
}

.map-search-page__popup-photo a {
  display: block;
  width: 100%;
  height: 100%;
}

.map-search-page__popup-meta {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--ms-color-text-soft);
}

.map-search-page__popup-price {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ms-color-primary-dark);
}

/* 大廈聚合圓點（顯示放盤數量） */
.map-search-page .map-search-bldg-icon {
  background: transparent;
  border: 0;
}

/* 地圖屋苑名稱 tooltip 加大 */
.map-search-page .map-search-bldg-tooltip,
.map-search-page .leaflet-tooltip.map-search-bldg-tooltip {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.35rem 0.55rem;
  color: var(--ms-color-accent);
  background: var(--ms-color-bg);
  border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-sm);
  box-shadow: 0 0.15rem 0.45rem var(--ms-sheet-shadow);
}

.map-search-page .map-search-bldg-marker {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--ms-color-cluster);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.map-search-page .map-search-bldg-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background-color: var(--ms-color-bg);
  color: var(--ms-color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.map-search-page .map-search-bldg-marker.is-active {
  background-color: var(--ms-color-cluster-active-outer);
  box-shadow: 0 0 0 0.15rem var(--ms-color-cluster-active-ring);
}

.map-search-page .map-search-bldg-marker.is-active span {
  background-color: var(--ms-color-bg);
  color: var(--ms-color-primary-dark);
}

.map-search-page .marker-cluster {
  background-clip: padding-box;
  border-radius: 50%;
}

.map-search-page .marker-cluster-small {
  background-color: var(--ms-color-cluster);
  width: 3.25rem !important;
  height: 3.25rem !important;
  margin-left: -1.625rem !important;
  margin-top: -1.625rem !important;
  border-radius: 50%;
}

.map-search-page .marker-cluster-medium {
  background-color: var(--ms-color-cluster);
  width: 3.75rem !important;
  height: 3.75rem !important;
  margin-left: -1.875rem !important;
  margin-top: -1.875rem !important;
  border-radius: 50%;
}

.map-search-page .marker-cluster-large {
  background-color: var(--ms-color-cluster);
  width: 4.25rem !important;
  height: 4.25rem !important;
  margin-left: -2.125rem !important;
  margin-top: -2.125rem !important;
  border-radius: 50%;
}

.map-search-page .marker-cluster-small div,
.map-search-page .marker-cluster-medium div,
.map-search-page .marker-cluster-large div {
  background-color: var(--ms-color-cluster-inner);
  color: var(--ms-color-cluster-text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
}

.map-search-page .marker-cluster-small div {
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin-left: 0.375rem !important;
  margin-top: 0.375rem !important;
  font-size: 1rem;
}

.map-search-page .marker-cluster-medium div {
  width: 2.875rem !important;
  height: 2.875rem !important;
  margin-left: 0.4375rem !important;
  margin-top: 0.4375rem !important;
  font-size: 1.15rem;
}

.map-search-page .marker-cluster-large div {
  width: 3.25rem !important;
  height: 3.25rem !important;
  margin-left: 0.5rem !important;
  margin-top: 0.5rem !important;
  font-size: 1.3rem;
}

@media (max-width: 1024px) {
  :root {
    --ms-list-width: 18.5rem;
  }
}

/* 桌面唔顯示底部 sheet 手把 */
.map-search-page__sheet-handle {
  display: none;
}

@media (max-width: 767px) {
  .map-search-page {
    padding-bottom: 0;
    overflow: hidden;
  }

  .map-search-page__inner {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .map-search-page__body {
    position: relative;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
  }

  .map-search-page__map-wrap {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .map-search-page__map {
    height: calc(100vh - 11rem);
    height: calc(100dvh - 11rem);
    min-height: 16rem;
  }

  /* 手機：列表浮喺地圖底部（對齊中原 mapproject） */
  .map-search-page__list-wrap {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-right: 0;
    border-radius: 1rem 1rem 0 0;
    background: var(--ms-color-bg);
    box-shadow: 0 -0.25rem 1.25rem var(--ms-sheet-shadow);
    height: var(--ms-sheet-mid);
    max-height: var(--ms-sheet-full);
    transition: height 0.28s ease;
    overflow: hidden;
  }

  .map-search-page__list-wrap.is-collapsed {
    height: var(--ms-sheet-peek);
  }

  .map-search-page__list-wrap.is-mid {
    height: var(--ms-sheet-mid);
  }

  .map-search-page__list-wrap.is-expanded {
    height: var(--ms-sheet-full);
  }

  .map-search-page__sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.75rem;
    width: 100%;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .map-search-page__sheet-bar {
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--ms-sheet-bar);
  }

  .map-search-page__list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 5px;
    box-sizing: border-box;
  }

  .map-search-page__list-wrap.is-collapsed .map-search-page__list {
    overflow: hidden;
    pointer-events: none;
  }

  .map-search-page__list-wrap.is-collapsed .map-search-page__list-title {
    display: none;
  }

  .map-search-page__list-title {
    padding: 0.35rem 0.75rem 0.45rem;
    font-size: 1.05rem;
  }

  /* 手機列表圖高度減 20%（10rem → 8rem） */
  .map-search-page #prop_list .picbr {
    height: 8rem;
  }
}