/* kissaisantv Clone v3.0 — main.css — PageSpeed optimized */

/* ── BASE (critical above-fold rules are inlined in header.php) ────────── */
body{line-height:1.2em}
a{color:#ececff;text-decoration:none!important}
a:hover{color:#fff}
.clearfix::after{content:"";display:table;clear:both}
.d-none{display:none!important}
.d-flex{display:flex}
.float-right{float:right}
.float-left{float:left}
.mr-1{margin-right:4px!important}.mr-2{margin-right:8px!important}.mr-3{margin-right:12px!important}.mr-4{margin-right:16px!important}
.ml-2{margin-left:8px!important}.ml-3{margin-left:12px!important}
.mb-0{margin-bottom:0!important}.mb-2{margin-bottom:8px!important}.mb-3{margin-bottom:16px!important}
.mt-3{margin-top:16px!important}
.border-bottom-block{border-bottom:1px solid #2a2a2a;margin-bottom:20px}
.align-items-center{align-items:center}
.flex-wrap{flex-wrap:wrap}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.5;text-align:center;cursor:pointer;border:1px solid transparent;border-radius:4px}
.btn-sm{padding:4px 8px;font-size:12px}
.btn-focus,.btn-primary{background:#9b1a29!important;color:#fff!important;border-color:#9b1a29!important}
.btn-focus:hover,.btn-primary:hover{background:#b31e30!important;color:#fff!important}
.btn-secondary{background:#555;border-color:#555;color:#eee}
.btn-warning{background:#f5c518!important;color:#000!important;border-color:#f5c518!important;font-weight:700}
.btn-light{background:#ddd!important;color:#111!important;border-color:#ddd!important}
.btn-trailer{background:#fff;color:#111;border-color:#ddd}
.btn-quality{background:#9b1a29!important;color:#fff!important;border-color:#9b1a29!important;font-size:12px!important;padding:3px 10px!important;font-weight:700}
.btn-radius{border-radius:30px!important}

/* ── UTILITIES ──────────────────────────────────────────────── */
.dot{width:4px;height:4px;border-radius:50%;background:#666;display:inline-block;margin:0 8px;vertical-align:middle}
.text-primary{color:#9b1a29!important}

/* ── LAYOUT ─────────────────────────────────────────────────── */
#wrapper{padding:0 30px}
#main-wrapper{padding-top:20px;min-height:calc(100vh - 60px)}

/* ── HEADER ─────────────────────────────────────────────────── */
#header{height:60px;background:#282828;position:fixed;z-index:102;top:0;left:0;right:0;padding:0 20px}
#header .container{position:relative}
#header #logo{display:block;height:40px;margin:10px 0 10px 55px;float:left;line-height:40px;font-size:1.4em;font-weight:700;color:#fff;white-space:nowrap}
#header #logo img{height:40px;width:auto;float:left;margin-right:8px}
#mobile_menu{height:60px;color:#fff;cursor:pointer;position:absolute;top:0;left:10px;width:40px;text-align:center;z-index:4;line-height:60px;font-size:22px;background:none;border:none}
#header_right{position:absolute;top:10px;right:15px}

/* ── SEARCH ─────────────────────────────────────────────────── */
#search{width:550px;position:absolute;left:50%;transform:translateX(-50%);top:12px}
#search .search-input{height:36px;color:#fff;font-size:14px;background:#121212;border:1px solid #333;padding-right:48px;padding-left:12px;width:100%;outline:none;border-radius:0}
#search .search-input:focus{border-color:#555;background:#1a1a1a}
#search .search-submit{width:46px;height:36px;background:#393939;color:#ccc;position:absolute;right:0;top:0;border:none;cursor:pointer;font-size:14px;border-radius:0}
#search .search-submit:hover{color:#fff;background:#444}
.search-result-pop{background:#2a2a2a;position:absolute;right:0;left:0;top:38px;z-index:200;border:1px solid #444;max-height:400px;overflow-y:auto;display:none}
.search-result-pop.active{display:block}
.search-result-pop .srp-item{display:flex;gap:10px;padding:8px 10px;border-bottom:1px solid #333;cursor:pointer;align-items:center}
.search-result-pop .srp-item:hover{background:#333}
.search-result-pop .srp-item img{width:36px;height:54px;object-fit:cover;flex-shrink:0}
.search-result-pop .srp-title{font-weight:600;font-size:13px;color:#fff}
.search-result-pop .srp-meta{color:#888;font-size:11px;margin-top:2px}
.search-result-pop .srp-see-all{padding:8px;text-align:center;color:#9b1a29;font-weight:600;cursor:pointer}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
/* Base sidebar styles (transitions handled by .tz-ready in critical CSS) */
#sidebar_menu_bg.active{display:block}
#sidebar_menu{scrollbar-width:thin;scrollbar-color:#333 transparent}
#sidebar_menu::-webkit-scrollbar{width:4px}
#sidebar_menu::-webkit-scrollbar-thumb{background:#333}
#sidebar_menu ul{list-style:none;padding:0;margin:0}
#sidebar_menu ul li a,#sidebar_menu ul li button{display:flex;align-items:center;gap:10px;padding:10px 15px;color:#ccc;font-size:14px;transition:color .2s}
#sidebar_menu ul li a:hover{color:#fff;background:#222}

/* ── SECTIONS ────────────────────────────────────────────────── */
.block_area{margin-bottom:30px}
.block_area-header{padding:0 0 12px;overflow:hidden}
.block_area-header.block_area-header-tabs{margin-bottom:15px}
.bah-heading{float:left}
.cat-heading{font-size:20px;font-weight:700;color:#fff;margin:0;padding-left:12px;border-left:4px solid #9b1a29;line-height:1.2}
.viewmore .btn{color:#9b1a29;border:1px solid #9b1a29;padding:5px 14px;font-size:13px;border-radius:3px;background:transparent}
.viewmore .btn:hover{background:#9b1a29;color:#fff}

/* ── TABS ────────────────────────────────────────────────────── */
.tab-pills{float:right;display:flex;gap:5px}
.pill-btn{padding:4px 14px;font-size:12px;font-weight:600;border:1px solid #444;background:transparent;color:#aaa;border-radius:3px;cursor:pointer;transition:all .2s}
.pill-btn.active,.pill-btn:hover{background:#9b1a29;border-color:#9b1a29;color:#fff}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── FILM GRID ───────────────────────────────────────────────── */
.film_list-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}

/* ── FILM CARD ───────────────────────────────────────────────── */
.flw-item{position:relative;min-width:0;overflow:hidden}
.film-poster{width:100%;padding-bottom:148%;position:relative;overflow:hidden;background:#2a2a2a;border-radius:3px}
.film-poster .film-poster-img{position:absolute;width:100%;height:100%;object-fit:cover;top:0;left:0;border-radius:3px;transition:transform .3s}
.flw-item:hover .film-poster-img{transform:scale(1.04)}
.film-poster-ahref{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);transition:background .3s;border-radius:3px}
.flw-item:hover .film-poster-ahref{background:rgba(0,0,0,.35)}
.film-poster-ahref .fas{font-size:36px;color:#fff;opacity:0;transform:scale(.8);transition:all .3s;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.flw-item:hover .film-poster-ahref .fas{opacity:1;transform:scale(1)}
.film-detail{padding:8px 2px 2px}
.film-name{margin:0 0 4px;font-size:13px;font-weight:600;line-height:1.3}
.film-name a{color:#ececff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-name a:hover{color:#fff}
.film-infor{font-size:12px;color:#888;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.fi-ql{display:inline-block;padding:1px 6px;font-size:10px;font-weight:700;line-height:16px;background:#9b1a29;color:#fff;border-radius:2px;margin-right:4px;text-transform:uppercase;letter-spacing:.5px}

/* ── WELCOME TEXT ────────────────────────────────────────────── */
.text-home-main{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:20px;margin-bottom:30px;font-size:13px;color:#888;line-height:1.7}
.text-home-main .thm-icon{font-size:28px;color:#9b1a29;margin-bottom:10px}
.text-home-main p{margin:0}

/* ══════════════════════════════════════════════════
   SINGLE / DETAIL PAGE  (exact kissaisantv clone)
══════════════════════════════════════════════════ */
.detail_page{margin-bottom:40px}
.detail_page .container{padding:0 20px}

/* Backdrop cover */
.detail_page-watch .dp-w-cover{position:relative;width:100%;padding-bottom:34%;background-size:cover;background-position:50% 25%;background-color:#111;overflow:hidden}
.detail_page-watch .dp-w-cover .dp-w-cover-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(18,18,18,.55)}
.detail_page-watch .dp-w-cover:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(0deg,#1f1f1f 0%,rgba(31,31,31,.74) 34%,rgba(31,31,31,0) 100%)}

/* Play button */
.dp-w-c-play{background:#fff;color:#111;width:90px;height:90px;border-radius:50%;text-align:center;position:absolute;top:50%;left:50%;margin-top:-45px;margin-left:-45px;display:inline-block;z-index:5;cursor:pointer;box-shadow:0 4px 30px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}
.dp-w-c-play:hover{transform:scale(1.08);box-shadow:0 6px 40px rgba(0,0,0,.7)}
.dp-w-c-play i,.dp-w-c-play .play-icon{line-height:90px;font-size:30px;position:relative;z-index:1;margin-left:4px;display:block}

/* Player area */
.watching_player-area{width:100%;background:#06060c;position:relative;z-index:2;padding-bottom:56.25%}
.watching_player-area iframe,.watching_player-area #playit{position:absolute;top:0;left:0;bottom:0;right:0;width:100%!important;height:100%!important;border:none;z-index:5}
.watching_player-control{background:#000;padding:10px 15px;color:#ccc;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px}
.watching_player-control .btn{background:0 0;border:none;color:#eee;font-size:13px;padding:4px 10px}
.watching_player-control .btn.active{background:rgba(255,255,255,.15)!important;color:#fff!important}
#turn-off-light::after{content:"Turn off light"}
#turn-off-light.active::after{content:"Turn on light"}

/* Server/episode list */
.detail_page-servers{margin-bottom:20px;padding:15px;background:rgba(255,255,255,.04);border-radius:4px}
.detail_page-servers h6{color:#aaa;margin:0 0 10px;font-size:13px;font-weight:600}
.detail_page-servers .dp-s-line{margin-bottom:15px}
.detail_page-servers .dp-s-line .nav{display:flex;flex-wrap:wrap;gap:8px}
.list-srv,.server{border-radius:2px;background:#333;font-size:13px;color:#ccc;border:1px solid #444;padding:6px 16px;cursor:pointer;transition:all .2s;white-space:nowrap}
.list-srv:hover,.server:hover,.list-srv.active,.server.active{background:#9b1a29;border-color:#9b1a29;color:#fff}
.episode{border-radius:2px;background:#2a2a2a;font-size:11px;color:#ccc;border:1px solid #3a3a3a;padding:3px 8px;cursor:pointer;transition:all .2s;display:block;width:100%;text-align:left}
.episode:hover,.episode.active{background:#9b1a29;border-color:#9b1a29;color:#fff}
.list-srv-wrap{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333 transparent}

/* Detail info section */
.detail_page-infor{font-size:15px;position:relative;line-height:1.5em;margin:25px 0 20px}
.dp-i-content{position:relative}
.dp-i-c-poster{width:180px;position:absolute;top:0;left:0}
.dp-i-c-poster img,.dp-i-c-poster .film-poster img{width:100%;display:block;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.dp-i-c-poster .film-poster{padding-bottom:0;height:auto;background:transparent}
.dp-i-c-right{padding-left:210px;padding-right:20px}
.dp-i-c-stick{margin-bottom:15px;overflow:hidden}
.heading-name{font-size:30px;line-height:1.3em;margin:0 0 12px;font-weight:500;color:#fff}
.dp-i-stats{margin-bottom:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.dp-i-stats .item{display:inline-flex}
.description{margin-bottom:15px;line-height:1.6em;color:#bbb;font-size:14px}
.elements{margin-bottom:20px}
.elements .row-line{margin-bottom:7px;font-size:14px;color:#bbb;line-height:1.5}
.elements .row-line .type{color:#888}
.elements .row-line .type strong{color:#aaa;font-weight:600}
.elements .row-line a{color:#9b1a29}
.elements .row-line a:hover{color:#e04050;text-decoration:underline!important}

/* Tags */
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.btn-dtag{background:#333!important;color:#bbb!important;border-color:#444!important;font-size:12px!important;border-radius:3px!important;padding:4px 10px!important}
.btn-dtag:hover{background:#9b1a29!important;border-color:#9b1a29!important;color:#fff!important}

/* Season tabs */
.season-tabs-wrap{background:rgba(255,255,255,.04);padding:15px;border-radius:4px;margin-bottom:20px}
.season-tabs-wrap .d-flex{display:flex;gap:8px;flex-wrap:wrap}

/* Related section */
.film_related.file_realted-list{background:#191919;padding:30px 0;margin-top:10px}

/* Dark overlay */
#mask-overlay{position:fixed;top:0;left:0;bottom:0;right:0;z-index:103;background:rgba(0,0,0,.97);display:none}
#mask-overlay.active{display:block}

/* ── EXPLORE / FILTER ────────────────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;background:#181818;padding:15px;border-radius:4px;border:1px solid #2a2a2a}
.filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter-group label{color:#888;font-size:12px;white-space:nowrap;margin:0}
.filter-btn{padding:4px 12px;font-size:12px;background:#222;border:1px solid #333;color:#aaa;border-radius:3px;cursor:pointer;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:#9b1a29;border-color:#9b1a29;color:#fff}
.filter-select{background:#222;border:1px solid #333;color:#aaa;padding:5px 10px;font-size:12px;border-radius:3px;cursor:pointer}
.filter-divider{width:1px;background:#2a2a2a;align-self:stretch;margin:0 5px}

/* ── SEARCH PAGE ─────────────────────────────────────────────── */
.search-page .search-header{padding:20px 0 15px;border-bottom:1px solid #2a2a2a;margin-bottom:20px}
.search-page .search-header h2{font-size:18px;font-weight:600;color:#fff;margin:0}
.search-no-results{text-align:center;padding:60px 20px;color:#666}
.search-no-results i{font-size:48px;margin-bottom:15px;display:block;color:#333}

/* ── 404 ─────────────────────────────────────────────────────── */
.blank_page{padding:60px 20px}
.container-404{max-width:500px;margin:0 auto;text-align:center}
.c4-big{font-size:120px;font-weight:900;color:#9b1a29;line-height:1}
.c4-medium{font-size:22px;font-weight:600;color:#fff;margin:15px 0 10px}
.c4-small{font-size:15px;color:#888;margin-bottom:25px}

/* ── PAGINATION ──────────────────────────────────────────────── */
.tz-pagination{margin:30px 0;display:flex;justify-content:center}
.tz-pagination ul{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.tz-pagination ul li a,.tz-pagination ul li span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;background:#222;border:1px solid #333;color:#aaa;border-radius:3px;font-size:13px}
.tz-pagination ul li a:hover{background:#9b1a29;border-color:#9b1a29;color:#fff}
.tz-pagination ul li.current span{background:#9b1a29;border-color:#9b1a29;color:#fff}

/* ── NO RESULTS ──────────────────────────────────────────────── */
.no-results{text-align:center;padding:60px 20px;color:#666}
.no-results i{font-size:48px;display:block;margin-bottom:15px;color:#333}

/* ── FOOTER ──────────────────────────────────────────────────── */
#footer{background:#282828;padding:20px 30px;font-size:13px;color:#888;margin-top:20px}
.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-links{display:flex;gap:15px;flex-wrap:wrap}
.footer-links a{color:#888}
.footer-links a:hover{color:#fff}
.footer-copyright a{color:#9b1a29}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Mobile first
══════════════════════════════════════════════════ */
/* Desktop: ensure overlay never shows when sidebar toggles */
@media(min-width:992px){
  #sidebar_menu_bg{display:none!important}
}
@media(max-width:991px){
  body{padding-left:0;padding-top:60px}
  #sidebar_menu{left:-240px}
  #sidebar_menu.active{left:0}
  #sidebar_menu_bg{display:none}
  #sidebar_menu_bg.active{display:block}
  #search{width:calc(100% - 200px);left:100px;transform:none}
  #wrapper{padding:0 15px}
  .film_list-wrap{grid-template-columns:repeat(4,1fr);gap:12px}
  .dp-i-c-right{padding-left:0}
  .dp-i-c-poster{position:static;width:120px;float:left;margin:0 15px 10px 0}
  .detail_page-watch .dp-w-cover{padding-bottom:45%}
  .elements .row{flex-direction:column}
  .col-xl-7,.col-xl-5,.col-lg-7,.col-lg-5,.col-md-8,.col-md-4{width:100%!important;max-width:100%!important;flex:none!important}
}
@media(max-width:767px){
  body{padding:0;padding-top:60px}
  #search{width:calc(100% - 160px);left:55px;transform:none}
  #header #logo span{display:none}
  .film_list-wrap{grid-template-columns:repeat(3,1fr);gap:10px}
  #wrapper{padding:0 12px}
  .cat-heading{font-size:16px}
  .filter-bar{flex-direction:column;gap:6px}
  .heading-name{font-size:22px}
  .detail_page-watch .dp-w-cover{padding-bottom:55%}
  .dp-i-c-poster{width:80px}
  .detail_page .container{padding:0 10px}
  .dp-i-c-right{padding-left:0}
  #footer{padding:15px}
}
@media(max-width:480px){
  .film_list-wrap{grid-template-columns:repeat(3,1fr);gap:8px}
  #search{width:calc(100% - 130px);left:50px}
  .footer-content{flex-direction:column;text-align:center}
  .dp-w-c-play{width:60px!important;height:60px!important;margin-top:-30px!important;margin-left:-30px!important}
  .dp-w-c-play i,.dp-w-c-play .play-icon{line-height:60px!important;font-size:20px!important}
  .cat-heading{font-size:14px}
  .film-name{font-size:12px}
}

/* ── IMAGE LAZY LOAD ─────────────────────────────────────────── */
/* Base opacity set in critical CSS to prevent CLS; transition here for smooth reveal */
.lazyload,.lazyloading{opacity:0}
.lazyloaded{opacity:1;transition:opacity .35s ease}

/* ── PERF: no outline on click for non-keyboard users ────────── */
:focus:not(:focus-visible){outline:none}