/* !important: override ALL previous styling rules; anything applied with this property, wouldn't change without it. */
/* Elements of the page are ordered by the page's sequence*/

html {
  /* Smooth scroll when pressing on the back-to-top button - isnt related to anything else */
  scroll-behavior: smooth;
}

/* Body's background color specified */
body {
  background-color: #f1f1f1 !important;
}

/* Header */
#header {
  /* POSITION RELATED */
  position: relative; /* Position relative to the document's current flow*/
  top: 105px; /* Spacing to appear below the navbar */
  min-width: 615px;
  margin: auto; /* Doesn't do much, simply an automatic margin (Doesn't center the element)*/

  /* TEXT DISPLAY RELATED */
  font-size: 64px;
  font-family: "Monotype Baskerville", serif;
  font-weight: 100; /* Add this to make the font look think and clean */
  line-height: 100%;
  color: black;
  text-align: center; /* Centers the text*/
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Distance between letters for design */
}

/* START OF MIDDLE LINKS NAVBAR RELATED */

.middle-links {
  /* Simply positioning & size in the container holdings the links */
  position: relative; /* Relative to the view port*/
  top: 110px; /* To appear below the header*/
  width: 100%;
  min-width: 615px;
  margin: auto; /* Center the block element */
  margin-bottom: 10px;
}

/* Unordered list for middle links */
.middle-links ul {
  /* POSITION RELATED */
  display: flex; /* To horzinatally allign the elements */
  justify-content: center; /* Center the links on the main axis (x-axis) / horiziontal*/
  gap: 30px; /* Smaller gap between links */
  margin: 0;
  padding: 0;

  /* TEXT DISPLAY RELATED - Applies it for ALL list items*/
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  list-style: none; /* Without bullets */
}

.middle-links li a {
  position: relative;
  color: #000;
  text-decoration: none; /* Without an underline */
}

.middle-links li a::after {
  /* Acts as an empty placeholder for the underlining animation when hovering!
   You could write any type of text & it will appear*/
  content: "";

  /* POSITION RELATED */
  position: absolute;
  bottom: -3px; /* Adjust underline position */
  right: 50%;
  width: 0;
  height: 1px; /* Thinner underline */
  margin: 0 auto;

  /* DISPLAY RELATED */
  background-color: rgb(0, 0, 0); /* The color of the underline that appears*/

  /* ANIMATION RELATED */
  transition: 0.3s; /* CONTROLS THE SPEED OF THE UNDERLINE ANIMATION */
}

.middle-links li a:hover::after {
  /* Positions the hovering correctly, play with the numbers to understand */
  right: 0;
  width: 100%;
}

/* END OF MIDDLE LINKS NAVBAR RELATED */

/* START OF CONTROLS: FILTER + SEARCH BAR RELATED */

/* CONTROLS CONTAINER: Wraps Search bar + filter button */
.controls-container {
  /* Simply controls positioning */
  z-index: 1001; /* Higher priority to be above other elements */
  position: relative; /* Position relative to the flow*/
  top: 6.5rem;
  display: flex;
  justify-content: space-between; /* Keeps spacing consistent between both end containers*/
  align-items: center; /* Centers the items vertically (not main-axis)*/
  width: 100%;
  min-width: 635px;
}

/* DROP DOWN MENU OF FILTERS RELATED */

/* Filter Container */
.filter-container {
  /* SIMPLE POSITIONING */
  z-index: 1000; /* Ensure the filter container is above other elements: this includes all it's wrapped elemnents including the drop-down menu itself! */
  position: relative;
  display: inline-block;
  min-width: 99px;
  margin-left: 8.5rem; /* Add relative margin to the left to work on different devices*/
}

/* Filter Button */
.filter-button {
  /* POSITION RELATED */
  padding: 7px 17px; /* Space around the text itself */

  /* DISPLAY RELATED */
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  background-color: white !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

  /* ANIMATION RELATED */
  transition: background-color 0.3s ease; /* Speed at which transitions happen for the background-color: hovering*/
  cursor: pointer;
}

/* Filter button hover animation*/
.filter-button:hover {
  background-color: #f1f1f1 !important;
}

/* START OF FILTERS DROP DOWN MENU */
.dropdown-menu-filter {
  /* POSITION RELATED */
  position: absolute; /* Removing this will cause the drop-down menu to push all cards/entire page down! Absolute meaning it can have other elements on it */
  top: 100%;
  display: none;
  width: 200px;
  margin-top: 10px;

  /* DISPLAY RELATED */
  background-color: white;
  border: 1px solid #ccc;

  /* ANIMATION RELATED */
  /* transition: opacity 0.3s ease; /* Commented out till we notice an error-> transform 0.3s ease
  opacity: 0; Intially start */
  pointer-events: none;
}

/* Dropdown Options */
.dropdown-option-filter {
  padding: 10px;

  /* DISPLAY RELATED */
  font-size: 14px;
  color: black;
  text-align: left;
  cursor: pointer;
}

.dropdown-option-filter:hover {
  background-color: #f1f1f1;
}

/* Show dropdown menu when active(class we added in JAVASCRIPT) */
/* SIMPLE EXPLAINATION -> Once user clicks we add an active class to show the drop down menu */
.filter-container.active .dropdown-menu-filter {
  display: block;

  /* Animation Related -> Show Drop Down Menu */
  animation: fadeIn 0.2s ease forwards;
  opacity: 1;
  pointer-events: auto;
}

/* Hide dropdown menu with fade-out animation */
/* SIMPLE EXPLAINATION -> Once user clicks away we remove the active class to hide the drop down menu */
.filter-container:not(.active) .dropdown-menu-filter {
  animation: fadeOutTop 0.3s ease forwards;
}

/*END OF FILTERS DROP DOWN MENU*/

/* START OF SEARCH BAR RELATED */

/* Container having the entire search bar stuff */
.search-container {
  /* SIMPLE POSITIONING */
  position: relative;
  width: 11.5rem;
  min-width: 184px;
  margin-right: 8.6rem;
  border-bottom: 1px solid #ccc;
}

/* Search box: text box in which we write in */
.search-input {
  /* POSITION RELATED */
  width: 80%; /* Ensure it stops right before the icons*/
  padding: 10px 40px 10px 10px;

  /* DISPLAY RELATED */
  outline: none; /* When you click on the text box a border and outline will appear, so hide them -> outline + border*/
  border: none;
  font-size: 16px;
  background: transparent; /* Remove default white background */
}

.search-label {
  /* Position Related */
  position: absolute;
  top: 55%;
  left: 10px;

  /* DISPLAY RELATED */
  color: #999;

  /* ANIMATION RELATED */
  transition: all 0.3s ease; /*This controls the speed at which the animation "search" moves at the top - all meaning all things inside the element*/
  opacity: 0;
  transform: translateY(
    -50%
  ); /*Shifts the element down from it's original position: use animation to return to original position*/
  pointer-events: none;
}

.search-input:focus + .search-label,
.search-input:not(:placeholder-shown) + .search-label {
  top: -2px; /*This controls by how much does the label of "search" go to the top as animation*/
  font-size: 12px;
  color: #646464;
}

.search-icon {
  /* Positioniong */
  position: absolute;
  top: 25%;
  right: 40px;
  cursor: pointer;
}

.close-icon {
  /* Positioning */
  position: absolute;
  top: 25%;
  right: 7px;
  display: none; /* Make sure it's not displayed at first for interactivity */
  cursor: pointer;
}
/* END OF SEARCH BAR RELATED */
/* END OF CONTROLS: FILTER + SEARCH BAR RELATED */

/* START OF CARD RELATED */

/* Cards Container */
.cards-container {
  /* EXPLAINATION WITHOUT MEDIA QUERIES
      repeat(): Repeats a pattern for columns or rows.
      Non-responsive old way: repeat(3, 1fr) creates 3 columns with equal width.
      auto-fit: Fits as many columns as possible into the available space, Wraps columns to the next row if there's not enough space
      Minimum width: 335px (columns won't shrink below this).
      Maximum width: 1fr (columns expand to fill extra space).
 */
  /* POSITIONING */
  row-gap: 20px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(335px, 1fr)
  ); /* columns with equal width - ADJUSTED TO BECOME BETTER ON MOBILE */
  gap: 0px; /* Space between cards */
  min-width: 615px; /* Make it so that user can't shrink window beyond a certain point */
  margin: 20px; /* Space around cards container*/
  margin-top: 0px;
  padding: 100px; /* Space between card container edge and the content inside (cards) */ /* Makes the links div responsive for mobile*/
}

/* Card Container */
.card {
  /* POSITIONING */
  position: relative; /* Ensure dropdown is positioned relative to the card */
  overflow: visible; /* Allow dropdown to extend outside the card */
  width: auto; /* How much space the card takes up from a block, automatic and let the card-container grid handle it */
  margin: -5px; /* Space around the card*/
  text-align: center; /* To allign all text in the center, has to be included */

  /* DISPLAY */
  scale: 0.9;
  background-color: white !important;
  border: 1px solid #e0e0e0;
  border-radius: 10px; /* Used for rounded corners */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1); /* Shadows for design */
  justify-content: space-evenly;
}

/* Card Label */
.card-label {
  /* POSITIONING */
  position: absolute; /* Position the label absolutely (top left so it can have other stuff on it) within the card */
  top: 1%; /* Align to the top of the card */
  left: 1.5%; /* Align to the left of the card */
  height: auto;
  padding: 7.5px; /* Padding for spacing */

  /* DISPLAY */
  font-size: 12px;
  font-family: "Poppins", sans-serif; /* More modern font */
  font-weight: bold;
  color: #f5f5f5;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: black;
  border-radius: 5px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.35);
  cursor: default; /* Ensures no cursor change */
  pointer-events: none; /* Completely disables interaction */
}

/* Card Image Container */
.card-image-container {
  /* POSITIONING */
  z-index: 2; /* Ensures it remains interactive */
  position: relative; /* Changed from absolute to relative */
  width: 100%; /* Container Matches the card width */
  height: 350px; /* Increased height for more space */
  display: flex; /* Added for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  overflow: hidden; /* Prevent image overflow */
  cursor: pointer; /* Show pointer on hover */
  padding: 20px 0; /* Add padding top and bottom */
  margin: 10px 0; /* Add margin for extra spacing */
}

/* Card Image */
.card-image {
  /* POSITIONING */
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: 16 / 9;

  /* DISPLAY */
  background-color: transparent;
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Hovering over the image inside the container is what causes the hover! */
.card-image-container:hover .card-image {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* On the return, when user hovers out of card */
.card-image-container:not(:hover) .card-image {
  transform: scale(1);
  transition: transform 0.3s ease;
}

/* Card Title */
.card-title {
  margin: 10px 20px;
  padding: 0 10px;

  /* DISPLAY */
  font-size: 24px;
  font-family: "Monotype Baskerville", serif;
  font-weight: 400; /* Add this to make the font look think and clean */
  line-height: 120%;
  color: black;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  
  /* TEXT WRAPPING */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}

/* Link wrapping the card's title */
.card-title-link {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Card Type */
.card-type {
  margin: 0.5rem 0;

  /* DISPLAY */
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: normal; /* Add this to make the font look think and clean */
  line-height: 100%;
  color: #121212;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.93;
}

/* Card Mood */
.card-mood {
  font-size: 14px;
  color: #646464;
  margin: 0.7rem 0; /* Space between mood & top/bottom */
}

/* Price + ml CONTAINER*/
.card-price {
  /* POSITIONING */
  position: relative; /* Needed for absolute positioning of dropdown */
  display: flex;
  justify-content: space-between; /* Justify with space between the elements on each end */
  align-items: center;
  margin: 1px 0;
  padding: 0 20px; /* space between inner edges and the text */
}

/* Prices inside the card-price class */
.card-price .price {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

/* milliters inside the card-price class */
.card-price .ml {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

/* Card Separator between add to cart*/
.card-separator {
  height: 3.5px;
  margin: 10px 20px;
  margin-top: 5px;
  background-color: #e0e0e0;
  border: 0;
}

/* Add to Cart Button */
.card-button {
  /* POSITIONING */
  width: 80%;
  margin: auto;
  margin-top: 10px; /* Bring the button closer to the line seperator*/
  margin-bottom: 15px; /* Bring the button closer to the line seperator*/
  padding: 10px;

  /* DISPLAY */
  font-size: 15px; /* Added this line for 64px font size */
  font-family: "Poppins", sans-serif !important;
  font-weight: normal; /* Add this to make the font look think and clean */
  line-height: 100%;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Distance between letters for design */
  background-color: #fff;
  border: 0.5px solid black;
  border-radius: 5px;

  /* ANIMATION */
  transition: all 0.2s linear !important;
  cursor: pointer;
}

/* Card hovering animation: change background and text color */
.card-button:hover {
  color: white;
  background-color: black;
}

/* END OF CARD RELATED */

/* DROP DOWN MENU RELATED */

/* Dropdown Menu */
.dropdown-menu {
  /* POSITIONING */
  z-index: 1; /* Ensure it appears above other elements */
  position: absolute;
  top: 100%; /* Position at the bottom of the parent */
  left: 20px; /* Align with the left padding of the parent */
  right: 20px; /* Align with the right padding of the parent */
  display: none; /* Always visible for animation purposes */
  box-sizing: border-box; /* Include padding and border in the width calculation */
  width: calc(100% - 40px); /* Account for padding in parent */
  margin-top: 10px; /* Adjust spacing to align with the line separator */

  /* DISPLAY */
  background-color: white;
  border: 1px solid black;

  /* ANIMATION */
  /* transition: opacity 0.3s ease, transform 0.3s ease; Smooth transition */
  opacity: 0; /* Start hidden */
  transform: translateY(-10px); /* Start slightly above */
  pointer-events: none; /* Disable interaction when hidden */
}

/* Dropdown Options */
.dropdown-option {
  /* POSITIONING */
  display: flex;
  justify-content: space-between; /* Align price and ml on opposite ends */
  padding: 10px;

  /* DISPLAY */
  font-size: 14px;
  color: black;
  text-align: left;
  cursor: pointer;
}

/* Style for Dropdown Price and ML: */
.dropdown-price {
  font-weight: bold;
  color: #333;
}
.dropdown-ml {
  color: #666;
}

/* Hover effect for dropdown options */
.dropdown-option:hover {
  background-color: #f1f1f1;
}

/* Show dropdown menu when active */
.card-price.active .dropdown-menu {
  /* ANIMATION */
  animation: fadeIn 0.2s ease forwards;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Enable interaction when visible */
}

/* Hide dropdown menu with fade-out animation */
.card-price:not(.active) .dropdown-menu {
  animation: fadeOutTop 0.3s ease forwards;
}

/* END OF DROP DOWN MENU RELATED */

/* BACK TO TOP BUTTON RELATED */
#back-to-top-div {
  /*This is so the div can be put on other elements - overrides the display:block i think*/
  position: absolute;

  /* Positioning at the bottom right */
  top: 90%;
  margin-left: 94.5%;

  animation: moveFromBottom 1.35s ease-in-out; /* Animation to move in manually when loading screen because scrolly wouldn't work!*/
}

#back-to-top-button {
  width: auto;
  height: auto;
  padding: 10px;
  text-align: center;

  /* This is so that the button scroll down along side the user regardless of it's parent div being absolute */
  position: fixed;

  font-size: 12px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 7px;
  transition: background-color 0.3s ease; /* Speed at which transitions happen for the background-color for example hovering*/
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

  /* So that it appears above other elements */
  z-index: 1001;
  cursor: pointer; /* Make it look clickable */

  /* For resizing */
  margin-right: 0.5rem;
  min-width: 76px;
  min-height: 40px;

  /* Intially hidden to only appear at a certain point */
  opacity: 0;
  cursor: default;
  /* This controls how fast the animation for opacity/fading in/out happens! Used with appearing at certain scroll position */
  transition: opacity 0.5s ease;

  scale: 0.9;
}

#back-to-top-button:hover {
  background-color: #f1f1f1 !important; /*CHANGING THE Background 'S BACKGROUND COLOR WORKED ONLY WHEN I PUT !IMPORTANT*/
}

/* To Top Responsive Styles for Mobile Devices */
@media (max-width: 1400px) {
  #back-to-top-div {
    /* Adjust positioning for smaller screens */
    top: 90%; /* Move it slightly higher */
    margin-left: 80%; /* Move it closer to the left */
  }

  #back-to-top-button {
    /* Make the button smaller on mobile */
    padding: 8px;
    font-size: 10px;

    /* IF THESE ARE REMOVED, the button doesn't find any space and jumps at a random location on the screen! */
    /* Adjust positioning for smaller screens */
    bottom: 60px; /* Distance from the bottom */
    right: 10px; /* Distance from the right */
  }
}

/* END OF BACK TO TOP BUTTON RELATED */

/* KEYFRAMES RELATED */

/* Fade in animation used for drop down menu */
@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-10px); /* Adjust for a subtle fade-in */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out animation - drop down menu*/
@keyframes fadeOutTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px); /* Adjust for a subtle fade-out */
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.15;
  } /* Adjusted starting opacity to look smoother when hovering out of card's image */
  to {
    opacity: 1;
  }
}

/* New for leaving image container animation! */
@keyframes moveFromBottom {
  from {
    transform: translateY(800px);
  }
}

/* End of KEYFRAMES related */

/* Media queries for responsive design */

/* Large devices (less than 992px) */
@media (max-width: 992px) {
  #header {
    font-size: 48px;
    top: 80px;
    min-width: 0;
    width: 100%;
  }

  .middle-links {
    top: 85px;
    min-width: 0;
    width: 100%;
  }

  .controls-container {
    top: 5rem;
    min-width: 0;
    width: calc(100% - 40px);
  }

  .filter-container {
    margin-left: 4rem;
  }

  .search-container {
    margin-right: 2rem;
  }

  .cards-container {
    min-width: 0;
    width: 100%;
    padding: 80px 40px 40px 40px;
    margin: 0;
  }
}

/* Medium devices (less than 768px) */
@media (max-width: 768px) {
  #header {
    font-size: 36px;
    top: 60px;
  }

  .middle-links {
    top: 65px;
  }

  .middle-links ul {
    gap: 15px;
    flex-wrap: wrap;
    padding: 0 15px;
  }

  .controls-container {
    top: 7rem;
    gap: 20px;
    align-items: center;
  }

  .filter-container {
    margin-left: 2.1em;
  }

  .search-container {
    margin-right: 0;
  }

  .cards-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 120px 20px 40px 20px;
  }

  .dropdown-menu {
    max-height: 150px; /* Limit height on small screens */
  }

  .custom-offcanvas {
    min-width: 50% !important;
  }
}

/* Small devices (less than 620px) */
@media (max-width: 620px) {
  #header {
    font-size: 28px;
    top: 65px;
  }

  .middle-links {
    top: 70px;
  }

  .middle-links ul {
    gap: 20px;
    font-size: 12px;
  }

  .filter-button {
    padding: 5px 12px;
    font-size: 0.7rem;
  }

  .search-container {
    width: 70%;
  }

  .cards-container {
    grid-template-columns: 1fr;
    padding: 120px 10px 40px 10px;
  }

  .card-title {
    font-size: 20px;
    line-height: 125%;
    margin: 8px 15px;
    padding: 0 8px;
  }

  .card-type {
    font-size: 14px;
  }

  .card-mood {
    font-size: 12px;
  }

  .card-price .price,
  .card-price .ml {
    font-size: 13px;
  }

  .card-button {
    font-size: 14px;
    padding: 8px;
  }
}

/* Extra Small devices (less than 400px) */
@media (max-width: 400px) {
  #header {
    font-size: 24px;
  }

  .card-title {
    font-size: 18px;
    line-height: 130%;
    margin: 6px 10px;
    padding: 0 5px;
  }

  .middle-links ul {
    font-size: 11px;
  }

  .dropdown-menu-filter {
    width: 180px;
  }

  .filter-container {
    margin-left: 12px;
  }

  .cards-container {
    row-gap: 25px;
  }

  .card {
    scale: 1;
    margin: 0;
  }

  .card-image-container:hover .card-image {
    animation: none; /* Disable animation on very small screens */
  }

  #back-to-top-div {
    margin-left: 70%;
  }
}


.card.hidden {
  display: none !important;
}