/* ========================================
   icomoon 字体图标完整样式（合并版）
   包含：字体定义 + 图标映射 + 样式修复
   ======================================== */

/* ========================================
   1. 字体定义
   ======================================== */

@font-face {
  font-family: 'icomoon';
  src: url('../images/fonts/icomoon.eot?nddhpi');
  src: url('../images/fonts/icomoon.eot?nddhpi#iefix') format('embedded-opentype'),
    url('../images/fonts/icomoon.ttf?nddhpi') format('truetype'),
    url('../images/fonts/icomoon.woff?nddhpi') format('woff'),
    url('../images/fonts/icomoon.svg?nddhpi#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   2. 图标映射（基于新的字体包）
   ======================================== */

/* 月亮 - 暗黑模式 */
.icon-moon:before {
  content: "\e900";
}

/* 显示器 */
.icon-monitor:before {
  content: "\e901";
}

/* 星星 */
.icon-star:before {
  content: "\e902";
}

/* 播放列表 */
.icon-playlist:before {
  content: "\e903";
  font-size:22px;
}

/* 太阳 - 明亮模式 */
.icon-sun:before {
  content: "\e904";
}

/* 相册/图片 */
.icon-album:before,
.icon-picture:before {
  content: "\e905";
}

/* 箭头（基础） - 默认向下 */
.icon-arrow:before {
  content: "\e906";
}

/* 日历 */
.icon-calendar:before {
  content: "\e907";
}

/* 分类 */
.icon-categories:before {
  content: "\e908";
}

/* 选中/勾选 */
.icon-check:before {
  content: "\e909";
}

/* 点赞/喜欢 - 使用 hand (e910) 不旋转 */
.icon-like:before,
.icon-comment-rate-up:before {
  content: "\e910";
  display: inline-block;
}

/* 点踩/不喜欢 - 使用 hand (e910) 旋转 180 度 */
.icon-dislike:before,
.icon-comment-rate-down:before {
  content: "\e910";
  display: inline-block;
  transform: rotate(180deg);
}

/* 评论区点赞踩图标统一大小 */
.list-comments .comment-options .icon-like,
.list-comments .comment-options .icon-dislike {
  font-size: 14px;
}

/* 点赞踩数字样式 */
.list-comments .comment-options .like-count,
.list-comments .comment-options .dislike-count {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--comment-like-color);
}

.list-comments .comment-level-2 .comment-options .like-count,
.list-comments .comment-level-2 .comment-options .dislike-count {
  font-size: 11px;
  margin-left: 6px;
}

/* 下载 */
.icon-download:before {
  content: "\e90c";
}

/* 地球/世界 */
.icon-earth:before,
.icon-world:before {
  content: "\e90d";
}

/* 眼睛/浏览 */
.icon-eye:before {
  content: "\e90e";
}

/* 旗帜/举报 */
.icon-flag:before {
  content: "\e90f";
}

/* 手势 */
.icon-hand:before {
  content: "\e910";
}

/* 心形/收藏 */
.icon-heart:before {
  content: "\e911";
}

/* 首页 */
.icon-home:before {
  content: "\e912";
}

/* 信息 */
.icon-info:before {
  content: "\e913";
}

/* 钥匙 */
.icon-key:before {
  content: "\e914";
}

/* 锁 */
.icon-lock:before {
  content: "\e917";
}

/* 会员/用户 */
.icon-member:before,
.icon-user:before {
  content: "\e918";
}

/* 消息/评论 */
.icon-message:before,
.icon-comment:before,
.icon-chat:before {
  content: "\e919";
}

/* 模特 */
.icon-model:before {
  content: "\e91a";
}

/* 登出 */
.icon-logout:before {
  content: "\e91b";
}

/* 添加/加号 */
.icon-plus:before,
.icon-add:before,
.icon-plus-in-circle:before {
  content: "\e91c";
}

/* 高级/会员 */
.icon-premium:before {
  content: "\e91d";
}

/* 搜索 */
.icon-search:before {
  content: "\e91e";
}

/* 分享 */
.icon-share:before,
.icon-shape:before {
  content: "\e91f";
}

/* 上传 */
.icon-upload:before {
  content: "\e920";
}

/* 视频 */
.icon-video:before {
  content: "\e921";
}

/* 时钟/时间 */
.icon-watch:before,
.icon-oclock:before,
.icon-time:before {
  content: "\e922";
}

/* 编辑/写 */
.icon-write:before,
.icon-edit:before {
  content: "\e923";
}

/* 播放 */
.icon-play:before {
  content: "\e924";
}

/* 排序 */
.icon-sort:before {
  content: "\e926";
}

/* 关闭/叉号 */
.icon-close:before,
.icon-cross:before,
.icon-small-cross:before {
  content: "\e927";
}

/* 弹窗关闭按钮 - 白色 */
.modal-inner .close-btn i,
.modal-inner .close-btn .icon-cross,
.close-btn .icon-cross {
  color: #ffffff !important;
}

/* 触摸 */
.icon-touch:before {
  content: "\e928";
}

/* ========================================
   3. 箭头方向控制（使用 CSS 旋转）
   ======================================== */

/* 向下箭头（默认 0度） */
.icon-arrow-down:before {
  content: "\e906";
  display: inline-block;
  transform: rotate(0deg);
}

/* 评分向下（踩） */
.icon-rate-down:before {
  content: "\e90a";
}

/* 评分向上（赞） */
.icon-rate-up:before {
  content: "\e90b";
}

/* 向上箭头（旋转 180度） */
.icon-arrow-up:before {
  content: "\e906";
  display: inline-block;
  transform: rotate(180deg);
}

/* 左箭头（旋转 90度） */
.icon-arrow-left:before {
  content: "\e906";
  display: inline-block;
  transform: rotate(90deg);
}

/* 右箭头（旋转 -90度） */
.icon-arrow-right:before {
  content: "\e906";
  display: inline-block;
  transform: rotate(-90deg);
}

/* 顶部箭头（向右，旋转 90度） */
.icon-top-arrow:before {
  content: "\e906";
  display: inline-block;
  transform: rotate(90deg);
}

/* ========================================
   4. 样式修复（SVG → 字体图标）
   ======================================== */

/* 重置图标默认颜色继承 */
.thumb i[class^="icon-"],
.thumb i[class*=" icon-"] {
  color: inherit;
}

/* 视频缩略图上方的收藏和稍后观看图标 */
.thumb .item-heart i,
.thumb .item-time i,
.thumb .item-heart > i,
.thumb .item-time > i {
  color: #ffffff !important;
  font-size: 16px;
  line-height: 30px;
  transition: color 0.3s;
}

/* 固定状态（已收藏/已添加）的图标 */
.thumb .item-heart.fixed i,
.thumb .item-time.fixed i,
.thumb .item-heart.fixed > i,
.thumb .item-time.fixed > i {
  color: #ffffff !important;
}

/* 悬停状态 - 保持白色 */
.thumb a:hover .item-heart i,
.thumb a:hover .item-time i,
.thumb .item-heart:hover i,
.thumb .item-time:hover i,
.thumb:hover .item-heart > i,
.thumb:hover .item-time > i,
.thumb .item-heart:hover > i,
.thumb .item-time:hover > i,
.item:hover .item-heart > i,
.item:hover .item-time > i {
  color: #ffffff !important;
}

/* 确保图标居中显示 */
.thumb .item-heart,
.thumb .item-time {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移除 SVG 特定样式 */
.thumb .item-heart svg,
.thumb .item-time svg {
  display: none;
}

/* ========================================
   5. 底部图标修复
   ======================================== */

/* 底部信息栏的所有图标 - 统一基准 */
.thumb-bottom .thumb-item i[class^="icon-"],
.thumb-bottom .thumb-item i[class*=" icon-"],
.thumb-bottom-videos .thumb-item i[class^="icon-"],
.thumb-bottom-videos .thumb-item i[class*=" icon-"] {
  font-size: 13px !important;
  vertical-align: baseline !important;
  line-height: 1;
  display: inline-block;
  position: relative;
  top: 1px;
}

/* 眼睛图标（浏览量） */
.thumb-bottom .icon-eye,
.thumb-bottom-videos .icon-eye {
  font-size: 12px !important;
  top: 0px !important;
}

/* 日历图标 */
.thumb-bottom .icon-calendar,
.thumb-bottom-videos .icon-calendar {
  font-size: 12px !important;
  top: 1px !important;
  line-height: 1.3 !important;
}

/* 点赞图标 */
.thumb-bottom .icon-like,
.thumb-bottom-videos .icon-like {
  font-size: 12px !important;
  top: 0px !important;
}

/* 时钟图标 */
.thumb-bottom .icon-oclock,
.thumb-bottom-videos .icon-oclock {
  font-size: 12px !important;
}

/* 修复双层 i 标签的显示问题 */
.thumb-bottom .thumb-item > i,
.thumb-bottom-videos .thumb-item > i {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* 确保图标和文字垂直对齐 */
.thumb-bottom .thumb-item,
.thumb-bottom-videos .thumb-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1.4;
}

/* ========================================
   6. 通用修复
   ======================================== */

/* 统一图标大小 */
[class^="icon-"],
[class*=" icon-"] {
  vertical-align: middle;
}

/* 按钮中的图标 */
.btn i[class^="icon-"],
.btn i[class*=" icon-"] {
  color: inherit;
  font-size: inherit;
}

/* 按钮激活状态 */
.btn-holder.fav-open .drop-btn i,
.btn.active i,
.sort.sort-open .sort-title.more-title:hover i {
  color: #ffffff;
}

/* 视频控制区域激活状态的图标颜色 */
.video-controls .btn.active i[class^="icon-"],
.video-controls .btn.active i[class*=" icon-"],
.video-controls .col.grow .btn.active i[class^="icon-"],
.video-controls .col.grow .btn.active i[class*=" icon-"],
.video-controls .btn.delete i[class^="icon-"],
.video-controls .btn.delete i[class*=" icon-"],
.video-controls .col.grow .btn.delete i[class^="icon-"],
.video-controls .col.grow .btn.delete i[class*=" icon-"] {
  color: #000000;
}

/* 导航和菜单中的图标 */
.header i[class^="icon-"],
.header i[class*=" icon-"] {
  vertical-align: middle;
  line-height: 1;
}

/* 搜索按钮图标 - 根据主题调整颜色 */
.search .btn-search i,
.search .btn-search .icon-search {
  color: #ffffff;
}

html.light .search .btn-search i,
html.light .search .btn-search .icon-search {
  color: #000000;
}

/* 分页箭头 */
.pagination a i,
.pagination span i {
  vertical-align: middle;
  font-size: 14px;
}

/* 视频控制按钮图标 */
.video-controls i[class^="icon-"],
.video-controls i[class*=" icon-"] {
  color: inherit;
}

/* 评分按钮中的图标 */
.rate-holder .btn i {
  color: inherit;
  vertical-align: middle;
}

/* 视频控制按钮中的图标 - 使用 CSS 变量 */
.btn-holder .btn i[class^="icon-"],
.btn-holder .btn i[class*=" icon-"],
.rate-holder .btn i[class^="icon-"],
.rate-holder .btn i[class*=" icon-"] {
  color: var(--btn-tabs-color);
  transition: color 0.3s;
}

/* 视频控制区域第二列的图标 */
.video-controls .col.second i[class^="icon-"],
.video-controls .col.second i[class*=" icon-"] {
  display: inline-block;
  margin-right: 5px;
}

/* 确保嵌套的 i 标签正常显示 */
.video-controls .col.second > i,
.video-controls .btn > i {
  display: inline-flex;
  align-items: center;
}

/* 修复双层 i 标签 */
.video-controls i > i[class^="icon-"],
.video-controls i > i[class*=" icon-"] {
  display: inline-block;
}

/* 小屏幕和平板下强制显示图标 */
@media (max-width: 1024px) {
  /* 第一列（点赞/踩/收藏）的图标 */
  .video-controls .col.grow .btn i[class^="icon-"],
  .video-controls .col.grow .btn i[class*=" icon-"],
  .video-controls .col.grow i > i[class^="icon-"],
  .video-controls .col.grow i > i[class*=" icon-"],
  .video-controls .rate-holder i[class^="icon-"],
  .video-controls .rate-holder i[class*=" icon-"],
  .video-controls .btn-favourites i[class^="icon-"],
  .video-controls .btn-favourites i[class*=" icon-"] {
    font-size: 18px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* 第二列的图标 */
  .video-controls .col.second .btn i[class^="icon-"],
  .video-controls .col.second .btn i[class*=" icon-"],
  .video-controls .col.second i > i[class^="icon-"],
  .video-controls .col.second i > i[class*=" icon-"] {
    font-size: 18px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* 修复：确保外层 i 标签不隐藏内容 */
  .video-controls .col > div > a > i,
  .video-controls .col > div > button > i,
  .video-controls .col.second > div > a > i,
  .video-controls .btn-holder > a > i,
  .video-controls .btn-holder > button > i,
  .video-controls .btn-holder > li > a > i {
    display: inline-flex !important;
    align-items: center;
    font-size: inherit;
  }
  
  /* 点赞/踩按钮的图标 */
  .rate-holder .btn.rate-like i,
  .rate-holder .btn.rate-dislike i,
  .rate-holder .btn.like i,
  .rate-holder .btn.dislike i {
    font-size: 16px !important;
    display: inline-block !important;
  }
}

/* ========================================
   7. 辅助类
   ======================================== */

/* SVG 图标兼容类 */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* 图标大小调整 */
.icon-sm {
  font-size: 0.875em;
}

.icon-lg {
  font-size: 1.25em;
}

.icon-xl {
  font-size: 1.5em;
}

.icon-2x {
  font-size: 2em;
}

.icon-3x {
  font-size: 3em;
}

/* 图标旋转动画 */
.icon-spin {
  animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 图标翻转 */
.icon-flip-horizontal {
  transform: scaleX(-1);
  display: inline-block;
}

.icon-flip-vertical {
  transform: scaleY(-1);
  display: inline-block;
}

/* ========================================
   8. 下拉菜单箭头动画
   ======================================== */

/* 排序菜单箭头 - 添加过渡效果 */
.sort .sort-title i[class*="arrow"] {
  transition: transform 0.3s;
}

/* 排序菜单打开时 - 箭头旋转 180 度（向上） */
.sort.sort-open .sort-title .icon-arrow-down {
  transform: rotate(180deg) !important;
}

/* 其他下拉菜单的箭头动画 */
.drop-btn i[class*="arrow"],
.dropdown i[class*="arrow"] {
  transition: transform 0.3s;
}

/* ========================================
   9. 响应式
   ======================================== */

@media (min-width: 992px) {
  .thumb a:hover .item-heart i,
  .thumb a:hover .item-time i {
    color: #ffffff !important;
  }
  
  .thumb a:hover .item-heart.fixed i,
  .thumb a:hover .item-time.fixed i {
    color: #ffffff !important;
  }
}

/* ========================================
   10. 新增图标 - 通知页面
   ======================================== */

/* 垃圾桶 - 删除 */
.icon-trash:before {
  content: "\e92d";
}

/* 外部链接 - 查看 */
.icon-external-link:before {
  content: "\e92a";
}

/* 表情 - 评论区 */
.icon-emoji:before {
  content: "\e929";
}
