/*
Theme Name: RJ Tube
Description: Lightweight video and series theme. No jQuery, no player library, no external requests. Built for speed on mobile connections.
Version: 1.1.0
Author: RJ Tube
Text Domain: rjtube
*/

/* Colours come from the admin panel, injected as inline variables.
   The values here are fallbacks only. */
:root{
--vx-primary:#ff9900;
--vx-bg:#0a0a0a;
--vx-card:#141414;
--vx-border:#232323;
--vx-text:#ffffff;
--vx-muted:#8a8a8a;
--vx-radius:8px;
--vx-max:1400px;
--vx-gap:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--vx-bg);
color:var(--vx-text);
font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--vx-primary);outline-offset:2px}

.vx-wrap{max-width:var(--vx-max);margin:0 auto;padding:0 12px}

/* ---------- header ---------- */
.vx-header{background:var(--vx-card);border-bottom:1px solid var(--vx-border)}
.vx-header-top{display:flex;align-items:center;gap:16px;padding:12px 0}
.vx-logo{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.vx-logo span{color:var(--vx-primary)}
.vx-search{flex:1;display:flex;max-width:520px;margin-left:auto}
.vx-search input{
flex:1;min-width:0;padding:9px 14px;border:1px solid var(--vx-border);
border-right:0;border-radius:var(--vx-radius) 0 0 var(--vx-radius);
background:var(--vx-bg);color:var(--vx-text);font-size:14px;
}
.vx-search button{
padding:9px 18px;border:0;border-radius:0 var(--vx-radius) var(--vx-radius) 0;
background:var(--vx-primary);color:#000;font-weight:700;font-size:14px;
}
.vx-nav{border-top:1px solid var(--vx-border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.vx-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;white-space:nowrap}
.vx-nav a{display:block;padding:11px 14px;font-size:14px;color:var(--vx-muted);font-weight:500}
.vx-nav a:hover,.vx-nav .current-menu-item a{color:var(--vx-text)}

/* ---------- grid + cards ---------- */
.vx-section-title{
font-size:18px;margin:24px 0 14px;padding-left:12px;
border-left:3px solid var(--vx-primary);line-height:1.2;
}
.vx-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:var(--vx-gap);margin-bottom:28px;
}
.vx-card{background:var(--vx-card);border:1px solid var(--vx-border);border-radius:var(--vx-radius);overflow:hidden}
.vx-thumb{position:relative;aspect-ratio:16/9;background:#000}
.vx-thumb img{width:100%;height:100%;object-fit:cover}
.vx-badge{
position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:3px;
background:rgba(0,0,0,.82);font-size:11px;font-weight:700;letter-spacing:.02em;
}
.vx-ep-badge{
position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:3px;
background:var(--vx-primary);color:#000;font-size:11px;font-weight:800;
}
.vx-card-body{padding:9px 11px 11px}
.vx-card-title{
font-size:14px;font-weight:600;line-height:1.35;margin:0 0 6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vx-card-meta{display:flex;gap:12px;font-size:12px;color:var(--vx-muted)}

/* ---------- single video ---------- */
.vx-single{display:grid;grid-template-columns:1fr 340px;gap:22px;padding-top:16px}
.vx-col-main{min-width:0}
.vx-title{font-size:21px;font-weight:700;line-height:1.25;margin:18px 0 10px}
.vx-meta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:var(--vx-muted);margin-bottom:16px}
.vx-platform{color:var(--vx-primary);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.vx-actions{display:flex;gap:10px;margin-bottom:22px}
.vx-btn{
flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 18px;border:1px solid var(--vx-border);border-radius:100px;
background:var(--vx-card);font-size:14px;font-weight:600;transition:background .15s;
}
.vx-btn:hover{background:var(--vx-border)}
.vx-btn.is-liked{background:var(--vx-primary);color:#000;border-color:var(--vx-primary)}
.vx-taglist{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.vx-tag{
padding:6px 11px;border:1px solid var(--vx-border);border-radius:100px;
background:var(--vx-card);font-size:12.5px;color:var(--vx-muted);
}
.vx-tag:hover{color:var(--vx-text);border-color:var(--vx-primary)}

/* ---------- episode list ---------- */
.vx-episodes{background:var(--vx-card);border:1px solid var(--vx-border);border-radius:var(--vx-radius);padding:15px}
.vx-episodes-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.vx-episodes-head strong{font-size:16px}
.vx-count{background:var(--vx-primary);color:#000;padding:1px 9px;border-radius:100px;font-size:12px;font-weight:800}
.vx-episodes-list{max-height:500px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--vx-primary) transparent}
.vx-episodes-list::-webkit-scrollbar{width:5px}
.vx-episodes-list::-webkit-scrollbar-thumb{background:var(--vx-primary);border-radius:10px}
.vx-ep{
display:flex;gap:11px;padding:8px;margin-bottom:8px;
border:1px solid transparent;border-radius:6px;background:rgba(255,255,255,.03);
}
.vx-ep:hover{border-color:var(--vx-border)}
.vx-ep.is-current{border-color:var(--vx-primary)}
.vx-ep-thumb{position:relative;width:112px;flex-shrink:0;aspect-ratio:16/9;border-radius:4px;overflow:hidden}
.vx-ep-thumb img{width:100%;height:100%;object-fit:cover}
.vx-ep-now{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.55);color:var(--vx-primary);font-size:10px;font-weight:800;letter-spacing:.06em;
}
.vx-ep h3{font-size:13px;font-weight:600;margin:0 0 3px;line-height:1.3}
.vx-ep time{font-size:11.5px;color:var(--vx-muted)}

/* ---------- ads ---------- */
.vx-ad{margin:0 auto 18px;text-align:center;line-height:0}
.vx-ad:empty{display:none}
.vx-ad img{margin:0 auto}

/* ---------- pagination ---------- */
.vx-pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0 34px}
.vx-pagination .page-numbers{
padding:8px 14px;border-radius:var(--vx-radius);background:var(--vx-card);
border:1px solid var(--vx-border);font-size:14px;font-weight:600;
}
.vx-pagination .current{background:var(--vx-primary);color:#000;border-color:var(--vx-primary)}

/* ---------- footer ---------- */
.vx-footer{
background:var(--vx-card);border-top:1px solid var(--vx-border);
margin-top:34px;padding:22px 0;font-size:13px;color:var(--vx-muted);text-align:center;
}
.vx-footer a{color:var(--vx-muted)}
.vx-footer a:hover{color:var(--vx-text)}
.vx-crumbs{padding:14px 0;font-size:12.5px;color:var(--vx-muted)}
.vx-crumbs a:hover{color:var(--vx-primary)}

/* ---------- empty state ---------- */
.vx-empty{padding:60px 20px;text-align:center;color:var(--vx-muted)}
.vx-empty h2{color:var(--vx-text);font-size:20px;margin:0 0 8px}

/* ---------- responsive ---------- */
@media(max-width:1100px){
.vx-single{grid-template-columns:1fr}
.vx-sidebar{order:2}
}
@media(max-width:640px){
.vx-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.vx-card-title{font-size:13px}
.vx-header-top{flex-wrap:wrap;gap:10px}
.vx-search{max-width:none;width:100%;margin-left:0}
.vx-title{font-size:17px}
.vx-actions{flex-wrap:wrap}
}

@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.screen-reader-text{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}