/* ============================================================
   huarenok-refresh.css — 正式站(theme2)视觉增强（非破坏性叠加层）
   命中真实类名：.vodlist_item / .vodlist_thumb / .ranklist_item
   原模板已为 .vodlist_thumb 预设 transition 但无 hover 规则，
   这里补上悬停动效；兼容浅色(theme2)与深色(bstem)。
   回退：删除本文件 + include.html 中对应 <link> 即可。
   ============================================================ */

/* 1) 海报封面：悬停放大 + 阴影 + 提亮（transition 原样式已就绪） */
.vodlist .vodlist_item:hover .vodlist_thumb,
.img-list .vodlist_item:hover .vodlist_thumb{
  transform: scale(1.045);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 1px var(--tpl-accent-muted);
  filter: brightness(1.04);
  z-index: 2;
  position: relative;
}
.bstem .vodlist .vodlist_item:hover .vodlist_thumb,
.bstem .img-list .vodlist_item:hover .vodlist_thumb{
  box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px var(--tpl-accent-muted);
}

/* 2) 卡片整体：悬停轻微上浮（item 原 transition:all，自动平滑） */
.vodlist .vodlist_item:hover,
.img-list .vodlist_item:hover{
  transform: translateY(-4px);
}

/* 3) 排行榜条目：悬停高亮 + 轻微位移 */
.ranklist_item{
  transition: background-color .2s ease, transform .2s ease;
  border-radius: 6px;
}
.ranklist_item:hover{
  background: var(--tpl-accent-muted);
  transform: translateX(2px);
}

/* 4) 首页区块标题：左侧强调竖条，增强层次（theme2 真实类名） */
.home-unified-section-head > h2,
.hu-section-head > h2{
  position: relative;
  padding-left: 12px;
}
.home-unified-section-head > h2::before,
.hu-section-head > h2::before{
  content:"";
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1em; border-radius:2px;
  background:linear-gradient(180deg, var(--tpl-accent), var(--tpl-accent-hover));
}

/* ============================================================
   详情页 / 播放页 视觉增强（theme2 真实类名）
   ============================================================ */

/* 5) 面板标题(分集剧情/猜你喜欢/评论/选集等)左侧绿色竖条，与首页统一 */
.pannel_head > h3.title,
.pannel_head > h2.title{
  position: relative;
  padding-left: 13px !important;
}
.pannel_head > h3.title::before,
.pannel_head > h2.title::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1.05em; border-radius:2px;
  background:linear-gradient(180deg, var(--tpl-accent), var(--tpl-accent-hover));
}

/* 6) 选集按钮：悬停背景+强调色，平滑过渡；当前集(.active)保持原高亮不动 */
.content_playlist li a{
  transition: background-color .18s ease, color .18s ease;
}
.content_playlist li:not(.active) a:hover{
  background: var(--tpl-accent-muted);
  color: var(--tpl-accent);
}

/* 7) 详情页 Play / 分享按钮：悬停轻微上浮+提亮 */
.detail-wrap .playbtn a,
.detail-wrap .content_btn .btn{
  transition: transform .18s ease, filter .18s ease;
}
.detail-wrap .playbtn a:hover,
.detail-wrap .content_btn .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* ============================================================
   细节打磨
   ============================================================ */

/* 8) “剧情介绍/Plot introduction”标题(独立 h2，不在 pannel_head 内)也补竖条，统一视觉 */
h2[data-lang="string_vod_introduction"]{
  position: relative;
  padding-left: 13px;
}
h2[data-lang="string_vod_introduction"]::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:1.05em; border-radius:2px;
  background:linear-gradient(180deg, var(--tpl-accent), var(--tpl-accent-hover));
}

/* 9) 选集悬停：文字也变强调色(覆盖既有写死的色) */
.content_playlist li:not(.active) a:hover{
  color: var(--tpl-accent) !important;
}

/* 10) 播放器控制条按钮(报错/刷新/分享/收藏/上下集)：悬停文字+图标变强调色 */
.play-but-strip .play-but-item a,
.play-but-strip .play-but-item a i,
.play-but-strip .play-but-item a span,
.play-but-strip .play-but-item .mac_ulog{
  transition: color .18s ease;
}
.play-but-strip .play-but-item a:hover,
.play-but-strip .play-but-item a:hover i,
.play-but-strip .play-but-item a:hover span,
.play-but-strip .play-but-item .mac_ulog:hover{
  color: var(--tpl-accent);
}

/* 11) 播放线路标签(.tab-play)：悬停文字变强调色；当前线路保持原态 */
.tabs.playlist .tab-play a{
  transition: color .18s ease;
}
.tabs.playlist .tab-play:not(.active) a:hover{
  color: var(--tpl-accent);
}

/* ============================================================
   移动端修复（≤819px）
   ============================================================ */
@media (max-width:819px){

  /* 首页移动头部已改为首行搜索图标，不再需要为旧搜索栏预留额外高度。 */
  body.home-index-body .container.home-unified{
    padding-top: 0;
  }

  /* T8: 列表页排序条(更新时间/人气/评分)透明背景压在海报上看不清。
     给排序条实底背景、独立成行、排序项做成药丸，明显可读。 */
  .mac-catalog-filter-head__sort{
    background: var(--tpl-bg-base);
    position: relative;
    z-index: 5;
    padding: 6px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
  }
  .mac-catalog-filter-head__sort-inner,
  .mac-catalog-filter-head__sort .sx_tz{
    background: transparent;
  }
  .sx_tz li button.mac-cat-filter-item{
    background: rgba(127,127,127,.12);
    border-radius: 14px;
    padding: 3px 12px;
    margin: 2px 6px 2px 0;
  }
  .sx_tz li.hl_fl button.mac-cat-filter-item{
    background: var(--tpl-accent);
    color: #fff;
  }

  /* T-线路: 播放页“播放线路”下拉框被塞进塌陷成 20px 的旧标签容器里，
     宽度只剩一条缝、看不到当前线路名。让塌陷的祖先容器恢复满宽。 */
  .tabs.playlist .wrapper_fl.xl{ overflow: visible !important; }
  .tabs.playlist .scroller{ width: 100% !important; }
  .title_nav.mac-line-tabs--compact{
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .mac-line-picker{ width: 100% !important; }
  .mac-line-picker__select{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  /* T-选集: 长集名(如“20260516(超前营业)”)设了 nowrap+overflow:visible，
     撑爆 111px 小格子互相重叠成“连在一起”的表格。改为换行不溢出 + 圆角分隔。 */
  .content_playlist li a{
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 5px 6px !important;
    font-size: 12.5px !important;
    word-break: break-word !important;
  }
}
/* BEGIN mobile iyf-style top navigation */
@media (max-width: 820px) {
  .mobile-head .mobile-iyf-nav {
    align-items: center;
    background: #101012;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    height: 44px;
    min-height: 44px;
    overflow: visible;
    padding: 0 12px;
    width: 100%;
  }

  .mobile-head .mobile-iyf-logo {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    line-height: 44px;
    min-width: 44px;
    overflow: visible;
  }

  .mobile-head .mobile-iyf-logo .head_logo,
  .mobile-head .mobile-iyf-logo .mac-logo {
    align-items: center;
    display: flex;
    height: 44px !important;
    justify-content: center;
    line-height: 44px;
    width: 44px !important;
  }

  .mobile-head .mobile-iyf-logo a.white_logo {
    align-items: center;
    display: flex;
    height: 44px !important;
    justify-content: center;
    line-height: 44px;
    width: 44px !important;
  }

  .mobile-head .mobile-iyf-logo a.black_logo {
    display: none !important;
  }

  .mobile-head .mobile-iyf-logo img,
  .mobile-head .mobile-iyf-logo .mac-logo-lottie {
    display: block;
    height: 34px !important;
    max-height: 34px !important;
    max-width: 40px !important;
    object-fit: contain;
    width: 40px !important;
  }

  .mobile-head .mobile-iyf-tabs {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    height: 44px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-head .mobile-iyf-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-head .mobile-iyf-tab {
    align-items: center;
    color: rgba(255, 255, 255, .72) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    line-height: 44px;
    padding: 0 9px;
    position: relative;
  }

  .mobile-head .mobile-iyf-tab.active {
    color: #fff !important;
    font-size: 19px;
    font-weight: 700;
  }

  .mobile-head .mobile-iyf-tab.active::after {
    background: linear-gradient(90deg, #00e0ff, #00b8ff);
    border-radius: 999px;
    bottom: 4px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 14px;
  }

  .mobile-head .mobile-iyf-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 14px;
    height: 44px;
  }

  .mobile-head .mobile-iyf-action {
    align-items: center;
    color: #fff !important;
    display: flex;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
  }

  .mobile-head .mobile-iyf-action-img {
    display: block;
    height: 24px !important;
    object-fit: contain;
    width: 24px !important;
  }

  .mobile-head .mobile-iyf-more {
    align-items: center;
    display: flex;
    float: none !important;
    height: 28px;
    position: relative;
    width: 28px;
  }

  .mobile-head .mobile-iyf-more summary {
    list-style: none;
  }

  .mobile-head .mobile-iyf-more summary::-webkit-details-marker {
    display: none;
  }

  .mobile-head .mobile-iyf-more .menu_ico {
    color: #fff;
    font-size: 23px;
    line-height: 1;
  }

  .mobile-head .mobile-iyf-dropdown {
    background: rgba(20, 20, 24, .98);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    box-sizing: border-box;
    display: none;
    min-width: 112px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 1200;
  }

  .mobile-head .mobile-iyf-more[open] .mobile-iyf-dropdown {
    display: block;
  }

  .mobile-head .mobile-iyf-dropdown::before {
    border-bottom: 6px solid rgba(20, 20, 24, .98);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    position: absolute;
    right: 8px;
    top: -6px;
  }

  .mobile-head .mobile-iyf-drop-link {
    align-items: center;
    border-radius: 7px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .92) !important;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .mobile-head .mobile-iyf-drop-link:active {
    background: rgba(255, 255, 255, .1);
  }

  body.home-index-body .container.home-unified {
    padding-top: 0 !important;
  }
}
/* END mobile iyf-style top navigation */