body {
  margin: 0;
  font-family: Arial;
  background: linear-gradient(135deg,#a224eb,#831de8,#9329e9);
  background-size: 300% 300%;
  animation: gradientMove 12s infinite;
  color: white;
   background-image: url("https://hdqwalls.com/download/poster-avengers-endgame-ni-3840x2160.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* 🔥 This keeps the background fixed */
  backdrop-filter: blur(6px);
}



@keyframes gradientMove {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.app { display: flex; height: 100vh; }

.glass { backdrop-filter: blur(15px); background: rgba(255,255,255,0.1); border-radius: 14px; }

/* Sidebar stays same everywhere */
.sidebar {
  width: 230px;       
  min-width: 230px;   
  background: rgba(0, 0, 0,0.25);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  transition: none; 
  display: flex;  
  flex-direction: column;
  padding: 13px;
  gap: 10px;

}

.logo { text-align: center; margin-bottom: 20px; }
.side-btn { padding: 12px; margin: 6px 0; border: 0; background: rgba(231, 227, 227, 0.15); border-radius: 8px; color: rgb(244, 241, 241); cursor: pointer; }
.side-btn:hover { background: rgba(230, 220, 220, 0.3); }

.content { width: 100%; padding: 20px; padding-left: 270px; overflow-x: hidden; }

.top-bar { display: flex; align-items: center; padding: 10px 10px; gap: 15px; background: none; }
.top-bar input { width: 60%; padding: 10px; border-radius: 20px; border: none; outline: none; }
/* Search box wrapper */
.search-box {
  position: relative;
  width: 60%;
}

/* Search input */
.search-box input {
  width: 92%;
  padding: 20px 45px 10px 15px;
  border-radius: 20px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
}

/* Search Icon Button */
.search-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  
  background: none;
  border: none;
  font-size: 20px;
  color: white;
  cursor: pointer;

  transition: 0.2s ease;
}

.search-btn:hover {
  transform: translateY(-50%) scale(1.15);
}
.user-icon { width: 40px; cursor: pointer; margin-left: 20px; }
.logout-btn { background: red; border: none; padding: 7px 14px; border-radius: 10px; display: none; cursor: pointer; }

.page { display: none; }
.page.active { display: block; }

.category-row { margin-top: 20px; }
.row-title { font-size: 22px; margin-bottom: 10px; }
.row-cards {
  display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px;
  scroll-behavior: smooth;
}
.row-cards::-webkit-scrollbar { display: none; }
.row-cards { -ms-overflow-style: none; scrollbar-width: none; }

.card {
  width: 150px; height: 280px; border-radius: 12px; background: #222; position: relative; flex-shrink: 0; 
}
.card img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.fav-btn { position: absolute; top: 6px; right: 6px; cursor: pointer; font-size: 18px; }
.card .rating { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 6px; font-weight: bold; }
.card button.trailer-btn {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  background: #ff4; border: none; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}

.login-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  display: none; background: rgba(0,0,0,0.7); justify-content: center; align-items: center;
}
.login-box { width: 300px; padding: 20px; text-align: center; background: rgba(255,255,255,0.1); border-radius: 14px; }
.login-box input { width: 90%; padding: 10px; margin: 10px 0; }
.close-btn { margin-top: 10px; background: #333; padding: 7px 12px; border: none; color: white; }
/* Card poster fit & styling */
.card img {
  width: 100%;
  height: 220px; 
  border-radius: 12px;
  object-fit: cover; 
}

/* Favorite heart styling */
.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.2s;
}
.fav-btn:hover {
  transform: scale(1.2);
}

/* Heart difference before & after click */
.fav-btn.liked {
  color: #ff4b4b; /* red heart for liked */
}
.fav-btn.unliked {
  color: white; /* empty heart for unliked */
}

/* Trailer button styling */
.card button.trailer-btn {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffeb3b;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}

/* 📱 MOBILE MODE */
@media (max-width: 600px) {

  /* Hide sidebar by sliding left */
  .sidebar {
    left: -260px;
    transition: 0.3s ease-in-out;
    z-index: 1000;
  }

  /* When opened */
  .sidebar.open {
    left: 0;
  }

  /* Show hamburger button */
  .hamburger {
    display: block;
    font-size: 28px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    border-radius: 10px;
  }

  /* Dim background overlay */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,0.55);
    z-index: 900;
  }

  .overlay.active {
    display: block;
  }
   #usernameDisplay {
    display: none !important;
  }

  /* Content full width */
  .content {
    padding-left: 10px !important;
    padding-right: 10px;
  }
  .search-box {
    width: 45%;
    position: relative;
  }

  .search-box input {
    padding: 8px 40px 8px 12px;   /* smaller height + smaller padding */
    font-size: 14px;              /* slightly smaller text */
    height: 34px;                 /* reduce actual height */
    border-radius: 16px;          /* optional: slightly smaller curve */
  }
  .user-icon {
    width: 34px;
    margin-left: auto;   /* pushes icon to far right */
    margin-right: 5px; 
  }

  @media (max-width: 600px) {

  /* Make logout button smaller */
  #logoutBtn {
    padding: 4px 10px;      
    font-size: 12px;        /* smaller text */
    border-radius: 6px;     /* reduce curve */
    margin-left: auto; 
    
  }

}
  /* Smaller search icon */
  .search-btn {
    font-size: 18px;
    left: 135px;
  }

}


/* Hide hamburger on desktop */
@media (min-width: 601px) {
  .hamburger { display: none; }
}