:root { 
  --background: #F0F0F0; /*  gray color */
  --text: #000000; /*  text */
  --dim-text: #555555; /* dimm text color */
  --hover: #A9A9A9; /* Hover  color */
}


* { 
  box-sizing: border-box; 
}


body { 
  background-color: var(--background); /* Set background color */
  color: var(--text); /* Set text color */
  font-family: "Inter", sans-serif; /* Set font */
  margin: 0; /* Remove default margin */
  overflow-x: hidden; 
}


header { 
  padding: 50px 0; /* Add  spacing */
  text-align: center; /* Center text */
}


.container { 
  width: 100%; /* width */
  max-width: 1300px; /* max width */
  margin: 0 auto; /* Center  */
  display: flex; /* Use flexbox layout */
  gap: 30px; /* Space between columns */
  padding: 0 20px; 
}


.left-column { /* Left side of page */
  flex: 2; /* Takes more space than right column */
  display: flex; /* Use flexbox */
  flex-direction: column; /* Stack items vertically */
  gap: 40px; /* Space between sections */
}


.right-column { /* Right side panel */
  flex: 1; /* Smaller than left column */
  position: sticky; /* Sticks while scrolling */
  top: 20px; /* Distance from top when stuck */
  align-self: flex-start; /* Align to top */
}


.search-section { /* Search bar container */
  display: flex; 
  gap: 10px; /* Space between input and button */
  justify-content: center; /* Center search bar */
}

#searchInput { /* Search input field */
  padding: 10px; /*  spacing */
  width: 300px; /*  width */
}

#searchBtn { /* Search button */
  padding: 10px 20px; /* Button size */
  cursor: pointer; /* Show pointer on hover */
  background: black; /* Black background */
  color: white; /* White text */
  border: none; /* border */
}


.search-results,
.categories,
.movie-details { 
  width: 100%; /*  width */
  background: #fff; /* White background */
  border: 1px solid #ddd; /* Light border */
  padding: 20px; /* Inner spacing */
  text-align: center; /* Center  */
}

#resultsGrid,
.category-grid { /* Movie grids */
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(5, 1fr); /* 5 columns */
  gap: 20px; /* Space between cards */
  margin-top: 20px; /* Space above grid */
}

.movie-card {
  background: #fff; /* White background */
  border: 1px solid #ddd; /* Light border */
  padding: 10px; /* Inner spacing */
  cursor: pointer; 
  text-align: center; /* Center text */
}

.movie-card:hover { /* Hover effect */
  background: var(--hover); /* Change background on hover */
}

.movie-card img { /* Movie image */
  width: 100%; 
}
.movie-card p { /* Movie title text */
  margin-top: 10px; 
}

#movieDetails img { 
  width: 100%; /*  width */
  max-width: 300px; 
  margin: 0 auto 20px;
  display: block; 
}



.pagination { 
  margin-top: 20px; 
  display: flex; /* Flex layout */
  justify-content: center; /* Center buttons */
  gap: 10px; /* Space between buttons */
  flex-wrap: wrap; /* Wrap */
}

.page-btn { 
  padding: 8px 12px; /* Button size */
  border: 1px solid #ddd; /* Light border */
  background: white; /* White background */
  cursor: pointer; /* Clickable */
  transition: 0.2s; /* hover effect */
}

.page-btn:hover { /* Hover effect */
  background: var(--hover); /*  color */
}


.page-btn.active { /* Highlight current page */
  background: black; /* Black background */
  color: white; /* White text */
  border-color: black; /* Match border */
  font-weight: bold; /* Bold  */
}


footer { 
  text-align: center; 
}