html, body, *{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

background:#0f0f0f;

color:#fff;

font-family:Arial;

}



a{

text-decoration:none;

color:#fff;

}



/* NAVBAR */

.navbar{

display:flex;

align-items:center;

background:#111;

padding:12px;

position:sticky;

top:0;

z-index:1000;

}



.menu-btn{

font-size:22px;

cursor:pointer;

margin-right:12px;

}



.logo img{

height:40px;

}



.search{

flex:1;

display:flex;

margin:0 10px;

}



.search input{

flex:1;

padding:10px;

background:#222;

border:none;

color:#fff;

}



.search button{

background:#ff2b2b;

border:none;

padding:10px;

color:#fff;

cursor:pointer;

}



.right{

display:flex;

gap:10px;

}



.btn{

background:linear-gradient(135deg,#ff4d4d,#ff9900);

padding:8px 14px;

border-radius:20px;

font-size:13px;

}



/* SIDEBAR */

.sidebar{

position:fixed;

left:-240px;

top:0;

width:240px;

height:100%;

background:#0b0b0b;

padding:20px;

transition:0.3s;

z-index:2000;

}



.sidebar.active{

left:0;

}



.sidebar a{

display:block;

padding:10px;

color:#ccc;

}



.sidebar a:hover{

background:#222;

}



/* MAIN */

.main{

padding:20px;

}



/* CATEGORY BAR */

.categories{

display:flex;

gap:10px;

overflow-x:auto;

margin-bottom:15px;

}



.cat{

background:#222;

padding:6px 14px;

border-radius:20px;

font-size:13px;

}


.hero{
position:relative;
height:55vh;
background:black;
margin-bottom:20px;
overflow:hidden;
}

.heroVid{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:none;
}

.heroText{
position:absolute;
bottom:30px;
left:30px;
font-size:24px;
font-weight:bold;
z-index:5;
}

.sound-btn{
position:absolute;
bottom:20px;
right:20px;
background:rgba(0,0,0,0.6);
padding:10px 12px;
border-radius:50%;
cursor:pointer;
z-index:6;
}


/* ===== SECTION WRAPPER ===== */
.section{
margin:30px 0;
padding:0 20px;
}

/* ===== ROW TITLE ===== */
.section h2{
margin-bottom:12px;
font-size:18px;
}

/* ===== HORIZONTAL ROW (FIXED) ===== */
.row-scroll {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}



/* ===== VIDEO CARD ===== */
.video-card{
flex:0 0 auto; /* prevents stretching */
width:220px;

background:#171717;
border-radius:10px;
overflow:hidden;

transition:0.3s;
cursor:pointer;
}

/* ===== HOVER ===== */
.video-card:hover{
transform:scale(1.05);
}

.video-card video {
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
}

/* ===== THUMB ===== */
.thumb-wrap{
width:100%;
height:130px;
overflow:hidden;
background:#000;
}

.thumb{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* ===== TEXT ===== */
.video-info{
padding:10px;
}

.video-title{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
white-space:normal; /*  prevents text overflow breaking layout */
}

.video-meta{
font-size:12px;
color:#aaa;
}

/* ===== GRID SECTION (DISCOVER) ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:16px;
padding:0 20px;
}

/* ===== FIX LINK BEHAVIOR ===== */
.video-card a{
display:block;
height:100%;
}


/* PROFILE */

.profile{

position:relative;

}



.dropdown{

display:none;

position:absolute;

right:0;

background:#111;

padding:10px;

border-radius:8px;

}



.profile:hover .dropdown{

display:block;

}

.searchBox{
position:relative;
width:100%;
}

#searchResults{
position:absolute;
top:40px;
width:100%;
background:#111;
display:none;
z-index:999;
}

.searchItem{
padding:10px;
border-bottom:1px solid #222;
cursor:pointer;
}

.searchItem:hover{
background:#222;
}

.videoLink{
cursor:pointer;
display:block;
}

.videoLink:hover{
transform:scale(1.05);
}

/* ===== SHORTS (VERTICAL STYLE) ===== */
.row-scroll .video-card{
width:140px;
height:240px;
border-radius:12px;
overflow:hidden;
position:relative;
}

/* FORCE VERTICAL IMAGE */
.row-scroll .thumb-wrap{
height:100%;
}

.row-scroll .thumb{
width:100%;
height:100%;
object-fit:cover;
}

/* TEXT ON VIDEO */
.row-scroll .video-info{
position:absolute;
bottom:0;
left:0;
right:0;
padding:8px;
background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.row-scroll .video-title{
font-size:12px;
font-weight:bold;
}

.row-scroll .video-meta{
font-size:11px;
color:#ccc;
}

.video-card video{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.video-card:hover video{
display:block;
}

.video-card:hover img{
display:none;
}

.video-card::after{
content:"▶";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:24px;
background:rgba(0,0,0,0.6);
padding:10px;
border-radius:50%;
opacity:0;
transition:0.3s;
}

.video-card:hover::after{
opacity:1;
}

/* FULLSCREEN BODY */
.shorts-body{
margin:0;
background:black;
overflow:hidden;
}

/* CONTAINER */
.shorts-container{
height:100vh;
width:100%;
overflow-y:scroll;
scroll-snap-type:y mandatory;
}

/* EACH VIDEO */
.short-slide{
height:100vh;
width:100%;
position:relative;
scroll-snap-align:start;
display:flex;
justify-content:center;
align-items:center;
background:black;
}

/* VIDEO FULLSCREEN */
.short-slide video{
height:100%;
width:100%;
object-fit:cover;
}

/* TEXT OVERLAY */
.short-overlay{
position:absolute;
bottom:20px;
left:20px;
color:white;
z-index:10;
}

.short-overlay h3{
margin:0;
font-size:18px;
}

.short-overlay p{
font-size:13px;
color:#ccc;
}

.searchBox{
position:relative;
width:100%;
}

#searchResults{
position:absolute;
top:45px;
left:0;
right:0;
background:#111;
border:1px solid #222;
border-radius:10px;
overflow:hidden;
display:none;
z-index:9999;
}

.searchItem{
display:flex;
align-items:center;
padding:10px;
border-bottom:1px solid #222;
cursor:pointer;
}

.searchItem:hover{
background:#222;
}