/* ============ Detail Page - Warm Friendly Style ============ */
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:0 16px}
.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(--primary)}
.main_con_box{display:flex;gap:20px;align-items:flex-start}

/* Left Main */
.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-sm);
}
.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(--primary)}
.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:var(--bg-3);
    border:1px solid var(--border);
    flex:none;
    transition:all .2s;
}
.title_line .mark .db-fabulous:hover{color:var(--rose);border-color:var(--rose);background:#fef2f2}
.title_line .mark .db-collect:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-light)}
.title_line .mark .db-download:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-light)}
.title_line .mark .db-fabulous em,.title_line .mark .db-collect em{font-style:normal}

/* Player */
.movie-info{
    position:relative;
    background:#000;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    aspect-ratio:16/9;
    padding-bottom:56.25%;/* fallback for aspect-ratio */
}
.movie-info .video-js,
.movie-info video{
    position:absolute;top:0;left:0;width:100%;height:100%;
}
.video-js .vjs-big-play-button{
    background:var(--grad-primary)!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(13,148,136,.5);
}
.video-js .vjs-big-play-button:hover{background:var(--primary-dark)!important}
.video-js .vjs-play-progress{background:var(--primary)!important}
.video-js .vjs-volume-level{background:var(--primary)!important}
.video-js .vjs-slider{background:rgba(255,255,255,.2)!important}
.video-js .vjs-control-bar{background:rgba(0,0,0,.6)!important}

/* Route Select */
.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);
    border-radius:8px;
    color:var(--text);
    padding:9px 14px;
    font-size:13px;
    transition:border-color .2s;
}
.select select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,148,136,.1)}

/* Related Videos */
.you-like-maybe{
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 8px;
    box-shadow:var(--shadow-sm);
}
.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-primary)}
.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(--primary)}

/* Right Sidebar */
.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;
    box-shadow:var(--shadow-sm);
}
.hot-movie-box .title-wrap{margin-bottom:12px}
.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(--primary);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(--primary)}
.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}

/* ============ Mobile ============ */
@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}
}

/* VIP Modal */
.vip-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999}
.vip-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7)}
.vip-modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;padding:40px 32px;text-align:center;max-width:360px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.vip-modal-icon{font-size:48px;margin-bottom:12px}
.vip-modal-content h3{margin:0 0 12px;color:#1e293b;font-size:20px}
.vip-modal-content p{margin:0 0 8px;color:#64748b;font-size:14px}
.vip-modal-sub{color:#94a3b8!important;font-size:13px!important;margin-bottom:20px!important}
.vip-modal-btn{display:inline-block;background:var(--primary);color:#fff!important;padding:12px 36px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:500;transition:opacity 0.2s}
.vip-modal-btn:hover{opacity:0.85;color:#fff!important}
.vip-modal-close{display:block;margin-top:12px;color:#94a3b8;text-decoration:none;font-size:13px}
.vip-modal-close:hover{color:#64748b}