/* 可以在这里添加自定义样式，如果需要的话 */
.pagination-area .page-item.disabled .page-link[data-v-0d27aeac] {
  cursor: not-allowed;
  opacity: 0.6;
}
.pagination-area .page-item.disabled[data-v-0d27aeac] {
  pointer-events: none;
}


/* 覆盖全局样式，使关键词搜索区域可以填满剩余空间 */
.search-right-form > .form-group.keyword-search-group[data-v-37836ebc] {
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 1 auto !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    width: auto !important;
}

/* 让 Beds&Bath 右对齐，并设置足够宽度显示完整文字 */
.search-right-form > .form-group.bathAndbedrooms[data-v-37836ebc] {
    margin-left: auto !important;
    width: 180px !important;
    -webkit-flex-shrink: 0 !important;
        -ms-flex-negative: 0 !important;
            flex-shrink: 0 !important;
}

/* 确保 search-right 填满父容器 */
.search-right[data-v-37836ebc] {
    width: 100%;
}
.search-right-form[data-v-37836ebc] {
    width: 100%;
    gap: 16px;
}

/* Price 下拉框样式 */
.price-dropdown[data-v-37836ebc] {
    min-width: 320px;
}
.price-row[data-v-37836ebc] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}
.price-row[data-v-37836ebc]:last-of-type {
    margin-bottom: 16px;
}
.price-label[data-v-37836ebc] {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    min-width: 45px;
    text-align: left;
}
.price-row .ipt-space-box[data-v-37836ebc] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}
.price-row .ipt-space-box .form-group[data-v-37836ebc] {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.price-row .ipt-space-box .form-control[data-v-37836ebc] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
}
.price-row .ipt-space-box .space[data-v-37836ebc] {
    color: #94a3b8;
    font-weight: 500;
}

/* =====================================================
xfmap 页面样式集合
来源: src/pages/xfmap/views/index.vue
      src/pages/xfmap/views/components/right-map.vue
      src/pages/xfmap/views/components/right-list.vue
===================================================== */

/* =====================================================
index.vue 样式
===================================================== */

/* Tab 样式 */
.property-tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 16px;
    background: #fff;
}

.property-tab {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 16px 24px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.property-tab:hover {
    color: #333;
}

.property-tab.active {
    color: #00c897;
    font-weight: 600;
}

.property-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #00c897;
}

/* =====================================================
right-list.vue 样式
===================================================== */

/* Society 卡片样式 */
.society-item .society-title,
.society-item .society-title a{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.society-item .society-location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.society-item .society-stats {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.society-item .stat-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.society-item .stat-prices {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.society-item .stat-price-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.society-item .stat-item label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.society-item .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.society-item .price-unit {
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
}

.society-item .price-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.society-item .trend-value {
    font-size: 13px;
    font-weight: 600;
    color: #09C398;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
}

.society-item .trend-icon {
    font-size: 8px;
}

/* =====================================================
right-map.vue 样式
===================================================== */

.mapbox-hover-popup .mapboxgl-popup-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mapbox-hover-popup .mapboxgl-popup-tip {
  display: none !important;
}

.mapbox-detail-popup .mapboxgl-popup-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0px 10px 0px !important;
}

.mapbox-detail-popup .mapboxgl-popup-tip {
  display: none !important;
}

.map-point.active {
  z-index: 100;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* .map-point.active span {
  background-color: #ff4757 !important;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
} */

/* .map-point.active:after {
  background-color: #ff4757 !important;
} */

/* map-zb-point 选中样式 */
.map-zb-point.active {
  z-index: 100;
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.map-zb-point.active .point:first-child {
  display: none;
}

.map-zb-point.active .point.active {
  display: block !important;
  -webkit-filter: drop-shadow(0 4px 8px rgba(255, 71, 87, 0.5));
          filter: drop-shadow(0 4px 8px rgba(255, 71, 87, 0.5));
}
.map-zb-point-txt {
    display: block!important;
    bottom: 10px !important;
}
.map-point-next{
    padding: 2px 6px;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    text-shadow: -2px -2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, 2px 2px 0 #ffffff, 
                 -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, 1px 1px 2px #ffffff;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 9
}

/* 鼠标跟随元素样式 */
.map-point-follower {
    position: absolute;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    -webkit-transform: translate(-10%, -320%);
        -ms-transform: translate(-10%, -320%);
            transform: translate(-10%, -320%);
    width:80px;
    text-align: center;
    line-height: 1.4;
}

/* 社区卡片弹窗样式 - 外观与楼盘卡片一致，内容保持社区信息结构 */
.mapbox-detail-popup .society-popup-card {
    width: 223px;
    padding: 9px;
    margin-bottom: 0;
    border: 1px solid #C4C5CA;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.31);
    background: #fff;
    border-radius: 10px;
    position: relative;
}

/* 视频封面 - 圆角图片 */
.mapbox-detail-popup .society-video-card {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    padding-bottom: 56.25%;
    background: #f0f0f0;
    cursor: pointer;
}

.mapbox-detail-popup .video-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.mapbox-detail-popup .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    font-size: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.mapbox-detail-popup .society-video-card:hover .play-icon {
    background: #00c897;
    -webkit-transform: translate(-50%, -50%) scale(1.05);
        -ms-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
}

.mapbox-detail-popup .video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
}

/* 社区信息区域 */
.mapbox-detail-popup .society-info {
    padding: 0;
    margin-top: 8px;
}

.mapbox-detail-popup .society-name {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 20px;
    color: #151929;
    font-weight: 600;
}

.mapbox-detail-popup .price-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: none;
}

.mapbox-detail-popup .price-row:last-child {
    margin-bottom: 0;
}

.mapbox-detail-popup .price-label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    width: 70px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.mapbox-detail-popup .price-value {
    font-size: 11px;
    font-weight: 500;
    color: #09C398;
    width: 65px;
    white-space: nowrap;
}

.mapbox-detail-popup .year-rate {
    font-size: 10px;
    font-weight: 500;
    margin-left: 16px;
    white-space: nowrap;
    padding-left: 0 !important;
}

.mapbox-detail-popup .year-rate.data-up {
    color: #10C299;
}

.mapbox-detail-popup .year-rate.data-down {
    color: #DF1C1C;
}

/* 隐藏全局样式中的箭头 */
.mapbox-detail-popup .year-rate.data-up:before,
.mapbox-detail-popup .year-rate.data-down:before {
    content: none !important;
    display: none !important;
}

.mapbox-detail-popup .year-rate i {
    font-size: 8px;
    margin-right: 4px;
}

/* See More 按钮 */
.mapbox-detail-popup .links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px;
    padding: 0;
}

.mapbox-detail-popup .links.center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.mapbox-detail-popup .link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #151929;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}

.mapbox-detail-popup .link:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #DCDDE3;
    border-radius: 8px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
            transform-origin: left top;
}

.mapbox-detail-popup .link i {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

/* 固定社区卡片弹窗 - 显示在地图右侧 */
.society-popup-fixed {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 100;
}

/* 社区卡片弹窗 - 位于 map-screen 下方 */
.society-popup-fixed.below-mapscreen,
.society-popup-fixed[style*="top: 5%"] {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

/* 社区卡片链接容器 */
.society-popup-card-fixed-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 社区卡片样式 - 外观与楼盘卡片一致 */
.society-popup-card-fixed {
    width: 300px;
    padding: 9px;
    margin-bottom: 0;
    border: 1px solid #C4C5CA;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.31);
    background: #fff;
    border-radius: 10px;
    position: relative;
}

.society-popup-card-fixed a {
    text-decoration: none;
    color: inherit;
}

/* 关闭按钮 */
.society-popup-card-fixed .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 10;
    font-size: 12px;
}

.society-popup-card-fixed .close-btn::before {
    content: '✕';
}

/* 视频封面 - 圆角图片 */
.society-popup-card-fixed .society-video-card {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    padding-bottom: 56.25%;
    background: #f0f0f0;
    cursor: pointer;
}

.society-popup-card-fixed .video-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.society-popup-card-fixed .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    font-size: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.society-popup-card-fixed .society-video-card:hover .play-icon {
    background: #00c897;
    -webkit-transform: translate(-50%, -50%) scale(1.05);
        -ms-transform: translate(-50%, -50%) scale(1.05);
            transform: translate(-50%, -50%) scale(1.05);
}

.society-popup-card-fixed .video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
}

/* 社区信息区域 */
.society-popup-card-fixed .society-info {
    padding: 0;
    margin-top: 8px;
}

.society-popup-card-fixed .society-name {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 20px;
    color: #151929;
    font-weight: 600;
}

.society-popup-card-fixed .price-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: none;
}

.society-popup-card-fixed .price-row:last-child {
    margin-bottom: 0;
}

.society-popup-card-fixed .price-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    width: 100px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.society-popup-card-fixed .price-value {
    font-size: 12px;
    font-weight: 500;
    color: #09C398;
    width: 100px;
    white-space: nowrap;
}

.society-popup-card-fixed .year-rate {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 0 !important;
}

.society-popup-card-fixed .year-rate.data-up {
    color: #10C299;
}

.society-popup-card-fixed .year-rate.data-down {
    color: #DF1C1C;
}

/* 隐藏全局样式中的箭头 */
.society-popup-card-fixed .year-rate.data-up:before,
.society-popup-card-fixed .year-rate.data-down:before {
    content: none !important;
    display: none !important;
}

.society-popup-card-fixed .year-rate i {
    font-size: 8px;
    margin-right: 4px;
}

/* See More 按钮 */
.society-popup-card-fixed .links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 8px;
    padding: 0;
}

.society-popup-card-fixed .links.center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.society-popup-card-fixed .link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #151929;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}

.society-popup-card-fixed .link:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #DCDDE3;
    border-radius: 8px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
            transform-origin: left top;
}

.society-popup-card-fixed .link i {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

/* 关闭按钮 */
.mapbox-detail-popup .close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

.mapbox-detail-popup .close-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* School 和 Nearby 菜单样式 */
.map-choose-out {
    position: absolute;
    bottom: 75px;
    left: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    z-index: 100;
    min-width: 160px;
}

.map-choose-out ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.map-choose-out li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.map-choose-out li i {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #ccc;
    margin-right: 8px;
    display: inline-block;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.map-choose-out li.active i {
    background: #00c897;
    border-color: #00c897;
}

.map-choose-out .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.map-choose-out .close::before,
.map-choose-out .close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    background: #999;
}

.map-choose-out .close::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
}

.map-choose-out .close::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
}

/* map-choose 按钮样式调整 */
.map-choose .item {
    position: relative;
}

.map-choose .item i {
    font-style: normal;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #00c897;
    border-radius: 50%;
    margin-right: 4px;
}

.map-choose .item span {
    vertical-align: middle;
}

.map-choose .item .close {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #ff4444;
    border-radius: 50%;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.map-choose .item .close::before,
.map-choose .item .close::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 1px;
    background: #fff;
}

.map-choose .item .close::before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.map-choose .item .close::after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* icon-nearby 图标样式 */
.icon-nearby {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') center no-repeat;
    background-size: contain;
}

/* icon-buy 图标样式 */
.icon-buy {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M12 2l-5.5 9h11z"/><circle cx="17.5" cy="17.5" r="4.5"/><path d="M3 13.5h8v8H3z"/></svg>') center no-repeat;
    background-size: contain;
}

/* icon-rent 图标样式 */
.icon-rent {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23666"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>') center no-repeat;
    background-size: contain;
}

.map-choose-out{
    left: 110px;
    bottom: 100px;
    z-index: 10;
}
.map-choose-out-nearby{
    left: 290px;
}
.map-choose-out-school{
    left: 200px;
}

/* Marker 列表弹窗样式 */
.marker-list-popup {
    position: absolute;
    right: 200px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 320px;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
}

.marker-list-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 16px 20px;
    border-bottom: none;
    background: #00c897;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    position: relative;
}

.marker-list-title-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding-right: 12px;
}

.marker-list-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.marker-list-header p {
    margin: 4px 0 0 0;
    padding-right: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.marker-list-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-size: 20px;
}

.marker-list-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.marker-list-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: calc(80vh - 60px);
}

/* 单行列表样式 */
.marker-list-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
}

.marker-list-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.marker-list-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.marker-card-img {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    background: #f3f4f6;
}

.marker-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marker-card-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4px;
}

.marker-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marker-card-location,
.marker-card-address {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marker-card-location i,
.marker-card-address i {
    margin-right: 4px;
}

.marker-card-price {
    font-size: 13px;
    font-weight: 600;
    color: #00c897;
}

.marker-card-tags {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
}

.marker-card-tags span {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}

.marker-card-area {
    font-size: 12px;
    color: #6b7280;
}

.marker-card-area i {
    margin-right: 4px;
}

/* 加载更多样式 */
.marker-list-loading,
.marker-list-no-more {
    text-align: center;
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
}

.marker-list-loading i {
    margin-right: 8px;
}

/* 社区卡片弹窗中的 Approved 标签 - 左上角小标签 */
.society-popup-card-fixed .listing-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    background: #09C398;
    padding: 2px 8px;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    z-index: 5;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/* =====================================================
keyword-search.vue 样式
===================================================== */

/* 城市选择下拉框样式 */
.city-select-wrapper {
    position: relative;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.city-select {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 12px;
    height: 40px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    min-width: 100px;
}

.city-select:hover {
    border-color: #10c299;
}

.city-select.open {
    border-color: #10c299;
}

.city-current {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.city-current::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #666;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.city-select.open .city-current::after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.city-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 100;
    min-width: 120px;
}

.city-option {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.city-option:hover {
    background-color: #f5f5f5;
}

.city-option.selected {
    color: #10c299;
    font-weight: 500;
    background-color: #eaf9f5;
}

/* 调整搜索框样式，与城市选择框组合 */
.search-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}

.search-box .form-control {
    border-radius: 6px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

/* =====================================================
right-search.vue 样式
===================================================== */

/* Purpose 单选列表样式 - 竖排带 radio box */
.purpose-list {
    padding: 10px 0;
}

.purpose-radio-list {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.purpose-radio-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.purpose-radio-item:hover {
    background-color: #f5f5f5;
}

.purpose-radio-item .radio-box {
    width: 16px;
    height: 16px;
    border: 2px solid #dcdde3;
    border-radius: 50%;
    margin-right: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.purpose-radio-item.selected .radio-box {
    border-color: #10c299;
    background-color: #10c299;
}

.purpose-radio-item.selected .radio-box::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    display: block;
}

.purpose-radio-item .radio-label {
    font-size: 14px;
    color: #333;
}

.purpose-radio-item.selected .radio-label {
    color: #10c299;
    font-weight: 500;
}

/* =====================================================
right-search.vue 关键词搜索样式
===================================================== */

/* 关键词搜索组 */
.keyword-search-group {
    position: relative;
    width: 200px;
}

.search-box-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    position: relative;
}

/* 城市选择下拉框样式 - 与 Purpose 样式保持一致 */
.city-select-wrapper {
    position: relative;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.city-select {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 8px 24px 8px 15px;
    height: auto;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #DCDDE3;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    min-width: 100px;
    font-size: 16px;
    color: #151929;
}

.city-select:hover {
    border-color: #09C398;
}

.city-select.open {
    border-color: #09C398;
}

.city-current {
    font-size: 16px;
    color: #151929;
    font-weight: 500;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.city-current::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    top: 50%;
    right: 12px;
    margin-top: -3px;
    border-bottom: 1px solid #8C8D97;
    border-right: 1px solid #8C8D97;
    border-left: none;
    border-top: none;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.city-select.open .city-current::after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg);
    margin-top: -1px;
}

.city-list {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 100;
    min-width: 120px;
}

.city-option {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.city-option:hover {
    background-color: #f5f5f5;
}

.city-option.selected {
    color: #10c299;
    font-weight: 500;
    background-color: #eaf9f5;
}

/* 关键词输入框 - 与 Purpose 样式保持一致 */
.keyword-input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: auto;
    line-height: 1.4;
    padding: 8px 36px 8px 15px;
    border: 1px solid #DCDDE3;
    border-radius: 6px;
    font-size: 16px;
    color: #151929;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.keyword-input:focus {
    border-color: #09C398;
    outline: none;
}

.keyword-input::-webkit-input-placeholder {
    color: #C4C5CA;
}

.keyword-input::-moz-placeholder {
    color: #C4C5CA;
}

.keyword-input:-ms-input-placeholder {
    color: #C4C5CA;
}

.keyword-input::placeholder {
    color: #C4C5CA;
}

/* 搜索图标 */
.search-icon {
    position: absolute;
    right: 12px;
    color: #8C8D97;
    font-size: 14px;
}

/* 清除按钮 */
.clear-btn {
    position: absolute;
    right: 32px;
    width: 18px;
    height: 18px;
    background: #e2e8f0;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.clear-btn:hover {
    background: #cbd5e1;
}

.clear-btn i {
    font-size: 10px;
    color: #666;
}

/* 搜索建议下拉框 */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: #f5f5f5;
}

.suggestion-item a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.suggestion-item i {
    font-size: 14px;
    color: #10c299;
}

.suggestion-item .highlight {
    color: #10c299;
    font-weight: 500;
}

/* =====================================================
Purpose 筛选框样式 - 与城市选择下拉框样式一致
===================================================== */

.purpose-select-wrapper {
    position: relative;
}

.purpose-select {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 8px 24px 8px 15px;
    height: auto;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #DCDDE3;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-size: 16px;
    color: #151929;
}

.purpose-select:hover {
    border-color: #09C398;
}

.purpose-select.open {
    border-color: #09C398;
}

.purpose-current {
    font-size: 16px;
    color: #151929;
    font-weight: 500;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.purpose-current::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    top: 50%;
    right: 12px;
    margin-top: -3px;
    border-bottom: 1px solid #8C8D97;
    border-right: 1px solid #8C8D97;
    border-left: none;
    border-top: none;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.purpose-select.open .purpose-current::after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg);
    margin-top: -1px;
}

.purpose-list-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 100;
    min-width: 120px;
}

.purpose-option {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.purpose-option:hover {
    background-color: #f5f5f5;
}

.purpose-option.selected {
    color: #10c299;
    font-weight: 500;
    background-color: #eaf9f5;
}