/* ==========================================
   CAT MOVIE
   main.css
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#0d1117;
    color:#ffffff;
    overflow-x:hidden;
    min-height:100vh;
}

/* Затемнение фона */

.background-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:-1;
}

/* =========================
        ОСНОВА
========================= */

.page-wrapper{
    display:flex;
    min-height:100vh;
}

/* =========================
        SIDEBAR
========================= */

.sidebar{

    position:fixed;

    left:0;
    top:0;

    width:250px;
    height:100vh;

    background:rgba(15,18,24,.82);

    backdrop-filter:blur(12px);

    border-right:1px solid rgba(255,255,255,.08);

    padding:30px 20px;

    z-index:1000;

}

/* =========================
        LOGO
========================= */

.logo{

    text-align:center;

    margin-bottom:50px;

}

.logo i{

    color:#ff9800;

    font-size:44px;

    display:block;

    margin-bottom:15px;

}

.logo span{

    font-size:28px;

    font-weight:700;

    letter-spacing:3px;

    color:white;

}

/* =========================
        MENU
========================= */

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.sidebar nav a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#d8d8d8;

    text-decoration:none;

    padding:14px 18px;

    border-radius:12px;

    transition:.3s;

    font-size:17px;

}

.sidebar nav a i{

    width:24px;

    text-align:center;

}

.sidebar nav a:hover{

    background:#ff9800;

    color:white;

    transform:translateX(6px);

    box-shadow:

        0 0 20px rgba(255,152,0,.35);

}

/* =========================
      MAIN CONTENT
========================= */

.main-content{

    margin-left:250px;

    width:calc(100% - 250px);

    padding:40px;

}

/* =========================
      PAGE TITLE
========================= */

.page-title{

    text-align:center;

    margin-bottom:45px;

}

.page-title h1{

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

}

.page-title p{

    color:#cccccc;

    font-size:18px;

}

/* =========================
        POSTERS
========================= */

.poster-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    transition:.35s;

}

.poster{

    width:100%;

    border-radius:20px;

    display:block;

    transition:.35s;

}

.poster-card:hover .poster{

    transform:scale(1.06);

}

.poster-card:hover{

    box-shadow:

        0 0 25px rgba(255,153,0,.45);

}

/* =========================
      OVERLAY
========================= */

.poster-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:20px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.92)

    );

    opacity:0;

    transition:.35s;

}

.poster-card:hover .poster-overlay{

    opacity:1;

}

.poster-overlay h5{

    margin-bottom:12px;

    color:white;

}

.watch-btn{

    display:inline-block;

    padding:10px 18px;

    border-radius:25px;

    background:#ff9800;

    color:white;

    font-size:14px;

    font-weight:600;

}

/* =========================
      GRID
========================= */

.posters-row{

    row-gap:35px;

}

/* =========================
        EMPTY
========================= */

.empty-message{

    text-align:center;

    padding:80px 0;

}

.empty-message h3{

    color:#d5d5d5;

}

/* =========================
      SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#ff9800;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ffb03a;

}

/* =========================
      MOBILE
========================= */

@media(max-width:992px){

.sidebar{

    width:90px;

}

.logo span{

    display:none;

}

.sidebar nav a span{

    display:none;

}

.main-content{

    margin-left:90px;

    width:calc(100% - 90px);

}

}

@media(max-width:768px){

.main-content{

    margin-left:0;

    width:100%;

    padding:20px;

}

.sidebar{

    position:relative;

    width:100%;

    height:auto;

}

.sidebar nav{

    flex-direction:row;

    justify-content:center;

    flex-wrap:wrap;

}

}