/* ============ 详情页布局 ============ */
body.page_movie_details{background:var(--bg)}
.movie_details_main{padding:2px 0 30px}
.movie_details_main .container{max-width:1200px;margin:0 auto;padding:0px}
.bread-crumbs{color:var(--text-3);font-size:13px;padding:6px 0 18px}
.bread-crumbs a{color:var(--text-3);margin:0 6px}
.bread-crumbs a:hover{color:var(--gold-light)}
.main_con_box{display:flex;gap:20px;align-items:flex-start}

/* 左侧主区 */
.left-con{flex:1;min-width:0}
.movie-introduce{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px 20px 24px;
    margin-bottom:22px;
    box-shadow:var(--shadow);
}
.title_line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.subject{
    margin:0;font-size:20px;font-weight:700;color:var(--text);
    line-height:1.4;min-width:0;
}
.title_line .mark{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;flex:0 1 auto;min-width:0;margin:0}
.title_line .mark>span{color:var(--text-3);font-size:13px}
.title_line .mark>span:first-child{
    flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.title_line .mark a[title]{color:var(--text-2);font-size:13px}
.title_line .mark a[title]:hover{color:var(--gold-light)}
.title_line .mark .db-fabulous,.title_line .mark .db-collect,.title_line .mark .db-download{
    display:inline-flex;align-items:center;gap:5px;
    padding:7px 14px;border-radius:20px;
    font-size:13px;color:var(--text-2);
    background:none;
    border:none;
    flex:none;
    transition:all .2s;
}
.title_line .mark .db-fabulous:hover{color:var(--rose);border-color:var(--rose)}
.title_line .mark .db-collect:hover{color:var(--gold-light);border-color:var(--gold)}
.title_line .mark .db-download:hover{color:#fff;border-color:var(--gold)}
.title_line .mark .db-fabulous em,.title_line .mark .db-collect em{font-style:normal}

/* 播放器区 */
.movie-info{
    position:relative;
    background:#000;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    aspect-ratio:16/9;
}
.movie-info video{width:100%;height:100%;display:block}
.video-js{width:100%!important;height:100%!important}
.video-js .vjs-big-play-button{
    background:var(--grad-gold-btn)!important;
    border:none!important;
    border-radius:50%;
    width:76px;height:76px;line-height:76px;
    margin-top:-38px!important;margin-left:-38px!important;
    box-shadow:0 8px 30px rgba(201,163,92,.5);
}
.video-js .vjs-big-play-button:hover{background:var(--grad-gold)!important}
.video-js .vjs-play-progress{background:var(--gold)!important}
.video-js .vjs-volume-level{background:var(--gold)!important}
.video-js .vjs-slider{background:rgba(255,255,255,.2)!important}
.video-js .vjs-control-bar{background:rgba(0,0,0,.6)!important}

/* 线路选择 */
.select{width:100%;margin:18px auto 0;display:flex;align-items:center;gap:12px}
.select label{color:var(--text-2);font-size:13px}
.select select{
    flex:1;width:100%;
    background:var(--bg-3);
    border:1px solid var(--border-2);
    border-radius:8px;
    color:var(--text);
    padding:9px 14px;
    font-size:13px;
    transition:border-color .2s;
}
.select select:focus{border-color:var(--gold)}

/* 相关推荐 */
.you-like-maybe{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 8px;
}
.title-wrap{margin-bottom:16px}
.motif{font-size:16px;font-weight:700;color:var(--text);margin:0;padding-left:12px;position:relative}
.motif:before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--grad-gold)}
.movie-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.movie-item .movie-img{
    display:block;border-radius:10px;overflow:hidden;
    aspect-ratio:3/4;background:var(--bg-3);
    position:relative;
}
.movie-item .movie-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.movie-item:hover .movie-img img{transform:scale(1.07)}
.movie-item .info-wrap{margin-top:8px}
.movie-item .subject{
    font-size:13px;color:var(--text-2);font-weight:400;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.movie-item .subject:hover{color:var(--gold-light)}

/* 右侧栏 */
.right-bar{width:280px;flex:none}
.hot-movie-box{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 20px;
}
.hot-movie-box .title-wrap{margin-bottom:12px}
/* 右侧热门富列表（detail_right_hot） */
.hot-movie-box .movie-list{display:block}
.hot-movie-box .movie-list .movie-item{
    display:flex;gap:10px;align-items:center;
    padding:9px 0;border-bottom:1px dashed var(--border);
}
.hot-movie-box .movie-list .movie-item:last-child{border-bottom:none}
.left-movie-img{
    flex:none;width:64px;height:86px;border-radius:8px;overflow:hidden;
    background:var(--bg-3);display:block;
}
.left-movie-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.left-movie-img:hover img{transform:scale(1.08)}
.right-movie-txt{flex:1;min-width:0}
.right-movie-txt .num{font-style:normal;font-weight:700;color:var(--gold);margin-right:6px}
.right-movie-txt .line-one{margin:0}
.right-movie-txt h5.line-one{
    font-size:13px;font-weight:400;color:var(--text-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.right-movie-txt h5.line-one a:hover{color:var(--gold-light)}
.right-movie-txt p.line-one{margin-top:4px;font-size:12px;color:var(--text-3)}
.right-movie-txt label.mark{
    display:inline-block;margin-right:10px;font-size:12px;color:var(--text-3);
}
.right-movie-txt label.mark em{font-style:normal}

/* ============ 移动端 ============ */
@media (max-width:900px){
    .main_con_box{flex-direction:column}
    .right-bar{width:100%}
    .movie-list{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:600px){
    .movie_details_main .container{padding:0px}
    .movie-introduce{padding:10px 8px 10px;margin-bottom:10px}
    .movie-list{grid-template-columns:repeat(2,1fr);gap:10px}
    .subject{font-size:17px}
    .title_line{flex-direction:column;gap:12px}
    .title_line .mark{width:100%;gap:6px}
    .title_line .mark .db-fabulous,.title_line .mark .db-collect,.title_line .mark .db-download{padding:5px}
    .bread-crumbs{font-size:12px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
    .select{flex-wrap:wrap}
}