@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

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

body{
font-family:'Poppins',sans-serif;
background:linear-gradient(180deg,#050507,#0b0b15,#050507);
color:white;
min-height:100vh;
}

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
padding:15px;
backdrop-filter:blur(14px);
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

.logo{
font-size:22px;
font-weight:800;
letter-spacing:2px;
background:linear-gradient(45deg,#ff2a2a,#ff7a18,#ffd500);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.search-wrapper{
position:absolute;
right:20px;
}

.search-icon{
font-size:22px;
cursor:pointer;
}

/* MOVIE GRID */

.movies{
margin-top:85px;
padding:18px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:16px;
}

.movie-card{
position:relative;
border-radius:14px;
overflow:hidden;
text-decoration:none;
color:white;
transition:.35s;
}

.movie-card img{
width:100%;
height:210px;
object-fit:cover;
border-radius:14px;
transition:.4s;
}

.movie-card:hover img{
transform:scale(1.12);
filter:brightness(.6);
}

.overlay{
position:absolute;
bottom:0;
width:100%;
padding:10px;
background:linear-gradient(transparent,rgba(0,0,0,.95));
}

.overlay h3{
font-size:14px;
}

/* SEARCH POPUP */

.search-popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
justify-content:center;
align-items:flex-start;
padding-top:100px;
z-index:2000;
}

.search-container{
width:90%;
max-width:450px;
background:#0e0e18;
border-radius:16px;
padding:16px;
}

.search-container input{
width:100%;
padding:13px;
border:none;
border-radius:10px;
background:#1b1b2a;
color:white;
}

#results{
margin-top:12px;
max-height:320px;
overflow-y:auto;
}

.search-item{
display:flex;
align-items:center;
gap:10px;
padding:8px;
border-radius:10px;
text-decoration:none;
color:white;
}

.search-item:hover{background:#1f1f2e}

.search-item img{
width:40px;
height:55px;
border-radius:6px;
object-fit:cover;
}

/* ===== MOVIE PAGE NEW FIXED LAYOUT ===== */

.movie-page{
margin-top:90px;
padding:18px;
max-width:850px;
margin-left:auto;
margin-right:auto;
}

.movie-banner{
display:flex;
justify-content:center;
}

.movie-banner img{
width:90%;
max-width:380px;
border-radius:16px;
box-shadow:0 10px 40px rgba(0,0,0,.8);
}

.movie-title{
font-size:26px;
text-align:center;
margin-top:15px;
font-weight:700;
}

.movie-desc{
text-align:center;
font-size:16px;
color:#cfcfd8;
margin:12px 0 22px;
}

/* perfect 16:9 player */

.player-wrapper{
position:relative;
width:100%;
padding-top:56.25%;
margin-top:10px;
}

.player-wrapper video{
position:absolute;
inset:0;
width:100%;
height:100%;
border-radius:14px;
background:black;
}

/* download button always visible */

.download-btn{
display:block;
margin-top:20px;
padding:14px;
font-size:17px;
text-align:center;
border-radius:12px;
font-weight:600;
background:linear-gradient(45deg,#ff003c,#ff7a00);
}

/* MOBILE */

@media(max-width:600px){

.movie-card img{height:180px}

.movie-title{font-size:22px}

.movie-desc{font-size:15px}

}