[v-cloak] {
  display: none;
}

.indexPage {
  padding: 30px 15% 30px 15%;
  min-height: 779px;
}

/* 核心容器：去掉固定高度，用 min-height 保证最小空间，flex 垂直排列 */
.footer-box {
  background: #3a4650;
  color: #fff;
  padding: 20px 5% 30px; /* 统一内边距，避免过多媒体查询调整 */
  min-height: 120px; /* 最小高度，内容超出时自动撑开 */
  display: flex;
  flex-direction: column;
  gap: 15px; /* 上下区块间距（核心元素行 + Global Visitors） */
  box-sizing: border-box; /* 确保 padding 不撑大容器 */
}

/* 三个核心元素的父容器：强制横向对齐，垂直居中是关键 */
.footer-box > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 强制所有子元素垂直居中（解决错位核心） */
  width: 100%;
  gap: 20px; /* 元素间最小间距，避免挤压 */
  flex-wrap: nowrap; /* 强制不换行（小屏幕靠缩放适配） */
  box-sizing: border-box;
}

/* 文字列表：占满剩余空间，垂直居中 */
.footer-box .footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* 自动占满剩余宽度，避免挤压其他元素 */
  font-size: 14px;
  line-height: 1.8;
  display: flex; /* 适配父容器 Flex 布局 */
  align-items: center; /* 文字垂直居中 */
  box-sizing: border-box;
}

/* 访问量图标容器：严格垂直居中，尺寸可控 */
.flag-counter-wrapper {
  display: flex; /* 替换 inline-flex，确保和其他元素对齐一致 */
  align-items: center; /* 垂直居中，杜绝上下偏移 */
  padding: 0;
  margin: 0; /* 清除所有默认边距 */
  box-sizing: border-box;
}

/* 访问量图片：限制最大尺寸，不撑开布局 */
.flag-counter-img {
  display: block;
  /*max-width: 80px; !* 限制最大宽度，避免过大溢出 *!*/
  /*max-height: 60px; !* 限制最大高度，匹配其他元素 *!*/
  width: auto;
  height: auto;
  object-fit: contain; /* 保持宽高比，不拉伸 */
}

/* 友情链接：图标横向排列，垂直居中 */
.footer-box .footer-link {
  font-size: 14px;
  display: flex;
  align-items: center; /* 图标垂直居中 */
  gap: 15px; /* 图标间距固定 */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.footer-box .footer-link a {
  display: block;
}

/* 友情链接图片：尺寸可控，响应式缩放 */
.footer-box .footer-link img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  transition: all 0.3s; /* 优化体验 */
}

/* 返回顶部按钮：不影响核心布局 */
/* 返回顶部按钮：精准居中+位置优化 */
.footer-box .return_top,
.return_top {
  display: none;
  position: fixed;
  right: 30px;   /* 缩小右侧间距 */
  bottom: 30px;  /* 缩小底部间距 */
  width: 52px;
  height: 52px;
  border: 2px solid #e8e8e8;
  border-radius: 50%;
  font-size: 22px;
  /* 核心：flex布局实现图标完美居中 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: initial; /* 清除行高干扰 */
  text-decoration: none; /* 清除a标签下划线 */
  z-index: 9999; /* 确保层级最高 */
}

.return_top i {
  color: #b0b0b0;
}
.return_top {
  /* 原有样式保留，新增以下属性 */
  display: flex !important; /* 强制flex布局，覆盖display: none的切换逻辑 */
  align-items: center;
  justify-content: center;
  line-height: initial; /* 清除原有line-height，避免干扰flex居中 */
}

/* 冗余样式清除（未使用的样式，避免干扰） */
.footer-two,
.footer-list-two {
  display: none; /* 若未使用，直接隐藏避免影响布局 */
}

.footer-list a {
  color: #fff;
  text-decoration: none;
}

/* 响应式适配：按屏幕宽度逐步缩小元素，避免溢出 */
@media screen and (max-width: 1200px) {
  .footer-box .footer-link img {
    width: 60px;
    height: 60px; /* 缩小图标 */
  }
  .flag-counter-img {
    max-width: 70px;
    max-height: 50px;
  }
  .footer-box .footer-list {
    font-size: 13px; /* 缩小文字 */
  }
}

@media screen and (max-width: 992px) {
  .footer-box > div:first-child {
    gap: 15px; /* 缩小元素间距 */
  }
  .footer-box .footer-link img {
    width: 50px;
    height: 50px;
  }
  .flag-counter-img {
    max-width: 60px;
    max-height: 45px;
  }
  .footer-box {
    padding: 15px 3% 20px; /* 缩小内边距 */
  }
}

@media screen and (max-width: 768px) {
  .footer-box > div:first-child {
    flex-wrap: wrap; /* 超小屏幕允许换行，但仍在 footer-box 内 */
    justify-content: flex-start; /* 换行后左对齐 */
  }
  .footer-box .footer-list {
    width: 100%; /* 文字区占满一行 */
    margin-bottom: 10px; /* 换行后间距 */
    white-space: normal; /* 允许文字换行，避免溢出 */
  }
  .footer-box .footer-link img {
    width: 45px;
    height: 45px;
  }
  .flag-counter-wrapper {
    order: 2; /* 换行后让访问量图标在中间 */
  }
  .footer-link {
    order: 3; /* 友情链接在最右侧 */
  }
}

@media screen and (max-width: 480px) {
  .footer-box .footer-link {
    gap: 10px;
  }
  .footer-box .footer-link img {
    width: 40px;
    height: 40px;
  }
  .flag-counter-img {
    max-width: 50px;
    max-height: 40px;
  }
}