body{
margin:0;
background:#070f1f;
color:#fff;
font-family:Segoe UI;
}

/* Sidebar */

.sidebar{
position:fixed;
top:0;
left:0;
width:70px;
height:100%;
background:#0b162e;
padding-top:15px;
z-index:1000;
}

.sidebar a{
display:flex;
justify-content:center;
align-items:center;
height:55px;
text-decoration:none;
color:white;
}

/* Header */

header{
position:fixed;
top:0;
left:70px;
right:0;
height:60px;
background:#0b162e;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
z-index:999;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo img{
height:48px;
}

.header-center input{
width:500px;      /* Increase width */
padding:10px 20px;
border-radius:25px;
border:none;
background:#0f1b35;
color:white;
}

/* Categories */

.categories{
margin-left:px;
margin-top:36px;
padding:20px;
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.categories button{
background:#0f1b35;
border:0;
color:white;
margin-top:5px;
padding:5px 20px;
border-radius:15px;
cursor:pointer;
transition:.3s;
}

.categories button:hover{
background:#16264d;
}

.categories .active{
background:#4f7cff;
}

/* Container */

.container{
margin-left:70px;
padding:20px;
}

/* Grid */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/* Tablet */
@media(max-width:1200px){
.grid{
grid-template-columns:repeat(2,1fr);
}
}

/* Mobile */
@media(max-width:700px){
.grid{
grid-template-columns:1fr;
}
}

/* Card */



.card img{
width:100%;
height:200px;
object-fit:cover;
}

.card:hover{
transform:translateY(-5px);
}

.card-body{
	padding:10px 5px;
text-align:center;

    margin-left:12px;
margin-top: 0px;
    margin-bottom: 0px;

display:flex;
justify-content:center;
min-height:20px;

}


.card-body p{
padding:8px 8px;
display:none;
}



.header-right{
display:flex;
align-items:center;
gap:15px;
}

.header-right span{
font-size:18px;
cursor:pointer;
}

.profile{
display:flex;
align-items:center;
gap:8px;
}

.card img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
border-radius:12px 12px 0 0;
}




body{
margin:0;
background:#070f1f;
color:#fff;
font-family:Segoe UI, sans-serif;
}

/* Container */

.container{
margin-top:25px;
margin-left:70px;
padding:15px 25px;
}

/* Grid */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* Card */

.card{
background:#0f1b35;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:white;
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
}

/* 16:9 Thumbnail */

.thumb{
position:relative;
width:100%;
padding-top:56.25%;
overflow:hidden;
border-radius:12px;

border:0px solid #ffffff;
}

.thumb img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

/* Title */



.card-body h3{
font-size:16px;
font-weight:600;
margin:0;
}

/* Responsive */

@media(max-width:1200px){
.grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:700px){
.grid{
grid-template-columns:1fr;
}
}



.card:hover{
transform:translateY(-5px);
box-shadow:0 0 12px #ffd700,
           0 0 25px rgba(255,215,0,0.4);
}

.sidebar a{
transition:0.3s;
}

.sidebar a:hover{
transform:scale(1.1);
filter: drop-shadow(0 0 6px #ffd700);
}

.sidebar a{
transition:0.25s ease;
}

.sidebar a:hover{
transform:scale(1.75);
filter: drop-shadow(0 0 6px #ffd700);
}

.categories button:hover{
box-shadow:0 0 5px rgba(255,215,0,0.6);
}

.header-right span{
transition:0.25s ease;
}

.header-right span:hover{
transform:scale(1.75);
filter: drop-shadow(0 0 6px #ffd700)
        drop-shadow(0 0 12px rgba(255,215,0,0.5));
}

.card-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 15px;
min-height:15px;   /* Important for alignment */
}

.card-footer h3{
margin:0;
font-size:12px;
font-weight:600;
}

.views{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
color:#cfd8ff;
white-space:nowrap;
}



.sidebar-top{
display:flex;
justify-content:center;
align-items:center;
padding:1px 0 20px 0;
}

.sidebar-logo{
margin-top:5px;
margin-left:10px;
width:55px;
height:55px;
object-fit:contain;
}


.player video{
width:100%;
border-radius:10px;
}

/* Description */

.description{
margin-top:15px;
background:#102046;
border-radius:8px;
}

.description{
background:#0f1b35;
border-radius:12px;
margin-top:15px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.05);
}

.desc-title{
padding:14px;
cursor:pointer;
text-align:center;
background:#162447;
font-weight:600;
letter-spacing:1px;
}

.desc-body{
display:none;
padding:18px;
color:#cbd5ff;
line-height:1.6;
background:#0f1b35;
}

/* Related Videos */

.related{
display:flex;
gap:10px;
text-decoration:none;
color:white;
}

.related img{
width:150px;
height:90px;
object-fit:cover;
border-radius:6px;
}

.related h4{
font-name:"arial"
margin:0;
font-size:15px;
}

.related p{
margin:0;
font-size:13px;
color:#aaa;
}




.video-title{
margin:15px 0 10px 0;
font-size:22px;
font-weight:600;
color:white;
}

.video-title{
margin:15px 0;
}

.title-row{
display:flex;
justify-content:space-between;
align-items:center;
}

.title-row h2{
margin:0;
font-size:22px;
}

.video-views{
font-size:14px;
color:#aaa;
}



.video-thumb{
width:100%;
border-radius:10px;
position:absolute;
top:0;
left:0;
opacity:1;
transition:opacity .6s ease;
cursor:pointer;
z-index:2;
}

.video-wrapper video{
width:100%;
border-radius:10px;
opacity:0;
transition:opacity .6s ease;
display:block;
}

.video-thumb{
width:100%;
border-radius:10px;
position:absolute;
top:0;
left:0;
cursor:pointer;
}




.video-thumb{
width:100%;
border-radius:10px;
position:absolute;
top:0;
left:0;
opacity:1;
transition:opacity .6s ease;
z-index:2;
}

.video-wrapper video{
width:100%;
border-radius:10px;
opacity:0;
transition:opacity .6s ease;
display:block;
}

.video-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.5);
background:rgba(0,0,0,0.5);
color:white;
font-size:40px;
width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:all .3s ease;
pointer-events:none;
}

.video-overlay.show{
opacity:1;
transform:translate(-50%,-50%) scale(1.2);
}

.share-box{
position:relative;
margin-top:10px;
}

.share-btn{
background:#1c2a4d;
border:none;
padding:8px 14px;
border-radius:6px;
color:white;
cursor:pointer;
}

.share-menu{
display:none;
position:absolute;
background:#0f1b35;
padding:10px;
border-radius:8px;
margin-top:8px;
box-shadow:0 0 10px rgba(0,0,0,.4);
z-index:100;
}

.share-menu a{
display:block;
padding:8px 12px;
color:white;
text-decoration:none;
cursor:pointer;
}

.share-menu a:hover{
background:#1c2a4d;
}

.share{
margin-top:10px;
}

.share a{
margin-right:10px;
background:#222;
padding:5px 10px;
text-decoration:none;
color:white;
border-radius:4px;
}

.share a:hover{
background:#444;
}

.video-actions{
margin-top:10px;
}

#likeBtn{
background:#0f1b35;
color:white;
border:none;
padding:8px 16px;
border-radius:6px;
cursor:pointer;
}

#likeBtn:hover{
background:#1c2a4d;
}

.video-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
}

.actions button{
margin-left:8px;
padding:6px 14px;
border:none;
background:#162447;
color:white;
border-radius:6px;
cursor:pointer;
}

#likeBtn.active{
background:#ffcc00;
color:black;
}




.video-wrapper video,
.video-wrapper .plyr{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}







/* ============================= */
/* WATCH PAGE LAYOUT FIX */
/* ============================= */

.watch-page{
display:flex;
gap:20px;
margin-left:70px;
padding:20px;
align-items:flex-start;
margin-top:65px;   /* adds top spacing for both */
}

/* Left Video */

.watch-left{
flex:0 0 65%;
min-width:0;
}

/* Right Recommended */

.watch-right{
display:flex;
flex-direction:column;
gap:5px;
width:100%;
max-width:420px;
margin-right:20px;

flex:0 0 35%;
padding-right:20px;


}


/* Video Player */

.video-wrapper{
width:100%;
aspect-ratio:16/9;
background:#000;
border-radius:10px;
overflow:hidden;


 border:2px solid #ffffff; 
/*
.rec-thumb{
padding:1px;
background:linear-gradient(
45deg,
#ffd700,
#ffffff,
#ffd700,
#ffffff
);
background-size:300% 300%;
animation:borderMove 1s linear infinite;
border-radius:2px;*/
}

@keyframes borderMove{
0%{background-position:0% 50%;}
100%{background-position:100% 50%;}
}


.video-wrapper video{
width:100%;
height:100%;
object-fit:cover;
}



.recommended-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,215,0,0.25);
}





/* Recommended Cards */



/* Compact Thumbnail */

.related .thumb{
position:relative;
width:100%;
aspect-ratio:16:9;
overflow:hidden;
border-radius:14px;
}

.related .thumb img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}
/* Title */

.recommended-card .card-footer{
padding:8px 10px;
}





/* Recommended Video Card */



/* 16:9 Thumbnail */





/* Title */

.recommended-card h4{
padding:12px 14px;
font-size:16px;
color:#fff;
}

/* Recommended Card Layout */
.recommended-card{
display:flex;
gap:10px;
align-items:top;
padding:8px 10px;   /* reduce padding */
margin:0px;            /* remove margin */
background:#0f1b35;
padding:14px;
border-radius:16px;
margin-bottom:14px;
text-decoration:none;
color:#fff;
align-items:flex-start;   /* fix */

transition:.3s;

   
}

/* Strict 16:9 */

.recommended-card .thumb{

overflow:hidden;
border-radius:12px;
width:100%;
height:100%;
object-fit:cover;
flex-shrink:0;
position:relative;
aspect-ratio:16:9;      /* keep 16:9 */





}

.recommended-card .thumb img{
width:100%;
height:100%;
object-fit:cover;
}

/* Title */



.rec-info h4{
margin:0;
font-size:15px;
line-height:1.2;
}

/* Hover */

.recommended-card:hover{
transform:translateY(-2px);
box-shadow:0 0 20px rgba(255,255,0,.2);
}

.actions button,
.share-btn{
transition:all .25s ease;
}

.actions button:hover,
.share-btn:hover{
box-shadow:0 0 14px rgba(255,215,0,.7);
transform:translateY(-2px) scale(1.03);
}


/* Thumbnail View, Video Time, Uploaded since */
.duration{
position:absolute;
bottom:6px;
right:6px;
background:rgba(0,0,0,.8);
color:white;
font-size:12px;
padding:2px 6px;
border-radius:4px;
}

.meta{
font-size:13px;
color:#9aa6c0;
margin-top:5px;
}

.duration{
position:absolute;
bottom:6px;
right:6px;
background:rgba(0,0,0,.8);
color:white;
font-size:12px;
padding:2px 6px;
border-radius:4px;
}

.meta{
font-size:13px;
color:#9aa6c0;
margin-top:6px;
}
/* ============================= */
/* Recommended Videos Final Fix */
/* ============================= */
/* ============================= */
/* Recommended Videos Final Fix */
/* ============================= */
/* Card */

.rec-card{
display:flex;
gap:12px;
margin-bottom:12px;
color:white;
text-decoration:none;
align-items:stretch;
transition:.25s ease;
border-radius:12px;
padding:6px;
width:100%;
margin-right:20px;   /* stretch till end */


}

/* Thumbnail */

.rec-thumb{
width:180px;
aspect-ratio:16/9;
flex-shrink:0;
position:relative;
border-radius:8px;
overflow:hidden;
border:1px solid #fff;
}

.rec-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

/* Right Side */

.rec-meta{
flex:1;
display:flex;
flex-direction:column;
justify-content:space-between;   /* IMPORTANT */
}

/* Title */

.rec-meta h4{
font-size:18px;
line-height:1.3;
margin:0;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* Bottom Info */

.rec-info{
font-size:13px;
color:#9aa6c0;
}

.rec-card:hover{
background:#0f1b35;
box-shadow:0 0 15px rgba(255,215,0,.15);
}

.rec-duration{
opacity:.85;
transition:.2s;
}

.rec-card:hover .rec-duration{
opacity:1;
}



.rec-card{
display:flex;
gap:12px;
margin-bottom:12px;
width:100%;
}

.categories{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
padding:15px 0;
flex-wrap:wrap;
}

.categories a{
padding:8px 18px;
border-radius:20px;
background:#0c1b3a;
color:#fff;
text-decoration:none;
font-size:14px;
transition:.2s;
}

.categories a:hover{
background:#13264d;
}

.categories a.active{
background:#ffd700;
color:#000;
font-weight:bold;
}