/* =====================================================================
   Frontend Modern Theme — dark / cinema
   Overlay loaded last. Restyles shared components (cards, badges,
   section headers, pagination, search, menu, movie detail).
   ===================================================================== */

:root{
    --fx-bg:        #0a0c10;
    --fx-surface:   #14171d;
    --fx-surface-2: #1b1f27;
    --fx-border:    #262b34;
    --fx-text:      #eef2f7;
    --fx-muted:     #8a95a5;
    --fx-primary:   #ff3d4d;   /* cinema red          */
    --fx-primary-d: #e02838;
    --fx-accent:    #ff9f1c;   /* warm orange         */
    --fx-gold:      #f5c518;   /* IMDb gold (rating)  */
    --fx-radius:    14px;
}

body{ background:var(--fx-bg); color:var(--fx-text); }

/* ===================== Section headers ===================== */
.movie-list{
    width:100%; height:auto;
    border:none !important;
    background:transparent;
    margin-bottom:6px;
}
.movie-list-head{
    background:transparent !important;
    padding:0 !important;
    margin:18px 0 6px;
}
.movie-list-head p{
    position:relative;
    display:inline-block;
    text-align:left !important;
    font-size:20px !important;
    font-weight:600;
    color:var(--fx-text) !important;
    padding:6px 0 6px 16px !important;
    margin:0;
}
.movie-list-head p::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:5px; height:24px; border-radius:6px;
    background:linear-gradient(var(--fx-primary),var(--fx-accent));
}

/* ===================== Movie card ===================== */
.movie-item.mx-card{
    position:relative;
    border:none !important;
    background:transparent;
    transition:transform .22s ease;
}
.movie-item.mx-card:hover{ transform:translateY(-4px); z-index:5; }

.mx-poster-link{ display:block; }

.mx-poster-wrap{
    position:relative;
    width:100%;
    aspect-ratio:2/3;
    border-radius:var(--fx-radius);
    overflow:hidden;
    background:var(--fx-surface-2);
    border:1px solid var(--fx-border);
    box-shadow:0 6px 18px rgba(0,0,0,.45);
    transition:box-shadow .22s ease, border-color .22s ease;
}
.movie-item.mx-card:hover .mx-poster-wrap{
    border-color:var(--fx-primary);
    box-shadow:0 14px 34px rgba(255,61,77,.30);
}
.mx-poster,
.movie-item .poster{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
    transition:transform .35s ease;
}
.movie-item.mx-card:hover .mx-poster{ transform:scale(1.08); }

/* hover overlay + play */
.mx-overlay{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));
    opacity:0; transition:opacity .22s ease;
}
.movie-item.mx-card:hover .mx-overlay{ opacity:1; }
.mx-play{
    width:50px; height:50px; border-radius:50%;
    background:var(--fx-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; padding-left:3px;
    box-shadow:0 8px 20px rgba(255,61,77,.5);
    transform:scale(.7); transition:transform .25s ease;
}
.movie-item.mx-card:hover .mx-play{ transform:scale(1); }

/* ---- badges ---- */
/* resolution / onair (image badges) */
.mx-res, .movie-item .hd-movie{
    position:absolute; top:8px; left:8px;
    width:auto !important; height:20px !important;
    border-radius:4px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
    z-index:3;
}
.mx-onair, .movie-item .hd{
    position:absolute !important; top:8px; left:8px;
    width:auto !important; height:22px !important;
    border-radius:4px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
    z-index:3;
}

/* sound flag (image) */
.mx-sound{
    position:absolute; top:6px; right:6px;
    z-index:3; line-height:0;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.mx-sound img{ height:30px; width:auto; }

/* score (gold) */
.mx-score{
    position:absolute; left:8px; bottom:8px; z-index:3;
    display:inline-flex; align-items:center; gap:3px;
    background:rgba(8,10,14,.82);
    color:var(--fx-gold);
    font-size:12px; font-weight:700;
    padding:3px 8px; border-radius:20px;
    backdrop-filter:blur(2px);
}
.mx-score i{ color:var(--fx-gold); font-size:11px; }

/* year */
.mx-year{
    position:absolute; right:8px; bottom:8px; z-index:3;
    background:rgba(8,10,14,.82);
    color:#cdd5e0;
    font-size:11px; font-weight:600;
    padding:3px 8px; border-radius:20px;
    backdrop-filter:blur(2px);
}

/* episode pill */
.mx-ep{
    position:absolute; left:8px; bottom:34px; z-index:3;
    max-width:80%;
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d));
    color:#fff; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    box-shadow:0 4px 10px rgba(255,61,77,.4);
}
.mx-ep:empty{ display:none; }

/* favorite */
.movie-item .mx-fav,
.movie-item .favorite{
    position:absolute !important;
    top:6px; right:6px;
    width:30px !important; height:30px !important;
    line-height:30px !important;
    border-radius:50% !important;
    background:rgba(8,10,14,.7) !important;
    border:1px solid rgba(255,255,255,.12);
    color:#fff; font-size:13px; text-align:center;
    cursor:pointer; z-index:6;
    transition:all .18s ease;
    backdrop-filter:blur(2px);
}
.movie-item .mx-fav:hover,
.movie-item .favorite:hover{
    background:var(--fx-gold) !important;
    transform:scale(1.12);
}
.movie-item .mx-fav i,
.movie-item .favorite i{ color:#fff !important; transition:color .18s ease; }
.movie-item .mx-fav:hover i{ color:#1a1a1a !important; }
.movie-item .favorite.active,
.movie-item .favorite.collected{ background:var(--fx-gold) !important; }

/* title caption */
.mx-caption{
    margin-top:8px;
    font-size:13px; line-height:1.35;
    color:#c5ccd6; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .18s ease;
}
.movie-item.mx-card:hover .mx-caption{ color:#fff; }

/* ===================== Top icon menu ===================== */
.btn-outline-dark.menu-activate, a.btn-outline-dark, a.btn-dark.menu-activate{
    border-radius:14px !important;
    border:1px solid var(--fx-border) !important;
    background:var(--fx-surface) !important;
    transition:all .18s ease;
}
a.btn-outline-dark:hover, a.btn-dark.menu-activate{
    background:var(--fx-surface-2) !important;
    border-color:var(--fx-primary) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
    transform:translateY(-2px);
}
a.btn-dark.menu-activate{
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d)) !important;
    border-color:transparent !important;
    box-shadow:0 8px 22px rgba(255,61,77,.4);
}
.btn-outline-dark p, .btn-dark p{ font-size:13px; margin-top:4px !important; }

/* ===================== Search box ===================== */
#search.form-group .input-group .form-control,
#search input.form-control{
    background:var(--fx-surface) !important;
    border:1px solid var(--fx-border) !important;
    color:var(--fx-text) !important;
    border-radius:30px 0 0 30px !important;
    padding:12px 18px !important;
    height:auto !important;
}
#search input.form-control::placeholder{ color:var(--fx-muted); }
#search .input-group-append .btn{
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d)) !important;
    border:none !important; color:#fff !important;
    border-radius:0 30px 30px 0 !important;
    padding:0 22px !important;
}

/* ===================== Pagination ===================== */
.movie-pagination, #pagination{ display:flex; justify-content:center; margin:26px 0 10px; }
.pagination{ display:flex; flex-wrap:wrap; gap:6px; padding:0; justify-content:center; }
.pagination li{ list-style:none; margin:0; }
.pagination li a, .pagination li span,
.pagination a, .pagination span,
.pagination .page-link{
    display:flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 12px;
    border-radius:10px !important;
    background:var(--fx-surface) !important;
    border:1px solid var(--fx-border) !important;
    color:var(--fx-text) !important;
    text-decoration:none; font-size:14px; font-weight:500;
    transition:all .15s ease; float:none !important;
    margin:0 !important;
}
.pagination li a:hover, .pagination .page-link:hover{
    background:var(--fx-surface-2) !important;
    border-color:var(--fx-primary) !important;
    color:#fff !important;
}
.pagination li.active span, .pagination .active span, .pagination .active a,
.pagination .page-item.active .page-link{
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d)) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(255,61,77,.4);
}
.pagination li.disabled span, .pagination .disabled span,
.pagination .page-item.disabled .page-link{
    background:var(--fx-surface) !important;
    color:#4d5663 !important; opacity:.45;
}
.pagination .page-item{ list-style:none; }

/* ===================== Movie detail page ===================== */
.movie-page{
    background:var(--fx-surface);
    border:1px solid var(--fx-border);
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.movie-title{
    font-size:22px; font-weight:700; color:#fff;
    padding:6px 0 14px; margin-bottom:14px;
    border-bottom:1px solid var(--fx-border);
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.movie-title .menu-movie.btn-primary{
    background:var(--fx-surface-2) !important;
    border:1px solid var(--fx-border) !important;
    color:var(--fx-text) !important;
    border-radius:10px !important;
    font-size:14px; padding:6px 14px !important;
}
.movie-title .menu-movie.btn-primary:hover{ border-color:var(--fx-primary) !important; }
.player, .videoplayer{
    border-radius:14px; overflow:hidden;
    border:1px solid var(--fx-border);
    box-shadow:0 8px 24px rgba(0,0,0,.5);
    background:#000;
}

/* loading status */
#status_load{ text-align:center; }
.status_load{ color:var(--fx-muted); font-size:14px; padding:14px 0; }

/* sound toggle (พากย์ไทย / SoundTrack) */
.sound-select{
    background:var(--fx-surface-2);
    border:1px solid var(--fx-border);
    color:var(--fx-text);
    font-size:13px; font-weight:600;
    padding:8px 18px; margin:0 0 0 8px; border-radius:30px;
    cursor:pointer; transition:all .18s ease;
}
.sound-select:hover{ border-color:var(--fx-primary); }
.sound-select.sound-active{
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d));
    border-color:transparent; color:#fff;
    box-shadow:0 6px 16px rgba(255,61,77,.4);
}

/* "เลือกไฟล์" header bar */
.espisode .btn-dark.btn-block{
    background:var(--fx-surface-2) !important;
    border:1px solid var(--fx-border) !important;
    color:var(--fx-text) !important;
    border-radius:10px !important;
    font-weight:600; margin:14px 0 10px;
    text-align:left; padding:12px 16px !important;
}

/* episode cards */
.card.ep{
    position:relative;
    background:var(--fx-surface-2);
    border:1px solid var(--fx-border) !important;
    border-radius:12px !important;
    overflow:hidden; cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    margin-bottom:4px;
}
.card.ep:hover{
    transform:translateY(-3px);
    border-color:var(--fx-primary) !important;
    box-shadow:0 10px 24px rgba(255,61,77,.25);
}
.card.ep .card-img-top{
    width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:0;
}
.card.ep .card-body{ padding:8px 10px; }
.card.ep .card-text{
    margin:0; font-size:12.5px; font-weight:500; color:#cdd5e0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* เลขกำกับตอน (1,2,3,...) มุมซ้ายบน */
.card.ep .ep-num{
    position:absolute; top:6px; left:6px; z-index:4;
    min-width:22px; height:22px; padding:0 6px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d));
    color:#fff; font-size:12px; font-weight:700; line-height:1;
    border-radius:8px;
    box-shadow:0 3px 9px rgba(0,0,0,.55);
}

/* active episode (JS adds .btn-danger) */
.card.ep.btn-danger{
    border-color:var(--fx-primary) !important;
    box-shadow:0 0 0 2px rgba(255,61,77,.4), 0 10px 24px rgba(255,61,77,.3);
    background:rgba(255,61,77,.08);
}
.card.ep.btn-danger .card-text{ color:#fff; }
.card.ep.btn-danger .ep-num{ background:linear-gradient(135deg,#ffcf33,#f5a623); color:#1a1a1a; }

/* Mxplayer / source buttons */
.mx-button, .btn-dark.mx-button{
    background:linear-gradient(135deg,#0ba360,#3cba92) !important;
    border:none !important; color:#fff !important;
    border-radius:10px !important; font-weight:600;
}
.movie-page .btn-dark{
    border-radius:10px !important;
}

/* topup / vip-expired image link */
.movie-page img.img-fluid{ border-radius:10px; }

/* ===== ปุ่ม ✕ ปิด overlay (nonlinear ad) ===== */
.ov-x-close{
    position:absolute; top:-10px; right:-10px; z-index:2147483647;
    width:24px; height:24px; line-height:22px; text-align:center;
    background:rgba(0,0,0,.85); color:#fff; border-radius:50%;
    font-size:13px; font-weight:700; cursor:pointer;
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 2px 8px rgba(0,0,0,.6);
    -webkit-user-select:none; user-select:none;
}
.ov-x-close:hover{ background:#f0506e; }

/* ===== Overlay Ad (ในตัวเล่นวิดีโอ) — ขนาด 728x90 ===== */
.jw-overlay-ad{ position:absolute; z-index:2147483646; width:728px; max-width:94%; display:none; line-height:0; }
.jw-overlay-ad img{ width:100%; height:auto; display:block; border-radius:4px; box-shadow:0 4px 16px rgba(0,0,0,.6); }
.jw-overlay-ad .jwo-close{
    position:absolute; top:-9px; right:-9px; z-index:2;
    width:22px; height:22px; line-height:22px; text-align:center;
    background:rgba(0,0,0,.85); color:#fff; border-radius:50%;
    font-size:12px; cursor:pointer; border:1px solid rgba(255,255,255,.35);
}
.jw-overlay-ad .jwo-close:hover{ background:#f0506e; }
.jw-overlay-ad.ovpos-bottom-center{ bottom:16px; left:50%; transform:translateX(-50%); }
.jw-overlay-ad.ovpos-bottom-left{ bottom:16px; left:14px; }
.jw-overlay-ad.ovpos-bottom-right{ bottom:16px; right:14px; }
.jw-overlay-ad.ovpos-top-left{ top:14px; left:14px; }
.jw-overlay-ad.ovpos-top-right{ top:14px; right:14px; }
@media (max-width:600px){
    .jw-overlay-ad{ max-width:80%; }
    .jw-overlay-ad.ovpos-bottom-center,
    .jw-overlay-ad.ovpos-bottom-left,
    .jw-overlay-ad.ovpos-bottom-right{ bottom:10px; }
}

/* buttons used across detail (episode buttons / sources) */
.btn-primary{
    background:linear-gradient(135deg,var(--fx-primary),var(--fx-primary-d)) !important;
    border:none !important; color:#fff !important; border-radius:10px !important;
}

/* marquee */
marquee{ border-radius:10px; }

/* ===================== Responsive ===================== */
@media (max-width:768px){
    .movie-list-head p{ font-size:17px !important; }
    .mx-caption{ font-size:11.5px; }
    .mx-play{ width:42px; height:42px; font-size:15px; }
    .mx-sound img{ height:24px; }
    .movie-title{ font-size:18px; }
    .pagination li a, .pagination li span{ min-width:36px; height:36px; font-size:13px; }
}