/*--------------------------------------------------------------
1. Allgemeine Styles
--------------------------------------------------------------*/
:root {
    --primary-green: #3ca163;
    --secondary: #013b0f;
    --thirdary: #b2e96a;
    --primary-orange: #da9500;
    --secondary-orange:#e05c04;
    --dark: #343a40;
    --light: #f8f9fa;
    /* Weitere Farbdefinitionen */
}

body {
    font-family: 'Open Sans', sans-serif;
}

/*--------------------------------------------------------------
2. Top Navigation Bar
--------------------------------------------------------------*/


.navbar-nav .nav-link {
    transition: background-color 0.3s, color 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--thirdary);
}

/*--------------------------------------------------------------
3. Vertikale Navigationsleiste
--------------------------------------------------------------*/
#vertical-navbar {
    padding-top: 5px; /* Platz für das Logo oben */
    border-right: 1px solid #dee2e6;
    height: auto;
    position: relative;
    padding-bottom: auto; /* Platz am unteren Ende */
}

#vertical-navbar .nav-link {
    color: #333;
    font-weight: 500;
    padding: 15px 20px;
    transition: background-color 0.3s, color 0.3s;
}

#vertical-navbar .nav-link:hover,
#vertical-navbar .nav-link.active {
    background-color: var(--primary-green);
    color: #fff;
    border-radius: 4px;
}

#vertical-navbar .nav-link i {
    margin-right: 10px;
}

/*--------------------------------------------------------------
4. Hauptinhalt
--------------------------------------------------------------*/
main {
    margin-left: 0;
    padding-top: 20px;
}

@media (min-width: 768px) {
    main {
        margin-left: 250px; /* Breite der Sidebar */
    }
}

/*--------------------------------------------------------------
5. Footer
--------------------------------------------------------------*/
.footer h4 {
    color: var(--primary);
}

.footer {
    background-color: var(--dark);
    color: #b0b9ae;
    padding: 50px 0;
}

.footer a {
    color: #b0b9ae;
    transition: color 0.3s;
}

.footer a:hover {
    color: #fff;
}

.footer h4 {
    color: var(--primary-green);
}

.footer .quick-links {
    display: flex;
    flex-wrap: wrap;
}

.footer .quick-links a {
    color: #b0b9ae;
    transition: color 0.3s ease;
}

.footer .quick-links a:hover {
    color: white;
}

.footer .btn.btn-link::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary-green);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
}


.footer .business-hours h6 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
}



/*--------------------------------------------------------------
6. Back to Top Button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    background-color: var(--primary-green);
    color: white;
    border-radius: 50%;
    font-size: 18px;
    padding: 10px;
    transition: background-color 0.3s ease;
}

.back-to-top:hover {
    background-color: var(--secondary);
}

/*--------------------------------------------------------------
7. Buttons
--------------------------------------------------------------*/
.btn-custom-green {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
    color: #fff !important;
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-custom-green:hover {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

/* Neue Styles für den Minus-Button */
.btn-decrease {
    background-color: #da9500 !important; 
    border-color: #da9500  !important;
    color: #fff !important;
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-decrease:hover {
    background-color: #e05c04 !important; /* Dunkleres Rot beim Hover */
    border-color: #e05c04 !important;
}

/* Neue Styles für die Anzahl-Anzeige (eingebettetes Input-Feld) */
.btn-count {
    background-color: #6c757d !important;
    color: #fff !important;
    padding: 4px 8px;
    font-size: 14px;
    display: inline-block;
    width: auto; /* Allows dynamic adjustment based on content */
    min-width: 1ch; /* Minimum width for at least 1 digit */
    max-width: 6ch; /* Maximum width for up to 4 digits */
    white-space: nowrap;
    text-align: center;
    border: none;
    cursor: text;
    border-radius: 0;
    height: 38px;
    transition: width 0.2s ease;
}


/* Remove default spin buttons */
.btn-count::-webkit-inner-spin-button,
.btn-count::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*--------------------------------------------------------------
8. Responsive Anpassungen
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
    /* Vertikale Navigationsleiste bleibt sichtbar */
    #vertical-navbar {
        position: static;
        padding-bottom: 20px; /* Platz am unteren Ende */
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .row {
        flex-direction: column;
    }

    /* Anpassung der Sidebar-Sticky */
    .sidebar-sticky {
        height: auto;
    }

    /* Hauptinhalt passt sich an */
    main {
        margin-left: 0;
    }
}

/*--------------------------------------------------------------
9. Produktkarten
--------------------------------------------------------------*/
.card {
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Ensure the card takes up the available height */
}

.card:hover {
    transform: scale(1.02);
}

/* Set image to take up available space while keeping aspect ratio */
.card-img-top {
    height: auto;
    max-height: 300px; 
    width: 100%; 
    object-fit: contain; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top:  2rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Price styling for product cards */
.card-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3ca163; /* Match the primary green color */
    margin-left: 20px; /* Adds some space between buttons and price */
    white-space: nowrap; /* Prevent price from wrapping */
}

/* Flex container inside the card body */
.card-body .d-flex {
    justify-content: space-between;
    align-items: center;
}

/* Button group and input styling */
.btn-group {
    display: flex;
    align-items: center;
}




/*--------------------------------------------------------------
10. Modals
--------------------------------------------------------------*/
.modal-body img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.modal-body p {
    font-size: 1rem;
    color: #555;
}

/*--------------------------------------------------------------
11. Bottom Bar Styles
--------------------------------------------------------------*/

.bottom-bar {
    background-color: #f7faf7;
    padding: 15px 0;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Flexbox for search input and cart button */
.bottom-bar .search {
    display: flex;
    align-items: center;
}

#search_input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--secondary);
    border-radius: 5px;
    font-size: 16px;
    max-width: 500px; /* Set a smaller width for desktop */
}

#search_button {
    background-color: var(--primary-green);
    color: #fff;
    border: none;
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#search_button:hover {
    background-color: var(--secondary);
}

.bottom-bar .user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-green);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;

}

#cart_button:hover {
    background-color: var(--secondary);
}

#cart_button i {
    font-size: 16px;
    margin-right: 5px;
}

/* Media Queries for mobile view */
@media (max-width: 540px) {


    .order-1 {
        order: 1 !important; /* Cart button in first position */
    }
    .order-2 {
        order: 2 !important; /* Search in second position */
    }

    #search_input {
        max-width: 400px; /* Reduce width for mobile */
        font-size: 14px; 
    }

    #search_button {
        padding: 7px;
    }

    #cart_button {
        font-size: 12px; /* Optional: reduce font size for smaller screens */
        margin-right: 210%;
    }
}

/* Desktop-specific CSS */
@media (min-width: 992px) {
    .search {
        justify-content: flex-start;
    }

    #search_input {
        max-width: 400px; /* Smaller width for desktop */
    }

    #cart_button {
        margin-right: 30px; /* Adjust this value to push the cart button more to the right */
    }
}