/*
    Theme Name: 藏宝图
    Theme URI: https://www.qqqmap.com
    Description: 藏宝图官方主题
        Author: 藏宝图
    
    Version: 1.2.0
    License: 许可证
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: 标签显示在这里
	*/


  .tdt-control-copyright {
    display: none !important;
}
#map {
	  width:250px;
      height:250px;
}

acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}
#allmap {
  width: 60%;
  height: 250px; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#map1 {
  width: 100%;
    height: 300px;
}
.image-container {
        width: 300px; /* 设置容器的宽度 */
        height: 200px; /* 设置容器的高度 */
        overflow: hidden; /* 隐藏超出容器尺寸的部分 */
    }
 /* 重置表格样式 */
 table {
   border-collapse: collapse;
   width: 100%;
 }
 
 th, td {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: left;
 }
 
 /* 表格标题 */
 th {
   background-color: #f2f2f2;
   font-weight: bold;
 }
 
 /* 表格内容 */
 td {
   vertical-align: top;
 }
  .compact-table {
         border-collapse: collapse;
         width: 100%;
     }
 
     .compact-table th,
     .compact-table td {
		 max-width: 200px;
         border: 1px solid #dddddd;
		 
         text-align: left;
         padding: 8px;
     }
 .auto-wrap-cell {
         max-width: 300px; /* 限制最大宽度 */
         word-wrap: break-word; /* 允许单词在达到边框时断开到下一行 */
         overflow-wrap: break-word; /* 确保长单词可以断开，避免溢出 */
     }
     .compact-table th {
         background-color: #f2f2f2;
     }
 

 
     .small-text {
         font-size: 12px;
     }
 /* 表格图标 */
span {
    display: inline-flex;
    align-items: center;
}

.icon {
    width: 20px; /* 根据实际需求调整图片大小 */
    height: 20px;
    margin-right: 5px;
}
 
 /* 表格图片 */
/* 基本样式 */
    .cttm-table {
        width: 100%;
        border-collapse: collapse;
    }
    .cttm-table th, .cttm-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    .cttm-table th {
        background-color: #defbf2;
    }
    .icon {
        vertical-align: middle;
        width: 24px;
        height: 24px;
    }
    .custom-fields-data {
        margin-top: 20px;
    }
    .custom-field-item {
        background-color: #f9f9f9;
        margin-bottom: 10px;
        padding: 10px;
        border-left: 5px solid #007bff; /* 蓝色边框 */
    }
    .show-tishi-button {
        background-color: #007bff;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .show-tishi-button:hover {
        background-color: #8fbff3;
    }
    .tishi-content {
        padding: 10px;
        margin-top: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
    }
 @media screen and (max-width: 768px) {
     .cttm-table, .cttm-table tbody, .cttm-table tr {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         width: 100%; /* 确保表格宽度自适应容器 */
     }
     .cttm-table th, .cttm-table td {
         flex: 1 1 50%; /* 每个单元格尝试占据50%的宽度 */
         box-sizing: border-box; /* 边框和内边距包含在宽度内 */
         padding: 8px; /* 增加内边距以提高可读性 */
         overflow: visible; /* 允许内容溢出 */
         border-bottom: 1px solid #ccc; /* 单元格底部边界 */
         line-height: 1.5; /* 行高 */
     }
     .cttm-table th {
         background-color: #e5ffff; /* 表头背景颜色 */
     }
     .cttm-table tr:last-child th, .cttm-table tr:last-child td {
         border-bottom: none; /* 最后一行移除底部边界 */
     }
 }






/* 其他样式 */
.icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

.show-tishi-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.tishi-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #f2f2f2;
} 
 
 /* 隐藏空单元格的边框 */
 td:empty {
   border: none;
 }
 
 /* 使表格更紧凑 */
 .compact-table {
   border-spacing: 0;
 }
/* 评论列表样式 */
/* 单选框容器 */
.comment-form-discovered,  
.comment-form-not-discovered {
  display: inline-block;
  margin-right: 20px; 
}

/* 单选框标签文字 */
.comment-form-discovered label,
.comment-form-not-discovered label {  
  cursor: pointer; 
}

/* 找到了 的标签及单选框 */
.comment-form-discovered label {
  color: #67c23a;  
}

.comment-form-discovered input[type="radio"]:checked + label {
  font-weight: bold;
}

/* 没找到 的标签及单选框 */
.comment-form-not-discovered label {
   color: #f56c6c;
}

.comment-form-not-discovered input[type="radio"]:checked + label { 
  font-weight: bold; 
}
/* 附件选择框 */
#attachment {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/* 自定义按钮样式 */
.comment-form-attachment__label {
  display: inline-block;
  padding: 8px 12px;
  background: #409eff; 
  color: #fff;
  border-radius: 4px;  
  cursor: pointer;
}

/* 鼠标悬停状态 */  
.comment-form-attachment__label:hover {
  background: #66b1ff;
}

/* 提示文字 */
.comment-form-attachment__file-size-notice,.comment-form-attachment__file-types-notice {
  font-size: 12px;
  color: #999;  
  margin-left: 10px;
}

/* 自定义评论区样式 */
.comment {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}

.comment-author {
    font-weight: bold;
}
.comment-form {
    margin-top: 20px;
}
.discovered-button,
.not-discovered-button {
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
}

.discovered-button {
    background-color: #28a745; /* 绿色 */
}

.not-discovered-button {
    background-color: #dc3545; /* 红色 */
}
/* 附件选择框 */
#attachment {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/* 自定义按钮样式 */
.comment-form-attachment__label {
  display: inline-block;
  padding: 8px 12px;
  background: #409eff; 
  color: #fff;
  border-radius: 4px;  
  cursor: pointer;
}

/* 鼠标悬停状态 */  
.comment-form-attachment__label:hover {
  background: #66b1ff;
}

/* 提示文字 */
.comment-form-attachment__file-size-notice,.comment-form-attachment__file-types-notice,.comment-form-attachment__autoembed-links-notice
{
  font-size: 12px;
  color: #999;  
  margin-left: 10px;
}

/* 单选框容器 */
.comment-form-discovered,  
.comment-form-not-discovered {
  display: inline-block;
  margin-right: 20px; 
}

/* 单选框标签文字 */
.comment-form-discovered label,
.comment-form-not-discovered label {  
  cursor: pointer; 
}

/* 找到了 的标签及单选框 */
.comment-form-discovered label {
  color: #67c23a;  
}

.comment-form-discovered input[type="radio"]:checked + label {
  font-weight: bold;
}

/* 没找到 的标签及单选框 */
.comment-form-not-discovered label {
   color: #f56c6c;
}

.comment-form-not-discovered input[type="radio"]:checked + label { 
  font-weight: bold; 
}
.form-submit input[type="submit"] {
  background: #007cba;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.comment-reply-title {
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.comment-form textarea,
.comment-form input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}
.comment-respond {
  border: 1px solid #ddd;
  padding: 20px;
}
.comment-form p {
  margin-bottom: 15px;
}
@media(max-width: 768px) {
  /* 响应式样式 */
}
.logged-in-as span {
  font-weight: bold;  
}.logged-in-as a {
  color: #007cba;
}.logged-in-as a.logout {
  background: #007cba;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
}.logged-in-as a {
  display: inline-block;
  margin-left: 10px;
}
@media(max-width: 768px) {
  .logged-in-as {
    text-align: center;  
  }

  .logged-in-as a {
    display: block;
    margin: 5px auto;
  }
}
#comment {
  width: 100%;
  padding: 10px; 
  border: 1px solid #ddd;
}
.comment {
  position: relative;
  padding-left: 30px;
}

.comment-navigation {
  border-top: 1px solid #ddd;
  margin-top: 20px;
  padding-top: 10px;
}.comment-navigation h1 {
  margin-bottom: 10px;
  font-size: 16px;  
}.comment-navigation a {
  display: inline-block;
  padding: 8px 15px;
  background: #007cba; 
  color: #fff;
  border-radius: 3px;
}.comment-navigation a:hover {
  opacity: 0.8;
}.nav-previous,
.nav-next {
  width: 50%;
}


/* CSS样式 */
.info-container {
  width: 100%; 
  margin: 0;
  padding: 10px;
  background-color: #ffffff; /* 背景颜色 */
  border: 0px solid #ddd; /* 边框 */
}

.info-link {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去除下划线 */
}

.info-link:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

.info-title {
  margin: 0 0 10px 0; /* 标题外边距 */
  color: #333; /* 标题颜色 */
}

.info-text {
  margin: 5px 0; /* 文本外边距 */
  color: #666; /* 文本颜色 */
}

  .timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 4px; /* 增加中心线的宽度 */
    background: #333;
}

.timeline-item {
    position: relative;
    width: 45%;
    padding: 10px;
    box-sizing: border-box;
}

/* 调整左侧项目的样式 */
.left {
    float: left;
    text-align: right;
}

/* 调整右侧项目的样式 */
.right {
    float: right;
    text-align: left;
}

.left .timeline-content,
.right .timeline-content {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    position: relative; /* 添加相对定位,以便日期标记能正确定位 */
}

.timeline-date {
    position: absolute;
    width: 120px; /* 增加日期宽度 */
    height: 30px; /* 设置日期高度 */
    line-height: 30px; /* 使文本垂直居中 */
    left: 50%;
    transform: translateX(-50%);
    margin-top: -30px;
    background-color: #333; /* 添加日期背景色 */
    color: #fff; /* 添加日期文本颜色 */
    text-align: center; /* 使日期文本居中 */
    border-radius: 15px; /* 添加日期边框圆角 */
    z-index: 1; /* 确保日期在时间线上方显示 */
}
.timeline-item {
  position: relative;
  width: 45%;
  padding: 10px;
  box-sizing: border-box;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* 设置元素的宽度 */
  height: 20px; /* 设置元素的高度 */
  border-radius: 50%; /* 设置元素为圆形 */
  background-color: #333; /* 设置元素的背景色 */
  z-index: 2; /* 确保元素在时间线上方显示 */
}

/* 调整左侧项目的样式 */
.left::before {
  right: -30px; /* 调整左侧元素的水平位置 */
}

/* 调整右侧项目的样式 */
.right::before {
  left: -30px; /* 调整右侧元素的水平位置 */
}
.timeline::after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 768px) {
    .timeline-item,
    .left,
    .right {
        width: 100%;
        float: none;
        text-align: center;
    }

    .left .timeline-content,
    .right .timeline-content {
        margin: 0 auto;
    }

    .timeline-date {
        margin-top: 0;
    }
}

    .custom-fields {
        background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        font-family: 'Arial', sans-serif;
        color: #333;
        max-width: 600px; /* 控制最大宽度 */
        margin: 20px auto; /* 居中显示 */
    }

    .custom-fields p {
        margin: 10px 0;
        padding: 10px 5px 10px 35px; /* 为图标留出空间 */
        position: relative; /* 用于定位伪元素 */
        border-left: 3px solid #ff7e5f; /* 左边的高亮线 */
        background-color: #fff;
        border-radius: 5px;
    }

    /* 为每个段落项添加伪元素作为图标 */
    .custom-fields p::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: #ff7e5f;
        border-radius: 50%; /* 创建圆形 */
    }

    /* 特定项的自定义图标样式 */
    .custom-fields p:nth-child(2)::before {
        background-color: #f9d423;
    }
    .custom-fields p:nth-child(3)::before {
        background-color: #83a4d4;
    }
    .custom-fields p:nth-child(4)::before {
        background-color: #b6fbff;
    }
    .custom-fields p:nth-child(5)::before {
        background-color: #9ddcdc;
    }
    /* 根据需要继续添加或调整颜色 */

    .custom-fields strong {
        font-weight: bold;
        color: #333;
    }

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.tabs {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.tab-button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 5px;
    border-radius: 5px;
}

.tab-button.active {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.tab-content {
    display: none;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 800px;
    margin: 0 auto;
}

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

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

p {
    margin: 10px 0;
}

blockquote {
    margin: 10px 0;
    padding: 10px 20px;
    background-color: #f9f9f9;
    border-left: 5px solid #ccc;
}

.login-register-buttons {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    flex-wrap: wrap;
    gap: 10px; /* Adjust gap between buttons */
    align-items: center;
}

.login-register-buttons a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa; /* Change to your desired button color */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.login-register-buttons a.button:hover {
    background-color: #005177; /* Change to your desired hover color */
}

@media (max-width: 768px) {
    .login-register-buttons {
        justify-content: center; /* Center buttons on mobile */
    }

    .login-register-buttons a.button {
        width: auto; /* Allow buttons to adjust width automatically */
        padding: 8px 16px; /* Reduce padding for smaller buttons */
        font-size: 14px; /* Adjust font size for smaller buttons */
        text-align: center;
    }
}
/* 在编辑器中显示提示文本 */
.editor-placeholder {
    color: #999;
    font-style: italic;
}

/* 隐藏提示文本，避免在前端显示 */
.editor-placeholder::before {
    content: "输入你的宝藏描述和图片或者视频。例如地点特点，地点历史，位置描述，图片显示等。";
    color: #999;
}

.editor-placeholder {
    display: none;
}
.info-link.button {
  display: inline-block;  /* 使链接元素表现得像按钮一样 */
  padding: 10px 20px;     /* 内边距，定义按钮大小 */
  background-color: #caf4ea;  /* 背景颜色，定义按钮颜色 */
  color: #eef1f0;            /* 文字颜色，通常是白色 */
  text-align: center;     /* 居中文本 */
  text-decoration: none;  /* 去掉下划线 */
  border-radius: 5px;     /* 圆角 */
  border: none;           /* 无边框 */
  font-size: 16px;        /* 字体大小 */
  cursor: pointer;        /* 鼠标悬停时显示手型光标 */
}

.info-link.button:hover {
  background-color: #52fcff; /* 悬停时更改背景色 */
}

.posts-container.loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s;
}

.category-button.active {
  background-color: #007bff;
  color: white;
}

.category-button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.category-button.active {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

.posts-container.loading {
  opacity: 0.5;
  pointer-events: none;
}

.post-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.no-posts {
  padding: 20px;
  text-align: center;
  background: #f5f5f5;
  border-radius: 4px;
}

.cache-card {

  
 /* --- 关键在这里 --- */
 background-image: 
 /* 
  * 第1层：半透明的深色遮罩层 (从上到下)
  * rgba(0, 0, 0, 0.5) 代表50%透明度的黑色。
  * 您可以调整 0.5 这个值来改变遮罩的深浅。值越小，遮罩越透明。
  */
 linear-gradient(rgba(253, 253, 254, 0.95), rgba(160, 93, 93, 0.4)),
 
 /* 第2层：您的本地纹理图片 */
 url('image/111.webp');

/* 
* 我们不再需要单独的 background-color，
* 因为遮罩层已经提供了颜色。
* 如果纹理图片加载失败，可以保留一个备用背景色。
*/
background-color: #fdfaf4; 

background-repeat: repeat;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
padding: 20px;

/* 为了确保深色背景下的黑色文字可读，将文字颜色改为浅色 */
color: #333; /* 如果遮罩很深，可以改成 #f0f0f0 或 #ffffff */
}

.card-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.cache-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background-color: #fdfaf4; /* 一个温暖的米白色，像旧纸张 */

  /* 2. 添加内边距，让内容和边框有呼吸空间 */
  padding: 20px;

  /* 3. 添加圆角，让它看起来更像一个卡片 */
  border-radius: 8px;

  /* 4. (可选) 添加一个细微的边框，增强卡片感 */
  border: 1px solid #e9e4d9;

  /* 5. (可选) 添加一点阴影，让卡片有立体感 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cache-primary-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cache-type-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  padding: 5px 12px;
  border-radius: 20px;
}

.type-icon i {
  color: #666;
}

.type-text {
  font-weight: 500;
}

.cache-code {
  font-size: 1.2em;
  font-weight: bold;
  color: #007bff;
  text-decoration: none;
}

.cache-code:hover {
  text-decoration: underline;
}

.cache-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: auto;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item i {
  color: #666;
  width: 16px;
  text-align: center;
}

.detail-item.location {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cache-info-wrapper {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
  }

  .cache-details {
      margin-left: 0;
      width: 100%;
  }

  .detail-item {
      font-size: 0.9em;
  }
}

.cache-code {
  font-weight: bold;
  color: #007bff; /* 或其他突出颜色 */
}

#post-title {
  display: flex;
  align-items: center;
  justify-content: center; /* 居中对齐 */
  gap: 10px;
  flex-wrap: nowrap; /* 防止换行 */
  position: relative; /* 用于绝对定位代号 */
  width: 100%;
}

#post-title .cache-type {
  flex-shrink: 0;
  order: 0; /* 控制显示顺序 */
}

#post-title .title-text {
  flex-shrink: 1;
  text-align: center;
  order: 2; /* 控制显示顺序 */
  font-weight: bold; /* 标题加粗 */
}

#post-title .cache-code {
  flex-shrink: 0;
  position: absolute; /* 绝对定位 */
  right: 0; /* 靠右显示 */
  order: 3; /* 控制显示顺序 */
  font-size: 0.8em; /* 代号文字缩小 */
  color: #666; /* 可选：使用更淡的颜色 */
  font-weight: normal; /* 确保代号不会继承标题的粗体 */
}
@media (max-width: 768px) {
  #post-title {
      flex-direction: column; /* 在移动端垂直排列 */
      text-align: center;
  }

  #post-title .cache-code {
      position: relative; /* 取消绝对定位 */
      right: auto;
      margin-top: 10px;
  }
}
.info-container2 {
  display: flex;
  gap: 20px;
  margin: 15px 0;
}

.details-section,
.hint-section {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.info-toggle-btn {
  width: 100%;
  padding: 10px;
  border: none;
  background: #f5f5f5;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.info-toggle-btn:hover {
  background: #e9ecef;
}

.info-toggle-btn i {
  font-size: 0.9em;
}

.details-content,
.hint-content {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.info-grid {
  display: grid;
  gap: 12px;
}

.info-item {
  /* display: flex; */
  align-items: center;
  gap: 10px;
}

.info-item i {
  color: #666;
  width: 16px;
  text-align: center;
}

.info-item .label {
  font-weight: 500;
  color: #495057;
  min-width: 80px;
}

.info-item .value {
  color: #212529;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.hint-content {
  white-space: pre-wrap;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-container {
      flex-direction: column;
  }

  .details-section,
  .hint-section {
      width: 100%;
  }
}

.login-prompt {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.login-prompt a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.login-prompt a:hover {
  text-decoration: underline;
}

.cache-type {
  display: inline-flex;
}

.cache-type img {
  width: 24px;
  height: 24px;
}


.question-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
}

.question-item {
  margin-bottom: 15px;
}

.answer-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-group {
  display: flex;
  gap: 10px;
}

.input-group input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.verify-btn {
  padding: 8px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.verify-btn:hover {
  background: #0056b3;
}

/* 多步骤部分样式 */
.collapsible-section {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
}

.collapse-btn {
  width: 100%;
  padding: 12px 15px;
  background: #f8f9fa;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  background: #e9ecef;
}

.collapse-btn i:not(.arrow) {
  margin-right: 8px;
}

.arrow {
  transition: transform 0.3s ease;
}

.collapse-btn.active .arrow {
  transform: rotate(180deg);
}

.collapse-content {
  background: #fff;
  padding: 15px;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

/* 问答部分样式 */
.question-item {
  margin-bottom: 15px;
}

.answer-input {
  display: flex;
  gap: 10px;
}

.answer-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.verify-btn {
  padding: 8px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 步骤样式 */
.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.step-number {
  width: 24px;
  height: 24px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
}

/* 坐标样式 */
.coordinates-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.coordinate {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .coordinates-item {
      grid-template-columns: 1fr;
  }
  
  .answer-input {
      flex-direction: column;
  }
}
.verification-message {
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
  display: none;
}

.verification-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  display: block;
}

.verification-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  display: block;
}

.map-control-button {
  background-color: white; border: 1px solid #ccc; border-radius: 4px;
  padding: 5px 8px; margin: 5px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  min-width: 30px; text-align: center;
}
.map-control-button:hover { background-color: #f4f4f4; }
.map-control-button i { font-size: 1.1em; vertical-align: middle; }

.nav-button {
  padding: 6px 12px; background-color: #007bff; color: white;
  border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-left: 5px;
}
.nav-button:hover { background-color: #0056b3; }

.verification-message { padding: 10px; margin-top: 10px; border-radius: 4px; font-weight: bold; border: 1px solid transparent; }
.verification-message.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.verification-message.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.verification-message.warning { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
.verification-message.info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }

.step-verification-item { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dashed #eee; }
.step-verification-item h4 { margin-top: 0; margin-bottom: 8px; }
.question-item { margin-bottom: 8px; }
.question-item .label { font-weight: bold; margin-right: 5px; }
.answer-input input[type="text"] { padding: 6px; border: 1px solid #ccc; border-radius: 3px; }
.answer-input .verify-btn { padding: 6px 12px; background-color: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer; margin-left: 5px; }
.answer-input .verify-btn:hover { background-color: #218838; }

.collapsible-section { margin-bottom: 15px; border: 1px solid #eee; border-radius: 4px; }
.collapse-btn { display: block; width: 100%; text-align: left; padding: 10px 15px; background-color: #f8f9fa; border: none; border-bottom: 1px solid #eee; cursor: pointer; font-weight: bold; }
.collapse-btn i.arrow { float: right; margin-top: 3px; transition: transform 0.2s ease; }
.collapse-btn.active i.arrow { transform: rotate(180deg); }
.collapse-content { padding: 15px; }
.coordinates-item .coordinate { margin-bottom: 5px; }
.coordinates-item .label { font-weight: bold; display: inline-block; min-width: 50px; }
.step-info-item { padding: 10px; border-bottom: 1px solid #f0f0f0; }
.step-info-item:last-child { border-bottom: none; }
.hint-btn, .answer-btn { background: none; border: none; color: #007bff; cursor: pointer; padding: 2px 5px; margin-top: 5px; }
.hint-btn i, .answer-btn i { margin-right: 3px; }
.hint-content, .answer-content { background-color: #f9f9f9; border: 1px solid #eee; padding: 8px; margin-top: 5px; border-radius: 3px; }

/* 活动存档页面样式 */
.huodong-archive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-title {
  margin-bottom: 30px;
  text-align: center;
}
.huodong-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}
.huodong-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.huodong-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.huodong-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.huodong-card-content {
  padding: 20px;
}
.huodong-card-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 22px;
}
.huodong-card-title a {
  color: #333;
  text-decoration: none;
}
.huodong-card-title a:hover {
  color: #0073aa;
}
.huodong-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}
.huodong-status {
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: bold;
}
.huodong-status.planning {
  background-color: #ffeeba;
  color: #856404;
}
.huodong-status.ongoing {
  background-color: #d4edda;
  color: #155724;
}
.huodong-status.completed {
  background-color: #d6d8d9;
  color: #1b1e21;
}
.huodong-card-excerpt {
  color: #666;
  margin-bottom: 20px;
}
.huodong-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}
.cangdian-count {
  color: #666;
  font-size: 14px;
}
.huodong-more-link {
  display: inline-block;
  padding: 5px 15px;
  background-color: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.huodong-more-link:hover {
  background-color: #005177;
  color: #fff;
}

/* 活动详情页样式 */
.huodong-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.huodong-header {
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.huodong-title {
  font-size: 32px;
  margin-bottom: 10px;
}
.huodong-meta {
  font-size: 16px;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.huodong-cover {
  margin-bottom: 30px;
}
.huodong-cover-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.huodong-content {
  margin-bottom: 40px;
}
.huodong-content p {
  line-height: 1.8;
  margin-bottom: 16px;
  color: #333;
}
.huodong-content h2,
.huodong-content h3 {
  margin-top: 30px;
  margin-bottom: 15px;
  color: #222;
}
.huodong-content h2 {
  font-size: 24px;
  border-left: 4px solid #0073aa;
  padding-left: 10px;
}
.huodong-content h3 {
  font-size: 20px;
}
.huodong-content ul,
.huodong-content ol {
  margin-bottom: 16px;
  padding-left: 20px;
}
.huodong-content li {
  line-height: 1.6;
  margin-bottom: 8px;
}

/* 活动信息框 */
.huodong-info-box {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}
.huodong-info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #495057;
}
.huodong-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.huodong-info-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}
.huodong-info-list li:last-child {
  border-bottom: none;
}
.huodong-info-label {
  font-weight: 500;
  color: #6c757d;
}
.huodong-info-value {
  color: #495057;
}

/* 参与者列表 */
.participants-section {
  margin-bottom: 40px;
}
.participants-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
.participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.participant-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 15px;
  text-align: center;
  transition: box-shadow 0.3s ease;
}
.participant-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.participant-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
}
.participant-name {
  font-weight: 500;
  margin-bottom: 5px;
}
.participant-role {
  font-size: 14px;
  color: #666;
}

/* 评论区样式 */
.comments-section {
  margin-top: 50px;
  border-top: 2px solid #eee;
  padding-top: 30px;
}
.comments-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
.comment-form {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.comment-form textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
}
.comment-form button {
  background-color: #0073aa;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 14px;
}
.comment-form button:hover {
  background-color: #005177;
}
.comments-list {
  list-style: none;
  padding: 0;
}
.comment-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.comment-item:last-child {
  border-bottom: none;
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.comment-author {
  font-weight: 500;
  color: #333;
}
.comment-date {
  font-size: 14px;
  color: #666;
}
.comment-content {
  line-height: 1.6;
  color: #555;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .huodong-archive-container,
  .huodong-container {
      padding: 15px;
  }
  .huodong-grid {
      grid-template-columns: 1fr;
      gap: 20px;
  }
  .huodong-title {
      font-size: 24px;
  }
  .huodong-meta {
      flex-direction: column;
      gap: 8px;
  }
  .huodong-card-footer {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
  }
  .participants-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
  }
  .comment-form {
      padding: 15px;
  }
}

@media (max-width: 480px) {
  .huodong-card-content {
      padding: 15px;
  }
  .huodong-card-title {
      font-size: 18px;
  }
  .participants-grid {
      grid-template-columns: 1fr 1fr;
  }
}


/* End of custom styles from header.php */

/* --- 地图信息窗口的专属样式 --- */
.map-info-window {
  font-family: Arial, sans-serif;
  padding: 15px;
  max-width: 300px;
}

.map-info-window a.info-title-link {
  display: block;
  text-decoration: none;
  color: #2196F3;
  font-weight: bold;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #E3F2FD;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid #90CAF9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.map-info-window a.info-title-link:hover {
  background-color: #BBDEFB;
  transform: scale(1.02);
}

.map-info-window h5.info-title {
  margin: 0;
  font-size: 18px;
}

.map-info-window .info-details {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 8px;
}

.map-info-window .info-text {
  margin: 8px 0;
  font-size: 14px;
}

.map-info-window .info-text a {
  color: #2196F3;
  text-decoration: none;
  font-weight: bold;
}

.map-info-window button.nav-button {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.map-info-window button.nav-button:hover {
  background-color: #45a049;
}

/* 为底部导航预留空间 */
@media (max-width: 768px) {
  body {
      padding-bottom: 80px;
  }
  
  /* 底部导航栏样式 */
  .mobile-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.95);
      /* backdrop-filter: blur(10px); */
      border-top: 1px solid #e9ecef;
      box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
  
  .mobile-nav-items {
      display: flex;
      justify-content: space-around;
      align-items: center;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 10px;
  }
  
  .mobile-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #6c757d;
      transition: all 0.3s ease;
      padding: 8px 4px;
      border-radius: 12px;
      min-width: 50px;
      position: relative;
  }
  
  .mobile-nav-item:hover,
  .mobile-nav-item.active {
      color: #6a11cb;
      background: rgba(106, 17, 203, 0.1);
      transform: translateY(-2px);
      text-decoration: none;
  }
  
  .mobile-nav-item .nav-icon {
      font-size: 20px;
      margin-bottom: 2px;
      transition: all 0.3s ease;
  }
  
  .mobile-nav-item:hover .nav-icon,
  .mobile-nav-item.active .nav-icon {
      transform: scale(1.1);
      color: #6a11cb;
  }
  
  .mobile-nav-item .nav-text {
      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
  }
  
  /* 中间发布按钮特殊样式 */
  .mobile-nav-item.center-btn {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      color: white;
      border-radius: 50%;
      width: 56px;
      height: 56px;
      margin-top: -20px;
      box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
  }
  
  .mobile-nav-item.center-btn:hover {
      background: linear-gradient(135deg, #2575fc, #6a11cb);
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
  }
  
  .mobile-nav-item.center-btn .nav-icon {
      font-size: 24px;
      margin-bottom: 0;
  }
  
  .mobile-nav-item.center-btn .nav-text {
      display: none;
  }
  
  /* 通知徽章 */
  .mobile-nav-item .badge {
      position: absolute;
      top: 2px;
      right: 8px;
      background: #dc3545;
      color: white;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
  }
}

@media (max-width: 480px) {
  .mobile-nav-items {
      padding: 0 5px;
  }
  
  .mobile-nav-item {
      min-width: 45px;
      padding: 6px 2px;
  }
  
  .mobile-nav-item .nav-icon {
      font-size: 18px;
  }
  
  .mobile-nav-item .nav-text {
      font-size: 9px;
  }
  
  .mobile-nav-item.center-btn {
      width: 50px;
      height: 50px;
      margin-top: -18px;
  }
}