/* Ensure the body and html take full height */
html, body {
    height: 100%;
    margin: 0;
    box-sizing: border-box; /* Ensure padding and borders are included in total width and height */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.container-fluid {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
}


.row.flex-nowrap {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
}
/* Ensure the custom main-container fits within the main-content */

/* Sidebar styling */
#sidebarMenu {
    position: fixed;
    top: 71px; /* Height of the navbar */
    bottom: 0;
    left: 0;
    height: calc(100vh - 71px); /* Adjust for navbar height */
    width: 210px; /* Adjust this value to set the width of the sidebar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    z-index: 100; /* Ensure sidebar is on top */
    background-color: #f8f9fa;
}



.sidebar-sticky {
    position: relative;
    height: 100%;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scroll when content overflows */
}



/* HEADINGS: Center only the headings, not the nav links */
.sidebar-heading {
    font-size: 0.9rem;
    text-transform: uppercase;
    padding-top: 0.85rem;
    margin-bottom: 1rem;
    
}


/* Optional: Customize scrollbar for sidebar */
.sidebar-sticky::-webkit-scrollbar {
    width: 8px;
}

.sidebar-sticky::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light grey track */
}

.sidebar-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

/* Make category names slightly bold */
.category-name {
    font-weight: 500;
}

/* The nav area */
.nav.flex-column {
    width: 100%;
    padding: 0;
    margin: 0;
}

.nav-item {
    width: 100%;
    margin-bottom: 2px;
}

/* Base styles for nav links */
.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left aligned */
    /* width: 100%;   <-- Remove this */
    margin: 0 8px;   /* Add horizontal margins so background doesn't touch sidebar edges */
    padding: 8px 15px;
    color: #333333; /* 2025ish black (modern dark shade) */
    font-family: 'Poppins', sans-serif !important; /* Clean, modern font */
    border-radius: 4px;
    margin-bottom: 1px;
    transition: background-color 0.3s ease, color 0.3s ease;
    

}

/* Hover state: subtle highlight */
.nav-link:hover {
    background-color: #f1f1f1; /* Light grey hover background for a modern feel */
    color: #28a745;            /* Green accent color on hover */
    font-weight: 500;          /* Keep text bold on hover */
    text-decoration: none;     /* Remove underline on hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
}

/* Active link styling */
.nav-link.active {
    background-color: #ced4da;
    color: #333333;
    font-weight: 600;
}


/* The small icon container to keep icons consistent */
.icon-container {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;   /* Shift the icon to the left */
    margin-right: 12px;
}

/* Icon styling */
.icon-container .fa-solid {
    font-size: 1.3rem;     /* Keep the icon size consistent */
}

.nav-link .bi {
    font-size: 1.2rem; /* Adjust as needed */
}

.nav-link .fa-solid {
    font-size: 1.7rem;  /* Adjust this value to increase or decrease the size */
}

/* LOGOUT: remove rectangle & make it look like other nav-links */
.nav-logout-form {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Button as a link */
.btn-logout.nav-link {
    background: none;
    border: none;
    color: #333333;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-logout.nav-link:hover {
    background-color: #e9ecef;
    color: #242424;
    font-weight: bold;
    text-decoration: none;
}

.btn-logout.nav-link:focus {
    outline: none;
}
.btn-logout.nav-link:focus-visible {
    outline: none;
}

/*Nav bar code*/
.site-nav {
    position: fixed; /* Add this line */
    background-color: #f8f9fa;
    padding: 3px 6px;
    border-bottom: 1px solid #ddd;
    width: 100%;
    margin: 0 auto;
    top: 0; /* Add this line */
    z-index: 1000; /* Add this line to ensure the navbar is on top */
  }
  
    /* By default, hide the .mobile-nav on large screens */
    /* by default: */
.desktop-nav { display: block; }
.mobile-nav { display: none; }


    
    .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  /* On large screens, nav-left + nav-right side by side. */
    }
    
        /* ============= Left Section (Logo + Search) ============= */
    .nav-left {
        display: flex;
        align-items: center;
    }
    
    .nav-logo {
      display: flex;
      align-items: center;
      height: 100px; /* Lock height */
      overflow: hidden;
  }
  
  
   
    .nav-logo img {
        max-height: 100%;  /* Increase max height to fit better */
        width: auto;
        object-fit: contain;
        transition: max-height 0.3s ease;
    }

        /* The search form next to the logo (on large screens) */
    .nav-search {
        margin-left: 60px; /* spacing between logo and search */
        width: 800px;  /* keep search from going huge */
        font-family: 'Poppins', sans-serif;
    }
    
            
    .search-container {
        display: flex;
        align-items: center;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 5px;
    }
        
    .search-icon {
    margin-right: 10px;
    }
        
            
    .search-input {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 5px;
    }
    
    .search-input:focus {
        outline: none; /* Remove the default browser focus outline */

        border: 1.8px solid #388e3c; /* Change the border color to blue on focus */
        box-shadow: 0 0 2px rgba(131, 220, 166, 0.2); /*_ Optional: Add a subtle box shadow on focus */
    }
        
    
    
    
/* ============= Right Section (Top & Bottom Items) ============= */
    .nav-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* on large screens => 2 small 'rows': nav-item-top & nav-item-bottom */
    }
      
    /* "Become a supplier", "Speak to CEO" row */
    .nav-item-top {
        display: flex;
        gap: 15px;
        margin-bottom: 2px;
    }
      
        /* "Profile/Login", date, cart row */
    .nav-item-bottom {
        display: flex;
        align-items: center;
        gap: 15px;
    }

     
    .nav-link-item {
        text-decoration: none !important;
        color: #333 !important;
        margin-left: 20px;  /* spacing between items */
        align-items: center;
        gap: 3px;
    }

     /* Default styles for the cart button */
     .custom-cart-btn {
        background-color: white; /* Black background */
        color: black; /* White text */
        border: 1.6px solid #000000; 
        transition: all 0.3 ease; /* Smooth transition for hover effects */
        text-decoration: none; /* Remove underline */
    }

    /* Default styles for the cart badge */
    .cart-badge {
        background-color: #4caf50 !important;
        color: white; /* White badge text */
        font-weight: bold; /* Bold text */
        transition: all 0.3s ease; /* Smooth transition */
        padding: 0.5em 0.7em; /* Adjust the padding to make it circular */
        border-radius: 50%; /* Ensure it's circular */
    }

    /* Hover effects for the cart button */
    .custom-cart-btn:hover {
        background-color: #ff9900; /* Orange background on hover */
        color: white; /* White text on hover */
        
    }

    /* Hover effects for the cart icon */
    .custom-cart-btn:hover .cart-icon {
        color: white; /* Ensure icon stays white on hover */
    }

    /* Hover effects for the cart badge */
    .custom-cart-btn .cart-badge:hover {
        background-color: rgb(32, 216, 39) !important; /* Light blue background on hover */
        color: #ffffff; /* Change text to black on hover */
        transform: scale(1.1); /* Slightly increase the size of the badge */
    }

    .product-description,
    .product-warning,
    .product-return-policy {
      margin-top: 20px;
    }

    .product-description h3,
    .product-warning h4,
    .product-return-policy h4 {
      color: #4caf50;
    }

    .product-description p,
    .product-warning p,
    .product-return-policy p {
      font-size: 1rem;
      line-height: 1.5;
    }

    /* Profile/Login link styling */
    .profile-link {
        text-decoration: none;
        color: #333;
    }
    .profile-link:hover {
        text-decoration: none;
        color: #000;
    }
    .current-date-link{
      text-decoration: none;
      color: #333;
    }
      

        /* Location and Calendar icons - green */
    .nav-right .nav-item-bottom .fa-map-marker-alt,
    .nav-right .nav-item-bottom .fa-calendar-alt {
        color: #000000!important; /* Green with high specificity */
    }

    /* Supplier and CEO icons - orange */
    
    .nav-right .nav-item-top .fa-headphones {
        color: #ff9900 !important; /* Orange with high specificity */

    }
    .nav-right .nav-item-top .fa-store{
        color: #28a745 !important; /* Green with high specificity */

    }


    
      
    .nav-link-item span {
        font-family: 'Poppins', sans-serif !important; /* Change this to your desired font family */
        line-height: 1.5; /* Adjust spacing for a calmer look */
        
        font-weight: 600;
        color: #000000;
        transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transitions */
        padding: 2px 4px; /* Add this to match hover state */
        border-radius: 5px; /* Add this to match hover state */
    }
    .nav-right .nav-link-item span, 
    .nav-right #current-date {
        font-family: 'Poppins', sans-serif !important; /* Modern and lightweight feel */
        font-size: 16px; /* Slightly smaller font for elegance */
        color: #000000; 
        font-weight: 500; /* Regular weight for readability */
        line-height: 1.5; /* Adjust spacing for a calmer look */
    }

   

    /* 5. Ensure the link text style remains your usual black text, no underline, etc. */
    .nav-link-item .current-date-link span#current-date {
      font-family: 'Poppins', sans-serif !important;
      font-size: 16px;
      color: #000;
      font-weight: 500;
      line-height: 1.5;
    }

      
      .nav-link-item span:hover {
        background-color: #f4d6912a;
        padding: 4px 4px;
        border-radius: 3px;
        color: #333;
        cursor: pointer;
        transform: none;
      }
      
      
      .nav-item-top .nav-link-item span {
        margin-left: 2px;
      }
      
      .nav-item-bottom .nav-link-item span {
        margin-left: 2px;
      }
      
      #current-date {
        font-family: 'Poppins', sans-serif !important;; /* Change this to your desired font family */
      }
     
      
      .nav-right .nav-item-bottom .fa-user {
        color: #000000 !important; /* Orange with high specificity */

      }  


      .badge-perishables {
        background-color: #c8e6c9; /* Pale green background */
        color: #388e3c; /* Dark green text color */
        padding: 0.25em 0.75em; /* Adjust padding if necessary */
        font-size: 0.8rem; /* Adjust font size if necessary */
        border-radius: 0.2rem; /* Rounded corners */
        font-weight: bold; /* Make text bold */
    }

    /* Space after the badge */
    .badge-perishables + .card-body a {
        margin-top: 10px; /* Increase the space after the badge */
    }

    
.mobile-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding: 2px 4px;
    position: fixed;
    top: 0;
    z-index: 1105; /* slightly above the desktop nav */
  }
  
  .mobile-nav-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Row 1 => logo left, profile/cart right */
  .mobile-nav-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-nav-left .nav-logo {
    display: flex;
    align-items: center;
    height: 55px; /* Lock height */
    overflow: hidden;
  }

  .mobile-nav-left .nav-logo img {
      max-height: 100%; /* Fill container */
      width: auto;
      object-fit: contain;
  }

  /* Row1 right => user/cart */
  .mobile-nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

      
  /* Stack icons vertically in the container */
  .user-meal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5px; /* maintain minimal spacing between icons */
    height: 35px;  /* set fixed height to match the Cart's height */
    justify-content: center;  /* center the icons vertically */
  }


  /* Ensure all icons have a consistent size */
  .user-meal-container i {
    font-size: 1rem; /* Tweak this to control icon size */
  }

    /* Tooltip styling for the meal planning link */
  .tooltip-link {
    position: relative;
  }

  /* Remove the hover rule if present */
  /* .tooltip-link:hover::after {
    opacity: 1;
  } */

  .tooltip-link::after {
    content: "Schedule a Meal!";
    position: absolute;
    top: 80%;  /* Position the tooltip relative to the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; /* Start hidden */
    animation: tooltipCycle 5s infinite;
  }

  /* Keyframes to make the tooltip appear briefly every cycle */
  @keyframes tooltipCycle {
    0%, 50%, 100% { opacity: 0; }
    55%, 70% { opacity: 1; }
  }
  .nav-link-item,
  .meal-planning-link {
      margin: 0;
      padding: 0;
  }


  /* Hide mobile-only elements on larger screens */
  @media (min-width: 769px) {
    .mobile-only-link {
        display: none !important;
    }
  }


  
  /* Row 2 => search (full width) */
  .mobile-nav-row2 form.nav-search-mobile {
    width: 100%;
    display: flex;
    justify-content: center; /* or stretch */
  }
  
  /* Tweak your .search-container / .search-input as needed */
  .mobile-nav-row2 .search-container {
    width: 90%;
    margin: 0 auto; 
    /* if you want a narrower input on phone */
    background: #fff;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1px;
  }
  
  .mobile-nav-row2 .search-icon {
    margin-right: 8px;
  }
  
  .mobile-nav-row2 .search-input {
    border: none;
    outline: none;
    width: 100%;
  }
   
      



            /* Location and Calendar items - green */
                /* Location and Calendar icons - green */
       
    /* =================== RESPONSIVE BREAKPOINTS =================== */

    /* 1) Up to 992px => maybe shrink the logo & search more */
    @media (max-width: 992px) {
        
        .custom-cart-btn {
            font-size: 0.9rem;
            padding: 5px 5px;
            border-width: 1.2px;
        }
    }
    
    .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
    }  

    
   
        
       
    /* Logo, search, and cart scaling on smaller screens */
@media (max-width: 768px) {
    /* Hide top row items (CEO, supplier) */
    .nav-item-top {
        display: none !important;
    }
    /* Show the .mobile-nav below 768px */

    .desktop-nav { display: none !important; }
    .mobile-nav { display: block !important; }
    /* Scale down the logo */
    
    
    .custom-cart-btn {
        font-size: 0.8rem;
        padding: 5px 5px;
        border-width: 1px;
    }
    .mobile-nav-row2 form.nav-search-mobile {
        width: 100%;             /* row is full width */
        display: flex;
        justify-content: center; /* center the search container horizontally */
      }
    .mobile-nav-row2 .search-container {
        width: 90%;              /* or 95%, etc. */
        margin: 0 auto;          /* horizontally center */
        background: #fff;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1px;
      }
      
      .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
      }
      .current-date-link{
        text-decoration: none;
        color: #333;
      }  


}


@media (max-width:576px){
  .toast{ font-size:.85rem; }
}


/* 3) Up to 576px => possibly shrink more */
@media (max-width: 576px) {
    
    .mobile-nav {
        display: block; /* or flex, whichever you prefer */
      }
      .site-nav {
          display: none !important;
      }
      
      .custom-cart-btn {
        font-size: 0.7rem;
        padding: 2px 2px;
        border-width: 1px;
    }

    .mobile-nav-row2 form.nav-search-mobile {
        width: 100%;             /* row is full width */
        display: flex;
        justify-content: center; /* center the search container horizontally */
      }
    .mobile-nav-row2 .search-container {
        width: 100%;              /* or 95%, etc. */
        margin: 0 auto;          /* horizontally center */
        background: #fff;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 1px;
      }
      
      .mobile-nav-right .nav-link-item .fa-user {
        color: #000000 !important; /* Orange with high specificity */
        font-size: 0.8rem;  /* or adjust to a smaller size, e.g., 0.9rem */
      }
      .nav-right .nav-item-bottom .fa-calendar-alt {
        color: #000000!important; /* Green with high specificity */
      } 
      .current-date-link{
      text-decoration: none;
      color: #333;
    } 
    
}

/* ========== 3-Column Footer ========== */
.site-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  /* Shift the footer right to avoid the 210px sidebar on large screens */
  margin-left: 210px; 
  width: calc(100% - 210px);
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  margin-top: 30px; /* optional spacing above the footer */
}

.footer-container {
  max-width: 1200px; /* center columns on wide screens if you like */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

  
  .footer-col {
    flex: 1; /* each column takes up 1 part of the space */
   

  }

  
  
  .footer-col h5 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
  }
  
  /* Unordered lists for links */
  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .footer-col ul li {
    margin-bottom: 8px;
  }
  
  .footer-col ul li a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-col ul li a:hover {
    color: #28a745; /* a green hover or your brand color */
  }
  .mobile-only-link a{
    text-decoration: none;
  }
  
  /* Store badge icons */
  .store-badges a img {
    height: 40px;
    margin-right: 20px;
    margin-top: 5px;
  }

  .floating-ad-container {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none; /* So it doesn’t block clicks below, card restores pointer-events */
  }
  .floating-ad-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    padding: 24px 20px 18px 20px;
    max-width: 340px;
    width: 92vw;
    text-align: left;
    position: relative;
    pointer-events: auto;
    animation: fadeIn 0.8s;
  }

  .ad-close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #363636;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1.5px 6px rgba(44,90,80,0.08);
  transition: background 0.2s, color 0.2s;
  padding: 0;
  line-height: 1;
  }
  .ad-close-btn:hover {
    background: #ffeaea;
    color: #d33;
    border-color: #ffbdbd;
  }

  @keyframes fadeIn {
    0%   { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  
  /* ========== Responsive: stack columns on small screens ========== */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      align-items: flex-start;
    }
    .site-footer {
      margin-left: 0 !important; 
      width: 100% !important;
    }

    .footer-col {
      width: 100%;
      margin-bottom: 20px;
    }
    
  }
  @media (min-width: 769px) {
    .mobile-only-link {
      display: none !important;
    }
  }
  
  
  /* ========== Hide Footer on Mobile EXCEPT on product_list page ========== */
  /* We'll use a body class or a block override called "product-list-page" 
     so only that page shows the footer on small screens. 
     For all other pages, the footer is hidden below 768px. 
  */
  @media (max-width: 768px) {
    .site-footer:not(.product-list-page) {
      display: none !important;
    }

    #sidebarMenu {
      display: none; 
    }
  
  }