@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";.navbar{z-index:1000;width:100%;transition:background-color var(--transition-speed), box-shadow var(--transition-speed);background:0 0;justify-content:space-between;align-items:center;padding:1.5rem 4rem;display:flex;position:fixed;top:0}.navbar.scrolled{background-color:var(--bg-color);box-shadow:0 4px 10px #00000080}.nav-left{align-items:center;gap:3rem;display:flex}.logo{color:var(--accent-color);letter-spacing:1px;align-items:center;font-size:1.8rem;font-weight:700;display:flex}.nav-links{gap:1.5rem;display:flex}.nav-links a{color:var(--text-secondary);transition:color var(--transition-speed);font-size:1rem;font-weight:500}.nav-links a:hover,.nav-links a.active{color:var(--text-primary)}.nav-right{align-items:center;gap:1.5rem;display:flex}.search-container{background-color:var(--bg-card);transition:border-color var(--transition-speed);border:1px solid #0000;border-radius:20px;align-items:center;padding:.5rem 1rem;display:flex}.search-container:focus-within{border-color:var(--accent-color)}.search-container input{color:#fff;font-family:var(--font-family);width:150px;transition:width var(--transition-speed);background:0 0;border:none;outline:none;margin-left:.5rem}.search-container input:focus{width:250px}@media (width<=768px){.navbar{padding:1rem}.nav-links{display:none}.search-container input:focus{width:150px}}.footer{text-align:center;background-color:var(--bg-secondary);color:var(--text-secondary);margin-top:auto;padding:2rem}.footer-content p{margin:.5rem 0;font-size:.9rem}.movie-card{width:100%;transition:transform var(--transition-speed), box-shadow var(--transition-speed);background-color:var(--bg-card);color:inherit;border-radius:8px;flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.movie-card:hover{transform:translateY(-5px)scale(1.02);box-shadow:0 10px 20px #000c}.card-image-wrapper{aspect-ratio:2/3;width:100%;position:relative;overflow:hidden}.card-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-speed)}.movie-card:hover .card-image{transform:scale(1.05)}.card-overlay{opacity:0;width:100%;height:100%;transition:opacity var(--transition-speed);background:linear-gradient(#0009 0%,#0000 40%,#000c 100%);justify-content:flex-end;padding:10px;display:flex;position:absolute;top:0;left:0}.movie-card:hover .card-overlay{opacity:1}.watchlist-btn{border:1px solid var(--accent-color);width:35px;height:35px;transition:background-color var(--transition-speed), transform .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1f2833cc;border-radius:50%;justify-content:center;align-items:center;display:flex}.watchlist-btn:hover{background:var(--bg-secondary);transform:scale(1.1)}.card-info{padding:12px}.card-title{white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);margin-bottom:6px;font-size:1rem;font-weight:600;overflow:hidden}.card-meta{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.85rem;display:flex}.card-rating{color:var(--accent-color);align-items:center;gap:4px;font-weight:600;display:flex}.row-container{margin:2rem 0;padding:0 4rem}.row-title{color:var(--text-primary);border-left:4px solid var(--accent-color);margin-bottom:1rem;padding-left:10px;font-size:1.5rem;font-weight:600}.row-wrapper{align-items:center;display:flex;position:relative}.row-posters{scroll-behavior:smooth;scrollbar-width:none;gap:1.5rem;padding:1rem 0;display:flex;overflow:scroll hidden}.row-posters::-webkit-scrollbar{display:none}.row-poster-wrapper{flex:none;width:200px}.slider-arrow{color:#fff;z-index:10;opacity:0;width:40px;height:40px;transition:opacity var(--transition-speed), background-color var(--transition-speed);background-color:#00000080;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.row-wrapper:hover .slider-arrow{opacity:1}.slider-arrow:hover{background-color:var(--accent-color);color:#000}.slider-arrow.left{left:-20px}.slider-arrow.right{right:-20px}@media (width<=768px){.row-container{padding:0 1rem}.slider-arrow{display:none}.row-poster-wrapper{width:150px}}.hero-banner{color:#fff;flex-direction:column;justify-content:center;height:80vh;display:flex;position:relative}.hero-overlay{background:#0006;position:absolute;inset:0}.hero-content{z-index:2;max-width:600px;margin-left:4rem;padding-top:5rem;position:relative}.hero-title{text-shadow:2px 2px 4px #000c;margin-bottom:1rem;font-size:4rem;font-weight:800}.hero-desc{text-shadow:1px 1px 2px #000c;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:2rem;font-size:1.1rem;line-height:1.5;display:-webkit-box;overflow:hidden}.hero-buttons{gap:1rem;display:flex}.btn-primary,.btn-secondary{transition:all var(--transition-speed);border-radius:4px;align-items:center;gap:.5rem;padding:.8rem 2rem;font-size:1.1rem;font-weight:600;display:flex}.btn-primary{background-color:var(--accent-color);color:#000;border:none}.btn-primary:hover{background-color:var(--accent-hover);transform:scale(1.05)}.btn-secondary{color:#fff;background-color:#6d6d6eb3}.btn-secondary:hover{background-color:#6d6d6ee6;transform:scale(1.05)}.hero-fade-bottom{background:linear-gradient(180deg, transparent, #0b0c109c, var(--bg-color));z-index:1;width:100%;height:15rem;position:absolute;bottom:0}.home-rows{z-index:3;margin-top:-5rem;position:relative}@media (width<=768px){.hero-content{margin-left:1rem}.hero-title{font-size:2.5rem}}.movies-page{min-height:100vh;padding:6rem 4rem 2rem}.movies-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.movies-header h2{color:var(--text-primary);font-size:2rem}.genre-filter{background-color:var(--bg-secondary);color:#fff;border:1px solid var(--accent-color);font-family:var(--font-family);cursor:pointer;border-radius:4px;outline:none;padding:.5rem 1rem;font-size:1rem}.movies-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;display:grid}.no-results{text-align:center;color:var(--text-secondary);margin-top:4rem;font-size:1.2rem}.loader{text-align:center;color:var(--accent-color);margin-top:2rem}.load-more-btn{color:var(--accent-color);border:2px solid var(--accent-color);transition:all var(--transition-speed);background-color:#0000;border-radius:4px;margin:3rem auto 0;padding:.8rem 2.5rem;font-size:1.1rem;font-weight:600;display:block}.load-more-btn:hover{background-color:var(--accent-color);color:#000}@media (width<=768px){.movies-page{padding:5rem 1rem 2rem}.movies-header{flex-direction:column;align-items:flex-start;gap:1rem}.movies-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}.movie-details{min-height:100vh;position:relative}.details-backdrop{z-index:0;background-position:50% 20%;background-size:cover;height:60vh;position:absolute;top:0;left:0;right:0}.backdrop-overlay{background:linear-gradient(to bottom, #0b0c1066 0%, #0b0c10e6 60%, var(--bg-color) 100%);position:absolute;inset:0}.details-content{z-index:10;gap:3rem;max-width:1200px;margin:0 auto;padding:15vh 4rem 4rem;display:flex;position:relative}.details-poster{border-radius:12px;flex-shrink:0;width:300px;overflow:hidden;box-shadow:0 15px 30px #000c}.details-poster img{width:100%;display:block}.details-info{color:#fff;align-self:flex-end}.details-title{margin-bottom:1rem;font-size:3.5rem;font-weight:800}.details-meta{color:var(--text-secondary);align-items:center;gap:1.5rem;margin-bottom:2rem;display:flex}.meta-item{align-items:center;gap:.5rem;font-weight:500;display:flex}.details-genres{flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;display:flex}.genre-tag{background-color:var(--bg-card);border:1px solid var(--text-secondary);border-radius:20px;padding:.3rem .8rem;font-size:.85rem}.details-overview{max-width:800px;margin-bottom:2.5rem;font-size:1.1rem;line-height:1.6}.details-actions{gap:1rem;display:flex}.btn-trailer,.btn-watchlist{transition:all var(--transition-speed);border-radius:4px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;display:flex}.btn-trailer{background-color:var(--accent-color);color:#000;text-decoration:none}.btn-trailer:hover{background-color:var(--accent-hover);transform:scale(1.05)}.btn-watchlist{color:#fff;background-color:#0000;border:2px solid #fff}.btn-watchlist:hover{background-color:#ffffff1a}.btn-watchlist.active{border-color:var(--accent-color);color:var(--accent-color)}@media (width<=768px){.details-content{flex-direction:column;align-items:center;padding:10vh 1rem 2rem}.details-poster{width:200px}.details-title{text-align:center;font-size:2.5rem}.details-info{text-align:center;align-self:center}.details-meta,.details-genres,.details-actions{justify-content:center}}.watchlist-page{min-height:100vh;padding:6rem 4rem 2rem}.watchlist-header{border-bottom:1px solid var(--bg-secondary);margin-bottom:3rem;padding-bottom:1rem}.watchlist-header h2{color:var(--text-primary);margin-bottom:.5rem;font-size:2.5rem}.watchlist-header p{color:var(--text-secondary);font-size:1.1rem}.empty-watchlist{text-align:center;color:var(--text-secondary);margin-top:5rem;font-size:1.2rem}.explore-btn{background-color:var(--accent-color);color:#000;transition:all var(--transition-speed);border-radius:4px;margin-top:1.5rem;padding:.8rem 2rem;font-weight:600;display:inline-block}.explore-btn:hover{background-color:var(--accent-hover);transform:scale(1.05)}@media (width<=768px){.watchlist-page{padding:5rem 1rem 2rem}}.app{flex-direction:column;min-height:100vh;display:flex}.main-content{flex-grow:1}.fade-in{animation:.5s ease-in-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}:root{--bg-color:#0b0c10;--bg-secondary:#1f2833;--bg-card:#1f283399;--accent-color:gold;--accent-hover:#ffea00;--text-primary:#fff;--text-secondary:#c5c6c7;--font-family:"Inter", sans-serif;--transition-speed:.3s}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-family);border:none}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}
