/*
 * 指南操作按钮样式修复
 * 确保移动端指南操作按钮显示为图标在上、文字在下的样式
 */

/* 强制移动端指南操作按钮使用垂直布局 */
@media (max-width: 768px) {
  /* 操作按钮容器 */
  #guide-details-modal .guide-actions {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
  }
  
  /* 操作按钮样式 */
  #guide-details-modal .guide-action-btn {
    flex: 1 !important;
    min-width: 60px !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important; /* 垂直布局 - 图标在上，文字在下 */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    background-color: rgba(var(--primary-color-rgb), 0.1) !important;
    border: none !important;
    color: var(--primary-color) !important;
  }
  
  /* 操作按钮图标 */
  #guide-details-modal .guide-action-btn i {
    margin-right: 0 !important; /* 移除右边距 */
    margin-bottom: 8px !important; /* 添加底部边距 */
    font-size: 22px !important; /* 增大图标尺寸 */
  }
  
  /* 操作按钮文字 */
  #guide-details-modal .guide-action-btn span {
    font-size: 12px !important; /* 设置文字大小 */
    font-weight: 500 !important;
  }
  
  /* 操作按钮悬停效果 */
  #guide-details-modal .guide-action-btn:hover {
    background-color: rgba(var(--primary-color-rgb), 0.2) !important;
    transform: translateY(-2px) !important;
  }
  
  /* 操作按钮点击效果 */
  #guide-details-modal .guide-action-btn:active {
    transform: translateY(0) !important;
    background-color: rgba(var(--primary-color-rgb), 0.3) !important;
  }
  
  /* 深色模式适配 */
  .dark-mode #guide-details-modal .guide-action-btn {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--primary-color) !important;
  }
  
  .dark-mode #guide-details-modal .guide-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .dark-mode #guide-details-modal .guide-action-btn:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
}