/* ================= 基础重置 ================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
a, a:hover{text-decoration:none;color:inherit;}
html, body { margin: 0; padding: 0; font-size:16px; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif; color: #333; background-color: #fff; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
body { display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
section{display:flex; flex-direction: column; padding:1% 10%; min-height:100vh; gap:1.5rem;}
img, iframe { border: 0; margin:0 auto;}
/* ================= 顶部搜索区 ================= */
/* 顶部按钮区域样式 */
.topbutton { display: flex; width:100%; margin:0 auto; gap:10px; padding: 0; background-color: ; overflow: hidden; }
/* 输入框样式 */
.topbutton input { width: 100%; height: 30px; margin:0 5%; width: 100%;  padding-left: 20px; border-radius: 5px; border: 1px solid #00BBCC; }
/* 搜索按钮样式 */
.topbutton button { padding: 0 15px; margin:0 5%; width: 100%; height: 30px; align-items: center; justify-content: center; font-size: 15px; color: #fff;  background-color: #00BBCC; border-radius: 5px; border: none; cursor: pointer; }
/* 搜索按钮悬停效果 */
.topbutton button:active { background-color: #0099DD; }
/* 搜索按钮悬停效果 */
.topbutton button:hover { background-color: #0099DD; }

/* 地图容器样式 */
.mapX { margin: 0 auto; padding: 0; width:100%; height: 340px; overflow: hidden; border-radius: 10px; position: relative; z-index: 1;}
/* 地图背景样式 */
.tmapdiv { margin: 0 auto; width:100%; height: 360px; background-image: url('/static/images/poilist.jpg'); background-size: 100%; border-radius: 10px; }
/* 搜索结果列表样式 */

/* 搜索部分样式 */
#searchPart { position: absolute; top: 10px; left: 10px; z-index: 4; }
/* 信息展示样式 */
#information { margin: 5px; }
#infowin { word-wrap: break-word; width: 200px; height: auto; margin: 0; padding: 0; }
p { white-space: normal; width: 200px; margin-bottom: 5px; /* 允许长单词换行 */ padding: 0; font-size: 16px; }
/* 街道链接样式 */
#street { font-size: 15px; outline: none; text-decoration: none; color: #fff; margin-left: 10px; }
/* 地区显示样式 */
#mydistrict { display: inline-block; vertical-align: middle; outline: none; text-align: center; margin: auto 8px; padding: 0 10px; height: 30px; line-height: 30px; background-color: #00BBCC; border-radius: 5px; }
/* 附近搜索按钮区域样式 */
.searchnear { width:100%; display: flex; margin:0 auto; padding: 0; flex-wrap: wrap; gap:1rem; gap:0.5rem; align-items: center; justify-content: space-between; }
/* 附近搜索按钮样式 */
.searchnear button { font-size: 15px; color: #fff; width: 20%; height: 40px; margin: 0; padding:0; background-color: #00BBCC; border-radius: 5px; border: none; cursor: pointer; }
.searchnear button:active { background-color: #0099DD; }
/* 附近搜索按钮悬停效果 */
.searchnear button:hover { background-color: #0099DD; }
/* 地址显示样式 */
#myaddress { display: inline-block; vertical-align: middle; outline: none; text-align: center; margin: auto 8px; padding: 0 10px; height: 30px; line-height: 30px; background-color: #00BBCC; border-radius: 5px; color: #fff; }
#footer { display: flex; width: 100%; margin: 0 auto; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
/* 美化 listItem */
.poilist { padding:0; margin:0 auto; width: 100%; height: auto; display:flex; flex-direction: column; gap:1rem;}
.poi-list-item { margin:0 auto; width:100%; background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s ease; border: 1px solid #eee; }
.poi-list-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }
.poi-header { padding: 12px 15px; background-color: #f8f8f8; display: flex; justify-content: space-between; align-items: center; border-bottom: 0px solid #eee; }
.poi-title { font-size: 16px; font-weight: 600; color: #333; padding: 0 10px; margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poi-distance { font-size: 12px; color: #fff; padding: 3px 15px; font-weight: bold; background-color: #00ddcc; border-radius: 12px; }
.poi-distance:hover { background-color: #00BBcc; }
.poi-info { background-color: #f8f8f8; margin-right: 10px; padding: 10px 10px; }
.poi-address, .poi-tel { font-size: 14px; color: #666; margin-bottom: 6px; display: flex; align-items: center; }
.poi-address i, .poi-tel i { margin-right: 8px; color: #999; width: 14px; text-align: center; }
.poi-actions { display: flex; justify-content: flex-end; padding: 8px 15px; background-color: #f2f2f2; border-top: 1px solid #eee; }
.poi-action-btn { font-size: 13px; padding: 5px 12px; margin-left: 8px; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; border: 1px solid #fff; }
.poi-detail-btn { color: #fff; padding: auto 5px; background-color: #00DDCC; border: 0px solid #fff; }
.poi-detail-btn:hover { background-color: #00BBCC; }
.poi-navigate-btn { color: #fff; padding: auto 5px; background-color: #00DDCC; }
.poi-navigate-btn:hover { background-color: #00BBCC; }
/* 定位提示样式 */
.location-tip { position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 15px 25px; border-radius: 8px; position: relative; z-index: 2; display: none; font-size: 15px; }
/* 加载动画 */
.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 24px; height: 24px; animation: spin 2s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* 错误提示 */
.errormessage { color: #dc3545; text-align: center; padding:0; background-color: #f8d7da; border-radius: 4px; margin: 0 auto;}
/* 分页控件样式 */
.pagination-container { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.pagination-info { margin: 0 15px; font-size: 14px; color: #666; }
.pagination-btn { padding: 6px 12px; margin: 0 2px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; color: #00ddcc; cursor: pointer; transition: all 0.2s ease; }
.pagination-btn:hover:not(.disabled):not(.active) { background-color: #eee; }
.pagination-btn.disabled { color: #ccc; cursor: not-allowed; background-color: #fff; }
.pagination-btn.active { background-color: #00ddcc; color: #fff; border-color: #00ddcc; cursor: default; }
.pagination-ellipsis { margin: 0 5px; color: #00BBCC; }
/* 定位区域样式 */
.location-container { display: flex;align-items: center; text-align: center; justify-content: space-between; box-sizing: border-box; height: 35px; margin:0 auto; line-height: 35px; top: -50px; position: relative; z-index: 3; }
/* 定位地址 */
.location-info { flex: 1 1 auto; min-width: 0; height: 30px; line-height: 30px; margin: 0 0 0 5%; padding: 0 10px; box-sizing: border-box; font-size: 14px; text-align: center; border-radius: 25px 0 0 0; background-color: #00BBCC; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
/* 定位按钮样式 */
.location-btn { flex: 0 0 30%; height: 30px; line-height: 30px; margin: 0 5% 0 0; padding: 0 10px; box-sizing: border-box; font-size: 14px; border: none; border-radius: 0 25px 0 0; outline: none; text-decoration: none; background-color: #0088CC; color: #fff; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }

.location-btn:hover { background-color: #00BBCC; cursor: pointer !important }
.location-btn:active { background-color: #0077BB; }
/* 示例，类名需以实际页面为准 */
.qqmap-watermark { display: none !important;}

/* ================= 平板 / 大屏 ================= */
@media (max-width: 768px) { .topbutton{max-width: 720px; margin: 0 auto; } .searchnear {grid-template-columns: repeat(8, 1fr); } .location-info {font-size: 12px;} .mapX { height: 240px;} .tmapdiv{height:260px;} }