/* declaring global variables used */
:root{
    --background:hsla(220,17%,7%,1);
    --banner-background: hsla(250,6%,20%,1);
    --white-alpha-20: hsla(0,0%,100%,0.2);
    --on-background:hsla(220,100%,95%,1);
    --on-surface:hsla(220,100%,95%,1);
    --on-surface-variant:hsla(220,1%,44%,1);
    --primary: hsla(349,100%,43%,1);
    --primary-variant: hsla(349,64%,52%,1);
    --rating-color: hsla(44,100%,49%,1);
    --surface: hsla(250,13%,11%,1);
    --text-color: hsla(250,2%,59%,1);
    --white: hsla(0,0%,100%,1);



    --banner: 90deg, hsla(220,17%,7%,0.5)100%, hsl(220,17%,7%)0%;
    --bottom: 180deg, hsla(260,13%,11%,0), hsl(260,13%,11%,1);

    --sans : 'DM Sans', sans-serif;

    --heading:4rem;
    --title: 2rem;
    --titlr-lg:2.6rem;
    --body: 1.8rem;
    --button: 1.5rem;
    --label : 1.4rem;

    --bold : 700;

    --shadow1 : 0 1px 4px hsla(0,0%,0%,0.75);
    --shadow2 : 0 2px 4px hsla(350,100%,43%,0.3);

    --radius4  : 4px;
    --radius8  : 8px;
    --radius16 : 16px;
    --radius24 : 24px;
    --radius36 : 36px;

    --transitionshort: 250ms ease;
    --transitionlong: 500ms ease;


}

*,*::before, *::after{
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
}

.search-wrapper::before,
.load-more::before{

    content: "";
    width: 20px;
    height: 20px;
    border: 3px solid var(--white);
    border-radius: var(--radius24);
    border-inline-end-color: transparent;
    display: none;
}


.search-wrapper::before{
    position: absolute;
    top:14px;
    right:12px;
}

.search-wrapper.searching::before{
    display:block;
    margin-inline: auto;
    margin-block: 36px 60px;
}

.load-more{
    background-color: var(--primary-variant);
}

.load-more:is(:hover, :focus-visible){
    --primaryvariant:hsla(350,67%,39%,1);
}

.load-more .loading::before{
    display:block;
}

li{
    list-style-type: none;
}

a,img,span,iframe,button{
    display:block;
}

a,p{
    color: white;
    text-decoration: none;
}

img{
    height: auto;
}

img,button{
    background:none;
    border: none;
    font: inherit;
    color: inherit;
}

input{
    width:100%;
    background-color: black;
    border: none;
}

button{
    text-align: left;
    cursor:pointer;
}


html{
    font-family: var(--sans);
    font-size: 10px;
    scroll-behavior: smooth;
}

body{
    background-color:black ;
    color:(var(--on-background));
    font-size: var(--body);
    line-height : 1.6;

}

:focus-visible{
    outline-color: var(--primary-variant);
}

::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb{
    background-color: var(--banner-background);
    border-radius: var(--radius8);
}


.header{
    position: relative;
    padding-block: 24px;
    padding-inline: 16px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.header .logo{
    margin-inline-end: auto;
}

.search-btn, .menu-btn{
    padding: 12px;
}

.search-btn{
    background-color: var(--banner-background);
    border-radius: var(--radius8);

}
.search-btn img{
    opacity: 0.5;
    transition: var(--transitionshort);
}

.search-btn:is(:hover,:focus-visible) img{
    opacity: 1;
}

.menu-btn.active .menu , .menu-btn .close{
    display: none;
}

.menu-btn .menu , .menu-btn.active .close{
    display: block;
}

.search-box{
   position: absolute;
   top:0;
   left: 0;
   width:100%;
   height: 100%;
   background-color: var(--background);
   padding: 24px 16px;
   display: none;
   align-items: center;
   gap: 8px;
   z-index: 1;
}

.search-box.active{
    display: flex ;
}

.search-wrapper{
    position: relative;
    flex-grow: 1;
}

.search-field{
    background-color: var(--banner-background);
    color: white;
    height: 48px;
    line-height: 48px;
    padding-inline:44px 16px;
    outline: none;
    border-radius: var(--radius8);
    transition: var(--transitionshort);
}

.search-field:hover{
    box-shadow: 0 0 0 2px var(--on-surface-variant);
}

.search-field:focus{
    box-shadow: 0 0 0 2px var(--on-surface);
    padding-inline-start: 16px;
}

.search-wrapper .leading-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:12px;
    opacity:0.5;
    transition: var(--transitionshort);

}


.search-wrapper:focus-within .leading-icon{
    opacity: 0;
}



.sidebar{
    position: absolute;
    background-color: black;
    left:-340px;
    top:96px;
    max-width: 340px;
    width: 100%;
    border-block-start: 1px solid var(--banner-background);
    overflow-y: overlay;
    z-index:4;
    visibility: hidden;
    transition:var(--transitionlong);
}

.sidebar.active{
    transform: translateX(340px);
    visibility: visible;
}

.sidebar-inner{
    display: grid;
    gap: 20px;
    padding-block: 36px;

}

.sidebar::-webkit-scrollbar-thumb{
    background-color: transparent;
}

.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb{
    background-color: var(--banner-background);
}

.sidebar::-webkit-scrollbar-button{
    height: 16px;
}

.sidebar-list,.sidebar-footer{
    padding-inline: 36px;
}

.sidebar-link{
    color: var(--on-surface-variant);
    transition : var(--transitionshort);
}

.sidebar-link:is(:hover,:focus-visible){
    color: var(--on-background);
   
}

.sidebar-list{
display: grid;
gap:8px;
}

.sidebar-list .title{
margin-block-end: 8px;
}

.sidedbar-footer{
    border-block-start: 1px solid var(--banner-background);
    padding-block-start: 28px;
    margin-block-start: 16px;
}

.copyright{
    color: var(--on-surface-variant);
    margin-block-end: 20px;
}

.overlay{
    position: fixed;
    top:96px;
    left:0;
    bottom:0;
    width:100%;
    background:var(--background);
    opacity:0;
    pointer-events:none;
    z-index:3;

}

.overlay.active{
    opacity:0.5;
    pointer-events:all;
}





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

.meta-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap:12px;

}
.meta-item{
    display: flex;
    align-items: center;
    gap: 4px;
}

.heading{
    color:var(--white);
    font-weight: var(--bold);
    font-size: var(--heading);
    letter-spacing:0.5px;
    line-height: 1.2;
}


.title{
    font-size: var(--title);

}


.title-large{
    font-size: var(--titlr-lg);

}

.heading,.title,.title-large{
    font-weight: var(--bold);
    letter-spacing: 0.5px; 
}

.btn{
    color:var(--white);
    font-size: var(--button);
    font-weight: var(--bold);
    max-width:max-content;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-block: 10px;
    padding-inline: 2px 10px;
    border-radius: var(--radius8);
    transition: var(--transitionshort);

}

.watchtrailer{
    font-size: x-large;
    color:var(--white);
    font-weight: var(--bold);
    max-width:max-content;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-block: 0px;
    padding-inline: -4px 24px;
    border-radius: var(--radius8);
    transition: var(--transitionshort);

} 

.container{
    position:relative;
    background-color: var(--surface);
    color: var(--on-surface);
    padding:24px 20px 48px;
    height: calc(100vh - 96px);
    overflow-y: overlay;
    z-index: 1;
    
}



.banner{
    position:relative;
    height:700px;
    border-radius: var(--radius24);
    overflow:hidden;
}

.banner-slider .slider-item{
    position: absolute;
    top:0;
    left:120%;
    width:100%;
    height: 100%;
    background-color: var(--banner-background);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transitionshort);
}

.banner-slider .slider-item::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--banner));
}

.banner-slider .active{
    left:0;
    opacity: 1;
    visibility: visible;
}

.banner-content{
    position: absolute;
    left:24px;
    right:24px;
    bottom:206px;
    z-index:1;
    color: var(--text-color);
}


.banner:is(.heading, .banner-text){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow:hidden;
}

.banner .heading{
    -webkit-line-clamp:3;
    margin-block-end: 16px;
}




.banner .genre{
    margin-block: 12px;

}

.banner-text{
    -webkit-line-clamp: 2;
    margin-block-end: 24px;
}

.banner .btn{
    background-color: var(--primary);
}

.banner .btn:is(:hover,:focus-visible){
    box-shadow: var(--shadow2);
}

.card-edge{
    background-color: var(--banner-background);
    color: var(--white);
    font-size:var(--label);
    font-weight: var(--bold);
    padding-inline : 6px;
    border-radius: var(--radius4);
}

.slider-control{
    position: absolute;
    bottom:2px;
    left: 20px;
    right:0;
    border-radius: var(--radius16) 0 0 var(--radius16);
    user-select: none;
    padding: 4px 0 4px 4px;
    overflow-x: auto;
}

.slider-control::-webkit-scrollbar{
    display: none;
}

.control-inner{
     display:flex;
     gap:12px;

}

.control-inner::after{
    content: "";
    min-width: 12px;
}


.slider-control .slider-item{
width:100px;
border-radius: var(--radius8);
flex-shrink: 0;
filter: brightness(0.4);
}

.slider-control .active{
    filter: brightness(1);
    box-shadow: var(--shadow1);
}


.poster-box{
    background-image: url("poster-bg-icon.png");
    aspect-ratio: 2/3;

}

.poster-box,.video-card{
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: center;
    background-color: var(--banner-background);
    border-radius:  var(--radius16);
    overflow: hidden;
}

.title-wrapper{
    margin-block-end:24px;
}

.slider-list{
margin-inline:-20px;
overflow-x:overlay;
padding-block-end:16px;
margin-block-end:-16px;
}

.slider-list::-webkit-scrollbar-thumb{
    background-color: transparent;
}

.slider-list:is(:hover,:focus-within)::-webkit-scrollbar-thumb{
    background-color: var(--banner-background);
}

.slider-list::-webkit-scrollbat-button{
    width: 20px;
}

.slider-list .slider-inner{
    position: relative;
    display: flex;
    gap:16px;

}

.slider-list .slider-inner::before, 
.slider-list .slider-inner::after{
content: "";
min-width:4px;

}

.movie-list{
    padding-block-start:32px;
    
}
.movie-card{
    position: relative;
    min-width:200px;
    color: white;
}

.movie-card .card-banner{
    width:200px;

}

.movie-card .title{
    width:100%;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin-block:8px 4px;
}

.movie-card .meta-list{
    justify-content: space-between;
}

.movie-card .card-btn{
    position:absolute;
    inset:0;
}


.backdrop-image{
position:absolute;
top:0;
left:0;
width:100%;
height:600px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index:-1;

}

.backdrop-image::after{
    content: "";
    position: absolute;
    inset:0;
    background-image: linear-gradient(0deg, hsla(250,13%,11%,1),hsla(250,13%,11%,0.9));
}

.movie-detail .movie-poster{
    max-width: 300px;
    width: 100%;
}

.movie-detail .heading{
margin-block: 24px 12px;
}

.movie-detail :is(.meta-list, .genre){
    color: var(--text-color);
}

.movie-detail .genre{
    margin-block:12px 16px;

}

.detail-list{
    margin-block: 24px 32px;
}


.movie-detail .list-item{
    display: flex;
    align-items: flex-start;
    gap:8px;
    margin-block-end: 12px;
}

.movie-detail .list-name{
    color: var(--text-color);
    min-width: 112px;
}

.separator{
    width: 4px;
    height: 4px;
    background-color: var(--white-alpha-20);
    border-radius: var(--radius8);
}

.video-card{
    background-image: url("video-bg-icon.png");
    aspect-ratio : 16 / 9;
    flex-shrink: 0;
    max-width: 500px;
    width: calc(100% - 40px);
}

.container::after,
.search-modal::after{
    content : "";
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    height:150px;
    background-image: linear-gradient(var(--bottom));
    z-index:1;
    pointer-events: none;
}

/*Movie list*/

.genre-list .title-wrapper{
    margin-block-end:56px;

}

.grid-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    column-gap: 16px;
    row-gap: 20px;
}

:is(.genre-list, .search-modal) :is(.movie-card, .card-banner){
    width: 100%;
}




/*Search Modal*/

.search-modal{
    position:fixed;
    top:96px;
    left:0;
    bottom:0;
    width:100%;
    background-color: var(--surface);
    padding: 50px 24px;
    overflow-y: overlay;
    z-index:4;
    display:none;
}

.search-modal .active{
    display:block;

}

.search-modal .label{
   color: var(--primary-variant);
   font-weight: var(--bold);
   margin-block-end:8px; 
    
}