/*==============================
    OTT Movie Cards
==============================*/

body{
    background:#0c111b;
}

/*==============================
    Desktop Card
==============================*/

.movie-card{
    background:#161d29;
    border-radius:16px;
    overflow:hidden;
    height:100%;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.35s;
}

.movie-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.4);
}

.poster-box{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
}

.movie-poster{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.movie-card:hover .movie-poster{
    transform:scale(1.08);
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15) 55%,
        rgba(0,0,0,0));
}

.ott-logo{
    position:absolute;
    top:10px;
    right:10px;
    background:#E50914;
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:6px 10px;
    border-radius:20px;
    z-index:2;
}

.movie-details{
    padding:15px;
}

.movie-details h5{
    color:#fff;
    font-size:17px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:10px;

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

    min-height:48px;
}

/*==============================
    Meta
==============================*/

.meta{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    color:#c2c7d0;
    margin-bottom:8px;
}

.meta div{
    display:flex;
    align-items:center;
    gap:5px;
}

.meta i{
    color:#ffc107;
}

/*==============================
    Genre
==============================*/

.genre{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    color:#8b97aa;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    margin-bottom:14px;
}

.genre i{
    color:#ffc107;
}

/*==============================
    Desktop Watch Button
==============================*/

.watch-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    width:100%;

    background:#E50914;
    color:#fff;
    text-decoration:none;

    padding:10px;

    border-radius:8px;

    font-size:14px;
    font-weight:600;

    transition:.3s;
}

.watch-btn:hover{
    background:#c40812;
    color:#fff;
}

/*==============================
    Mobile Card
==============================*/

.mobile-movie-card{
    background:#161d29;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    margin-bottom:15px;
}

.mobile-body{
    display:flex;
}

.mobile-thumb{
    width:150px;
    height:125px;
    flex-shrink:0;
}

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

.mobile-content{
    flex:1;
    padding:10px;
    display:flex;
    flex-direction:column;
}

.mobile-title{
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:8px;

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

.mobile-meta{
    display:flex;
    flex-direction:column;
    gap:4px;

    font-size:12px;
    color:#c2c7d0;

    margin-bottom:6px;
}

.mobile-meta i{
    color:#ffc107;
    width:15px;
}

.mobile-genre{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:12px;
    color:#8b97aa;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mobile-genre i{
    color:#ffc107;
}

/*==============================
    Mobile Footer
==============================*/

.mobile-footer{
    display:flex;
    width:100%;
    border-top:1px solid rgba(255,255,255,.08);
}

.mobile-platform{
    width:35%;
    background:#242c3b;
    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:12px;
    font-weight:600;

    padding:11px;
}

.mobile-watch-btn{
    width:65%;
    background:#E50914;
    color:#fff;
    text-decoration:none;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;

    font-size:13px;
    font-weight:600;

    padding:11px;

    transition:.3s;
}

.mobile-watch-btn:hover{
    background:#c40812;
    color:#fff;
}

/*==============================
    Responsive
==============================*/

@media(max-width:767px){

.row.g-4{
    --bs-gutter-y:1rem;
}

}