/*
  MOOVIEW STYLING 
*/

body {
  font-family: 'Poppins', sans-serif;
  background-color: black;
  padding: 0;
  /* margin: 2rem; */
  text-align: left;
  justify-content: center;
  margin: 0;
}

section {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.container {
  margin-top: 1rem;
}

/* Primary Heading, Branding */
h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  color: #ffffff;
}

/* Secondary Heading */
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 2rem;
  color: #ffffff;
  text-align: left;
  padding-left: 0rem;
  padding-right: 0rem;
}

/* Subheader */
h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 1.5rem;
  color: #ffffff;
  /* margin: 0.5rem; */
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 1rem;
  color: #ffffff;
  margin: 0.5rem;
}

/* Body Copy */
p,
ul,
ol {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #ffffff;
  /* max-width: 50rem; */
  margin: 0.5rem;
  margin-left: 0;
  /* padding: 0.5rem; */
  /* margin: 0 auto; */
}

a,
strong,
small {
  font-family: 'Lato', sans-serif;
  color: #ffffff;
  text-decoration: none;
  /* display: inline-block; */
}

a:hover,
a:focus {
  color: #b3b3b3;
  font-weight: 500;
}


/* Styling for long navigation links */
.a-long {
  color: #ffffff;
  word-break: break-word;
}

.a-long:hover,
.a-long:focus {
  color: #ffffff;
}

/* Resize image for responsive website */
img {
  height: auto;
  max-width: 100%;
}

/* 
  NAVIGATION BAR -------------------
*/

/* Styling for the navigation button */
/* 
.nav-bar {
  background-color: rgba(0, 0, 0, 0.522);
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 4rem;
  align-items: center;
  padding-top: 1rem;
  padding-left: 1.5rem;
  display: flex;
} */

/* Default transparent nav */
.nav-bar {
  background-color: rgba(0, 0, 0, 0.4);
  /* semi-transparent */
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 97%;
  /* height: 4rem; */
  align-items: center;
  padding: 1rem 1.5rem;
  display: flex;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Solid nav when scrolled */
.nav-bar.scrolled {
  background-color: #000;
  box-shadow: 0 0.1rem 0.625rem rgba(0, 0, 0, 0.3);
}

.nav-elements {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  margin-right: auto;
  /* Pushes nav buttons to the right */
}

.logo-image {
  height: 2.5rem;
  /* Adjust size as needed */
  width: auto;
}

.nav-buttons {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.nav-elements {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.auth-buttons {
  /* margin-left: auto; */
  display: flex;
}


.button-nav {
  text-decoration: none;
  color: white;
  justify-content: flex-end;
  /* padding: 0.5rem 1rem; */
}

.button-nav:hover,
.button-nav:focus {
  color: white;
}

/* Style the links inside the navigation bar */
.top-nav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 0.5rem 0.5rem;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 0.2rem solid transparent;
}

.top-nav a:hover {
  border-bottom: 0.125rem solid #e70000;
}

.top-nav a.active {
  border-bottom: 0.2rem solid #e70000;
}

.login-button,
.logout-button {
  background-color: #e70000;
  color: white;
  border: none;
  border-radius: 0.3rem;
  padding: 0.75rem 2rem;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
  width: auto;
  max-width: 10rem;
}

.logout-button {
  background-color: #88888885;
  color: #fff;
}

/* .logout-button:hover {
  background-color: #888888c7;
  color: white;
  border: 0.1rem #888888c7;
  border-radius: 0.3rem;
  padding: 1rem 1.5rem;
  border-bottom: 0.2rem solid transparent;
} */

.login-button:hover {
  background-color: #fff;
  color: #e70000;
  /* border-bottom: 0.2rem solid transparent; */
}

.logout-button:hover {
  background-color: #888888c7;
  color: #fff;
  /* border-bottom: 0.2rem solid transparent; */
}

.top-nav a.login-button:hover,
.top-nav a.logout-button:hover {
  border-bottom: none !important;
}


/* 
  FORM -------------------
*/

/* Styling for the form */

form {
  display: grid;
  /* margin-left: 1rem; */
}

input select {
  font-size: 1rem;
  line-height: 1.2;
}

/* login form h3 */
.sign-up-form h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #e70000;
}

/* login form h3 */
.sign-up-form h3 {
  margin-bottom: 1rem;
}

/* Center the form on the page */
/* .form-container {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
} */

/* Stack label on top of input and align left */
.input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 0.5rem; */
  margin-bottom: 0.5rem;
  /* max-width: 20rem; */
  width: 100%;
}

.input-group-one {
  /* display: flex; */
  flex-direction: column;
  gap: 0.5rem;
  /* margin-bottom: 1rem; */
  width: 100%;
  /* max-width: 37rem; */
}

/* Register Input Field Label */
.input-label {
  display: flex;
  font-size: 1rem;
  color: white;
  text-align: left;
}


/* Login Input FieldLabel */
.login-input-label {
  display: flex;
  font-size: 1rem;
  margin-top: 1rem;
  color: white;
  text-align: left;
}

label.input-label {
  margin-top: 1rem;
}

/* Input styling */
.input-field {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  width: 40rem;
  /* height: 2rem; */
  padding: 0.5rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
}



label {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 1rem;
  line-height: 1.8;
  text-align: left;
  color: white;
  /* margin: 0.2rem; */
  /* margin-top: 0.5rem; */
  margin-bottom: 0.6rem;
  /* display: block; */

  /* display: flex; */
  flex-direction: column;
  /* align-items: center; */
  font-size: 1rem;
  margin-bottom: 0.5rem;

}

input {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  /* opacity: 0.2; */
  color: white;
  /* opacity: 1; */
  /* max-width: 36rem;
  min-width: 10rem; */
  /* width: 100%; */
  height: 1.8rem;
  padding: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
}

/* Reference to WPShout */
input::placeholder {
  font-family: 'Lato', sans-serif;
  color: white;
  display: flex;
  vertical-align: top;
  position: relative;
  top: 0;
}

input:focus,
input:hover {
  border: 0.1rem solid white;
}

/* Divider line styling */

/* Divider line styling for login page */
.divider-flex {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.flex-line {
  flex: 1;
  height: 0.08rem;
  border: none;
  background-color: #888;
}

/* Divider line styling for register page */
.register-divider-flex {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.register-flex-line {
  flex: 1;
  /* height: 0.08rem; */
  height: 0.0625rem;
  border: none;
  background-color: #888;
}

.divider-text {
  font-family: "Lato", sans-serif;
  padding: 0 0.5rem;
  font-weight: 500;
  color: #888;
  background-color: rgb(0, 0, 0);
}

/* Visitor button style in login page */

.visitor-button {
  font-family: 'Lato', sans-serif;
  background-color: #000;
  color: #888;
  width: 100%;
  height: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
  text-align: center;
  border-radius: 0.3rem;
  border: 0.1rem dashed #888;
}

/* Visitor button style in register page */

.register-visitor-button {
  font-family: 'Lato', sans-serif;
  background-color: #000;
  color: #888;
  width: 100%;
  height: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem;
  text-align: center;
  border-radius: 0.3rem;
  border: 0.1rem dashed #888;
}

.default-button-one {
  font-family: 'Lato', sans-serif;
  background-color: #e70000;
  color: white;
  width: 100%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  /* border: 0.1rem solid; */
  border: 0.1rem solid #e70000;
}

.default-button-one:focus,
.default-button-one:hover {
  font-family: 'Lato', sans-serif;
  background-color: white;
  color: #e70000;
  border-radius: 0.3rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  cursor: pointer;
  /* border: 0.1rem solid; */
}

.default-button-two {
  font-family: 'Lato', sans-serif;
  background-color: #e70000;
  color: white;
  width: 25rem;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #e70000;
}

.default-button-two:focus,
.default-button-two:hover {
  font-family: 'Lato', sans-serif;
  background-color: white;
  border: 0.1rem solid white;
  color: #e70000;
  border-radius: 0.3rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  cursor: pointer;
  /* border: 0.1rem solid; */
}

.default-button-four {
  font-family: 'Lato', sans-serif;
  background-color: #888;
  color: white;
  width: 25rem;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #888;
}

.default-button-four:focus,
.default-button-four:hover {
  font-family: 'Lato', sans-serif;
  background-color: white;
  border: 0.1rem solid white;
  color: #000;
  border-radius: 0.3rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  cursor: pointer;
  /* border: 0.1rem solid; */
}


/* Prompt user to log in/resgister new account */
.account-direct {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 1rem;
  justify-content: center;
  /* justify-content: space-between; */
}


.default-link-one {
  text-decoration: underline;
  color: #e70000;
}

.default-link-two {
  color: #e70000;
}

.footer-link {
  margin-left: 0.5rem;
  color: #888;
}

.footer-link:hover {
  margin-left: 0.5rem;
  color: #e70000;
}

.sign-up-form {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sign-up-form h3 {
  margin-top: 0;
}

.sign-up-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* width: 300%; */
  gap: 0;
}

/* index.php CSS */
/* hero section */
#hero_section {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.hero-img {
  width: 100%;
  max-width: 100rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 0;
  object-fit: cover;
}

/* Slideshow Container */
.slideshow-container {
  width: 100%;
  height: 37.5rem;
  /* max-width: 82rem; */
  position: relative;
  /* margin-top: 2rem; */
  margin-bottom: 0;
  /* margin: auto; */
  overflow: hidden;
  border-radius: 0.3rem;
}

/* Hide radio buttons */
input[type="radio"] {
  display: none;
}

/* Slideshow wrapper */
.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual slides (hidden by default) */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Gradient overlay at the bottom */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Show the corresponding image when a radio button is checked */
#slide1:checked~.slideshow .slide:nth-child(1),
#slide2:checked~.slideshow .slide:nth-child(2),
#slide3:checked~.slideshow .slide:nth-child(3) {
  opacity: 1;
  position: relative;
}

/* Highlight the dot of the checked slide */
#slide1:checked~.dots label:nth-child(1),
#slide2:checked~.dots label:nth-child(2),
#slide3:checked~.dots label:nth-child(3) {
  background-color: white;
}

/* Dots Navigation */
.dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Dot buttons */
.dots label {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #b4b4b48d;
  border-radius: 50%;
  margin: 0 0.3rem;
  cursor: pointer;
  transition: opacity 0.6s ease-in-out;
}

.home-section {
  margin: 0;
  padding: 0;
}

/* movies.php CSS */

.search-bar {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* movie filter CSS */
.movie-section {
  display: grid;
  grid-template-columns: 1fr 10fr;
  gap: 3rem;
}

.filter-bar {
  margin-top: 1.5rem;
}

.filter-bar .checkbox-group {
  display: grid;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.filter-bar label {
  font-family: "Lato", sans-serif;
  margin-top: 1rem;
}

.filter-bar h3 {
  font-family: "Lato", sans-serif;
  margin: 0;
  margin-top: 1rem;
}

.filter-bar p {
  margin-top: 1.2rem;
}

.year-range {
  display: flex;
}

.year-range p {
  padding-left: 0.5rem;
}

/* Style the dropdown (select element) */
select.filter {
  font-family: "Lato", sans-serif;
  width: 110%;
  max-width: 25rem;
  margin-top: 0.5rem;
  padding: 0.625rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0.3rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Change border color on focus */
select.filter:focus {
  border-color: #e70000;
}

/* Style dropdown options */
select.filter option {
  font-size: 1rem;
  padding: 0.625rem;
  background-color: #fff;
  color: #333;
  margin-left: 1rem;
}

/* Style hover effect for options (only works in some browsers) */
select.filter option:hover {
  background-color: #e70000;
  color: white;
}

/* Responsive Design */
@media (max-width: 37.5rem) {
  select.filter {
    width: 100%;
  }
}

/* Style the range slider */
input[type="range"].filter {
  -webkit-appearance: none;
  width: 100%;
  max-width: 18.75rem;
  height: 0.01rem;
  border-radius: 10rem;
  border: 0.3 0.1 #e70000;
  outline: none;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
}

/* Style the slider thumb (circle that moves) */
input[type="range"].filter::-webkit-slider-thumb {
  -webkit-appearance: none;
  padding-top: 0.1rem;
  width: 1rem;
  height: 1rem;
  background: #e70000;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

input[type="range"].filter::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: #e70000;
  border-radius: 50%;
  cursor: pointer;
}

/* Change thumb size when hovered */
input[type="range"].filter:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

input[type="range"].filter:hover::-moz-range-thumb {
  transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 37.5rem) {
  input[type="range"].filter {
    max-width: 100%;
  }
}

#collection {
  padding: 0;
  margin-bottom: 11rem;
}

#movies img,
#collection img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#movies ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 65rem;
  padding: 0;
  list-style-type: none;
}

#movies li,
#collection li {
  list-style-type: none;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
}

.movie-block {
  display: block;
  padding-right: 1rem;
  border-radius: 0.3rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.movie-block:hover {
  transform: scale(1.03);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 0;
}

.poster-img {
  width: 11.25rem;
  max-width: 31.25rem;
  height: auto;
  border-radius: 0.3rem;
  position: relative;
  z-index: 0;
  /* position: relative;
  z-index: -1; */
}

.movie-info {
  display: flex;
  flex-direction: column;
  /* align-items: center;
  width: 100%; */
  align-items: center;
  width: 100%;
  min-height: 37.5rem;
}

/* Ensure movie title doesn't affect poster alignment */
.movie-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 3.75rem;
  /* Reserve space for titles */
}

/* Fix movie titles truncation but show full name on hover */
.movie-info h4 {
  font-size: 1rem;
  margin: 0.625rem 0 0.3rem;
  width: 9.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.movie-info h4:hover::after {
  content: attr(title);
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.3rem;
  border-radius: 0.3rem;
  white-space: normal;
  word-wrap: break-word;
  z-index: 10;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 12.5rem;
}

/* Ensure poster images do not appear over navigation bar */
/* .poster-img {
  position: relative;
  z-index: 0;
} */

.headline {
  margin-left: 2rem;
}

.popularity {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  /* color: #949494; */
  color: #FFBF00;
}

.release_date {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  color: #949494;
}

/* Movie Details Page Style */

.movie-details {
  margin-top: 3rem;
  display: flex;
  gap: 5rem;
}

.detail-poster-img {
  width: 25rem;
  /* max-width: 31.25rem; */
  height: auto;
  border-radius: 0.5rem;
}

.webpage-direct {
  display: flex;
  width: 100%;
  align-items: center;
  /* justify-content: center; */
  /* justify-content: space-between; */
}


/* keywords, tag styling */

.movie-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 0.375rem 0.75rem;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  display: inline-block;
  white-space: nowrap;
}

/* profile styling */

/* Input styling for profile editing */
.profile-input-field {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  width: 40rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
}

/* Container styling */

.account-container {
  display: grid;
  grid-template-columns: repeat(2, 3fr);
  gap: 3rem;
}


.checkbox-group {
  display: grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


input.custom-checkbox {
  width: 0;
  height: 1.5rem;
  margin-top: 1rem;
  margin-left: 0;
  align-items: center;
  min-width: 2rem;
}

label.custom-checkbox-label {
  margin: 0;
  line-height: 1.5rem;
}

/* Leave a review section style */
.comment-section textarea {
  resize: none;
  border-radius: 0.3rem;
  height: 8rem;
}

/* Review submit button style */
.submit-button {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: #e70000;
  color: #fff;
  text-align: right;
  width: 14%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
  justify-self: flex-end;
  text-align: center;
  border-radius: 0.3rem;
  border: 0.1rem solid #e70000;
  max-width: 38rem;
}

.submit-button:focus,
.submit-button:hover {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: #fff;
  color: #e70000;
  text-align: right;
  width: 14%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
  justify-self: flex-end;
  text-align: center;
  /* border: 0.1rem solid; */
  border-radius: 0.3rem;
  border: 0.1rem solid #fff;
  max-width: 38rem;
}

/* Review section style */

.comment {
  margin-top: 2rem;
}

/* Line seperating each user comment */
.comment-flex-line {
  flex: 1;
  height: 0.08rem;
  border: none;
  background-color: #5b5b5b;
}

/* Comment username, date posted, profile photo */
.comment-header {
  display: grid;
  /* grid-template-columns: repeat(7, 1fr); */
  grid-template-columns: 1fr 12fr;
  margin-bottom: 1.5rem;
}

/* Username style */
.comment h4 {
  margin-left: 0;
  margin-top: 1.5rem;
  font-weight: 600;
}

/* Comment Posted Date */
.comment .comment-date {
  color: #888;
}

/* Display of edit, delete buttons in reviews */
.comment-buttons {
  /* 
  gap: 0.5rem;
  margin-bottom: 1.5rem; */
  /* display: flex;
  flex-direction: column; */
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Edit review textarea */
.comment-buttons textarea {
  /* resize: none;
  border-radius: 0.3rem;
  height: 8rem; */
  width: 100%;
  resize: none;
  border-radius: 0.3rem;
  height: 8rem;
  padding: 0.5rem;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
}

/* Container for the Save and Delete buttons */
.comment-buttons .button-group {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Delete button in reviews */
.comment-delete-button {
  font-family: 'Lato', sans-serif;
  background-color: #88888830;
  color: white;
  width: 14%;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #88888830;
}

.comment-delete-button:focus,
.comment-delete-button:hover {
  font-family: 'Lato', sans-serif;
  background-color: #88888876;
  color: white;
  width: 14%;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #88888876;
}


/* Edit, Save button in reviews */
.comment-edit-button {
  font-family: 'Lato', sans-serif;
  background-color: #e70000;
  color: white;
  width: 14%;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #e70000;
}

.comment-edit-button:focus,
.comment-edit-button:hover {
  font-family: 'Lato', sans-serif;
  background-color: #fff;
  color: #e70000;
  width: 14%;
  height: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  text-align: center;
  border: 0.1rem solid #fff;
}


/* profile style */

.profile-container {
  margin-top: 2rem;
  background-color: rgba(255, 255, 255, 0.1);
  /* border: 0.1rem solid #e70000; */
  padding: 0.375rem 0.75rem;
  padding-bottom: 2rem;
  border-radius: 0.5rem;
  text-align: center;
  /* font-size: 0.8rem;
  display: inline-block;
  white-space: nowrap; */
}

.profile-container h2 {
  text-align: center;
  margin-top: 2rem;
}

/* .profile-container h3 {
  color: #e70000;
} */

.profile-photo {
  margin-top: 1rem;
  height: 15.625rem;
  width: 15.625rem;
  object-fit: cover;
  /* Ensures the image fills the container without distortion */
  border-radius: 50%;
  /* Makes it a circle */
}

.small-profile-photo {
  height: 5rem;
  width: 5rem;
  margin-top: 0.5rem;
  object-fit: cover;
  /* Ensures the image fills the container without distortion */
  border-radius: 50%;
  /* Makes it a circle */
}

.profile-info {
  padding-top: 1rem;
}

.profile-info p {
  margin-right: 0.5rem;
}

.user-name h3 {
  margin-top: 0;
}

/* Edit User Profile Button */
.profile-edit-button {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  background-color: #fff;
  color: #e70000;
  width: 40%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
  text-align: center;
  /* border: 0.1rem solid; */
  border-radius: 0.3rem;
  border: 0.1rem solid #fff;
  max-width: 38rem;
}

.profile-edit-button:focus,
.profile-edit-button:hover {
  font-family: 'Lato', sans-serif;
  background-color: #e70000;
  color: #fff;
  border: 0.1rem solid #e70000;
  border-radius: 0.3rem;
  margin-top: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  cursor: pointer;
}

input.default-button-three {
  font-family: 'Lato', sans-serif;
  background-color: #e70000;
  color: white;
  width: 100%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
  margin-left: 0;
  text-align: center;
  /* border: 0.1rem solid; */
  border: 0.1rem solid #e70000;
}

.default-button-three:focus,
.default-button-three:hover {
  font-family: 'Lato', sans-serif;
  background-color: white;
  color: #e70000;
  border: 0.1rem solid #fff;
  border-radius: 0.3rem;
  padding: 1rem;
  padding-bottom: 2rem;
  /* margin-left: 0.3rem; */
  cursor: pointer;
  /* border: 0.1rem solid; */
}

/* select categories header styling */
.form-section h3 {
  padding-top: 2rem;
}


/* remove button styling for preferred categories removal */
.remove-button {
  font-family: 'Lato', sans-serif;
  background-color: #88888830;
  color: white;
  width: 100%;
  height: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
  margin-left: 0;
  text-align: center;
  /* border: 0.1rem solid; */
  border: 0.1rem solid #88888830;
  /* max-width: 38rem; */
}

.remove-button:focus,
.remove-button:hover {
  font-family: 'Lato', sans-serif;
  background-color: #88888876;
  color: #fff;
  background-color: #88888876;
  border: 0.1rem solid #88888876;
  border-radius: 0.3rem;
  padding: 1rem;
  padding-bottom: 2rem;
  cursor: pointer;
}

/* carousel */

/* Carousel Container */
.carousel-container {
  width: 96%;
  max-width: 82rem;
  margin: auto;
  overflow: hidden;
}

/* Scrollable Carousel */
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Enables smooth snapping */
  /* -webkit-overflow-scrolling: touch; */
  /* Ensures smooth scrolling on mobile */
  white-space: nowrap;
  display: flex;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Movie List */
.carousel ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Enable scrolling with scrollbar */
.carousel::-webkit-scrollbar {
  height: 0.1rem;
}

.carousel::-webkit-scrollbar-thumb {
  background: #e70000;
  border-radius: 0.25rem;
}

.carousel::-webkit-scrollbar-track {
  background: #888;
}

footer {
  background-color: #161616;
  margin-top: 2rem;
  padding-top: 0rem;
  padding: 1rem;
}

.footer-section {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr 2fr;
  gap: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
}

.footer-section p {
  font-size: 0.9rem;
  color: #e0e0e0;
  margin-left: 0.5rem;
}

.footer-info {
  font-size: 0.9rem;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
}

.contact-info {
  display: flex;
  margin-top: 1rem;
  gap: 1rem;
}

.footer-flex-line {
  margin-top: 2rem;
  flex: 1;
  height: 0.1rem;
  border: none;
  background-color: #88888824;
}

.copyright-text {
  font-size: 0.9rem;
  margin-top: 2rem;
  text-align: center;
  justify-self: center;
}

/* pagination style */
.page-selector {
  text-align: center;
}

.pagination-link {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}

.pagination-link.active {
  background-color: #e70000;
  color: white;
}

.pagination-link:hover {
  background-color: #e70000;
  color: white;
}

.pagination-link.disabled {
  color: #888;
  pointer-events: none;
}

.ellipsis {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin: 0 0.25rem;
  text-align: center;
  font-weight: bold;
  color: #fefefe;
  pointer-events: none;
}

/* 
My Collection Styling 
*/

/* My Collection Styling */


.greeting h2 {
  color: #e70000;
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 0;
}

#collection h2 {
  margin-top: 0;
}

#collection ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 90rem;
  margin-top: 2rem;
  padding: 0;
  list-style-type: none;
}