/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
body { background-color: #0f0f0f; color: #ffffff; overflow-x: hidden; }

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================= */
header { background-color: #1a1a1a; padding: 15px 4%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #222; }

.logo { font-size: 24px; font-weight: 900; color: #e50914; text-transform: uppercase; cursor: pointer; }
.logo span { color: #e50914; }

nav ul { display: flex; list-style: none; background: #111; padding: 6px; border-radius: 50px; border: 1px solid #222; gap: 5px; }
nav ul li a { color: #888; text-decoration: none; padding: 6px 14px; border-radius: 40px; font-size: 13px; transition: 0.3s; }
nav ul li a.active { color: #ffffff; background: rgba(229, 9, 20, 0.2); border: 1px solid rgba(229, 9, 20, 0.4); }

#form { display: flex; align-items: center; gap: 5px; }
.search { background: transparent; border: 1px solid #333; border-radius: 20px; padding: 6px 15px; color: #fff; width: 160px; }
#search-btn { padding: 6px 15px; background: #e50914; color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: bold; }

/* ==========================================================================
   3. HERO BANNER
   ========================================================================= */
.hero { height: 200px; background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=1200&q=80'); background-size: cover; }

/* ==========================================================================
   4. MOVIE GRID & SPINNER
   ========================================================================= */
main { padding: 30px 4%; }
.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }

.spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.1); border-top: 5px solid #e50914; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; display: none; }
.show-spinner { display: block !important; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.movie-card { background-color: #161616; border-radius: 6px; overflow: hidden; border: 1px solid #222; display: flex; flex-direction: column; transition: 0.3s; }
.movie-card:hover { transform: scale(1.03); border-color: #e50914; }

.movie-card img { width: 100%; height: 240px; object-fit: cover; }
.movie-info { padding: 10px 10px 5px; display: flex; justify-content: space-between; align-items: center; }
.movie-info h3 { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating { background-color: #222; padding: 2px 6px; border-radius: 3px; color: #ffd700; font-size: 10px; font-weight: bold; }

.card-footer { padding: 0 10px 10px; display: flex; gap: 6px; margin-top: auto; }
.play-btn { background-color: #e50914; color: #ffffff; border: none; padding: 6px; border-radius: 3px; cursor: pointer; font-size: 11px; flex: 2; font-weight: bold; }
.trailer-btn { background-color: #333; color: #ffffff; border: none; padding: 6px; border-radius: 3px; cursor: pointer; font-size: 11px; flex: 1; font-weight: bold; transition: 0.3s; }
.trailer-btn:hover { background-color: #555; }

/* ==========================================================================
   5. PAGINATION (Centered)
   ========================================================================= */
.pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 40px; width: 100%; }
.pagination button { padding: 10px 25px; background: #222; color: white; border: 1px solid #444; border-radius: 5px; cursor: pointer; font-weight: bold; }
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination button:hover:not(:disabled) { background: #e50914; }

/* ==========================================================================
   6. MODAL & RESPONSIVE
   ========================================================================= */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); }
.modal-content { position: relative; margin: 5% auto; width: 90%; max-width: 800px; background: #000; }
.close-btn { position: absolute; right: 10px; top: 0; color: #fff; font-size: 30px; cursor: pointer; }
.server-container { display: flex; gap: 5px; padding: 10px; background: #111; }
.server-btn { background: #222; color: #aaa; border: 1px solid #333; padding: 6px 12px; cursor: pointer; font-size: 12px; }
.server-btn.active-server { background: #e50914; color: #fff; }
.iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.iframe-container iframe { position: absolute; width: 100%; height: 100%; }

@media (max-width: 600px) {
    /* Header layout adjust */
    header { flex-direction: column; gap: 15px; padding: 15px; }

    /* Search bar ko chhota karein mobile ke liye */
    .search { width: 140px; }

    /* Category list ko horizontal scrollable banayein */
    nav { 
        width: 100%; 
        overflow-x: auto; 
        white-space: nowrap; 
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch; 
    }
    
    nav ul { 
        display: flex; 
        flex-direction: row; 
        justify-content: flex-start; 
        gap: 8px;
        background: transparent; 
        border: none;
    }

    nav ul li a { 
        padding: 5px 12px; 
        font-size: 11px; 
    }

    /* Movie grid ko 2 columns mein fix karein */
    .movie-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 10px !important; }
    .movie-card img { height: 180px !important; }
}

.player-controls{
    display:flex;
    justify-content:center;
    gap:10px;
    padding:10px;
    background:#111;
}

.player-controls button{
    background:#e50914;
    color:#fff;
    border:none;
    padding:8px 15px;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
}

.modal-content{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 0 30px rgba(229,9,20,.4);
}


.hero{
    height:350px;
    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.85)),
    url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1600&q=80');
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:'';
    position:absolute;
    width:200%;
    height:200%;
    background:radial-gradient(circle, rgba(229,9,20,.15) 0%, transparent 60%);
    animation:rotateGlow 15s linear infinite;
}

.hero-content{position:relative;z-index:2;animation:fadeUp 1.5s ease;}
.hero-content h1{font-size:55px;font-weight:900;color:#fff;text-shadow:0 0 25px rgba(229,9,20,.8);}
.hero-content p{font-size:22px;color:#ddd;margin:15px 0 25px;}

.watch-btn{
display:inline-block;
background:#e50914;
color:#fff;
text-decoration:none;
padding:12px 30px;
border-radius:30px;
font-weight:bold;
transition:.3s;
}

.watch-btn:hover{
transform:scale(1.08);
box-shadow:0 0 20px rgba(229,9,20,.8);
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(60px);}
to{opacity:1;transform:translateY(0);}
}

@keyframes rotateGlow{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@media (max-width: 600px) {

    .hero{
        height: 180px !important;
    }

    .hero-content h1{
        font-size: 28px !important;
    }

    .hero-content p{
        font-size: 14px !important;
        margin: 10px 0 15px !important;
    }

    .watch-btn{
        padding: 8px 18px !important;
        font-size: 13px !important;
    }
}.sports-title{
    text-align:center;
    font-size:32px;
    font-weight:900;
    color:#fff;
    text-shadow:
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 40px #00ff88;
}.sports-title{
    text-align:center;
    font-size:32px;
    font-weight:900;
    color:#fff;
    text-shadow:0 0 10px #00ff88, 0 0 20px #00ff88;
}

.sports-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:20px;
    margin-top:20px;
}

.sports-card{
    background:#161616;
    border:1px solid #333;
    padding:30px;
    text-align:center;
    border-radius:10px;
    transition:0.3s;
}

.sports-card:hover{
    transform:scale(1.05);
    border-color:#e50914;
}

.sports-card h2{
    margin-bottom:10px;
    color:#fff;
}

.sports-card p{
    color:#aaa;
}.sports-title{
    text-align:center;
    font-size:34px;
    font-weight:900;
    color:#fff;
    text-shadow:0 0 10px #00ff88,0 0 25px #00ff88;
    margin-bottom:20px;
}

.sports-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:20px;
    margin-top:20px;
}

.sports-card{
    background:#161616;
    border:1px solid #333;
    border-radius:12px;
    overflow:hidden;
    transition:0.3s;
    padding-bottom:10px;
}

.sports-card:hover{
    transform:scale(1.03);
    border-color:#e50914;
}

.sports-card h2{
    text-align:center;
    padding:10px;
    color:#fff;
    background:#111;
}

.sports-card iframe{
    width:100%;
    height:350px;
}

.sports-card.coming{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:350px;
    color:#aaa;
    font-size:18px;
}.sports-card button{
    background:#e50914;
    color:#fff;
    border:none;
    padding:10px 15px;
    border-radius:6px;
    cursor:pointer;
    margin-top:10px;
    font-weight:bold;
}

.sports-card button:hover{
    background:#ff1e2d;
}.sports-glow{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    padding:20px;
}

.sports-card-glow{
    background:#111;
    border:1px solid #333;
    border-radius:12px;
    padding:20px;
    text-align:center;
    box-shadow:0 0 15px rgba(229,9,20,0.3);
    transition:0.3s;
}

.sports-card-glow:hover{
    transform:scale(1.05);
    box-shadow:0 0 25px rgba(229,9,20,0.8);
}

.sports-card-glow h2{
    margin-bottom:10px;
    color:#fff;
}

.sports-card-glow button{
    background:#e50914;
    color:#fff;
    border:none;
    padding:10px 15px;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
    box-shadow:0 0 10px rgba(229,9,20,0.5);
}

.sports-card-glow button:hover{
    box-shadow:0 0 20px rgba(229,9,20,1);
}