/* Cart Container */
.cart-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Cart Title */
.cart-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

/* Cart List */
.cart-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Individual Cart Item */
.cart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Cart Image */
.cart-image img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Cart Details */
.cart-details {
    text-align: center;
}

.product-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.product-price {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
}

/* Remove Button */
.remove-button {
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-button:hover {
    background-color: #e60000;
}

/* Empty Cart */
.empty-cart {
    text-align: center;
    padding: 50px;
    color: #666;
}

.empty-cart h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.empty-cart p {
    font-size: 1rem;
}
/* Favorites Container */
.favorites-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Favorites Title */
.favorites-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

/* Favorites List */
.favorites-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Individual Favorite Item */
.favorite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favorite-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Favorite Image */
.favorite-image img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Favorite Details */
.favorite-details {
    text-align: center;
}

.product-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.product-price {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
}

/* Remove Button */
.remove-button {
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-button:hover {
    background-color: #e60000;
}

/* Empty Favorites */
.empty-favorites {
    text-align: center;
    padding: 50px;
    color: #666;
}

.empty-favorites h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.empty-favorites p {
    font-size: 1rem;
}
/* General container setup */
.home-page {
    display: flex;
    align-items: stretch;
}





.login-container {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    font-family: 'Rocket Rinder', sans-serif;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.login-form .field {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.form-input {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-checkbox {
    margin-right: 0.5rem;
}

.form-checkbox-label {
    font-size: 0.9rem;
    color: #333;
}

.btn-primary {
    width: 100%;
    padding: 0.8rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary:hover {
    background-color: #111;
}

.login-links {
    margin-top: 1rem;
    text-align: center;
}

.login-links a {
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
}

.login-links a:hover {
    text-decoration: underline;
}
 @import 'nav';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
body {
margin: 0;
padding: 0;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li.left_side {
float: left;
border-right: 1px solid #ccc;
}
.navbar li.first {
border-left: 1px solid #ccc;
}
.navbar li.right_side {
float: right;
border-left: 1px solid #ccc;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
ul.navbar .brand {
/* Remove or reduce margins to match other items */
margin-left: 2rem;
margin-right: 2rem;
/* Add the same vertical padding as .navbar li a */
padding: 0;
display: block;
color: rgb(171, 171, 171);
text-align: center;
border: 0;
font-family: 'Stalinist One', sans-serif;
font-size: 2em;
}
.navbar-search-form {
display: inline-block;
margin-left: 15rem;
padding: .5rem;
}
.navbar-search-field {
padding: .3rem;
font-size: 14px;
width: 30rem;
}
.navbar-search-button {
padding: 5px 10px;
font-size: 14px;
background-color: #848484;
color: white;
border: none;
cursor: pointer;
}
.navbar-search-button:hover {
background-color: #6b6b6b;
}
/* General Product Page Styles */
.header-section {
  margin-left: 3rem; 
  text-align: left;
}

.product-header-section {
  margin-left: 3rem; 
  margin-bottom: 0;
  text-align: left;
}

.category-divider {
  border: 0;
  border-top: 1px solid #ccc; /* Customize thickness and color */
  margin: 0 1rem 0 1rem;           
}

.product_title {
    text-align: left;
    margin-bottom: 2rem;
  }

  .all-products-page {
    margin-left: 16rem; /* Adjust this to be slightly more than the aside's width */
    padding: 1rem;
    flex-grow: 1;
    display: block;
  }
  

  .product-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-top: 0;
    border-top: 0;
  }
  
  /* Styles for All Products Page */
  .all-products-page .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    /* margin-top: 20px; */
  }
  
  .all-products-page .product-item {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .all-products-page .product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  
  .all-products-page .product-item img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
  }
  
  .all-products-page .list-product-link {
    /* text-align: center; */
    margin-bottom: 2rem;
  }
  
  .all-products-page .product-link {
    text-decoration: none;
    color: black;
  }
  
  .all-products-page .product-link:hover {
    text-decoration: none;
    color: black;
  }
  
  /* Buttons */
  .btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
  }
  
  .btn-primary {
    background-color: #007bff;
  }

  .btn-delete {
    background-color: #ff1919;
  }
  
  .btn-primary:hover {
    background-color: #0056b3;
  }
  
  .btn-success {
    background-color: #28a745;
  }
  
  .btn-success:hover {
    background-color: #218838;
  }
  
  /* Styles for the Product Details Page */
  .product-details-page .product-details {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0 50px;
  }
  
  .product-details-page .product-image {
    text-align: center;
  }
  
  .product-details-page .product-image h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }
  
  .product-details-page .product-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

    .product-details-page .product-category {
      text-align: center;
      list-style-position: inside;
      margin-top: 10px;
    }
  
  .product-details-page .product-features {
    text-align: center;
    list-style-position: inside;
    margin-top: 10px;
  }
  
  .product-details-page .product-features ul {
    padding-left: 0;
    margin: 0;
  }
  
  .product-details-page .product-features li {
    margin-bottom: 5px;
  }
  
  .product-details-page .product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
  }

  .product-details-page .price-and-favorite {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .product-details-page .product-price {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  .product-details-page .product-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .product-details-page .product-buttons .btn {
    width: 200px;
    padding: 10px;
    border-radius: 5px;
  }
  
  .product-details-page .product-buttons .btn-primary {
    background-color: #007bff;
  }
  
  .product-details-page .product-buttons .btn-primary:hover {
    background-color: #0056b3;
  }
  
  .product-details-page .product-buttons .btn-success {
    background-color: #28a745;
  }
  
  .product-details-page .product-buttons .btn-success:hover {
    background-color: #218838;
  }
  
  /* Styles for the Product Form */
  .form-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .product-form {
    width: 50%;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
  }
  
  .form-control:focus {
    border-color: #007bff;
    outline: none;
  }
  
  .btn-primary {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .btn-primary:hover {
    background-color: #0056b3;
  }

  
  .image-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
  }

  .image-input:focus {
    border-color: #007bff;
    outline: none;
  }

  .form-text {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 5px;
  }

  .favorite-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
  }

  .favorite-button:hover {
      transform: scale(1.1);
  }

  .heart-icon {
      color: #ff4757; /* Red color for filled heart */
  }

  .favorite-button:not(:hover) .heart-icon {
      opacity: 0.8;
  }

.profile-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .profile-container h1,
  .profile-container p {
    text-align: left;
  }
  
  .profile-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns */
    gap: 10px;
    margin-top: 20px;
  }
  
  .profile-option {
    display: block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .profile-option:hover {
    background-color: #0056b3;
  }
  
  /* Media query for smaller screens */
  @media (max-width: 600px) {
    .profile-options {
      grid-template-columns: 1fr; /* Single column layout */
    }
  }
.aside-bar {
    position: fixed;      /* Fixes the element in the viewport */
    top: 3em;            /*   Aligns it with the top of the viewport */
    left: 0;              /* Aligns it with the left side */
    width: 14rem;         /* Set a fixed width, as before */
    height: calc(100vh - 3em);       /* Make it span the full viewport height */
    overflow-y: auto;     /* Allow vertical scrolling inside the aside if content is tall */
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
}

.aside-title {
    font-size: 1.5rem;
    color: #333;
    text-align: center;
    margin-bottom: 1rem;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5rem;
    list-style: none;
}

.aside-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aside-item {
    font-size: 1rem;
    color: #555;
    padding: 0.8rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

.aside-item a {
    color: inherit;         /* Match the parent element's color, or choose your own */
    text-decoration: none;  /* Remove underline */
}


.aside-item:last-child {
    border-bottom: none;
}

.aside-item:hover {
    background-color: #e0e0e0;
    color: #000;
}

.aside-item:active {
    background-color: #ccc;
}

/* Adjust for Smaller Screens */
@media (max-width: 768px) {
    .aside-bar {
        width: 100%;
        margin: 1rem 0;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *


 */

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 /*
 @layer components {
   .btn-primary {
     @apply py-2 px-4 bg-blue-200;
   }
 }
 */
 
 @import 'nav';

 html {
  scroll-behavior: smooth;
}
 
 .site-title, .footer-title {
   padding-left: 1rem;
   text-align: center;
 }
 
 .sub-title {
   padding-left: 1rem;
   padding-top: .05rem;
   margin-top: .05rem;
 }
 
 .slideshow-container {
   max-width: 100%;
   overflow: hidden; /* Hide overflow to create sliding effect */
   position: relative;
   flex: 3;
   background-color: #dcdcdc;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .slides-wrapper {
   display: flex; /* Arrange horizontally */
   transition: transform 1s ease-in-out; /* Smooth slide transition */
 }
 
 .mySlides {
   min-width: 100%; /* Make each slide occupy full container width */
   box-sizing: border-box; /* Prevent padding issues */
 }
 
 .product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 16px;
   padding: 20px;
 }
 
 .product-item {
   border: 1px solid #ccc;
   padding: 10px;
   text-align: center;
   background-color: #f9f9f9;
 }
 
 .product-item img {
   width: 100%;
   height: auto;
 }
 
 @font-face {
   font-family: 'Rocket Rinder';
   src: url(/assets/RocketRinder.otf) format('opentype');
   font-weight: bold;
   font-style: normal;
 }