/* --------------------------------------------------
   1. Basic HTML & Body Resets + Sticky Footer Layout
   -------------------------------------------------- */
   html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   
   body {
     /* Use flex to create a sticky footer layout:
        content grows, but footer is always at bottom.
     */
     display: flex;
     flex-direction: column;
     background-color: #000; /* From your original theme */
     color: #fff;
   }
   
   /* Keep a container for your main content that can grow */
   #pageContent {
     flex: 1 0 auto; 
     margin-top: 20px;
   }
   
   /* Footer is now not absolute.
      It sits at the bottom if content is short,
      or scrolls if the content is long. 
   */
   footer {
     flex-shrink: 0; 
     background-color: black; 
     text-align: center;
     padding: 10px 0; 
   }
   
   footer p {
     color: #ccc;
     margin: 0; 
     font-size: 0.9rem;
   }
   .recipe-rating-form {
    background-color: crimson;
  }
  .recipe-rating-form h2 {
    font-size: 1.4rem;
  }
  
   
   /* --------------------------------------------------
      2. Navbar & Shared Elements
      -------------------------------------------------- */
   /* Overriding bootstrap “.navbar-custom” color to match your theme */
   .navbar-custom {
     background-color: crimson !important;
     border-bottom: 2px solid #900; /* optional styling */
   }
   
   /* Navbar brand */
   .navbar-brand {
     color: white !important;
     font-size: 1.5rem;
     font-weight: bold;
     margin-right: 1rem;
   }
   
   /* Navbar links */
   .nav-link {
     color: white !important;
     transition: color 0.3s ease;
   }
   
   .nav-link:hover {
     color: #ffcccc !important; /* Light red on hover */
   }
   
   /* Keep nav items aligned left */
   .navbar-nav {
     margin-left: 0;
     padding-left: 0;
     display: flex;
     align-items: center;
   }
   
   /* Ensure the collapse aligns left as well */
   .navbar-custom .navbar-collapse {
     justify-content: flex-start;
   }
   
   /* If you want to push a form to the right (header pages) */
   .navbar-custom .form {
     margin-left: auto;
   }
   
   /* Navbar button style */
   .btn-outline-light {
     border-color: white !important;
   }
   
   .btn-outline-light:hover {
     background-color: white !important;
     color: crimson !important;
     border-color: white !important;
   }
   
   /* Search bar used in header pages */
   .form-control {
     background-color: #fff !important;
     border: 1px solid crimson;
   }
   
   .form-control::placeholder {
     color: #ccc !important;
   }
   
   /* Remove bullets, margin, etc. from #home_page UL */
   #home_page {
     background-color: crimson;
     color: #fff;
     padding: 0;
     margin: 0;
     list-style: none;
   }
   
   /* --------------------------------------------------
      3. Headings, Text, Generic Elements
      -------------------------------------------------- */
   h1 {
     color: #FFF;
     font-size: 1.4rem;
     margin-bottom: 20px;
   }
   
   p {
     color: #FFF;
     margin-bottom: 1rem;
   }
   
   label {
     color: #FFF;
   }
   
   .mb-3 {
     color: #FFF;
   }
   
   #title_page {
     color: #FFF;
   }
   
   /* --------------------------------------------------
      4. Carousel (Index Page)
      -------------------------------------------------- */
   #homeCarousel .carousel-item-inner {
     height: 300px;
     background-size: cover;
     background-position: center center;
   }
   
   /* --------------------------------------------------
      5. Genre Grid & Cards (categories.php, titles.php)
      -------------------------------------------------- */
   .genre-grid a {
     color: #000;
     text-decoration: none !important;
   }
   
   .genre-card {
     background-color: #FFF;
     padding: 10px;
     margin-bottom: 20px; /* so cards have spacing on smaller screens */
   }
   
   .genre-card .genre-image {
     width: 100%;
     height: 300px;
     background-size: cover;
     background-position: center center;
   }
   
   .genre-card h3 {
     text-align: center;
     font-size: 1.3rem;
     padding-top: 1rem;
   }
   
   /* Example form for recipes or rating, you had in your code */
   .recipe-rating-form {
     background-color: #FFF;
   }
   .recipe-rating-form h2 {
     font-size: 1.4rem;
   }
   
   /* --------------------------------------------------
      6. more.html’s “TMDB” Special Grid
      -------------------------------------------------- */
   /* We keep your custom search box for more.html 
      (or if you want to unify it with the navbar search, you can remove this.)
   */
   .search {
     background-color: transparent;
     border: 2px solid #000; /* black border */
     padding: 0.5rem 1rem;
     border-radius: 50px;
     font-size: 1rem;
     color: #fff;
     font-family: inherit;
   }
   
   .search:focus {
     outline: 0;
     background-color: #000; 
   }
   
   .search::placeholder {
     color: #7378c5;
   }
   
   /* The main “movie” grid layout */
   main {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }
   
   /* The movie card styling */
   .movie {
     width: 300px;
     margin: 1rem;
     border-radius: 3px;
     box-shadow: 0.2px 4px 5px rgba(0,0,0,0.1);
     background-color: crimson;
     position: relative;
     overflow: hidden;
   }
   
   .movie img {
     width: 100%;
   }
   
   .movie-info {
     color: #eee;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 1rem 1rem;
     letter-spacing: 0.5px;
   }
   
   .movie-info h3 {
     margin-top: 0;
   }
   
   .movie-info span {
     background-color: #000;
     padding: 0.25rem 0.5rem;
     border-radius: 3px;
     font-weight: bold;
   }
   
   .movie-info span.green {
     color: lightgreen;
   }
   .movie-info span.orange {
     color: orange;
   }
   .movie-info span.red {
     color: red;
   }
   
   /* Hover “overview” effect */
   .overview {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fff;
     padding: 1rem;
     max-height: 100%;
     transform: translateY(101%);
     transition: transform 0.3s ease-in;
     color: #000;
   }
   
   .movie:hover .overview {
     transform: translateY(0);
   }
   
   /* Tags filter row on more.html */
   #tags {
     width: 80%;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     margin: 10px auto;
   }
   
   .tag {
     color: white;
     padding: 10px 20px;
     background-color: orange;
     border-radius: 50px;
     margin: 5px;
     display: inline-block;
     cursor: pointer;
   }
   
   .tag.highlight {
     background-color: red;
   }
   
   .no-results {
     color: white;
   }
   
   /* Pagination for more.html */
   .pagination {
     display: flex;
     margin: 10px 30px;
     align-items: center;
     justify-content: center;
     color: white;
   }
   
   .page {
     padding: 20px;
     cursor: pointer;
   }
   .page.disabled {
     cursor: not-allowed;
     color: grey;
   }
   .current {
     padding: 10px 20px;
     border-radius: 50%;
     border: 5px solid orange;
     font-size: 20px;
     font-weight: 600;
   }
   .know-more {
     background-color: orange;
     color: white;
     font-size: 16px;
     font-weight: bold;
     border: 0;
     border-radius: 50px;
     padding: 10px 20px;
     margin-top: 5px;
   }
   
   /* Overlay for “Know More” videos */
   .overlay {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     background-color: rgba(0,0,0, 0.9);
     overflow-x: hidden;
     transition: 0.5s;
   }
   
   .overlay-content {
     position: relative;
     top: 10%;
     width: 100%;
     text-align: center;
     margin-top: 30px;
   }
   
   .overlay a {
     padding: 8px;
     text-decoration: none;
     font-size: 36px;
     color: #818181;
     display: block;
     transition: 0.3s;
   }
   
   .overlay a:hover,
   .overlay a:focus {
     color: #f1f1f1;
   }
   
   .overlay .closebtn {
     position: absolute;
     top: 20px;
     right: 45px;
     font-size: 60px;
   }
   
   @media screen and (max-height: 450px) {
     .overlay a {
       font-size: 20px;
     }
     .overlay .closebtn {
       font-size: 40px;
       top: 15px;
       right: 35px;
     }
   }
   
   /* Embeds for the overlay videos */
   .embed.hide {
     display: none;
   }
   .embed.show {
     display: inline-block;
   }
   
   .arrow {
     position: absolute;
     font-size: 40px;
   }
   
   .arrow.left-arrow {
     top: 50%;
     left: 5%;
     transform: translateY(-50%);
   }
   .arrow.right-arrow {
     top: 50%;
     right: 5%;
     transform: translateY(-50%);
   }
   
   .dots {
     margin-top: 30px;
   }
   .dots .dot {
     padding: 5px 15px;
     border-radius: 50%;
     border: 5px solid crimson;
     color: white;
     font-size: 20px;
     font-weight: 600;
     margin: 5px;
   }
   .dots .dot.active {
     border-color: orange;
   }
   
   /* --------------------------------------------------
      7. Profile Page (account.php)
      -------------------------------------------------- */
   .profile {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-top: 30px;
   }
   
   .profile-img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid #ccc;
   }
   
   .profile-info p {
     margin-bottom: 0.5rem;
   }
   
   /* Extra spacing at bottom so footer is never overlapped */
   #pageContent {
     padding-bottom: 60px; /* or however much spacing you want */
   }