.wrapper{display:flex}.sidebar{display:flex;flex-direction:column;border:solid black;justify-content:flex-start;background-color:#282c34}.nav-bar{display:flex;flex-direction:column}.nav-bar-btn{margin-bottom:40rem}.header-container{background-color:#282c34;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;color:#fff;padding:20px;box-shadow:inset 0 1px 12px #b79630}.search-sort-container{display:flex;flex-direction:row;align-items:center;gap:20px}.header-title{font-size:1.6rem}.header-img2{transform:scaleX(-1)}.banner{display:flex;flex-direction:row;align-items:center}#sortComponent{margin-left:50px}@media (max-width: 600px){.header-container{flex-direction:column}.search-sort-container{display:flex;flex-direction:column}}.search-clear{display:flex;align-items:center;gap:10px}.search-clear input{padding:8px;border-radius:4px;border:1px solid #ccc;width:250px}.search-clear button{padding:8px 16px;border-radius:4px;border:none;background-color:#368c39;color:#fff;cursor:pointer}.search-clear button:hover{background-color:#1a551d}.search-clear button[type=button]{background-color:#852019}.search-clear button[type=button]:hover{background-color:#4b0a0a}.dev-marker{box-shadow:inset 0 1px 12px #b79630}.loadMore{margin:20px auto;display:flex;width:120px;padding:8px 0;background-color:#282c34;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700}.loadMore:hover{background-color:#3a3f4b}.cardsList-container{background-color:#4c587c;padding:25px;display:flex;flex-direction:row;justify-content:flex-start;align-content:flex-start;flex-wrap:wrap;gap:25px}.movie-poster{width:200px;height:260px;position:relative}.card-container{object-fit:fit-content;width:200px;background-color:#fff;border:1px solid #ccc;border-radius:8px;overflow:hidden;position:relative;transition:transform .3s ease;margin:10px}.card-container:hover{transform:scale(1.03);box-shadow:0 4px 8px #0003}.movieImageCard{position:relative}.rating{display:flex;justify-content:center;margin:5px 0;font-size:.9rem}.movie-title{display:flex;justify-content:center;padding:0 5px;font-weight:700;text-align:center;margin:8px 0;height:40px;overflow:hidden}.favorited,.watched{cursor:pointer;position:absolute;background-color:#ffffffb3;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.favorited{top:10px;right:10px;color:#888}.watched{top:10px;left:10px;color:#888}.favorited.active{color:red;background-color:#ffffffe6}.watched.active{color:#3498db;background-color:#ffffffe6}.favorited:hover,.watched:hover{transform:scale(1.1)}.empty-state{width:100%;text-align:center;padding:40px 20px;color:#666;font-size:1.1rem}body.openModal{overflow:hidden}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-card{background-color:#fff;border-radius:8px;width:80%;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;color:#333}.modal-title{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee}.modal-title h1{margin:0;font-size:1.5rem}.modal-content{padding:20px;overflow-y:auto}.modal-image img{width:100%;border-radius:4px}.modal-info{margin-top:15px}.modal-info p{margin:8px 0;line-height:1.5}.modal-info .runtime,.modal-info .genres,.modal-info .date-released,.modal-info .rating{font-size:.95rem}.modal-info .overview{margin:15px 0;line-height:1.6}.trailer-container{margin:20px 0}.trailer-container h3{margin-bottom:10px;font-size:1.2rem}.trailer-container iframe{border-radius:4px;box-shadow:0 2px 8px #0000001a}.close-modal{background-color:#e74c3c;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-weight:700;margin-top:15px}.close-modal:hover{background-color:#c0392b}.modal-title .close-modal{width:30px;height:30px;border-radius:50%;position:relative;padding:0}.modal-title .close-modal:before,.modal-title .close-modal:after{content:"";position:absolute;width:15px;height:2px;background-color:#fff;top:50%;left:50%}.modal-title .close-modal:before{transform:translate(-50%,-50%) rotate(45deg)}.modal-title .close-modal:after{transform:translate(-50%,-50%) rotate(-45deg)}@media (max-width: 768px){.modal-card{width:95%}.trailer-container iframe{height:180px}}.footer-container{background-color:#282c34;color:#fff;height:60px;display:flex;justify-content:center;align-items:center;align-content:center}.nav-bar{display:flex;flex-direction:column;padding:20px 10px;background-color:#282c34;border-radius:8px;box-shadow:0 2px 5px #0000001a;height:100%;box-shadow:inset 0 1px 12px #b79630}.nav-bar-btn{display:flex;align-items:center;padding:12px 15px;margin-bottom:10px;border:none;border-radius:6px;background-color:#fff;color:#555;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.nav-bar-btn svg{margin-right:10px;font-size:1.1rem}.nav-bar-btn:hover{background-color:#f1f3f5;transform:translateY(-2px)}.nav-bar-btn.active{background-color:#074624;color:#06172f}.nav-bar-btn.active:hover{background-color:#0069d9}@media (max-width: 768px){.nav-bar{padding:10px}.nav-bar-btn{margin-bottom:0;margin-right:5px;padding:8px 12px;font-size:.9rem}.nav-bar-btn:last-child{margin-right:0}}body{margin:0;font-family:Arial,sans-serif;background-color:#f4f4f4}button{background-color:#282c34;color:#fff;cursor:pointer;font-size:16px;font-weight:700;transition:background-color .3s ease}button:hover{background-color:#777;color:#fff}