/*本css是获取图斑列表在左边展示的样式*/
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Microsoft YaHei", sans-serif;
}
#map {
  width: 100%;
  height: 100%;
}

#left-bottom-panel {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 350px; /* 固定宽度 */
    height: 630px; /* 固定高度 */
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #f0f0f0;
    flex-direction: column;

    transition: transform 0.3s ease-in-out;
    z-index: 100;
}

/* 展开状态：完全显示 */
.panel-expand {
    transform: translateX(0); /* 不偏移，完整显示 */
}

/* 收缩状态：整体向左隐藏，只露右侧10px（刚好容纳按钮） */
.panel-collapse {
    transform: translateX(calc(-100% + 30px)); /* 核心收缩逻辑 */
}

/* 收缩/展开按钮：确保始终可见且可点击 */
.toggle-btn {
    position: absolute;
    top: 50%;
    right: -15px; /* 一半在面板外，收缩时仍能点击 */
    width: 30px;
    height: 30px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101; /* 层级高于面板，确保不被遮挡 */
    padding: 0;
    margin: 0;
}

/* 收缩时按钮图标反向 */
.panel-collapse .toggle-icon {
    transform: rotate(180deg);
}

/* 面板内容样式保持不变 */
.panel-content {
    width: 100%;
    padding: 0px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.tab {
  flex: 1;
  padding: 2px 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;
}
.tab.active {
  color: #165DFF;
  font-weight: 500;
  border-bottom: 2px solid #165DFF;
}
.tab-count {
  padding: 6px 12px;
  font-size: 12px;
  color: #888;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}
.search-bar {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 6px;
}
.search-bar input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  transition: border 0.2s;
}
.search-bar input:focus {
  border-color: #165DFF;
  outline: none;
}
.search-bar .search-btn {
  padding: 6px 12px;
  background: #165DFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}
.search-bar .search-btn:hover {
  background: #0E42D2;
}
.land-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.land-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
}
.land-item:hover {
  background: #f5f8ff;
}
.land-item.active {
  background: #e8f3ff;
  border-left: 3px solid #165DFF;
}
.land-item h3 {
  margin: 0 0 3px 0;
  font-size: 13px;
  color: #333;
}
.land-item p {
  margin: 2px 0;
  font-size: 11px;
  color: #666;
}
.pagination {
  padding: 8px 12px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.page-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s;
}
.page-btn:hover:not(.active):not(:disabled) {
  border-color: #165DFF;
}
.page-btn.active {
  background: #165DFF;
  color: white;
  border-color: #165DFF;
}
.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* 土地类型筛选按钮样式 - 正方形带图片 */
.land-type-filters {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.land-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* 正方形图片容器 */
.land-type-img-container {
    width: 50px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.land-type-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.land-type-btn:hover .land-type-img-container img {
    transform: scale(1.05);
}

.land-type-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.land-type-btn.active {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.land-type-text {
    color: #14477b;
    font-weight: 300;
    text-align: center;
    margin-top: 4px;
    font-size: 12px; /* 缩小字体，更适配移动端紧凑布局 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 兼容中英文环境 */
    font-weight: 800; 
}

/* 响应式调整 */
@media (max-width: 640px) {
    .land-type-img-container {
        width: 45px;
        height: 45px;
    }
    
    .land-type-text {
        font-size: 0.7rem;
    }
}

/* 地块操作按钮容器样式 */
.land-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px; /* 按钮间距 */
    flex-wrap: wrap; /* 防止按钮溢出换行 */
}

/* 操作按钮样式 */
.action-btn {
    padding: 4px 10px;
    border: 1px solid #409eff;
    background: #fff;
    color: #409eff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

/* 按钮 hover 效果 */
.action-btn:hover {
    background: #f0f7ff;
}

/*以下是周边配套查询的样式*/
/* 距离选择按钮 - 更紧凑的尺寸和间距 */
.distance-btn {
  padding: 2px 8px; /* 减小内边距（原4px 12px） */
  border: 1px solid #1C569C;
  background: white;
  color: #1C569C;
  border-radius: 3px; /* 稍小的圆角 */
  cursor: pointer;
  margin-right: 5px; /* 减小按钮间距（原8px） */
  font-size: 12px; /* 缩小字体（原默认14px） */
}

.distance-btn.active {
  background: #1C569C;
  color: white;
}

/* 自定义距离输入框 - 与按钮尺寸匹配 */
.custom-distance {
  width: 80px !important; /* 缩短宽度（原100px） */
  padding: 2px 5px !important; /* 减小内边距 */
  font-size: 12px !important; /* 缩小字体 */
  margin: 0 5px !important; /* 减小左右间距 */
}

/* 配套列表项 - 极致紧凑 */
.periphery-item {
  padding: 6px 12px; /* 大幅减小内边距（原12px 16px） */
  border-bottom: 1px solid #f0f0f0; /* 更浅的分隔线 */
  cursor: default;
  line-height: 1.3; /* 减小行高 */
}

.periphery-item:hover {
  background: #f5f5f5; /* 稍浅的hover色，避免突兀 */
}

/* 列表项标题 - 更小字体和间距 */
.periphery-item h4 {
  margin: 0 0 3px; /* 几乎无上下边距（原0 0 8px） */
  font-size: 13px; /* 缩小字体（原14px） */
  color: #333;
  font-weight: 600; /* 稍轻的字重，避免过粗 */
}

/* 列表项内容 - 紧凑排版 */
.periphery-item p {
  margin: 2px 0; /* 极小的上下边距（原4px 0） */
  font-size: 11px; /* 缩小字体（原12px） */
  color: #666;
}

/* 执行分析按钮 - 与整体尺寸匹配 */
#executeAnalysis {
  padding: 2px 10px !important; /* 减小内边距（原4px 12px） */
  font-size: 12px !important; /* 缩小字体 */
  margin-left: 10px !important; /* 稍小的左间距 */
}

/* 返回按钮 - 紧凑化 */
#backToLandList {
  margin: 10px 16px !important; /* 减小上下外边距（原16px） */
  padding: 4px 16px !important; /* 减小内边距（原6px 20px） */
  font-size: 12px !important; /* 缩小字体 */
}

/* 面板标题和统计区 - 压缩间距 */
#periphery_list h3 {
  margin: 0 0 10px !important; /* 减小标题下间距（原0 0 16px） */
  font-size: 15px; /* 稍小的标题 */
}

#peripheryStat {
  margin-bottom: 5px !important; /* 减小统计区下间距（原8px） */
  font-size: 12px; /* 缩小统计文字 */
}

/* 类型复选框区域 - 紧凑排列 */
#periphery_list label {
  font-size: 12px; /* 缩小复选框文字 */
}

#periphery_list label[style*="margin-right: 12px"] {
  margin-right: 8px !important; /* 减小类型选项间距（原12px） */
}

.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* 包裹整个地块信息的容器 */
.land-item-container {
    position: relative;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    width: fit-content;
}
/* 截图风格的右上角小角标 */
.wave-badge {
    position: absolute;
    top: -10px;    
    right: 0;      /* 可根据需要微调，比如right: -2px让右侧也轻微压边框 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;    
    height: 30px;
    border-radius: 0 0 0 50%; /* 右上角角标造型，不是正圆 */
    border-top: none;
    border-right: none;
    background: transparent; 
    z-index: 2;
}
/* 角标内的文字 */
.wave-badge-text {
    color: rgb(8, 0, 255); 
    font-size: 13px; 
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    text-align: center;
    line-height: 1.1;
    margin-right: 5px;
    margin-bottom: 5px;
    animation: pulse-badge 1.5s infinite cubic-bezier(0.21, 0.98, 0.6, 0.99);
}


@keyframes pulse-badge {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8);
        transform: scale(1); 
        opacity: 1; 
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.2); 
        transform: scale(1.2); 
        opacity: 0.9; 
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
        transform: scale(1); 
        opacity: 1; 
    }
}

/* 联系人及电话整体样式 */
.contact-info {
    font-size: 14px; /* 增大字体大小，可根据需求调整（默认一般14px左右） */
    font-weight: 7000; /* 加粗字体，提升显眼度 */
    color: #1a73e8; /* 选用醒目且舒适的蓝色，可替换为你需要的颜色（如#e53e3e 红色） */
    margin: 20px 2px; /* 增加上下间距，避免和其他内容拥挤 */
}

/* 联系电话链接样式 */
.phone-link {
    color: #3e4fe5; 
}

/* 鼠标悬浮在电话上的样式（可选，提升交互体验） */
.phone-link:hover {
    text-decoration: underline; /* 悬浮时显示下划线，提示可点击 */
    opacity: 0.8; /* 轻微透明效果，提升质感 */
}