/* ====================================
   移动端横向滚动修复
   云南省能源局
   ==================================== */

/* ========== 全局防止横向滚动 ========== */
@media (max-width: 768px) {
  /* 核心修复 - 最高优先级 */
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* 所有元素都不允许超出视口 */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ========== 修复固定宽度容器 ========== */
  .comW1200,
  .content,
  .pager-content {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }

  /* layer01 相关 */
  .layer01,
  .layer011 {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 页面顶部 */
  .page_top,
  .pcShow {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ========== 头部工具条 ========== */
  .layer01-top {
    width: 100% !important;
    padding: 8px 10px !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .layer01-top.clearfix::after {
    display: none !important;
  }

  .top-links,
  .top-operation {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    line-height: 28px !important;
    font-size: 12px !important;
    padding: 4px !important;
  }

  .top-links a,
  .top-operation a {
    font-size: 12px !important;
  }

  .top-operation {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  /* ========== Logo和搜索 ========== */
  .logo-search {
    width: 100% !important;
    overflow-x: hidden !important;
    padding: 10px 0 !important;
  }

  .logo-search.clearfix::after {
    display: none !important;
  }

  .zyt-logo {
    width: 90% !important;
    margin: 10px auto !important;
    padding: 0 !important;
    float: none !important;
  }

  .zyt-logo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .zyt-search {
    width: 95% !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .top-search {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .top-search.clearfix::after {
    display: none !important;
  }

  .search-input {
    width: 100% !important;
    flex: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border: none !important;
    float: none !important;
    margin: 0 !important;
  }

  .search-button {
    width: 80px !important;
    flex: 0 0 80px !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 0 8px 8px 0 !important;
    border: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .search-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    float: none !important;
    background-size: 22px 22px !important;
  }

  /* 热词 */
  .hotword {
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .hotword span {
    font-size: 12px !important;
  }

  /* ========== 导航菜单 - 改为移动端样式 ========== */
  .top-nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 60px 0 20px !important;
    background: linear-gradient(180deg, #0f5a9b 0%, #1471c2 100%) !important;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.25) !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0 !important;
    float: none !important;
    clear: none !important;
    list-style: none !important;
  }

  .top-nav.mobile-nav-active {
    display: block !important;
    right: 0 !important;
  }

  .top-nav.clearfix::after {
    display: none !important;
  }

  .top-nav li {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    line-height: normal !important;
    text-align: left !important;
    display: block !important;
  }

  .top-nav li::after {
    display: none !important;
    content: "" !important;
  }

  .top-nav li::before {
    display: none !important;
    content: "" !important;
  }

  .top-nav li:first-of-type {
    width: 100% !important;
  }

  .top-nav li:first-of-type.act::before,
  .top-nav li.act::before,
  .top-nav li:hover::before {
    display: none !important;
    content: "" !important;
    background: none !important;
  }

  .top-nav li a {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    font-size: 15px !important;
    color: #fff !important;
    text-align: left !important;
    line-height: 1.6 !important;
    height: auto !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
  }

  .top-nav li a:hover,
  .top-nav li.act a {
    background: rgba(255, 255, 255, 0.12) !important;
    text-decoration: none !important;
  }

  /* ========== 移动端菜单按钮 ========== */
  .mobile-menu-toggle {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    z-index: 10001 !important;
    cursor: pointer !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
  }

  /* ========== 遮罩层 ========== */
  .mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .mobile-nav-overlay.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ========== 阻止背景滚动 ========== */
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* ========== 清除浮动问题 ========== */
  .clearfix {
    overflow: visible !important;
  }

  /* ========== 确保图片不溢出 ========== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ========== 表格响应式 ========== */
  table {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
}

/* ========== 480px以下 ========== */
@media (max-width: 480px) {
  .comW1200 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .layer01-top {
    padding: 6px 8px !important;
  }

  .top-links,
  .top-operation {
    font-size: 11px !important;
  }

  .zyt-logo {
    width: 95% !important;
  }

  .zyt-search {
    width: 98% !important;
  }

  .search-input {
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  .search-button {
    width: 70px !important;
    flex: 0 0 70px !important;
  }

  .top-nav {
    width: 260px !important;
    max-width: 90vw !important;
  }

  .top-nav li a {
    padding: 14px 15px !important;
    font-size: 14px !important;
  }
}

/* ========== 375px以下（小屏手机） ========== */
@media (max-width: 375px) {
  .comW1200 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .layer01-top {
    padding: 5px !important;
  }

  .top-links,
  .top-operation {
    font-size: 10px !important;
    padding: 2px !important;
  }

  .top-operation a {
    padding: 2px 4px !important;
  }

  .zyt-logo {
    width: 98% !important;
  }

  .zyt-search {
    width: 100% !important;
  }

  .search-input {
    font-size: 12px !important;
    padding: 0 8px !important;
  }

  .search-button {
    width: 60px !important;
    flex: 0 0 60px !important;
  }

  .search-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .top-nav {
    width: 240px !important;
    max-width: 95vw !important;
  }

  .top-nav li a {
    padding: 12px !important;
    font-size: 13px !important;
  }
}