/*
 * 移动端模式控件层级修复
 * 确保当巡礼点卡片显示时，移动端模式控件隐藏于卡片之下
 */

/* 当巡礼点卡片显示时，降低移动端模式控件的z-index */
@media (max-width: 768px) {
  /* 使用CSS选择器检测info-card是否可见 */
  body:has(.info-card:not(.d-none)) .mobile-mode-controls {
    z-index: 999 !important; /* 设置为比info-card的z-index(1000)低的值 */
    opacity: 0.5; /* 降低透明度，使其不那么显眼 */
    transform: translateX(-50%) translateY(-10px); /* 稍微上移，减少视觉干扰 */
    transition: all 0.3s ease; /* 平滑过渡 */
  }
  
  /* 当用户悬停在模式控件上时，恢复其透明度，但保持较低的z-index */
  body:has(.info-card:not(.d-none)) .mobile-mode-controls:hover {
    opacity: 0.8;
  }
}

/* 确保深色模式下也有相同的效果 */
@media (max-width: 768px) {
  .dark-mode body:has(.info-card:not(.d-none)) .mobile-mode-controls {
    opacity: 0.4; /* 深色模式下降低更多透明度 */
  }
  
  .dark-mode body:has(.info-card:not(.d-none)) .mobile-mode-controls:hover {
    opacity: 0.7;
  }
}