#thank-you-container {
    display: none; /* Hidden initially */
    text-align: center;
    padding-top: 50px;
}

.thank-you-box {
    max-width: 600px;
    margin: auto;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Ensures everything inside is centered */
    font-family: Arial, sans-serif; /* Matches existing styles */
}

.thank-you-box h1 {
    font-size: 2.5rem;
    color: #28a745;
    font-family: Arial, sans-serif; /* Ensure consistency */
}

.thank-you-box p {
    font-size: 1.2rem;
    color: #555;
    font-family: Arial, sans-serif; /* Matches navigation links */
}

.thank-you-box .btn {
    font-family: Arial, sans-serif; /* Ensures buttons match the rest of the page */
    font-size: 18px;
}


#cart-items {
    font-size: 0.9em; /* Adjust the font size as needed */
    max-height: 500px;  /* Adjust this value as needed */
    overflow-y: auto;
}
#cart-items th, #cart-items td {
    padding: 5px; /* Adjust the padding as needed */
}
#cart-items th {
    text-align: left;
}

.hidden-amount {
    display: none;
}

.navigation-menu {
    text-align: center;
    background-color: #f8f9fa;
    /*border-radius: 0.25rem;*/
    padding: 0.5rem;
    background: linear-gradient(135deg, #6a0dad, #b57edc);
    margin-bottom: 20px; /* Adjust the value as needed */
}

#flavorModalLabel {
    text-align: center;
}
  
#flavor-card-container {
    display: flex;
    justify-content: center;
}
  
.navigation-menu ul {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.navigation-menu ul li {
    display: inline;
}

.navigation-menu ul li a {
    color: #007bff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.navigation-menu ul li a:hover {
    background-color: #5a2d82; /* A darker shade of purple */
    border-color: #5a2d82; 
}

#navigation-links {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  #navigation-links li {
    display: inline-block;
    margin: 0 10px;
    color: white;
    
    font-family: Arial, sans-serif; 
  }

  #navigation-links a {
    color: white;
    font-family: Arial, sans-serif; 
    background-color: #5a2d82; /* A darker shade of purple */
    border-color: #5a2d82;
    font-size: 20px;
  }

  /* Media query for mobile devices */
@media screen and (max-width: 600px) {
    #navigation-links li {
      display: block;
      width: 100%;
      text-align: center;
    }
  }
/* Light mode styles */
.featured-group {
    background-color: #e0f7fa; /* Light cyan background */
    border: 4px solid #00acc1; /* Cyan border */
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* Style for <pre> to match <p> */
.card-description {
    font-family: inherit; /* Match the font family */
    font-size: inherit; /* Match the font size */
    color: inherit; /* Match the text color */
    line-height: inherit; /* Match the line height */
    margin: inherit; /* Match the margin */
    padding: inherit; /* Match the padding */
    white-space: pre-wrap; /* Ensure that the text wraps */
}


.featured-group h3 {
    color: #00796b; /* Teal color for the header text */
    font-weight: bold;
    text-transform: uppercase;
}

/* Dark mode styles */
body.dark-mode .featured-group {
    background-color: #263238; /* Dark blue-grey background */
    border: 4px solid #37474f; /* Dark grey border */
}

body.dark-mode .featured-group h3 {
    color: #80deea; /* Light cyan color for the header text */
}


.modal-content { 
    display: flex; 
    flex-direction: column; 
    height: 100%;
    }


    
.sticky-header {
    width: 100%; /* Make sure the header takes up the full width */
    padding: 10px; /* Add some padding to the header */
    box-sizing: border-box; /* Ensure padding is included in the width */
}
    
.custom-condensed-table {
    font-size: smaller;
    margin-left: 20px;
    color: black !important; /* Ensure the text color remains black */
}
    

.modal-body .col-md-8 {
    flex: 1;
}

.quantity-btn {
    border-color: #ced4da; /* Match the border color of the input */
    background-color: #ffffff; /* Match the background color of the input */
    color: #495057; /* Match the text color of the input */
}

.quantity-btn:hover,
.quantity-btn:focus,
.quantity-btn:active {
    background-color: #e9ecef; /* Slightly darker background on hover */
    border-color: #ced4da; /* Match the border color of the input */
    color: #6c757d; /* Darker color when highlighted */
}

.input-group .form-control {
    border-color: #ced4da; /* Ensure the input has the same border color */
}

/* Override the btn-outline-secondary class */
.btn-outline-secondary {
    border-color: #ced4da !important; /* Match the border color of the input */
    color: #495057 !important; /* Match the text color of the input */
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #e9ecef !important; /* Slightly darker background on hover */
    border-color: #ced4da !important; /* Match the border color of the input */
    color: #6c757d !important; /* Darker color when highlighted */
}

.btn-group-toggle { 
    display: flex; justify-content: center; flex-wrap: wrap;
    }
.btn-group-toggle .btn { 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; flex: 1 1 auto; 
} 

.modal-footer {
    text-align: left;
}

.modal-footer h5,
.modal-footer label,
.modal-footer span {
    display: block;
    width: 100%;
}

.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

/* Mobile view */
@media (max-width: 768px) {
    .sticky-header {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 60px;
        z-index: 500; /* Ensure it stays on top of other elements */
        padding: 10px; /* Optional: add some padding if needed */
        backdrop-filter: blur(5px); /* Add blur effect */
        border-bottom: none; /* Remove bottom border */
        width: 100%; /* Make the header span the entire width */
        left: 0; /* Ensure it starts from the left edge */
    }

    .fixed-top{
        backdrop-filter: blur(5px); /* Add blur effect */
    }
}

.form-group {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    width: 100%;
}

.btn-group-toggle {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    flex-wrap: wrap;
}

.btn-group-toggle .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    flex: 1 1 auto;
}

.sticky-top {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1020;
}

.shopping-cart {
    position: fixed;
    top: 0;
    right: -300px; /* Adjust the width as needed */
    width: 300px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    z-index: 1050;
}

.shopping-cart.show {
    right: 0;
}

.close { 
    /*position: absolute; 
    top: 10px; 
    right: 10px; 
    font-size: 1.5rem; 
    cursor: pointer;*/
}

    body {
    background: linear-gradient(135deg, #00c6ff, #0072ff, #00c6ff);
    /* Fallback for older browsers */
    background: -webkit-linear-gradient(135deg, #00c6ff, #0072ff, #00c6ff);
    background: -moz-linear-gradient(135deg, #00c6ff, #0072ff, #00c6ff);
    background: -o-linear-gradient(135deg, #00c6ff, #0072ff, #00c6ff);
    background: -ms-linear-gradient(135deg, #00c6ff, #0072ff, #00c6ff);
}

body.dark-mode {
    background: linear-gradient(135deg, #333333, #000000, #333333);
    /* Fallback for older browsers */
    background: -webkit-linear-gradient(135deg, #333333, #000000, #333333);
    background: -moz-linear-gradient(135deg, #333333, #000000, #333333);
    background: -o-linear-gradient(135deg, #333333, #000000, #333333);
    background: -ms-linear-gradient(135deg, #333333, #000000, #333333);
}


h2, h3 {
    color: white; /* Default color for larger screens */
    text-shadow: 1px 1px 2px #333333; /* Dark gray outline */
}

@media (max-width: 768px) {
    h2, h3 {
        color: black; /* Black text for mobile devices */
        text-shadow: none; /* Remove the outline for mobile */
    }
}


.logo {
        max-width: 200px; /* Adjust the value as needed */ 
        width: 50%; 
        height: auto; 
} 

.btn-craft-flavor { 
    background: linear-gradient(135deg, #ff7e5f, #feb47b); 
    border: none; 
    color: #ffffff; 
    font-size: 3rem; /* Increase the font size */ 
    padding: 20px 40px; /* Increase padding */ 
    border-radius: 10px; 
    transition: background 0.3s ease; 
}

.btn-craft-flavor:hover 
{ 
    background: linear-gradient(135deg, #feb47b, #ff7e5f); 
}

.selectpicker,
.bootstrap-select .dropdown-toggle {
  text-align: left !important;
}

.bootstrap-select .dropdown-menu {
  text-align: left !important;
}

body.dark-mode {
    background: linear-gradient(135deg, #333333, #000000, #333333);
    /* Fallback for older browsers */
    background: -webkit-linear-gradient(135deg, #333333, #000000, #333333);
    background: -moz-linear-gradient(135deg, #333333, #000000, #333333);
    background: -o-linear-gradient(135deg, #333333, #000000, #333333);
    background: -ms-linear-gradient(135deg, #333333, #000000, #333333);
    color: #ffffff;
}

.dark-mode .btn-primary {
    background-color: #1a73e8;
    border-color: #1a73e8;
}

.dark-mode .btn-secondary {
    background-color: #333333;
    border-color: #333333;
}

.dark-mode .card {
    background-color: #1e1e1e;
    color: #ffffff;
}

.dark-mode .shopping-cart {
    background-color: #1e1e1e;
    color: #ffffff;
}

.dark-mode h2, .dark-mode h3 {
    color: #ffffff;
}

.dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #ffffff;
}

.dark-mode .modal-header, .dark-mode .modal-body, .dark-mode .modal-footer {
    border-color: #333333;
}

.btn-dark-mode {
    background-color: #444444;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-dark-mode:hover {
    background-color: #555555;
}

.dark-mode .btn-dark-mode {
    background-color: #ffffff;
    color: #444444;
}

.dark-mode .btn-dark-mode:hover {
    background-color: #dddddd;
}

.dark-mode th, .dark-mode td { 
    border-color: #333333;
    color: #ffffff; /* Text color for table headers and cells */
}

/* 🌙 Dark Mode Styling for Nutrition Info */
body.dark-mode .nutrition-label-container .card {
  background-color: #1e1e1e;
  border-color: #444;
  color: #e0e0e0;
}

body.dark-mode .card-header {
  background-color: #2a2a2a;
  color: #f0f0f0;
  border-bottom: 1px solid #444;
}

body.dark-mode .card-header h5,
body.dark-mode .card-header small {
  color: #f0f0f0;
}

body.dark-mode .card-body {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .text-muted {
  color: #aaa !important;
}

body.dark-mode .text-dark {
  color: #ddd !important;
}

body.dark-mode .text-secondary {
  color: #bbb !important;
}

body.dark-mode .border-bottom {
  border-bottom: 1px solid #444 !important;
}

body.dark-mode .badge.bg-light {
  background-color: #333 !important;
  color: #f0f0f0 !important;
  border: 1px solid #555;
}

body.dark-mode .nutrition-label li {
  border-color: #444;
}

body.dark-mode .value-serving,
body.dark-mode .value-container {
  color: #f0f0f0;
}

body.dark-mode .container-label {
  color: #ccc;
}

/* Dark mode override for Nutrition Information title */
body.dark-mode .nutrition-label-container .card-header h5 {
  color: #1e1e1e!important;
}

body.dark-mode #nutritionToggleText {
  color: #aaa !important;
}

body.dark-mode #nutritionToggleIcon {
  color: #ccc;
}

/* Sticky nutrition panel on desktop */
@media (min-width: 992px) {
  .nutrition-label-container {
    position: sticky;
    top: 20px; /* Adjust based on your header height */
    z-index: 100;
  }
}

.modal-dialog { max-width: 1000px; /* Adjust the width as needed */ }