@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

/* ================== Global ================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Roboto',sans-serif;
}

body{
display:flex;
flex-direction:column;
min-height:100vh;
background:linear-gradient(135deg, #682828, #b25656, #380f0f);
}

/* ================== Navbar ================== */
nav{
background:rgba(0,0,0,0.7);
backdrop-filter: blur(10px);
color:#fff;
position:sticky;
top:0;
z-index:1000;
}

.navbar{
display:flex;
align-items:center;
justify-content: space-between;
width:100%;
padding:18px 40px;
gap:20px;
}

/* Logo fix */
.logo{
    display: flex;
    font-size: 32px;
    font-weight: 600;
    color: #d05757;
    align-items: center;
    gap: 15px;
flex-shrink:0;
}
.logo img {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 0 6px #e50914);
    border-radius: 25px;
}

/* ================== Watchlist ================== */
.watchlist-link{
    color:rgb(97, 9, 24);
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
    white-space:nowrap;
    margin-right:auto;
    width: 220px;

    padding:12px 20px;
    border-radius:30px;
    background:#985b5b;
    display:flex;
    align-items:center;
    gap:8px;

    transition:0.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
    position:relative;
    overflow:hidden;
}

/* Hover effect */
.watchlist-link:hover{
    background:#b20710;
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* Shine animation */
.watchlist-link::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);
    transition:0.5s;
}

.watchlist-link:hover::before{
    left:100%;
}

/* ================== Search ================== */
.search-container{
background:#c02121;
border-radius:50px;
padding: 6px;
width: 1000px;
margin: 0 auto;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.5); 
}
.search-form{
    display: flex;
    align-items: center;
}
.search-container input{
flex: 1;
padding:14px 20px;
border:none;
outline:none;
border-radius: 50px;
font-size:26px;
background: #3d3939;
color: rgb(98, 86, 86);
}

.search-container button{
width: 55px;
height: 55px;
border: none;
border-radius: 50%;
background: #cd8083;
color: white;
font-size: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.search-container button:hover{
background:#b20710;
}

.search-container input:focus{
background:#f9f9f9;
}

/* ================== Industry Menu ================== */
.industry-menu{
text-align:center;
padding:10px;
background:#fc8080;
}

.industry-menu button{
margin:20px;
padding:12px 20px;
font-size:26px;
border:none;
border-radius:25px;
font-weight:bold;
cursor:pointer;
background:#d0bcb881;
transition:0.3s;
}

.industry-menu button:hover{
transform:translateY(-2px);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
}

/* ================== Genre Menu ================== */
#genre-menu{
text-align:center;
padding:10px;
background:#e8dddd;
}

#genre-menu button{
margin:10px;
padding:10px 18px;
font-size:24px;
border:none;
border-radius:28px;
cursor:pointer;
background:#232f3e;
color:white;
}

#genre-menu button:hover{
background:#ff7f50;
}

/* ================== Main ================== */
main{
flex:1;
width:100%;
padding:20px;
}

/* ================== Movies Grid ================== */
#movies{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
padding:20px;
width:100%;
}

/* ================== Movie Card ================== */
.movie-card{
background:white;
border-radius:10px;
text-align:center;
padding:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.3s;
cursor:pointer;
position:relative;
}

.movie-card:hover{
transform:scale(1.05);
box-shadow:0 15px 25px rgba(0,0,0,0.3);
z-index:1;
}

.movie-card img{
width:100%;
height:380px;
object-fit:cover;
border-radius:8px;
transition: 0.3s;
}

.movie-card h3{
font-size:20px;
margin:10px 0;
}

.movie-card p{
color:gray;
}

/* ❤️ watchlist button on card */
.watchlist-btn{
position:absolute;
top:10px;
right:10px;
font-size:22px;
cursor:pointer;
z-index:10;
}

/* ================== Movie Details ================== */
.movie-details{
width:100%;
max-width:1200px;
margin:20px auto;
background:rgb(229, 191, 191);
padding:40px;
border-radius:10px;
text-align:center;
box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.poster-container img{
display:block;
width:450px;
max-width:100%;
margin:0 auto;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.movie-details p{
font-size:20px;
margin:5px 0;
}

/* ================== Cast ================== */
.cast-container{
display:flex;
overflow-x:auto;
gap:15px;
padding:10px 0;
}

.actor-card{
flex:0 0 auto;
text-align:center;
width:120px;
}

.actor-card img{
width:100px;
height:140px;
border-radius:8px;
object-fit:cover;
}

/* ================== Provider ================== */
.provider-container{
display:flex;
gap:15px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:20px;
}

.provider-card img{
width:60px;
border-radius:10px;
}

/* ================== Trailer ================== */
.trailer-container{
margin:20px auto;
width:100%;
max-width:800px;
aspect-ratio:16/9;
}

.trailer-container iframe{
width:100%;
height:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

/* ================== Button ================== */
.watch-trailer-btn{
padding:12px 20px;
background:red;
color:white;
border:none;
border-radius:6px;
font-size:18px;
cursor:pointer;
}

.watch-trailer-btn:hover{
background:#cc0000;
}

/* ================== Error ================== */
.error-message{
background:#1e1e1e;
color:#ff6f61;
text-align:center;
padding:50px;
border-radius:15px;
margin:50px auto;
width:500px;
max-width:400px;
box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

/* ================== Search Message ================== */
.search-message{
width:420px;
max-width:90%;
margin:120px auto;
padding:40px 30px;
background:linear-gradient(135deg,#1e1e1e,#2c2c2c);
color:#d29825;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.5);
position:relative;
overflow:hidden;
animation:fadeIn 0.8s ease;
}

.search-message h2{
color:#d416b2;
font-size:28px;
margin-bottom:10px;
}

.search-message p{
opacity:0.85;
font-size:18px;
}

/* ================== Similar ================== */
.similar-movies{
display:flex;
gap:15px;
overflow-x:auto;
padding:10px 0;
}

.similar-card{
flex:0 0 auto;
width:160px;
text-align:center;
cursor:pointer;
}

.similar-card img{
width:100%;
border-radius:8px;
}

/* ================== Load More ================== */
#loadMore{
margin:40px;
color:#cc0000;
height:60px;
width:150px;
border-radius:20px;
font-size:20px;
cursor:pointer;
}

/* ================== Loader ================== */
/* .loader{
text-align:center;
font-size:32px;
margin-top:20px;
color:#ff9800;
font-weight:bold;
} */
 .loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.spinner {
  border: 4px solid #333;
  border-top: 4px solid #e50914;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ================== Footer ================== */
footer{
text-align:center;
background: rgba(0,0,0,0.3);
color:rgb(203, 28, 28);
padding:20px;
margin-top:auto;
}

/* ================== Animation ================== */
@keyframes fadeIn{
0%{opacity:0;transform:translateY(20px);}
100%{opacity:1;transform:translateY(0);}
}

.remove-btn{
    position:absolute;
    top:10px;
    left:10px;
    background:red;
    color:white;
    padding:6px 10px;
    border-radius:50%;
    cursor:pointer;
    font-size:14px;
    z-index:999;
}

.remove-btn:hover{
    background:#cc0000;
    transform:scale(1.1);
}
.movie-link{
    display:block;
    text-decoration:none;
    color:inherit;
}
/* ================== Responsive ================== */
@media (max-width:768px){

.navbar{
flex-direction:column;
align-items:center;
justify-content: space-between;
}

.watchlist-link{
margin-left:0;
}

.search-container{
width:95%;
margin:10px auto;
}

.search-form input{
font-size:16px;
padding:10px 14px;
}

.search-form button{
    width: 45px;
    height: 45px;
font-size:16px;
}

#movies{
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:15px;
}

.movie-card img{
height:220px;
}

}