/* Rules that sat in <style> blocks inside templates until 2026-11-04 (owner: a component rendered per item – the product
   card, the search field, the filter sidebar – repeated them on every render; CSS lives in the stylesheets only, a test
   fails on any <style> in a template: zwischenfruechte/tests/test_no_inline_styles.py). Moved verbatim, grouped by the
   template they came from, loaded right after main.css (base.html); unused rules left out. Open drift: their literal
   values become tokens as each component is next touched (docs/components.md "Open drifts"). */

/* from templates/navbar/navbar_menu.html */
/* Mega Menu Styling */
  .mega-menu {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    background-color: #fff;
    max-width: 90vw; /* Prevent overflow, slightly less than full viewport width */
    width: 900px; /* Wider default width for 3 columns */
    padding: 10px; /* Add some internal padding */
  }

  .dropdown-item {
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: normal; /* Allow text to wrap onto new lines */
    word-break: break-word; /* Break long words if necessary */
    max-width: 100%; /* Ensure it respects column width */
    padding: 8px 12px; /* Consistent padding for readability */
  }

  .dropdown-item.fw-bold {
    margin-top: 8px; /* Add spacing above Level 0 headers */
  }

  .dropdown-divider {
    border-top: 1px solid #e9ecef;
    margin: 5px 0;
  }

/* from templates/navbar/search_template.html */
/* Ensure the input-group-text aligns its contents vertically */
  .input-group-text {
    padding: 0 0.5rem; /* Adjust padding if needed */
  }
  #clearSearchIcon {
    line-height: 1; /* Reset any inherited line-height */
  }
  #clearSearchIcon i {
    vertical-align: middle; /* Fallback for older browsers */
  }
  @keyframes rotate {
    100% { transform: rotate(360deg); }
  }
    /* Extra small devices (max-width: 575.98px) */
    @media (max-width: 575.98px) {
        #searchResults {
            top: 100%; 
            padding: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 100%;
            padding: 0 10px;
            animation-duration: 300ms;
        }
    
        .full-text-search {
            max-width: calc(100vw - 20px) !important;
            min-width: 100% !important;
        }
    
        .full-width-form {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    }
    
    /* Small devices (min-width: 576px and max-width: 767.98px) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .full-text-search {
            max-width: calc(100vw - 30px) !important;
            min-width: 200px !important;
            width: 100%;
        }
    }
    
    /* Medium devices (min-width: 768px and max-width: 991.98px) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .full-text-search {
            max-width: calc(100vw - 20px) !important;
            min-width: calc(30vw - 25px) !important;
        }
    }
    
    /* Large devices (min-width: 992px) */
    @media (min-width: 992px) {
        .full-text-search {
            max-width: 100% !important;
            min-width: calc(25vw - 25px) !important;
        }
        .full-width-form {
            max-width: 100% !important;
            min-width: calc(35vw) !important;
            position: relative;
        }
    }
    .full-text-search {
  border-radius: 50px;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  transition: border 0.3s ease;
}

.full-text-search:focus-within,
.full-text-search.click {
  border: 2px solid #42be11;
}

.full-text-search input:focus,
.full-text-search input.click {
  outline: none;
  box-shadow: none;
}

#searchIcon {
  cursor: pointer;
}

#clearSearchIcon {
  cursor: pointer;
}

.autocomplete-results {
  position: absolute;
  max-width: fit-content;
  top: 120%;
  animation-duration: 100ms;
  z-index: 1000;
}

.input-group-text {
  border: none;
  transition: border 0.3s ease;
}

.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* from templates/home.html */
/* Hero Section */
.full-width-bg {
  position: relative;
}

/* Background Image */
.homepage-background-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0; /* Behind everything */
  overflow: hidden;
  pointer-events: none;
}

.homepage-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.homepage-background-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.6) 100%
  );
  z-index: 1;
}

/* Category Carousel */
.category-carousel-wrapper {
  position: relative;
  padding: 0;
  z-index: 10;
}

.category-carousel__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.category-carousel__scroll::-webkit-scrollbar {
  display: none;
}

.category-carousel__content {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

.category-carousel__item {
  flex-shrink: 0;
}

/* .category-carousel__button: the choice chip, styled in main.css (home hero) */

/* Arrow Buttons - UPDATED positioning and shadow */
.category-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s ease;
  
  /* Enhanced shadow like Booking.com */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 
              0 1px 3px rgba(0, 0, 0, 0.12);
}

.category-carousel__btn:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-50%) scale(1.05);
  
  /* Stronger shadow on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22),
              0 2px 6px rgba(0, 0, 0, 0.15);
}

.category-carousel__btn--prev {
  left: -12px; /* 2/3 overlap: 40px * 1/3 = ~13px outside */
}

.category-carousel__btn--next {
  right: -12px; /* 2/3 overlap */
}

.category-carousel__btn svg {
  color: #495057;
}

/* Pressed state */
.category-carousel__btn:active {
  transform: translateY(-50%) scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Hide arrows on mobile */
@media (max-width: 992px) {
  .category-carousel__btn {
    display: none;
  }
}

/* from zwischenfruechte/templates/zwischenfruechte/filter_sidebar_template.html */
#loadingOverlay-filter{
    position: relative;
}
.checkbox-option {
    display: flex;
    align-items: center;
    padding-left: 0px !important;
    min-width: 100px; /* Set a fixed width for the entire checkbox option */
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin: 0px !important;
    padding-left: 0px !important;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

.checkbox-label {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 10px; /* Space between checkbox and label */
    width: calc(100% - 30px); /* Adjust the width dynamically based on the checkbox width */
}

.label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offcanvas-body {
    max-height: 90vh;
    overflow-y: auto;
}
/* Custom CSS for the floating filter button */
.floating-filter-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 20px;
    padding-right: 20px;
    z-index: 2;
}

.filter-sidebar{
  border-left: var(--bs-border-color)  solid 1px;
  border-right: var(--bs-border-color)  solid 1px;
  border-top: var(--bs-border-color)  solid 1px;
  border-bottom: var(--bs-border-color) solid 1px;
  border-radius: 8px;
}
.form-check-input{
  width: 20px;
  height: 20px;
  margin: 0px !important;
  padding-left: 0px !important;
}
.checkbox-option {
    display: flex;
    align-items: center;
    justify-content: left; /* Horizontal alignment */
    padding-left: 0px !important;
}

.filter-header{
    padding: 12px 16px 8px 13px;
    border-bottom: var(--bs-border-color)  solid 1px;
}
.filter-field-wrapper {
    padding: 12px 16px 8px 13px;
    border-bottom: var(--bs-border-color) solid 1px;
}
.filter-field-wrapper:last-of-type {
    border-bottom: none;
}
.filter-field-wrapper strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
}

.checkbox-option label {
    margin-left: 5px;
    font-size: 13px;
    cursor: pointer;
}

.checkbox-option input[type='checkbox'] {
    cursor: pointer;
    /* Additional styles for custom checkbox appearance */
}
.histogram {
    position: relative;
    height: 50px; /* Adjust to your preference */
    width: 100%;
    top:10px;
    left:0px;
    z-index: -1;
    background-color: white; /* Background color of the histogram */
}

.histogram-bar {
    background-color:#f0f0f0; /* Color of the bars, Bootstrap primary color */
    display: inline-block;
    position: absolute;
}
.highlighted-bar{
    background-color:forestgreen;
} 
.show-all-toggle {
    display: flex; /* Enables Flexbox */
    align-items: center; /* Align items vertically in the center */
    cursor: pointer;
    padding: 0; border: 0; background: none; font: inherit;  /* a button that reads as the link it was */
    color: var(--color-link);
    /* Add more styles if needed */
}

.show-all-toggle i {
    margin-left: 5px; /* Adds a small space between the text and the icon */
    /* Add additional styles for the icon if needed */
}
/* Styles for screens smaller than 768px */
@media (max-width: 767.98px) {
    .filter-field-wrapper, .filter-header {
        padding: 0;
    }
}
    /* Styles for screens smaller than 768px */
@media (max-width: 767.98px) {
    .filter-field-wrapper, .filter-header {
        padding: 10px; /* Adjust padding for better touch targets */
    }

    .filter-field-wrapper h5 {
        font-size: 14px; /* Increase the font size for better readability */
    }

    .checkbox-option {
        padding-left: 0px !important;
        padding-bottom: 6px; /* Add more spacing between checkboxes */
    }

    .form-check-input {
        width: 20px; /* Increase checkbox size */
        height: 20px;
    }

    .checkbox-label {
        font-size: 14px; /* Increase label font size */
        margin-left: 12px; /* Slightly increase the space between checkbox and label */
        width: calc(100% - 36px); /* Adjust width based on the increased checkbox size */
    }

    .label-text {
        font-size: 14px; /* Increase the label text size */
    }

    .histogram {
        height: 60px; /* Increase height for better touch accuracy */
    }

    .offcanvas-body {
        max-height: 80vh; /* Adjust to prevent excessive scrolling */
    }

    /* General text adjustments for readability */
    body, .filter-field-wrapper, .filter-header, .label-text {
        font-size: 14px;
        line-height: 1.4; /* Improve readability by increasing line height */
    }

    /* Additional spacing between checkbox groups */
    .checkbox-group {
        margin-bottom: 10px; /* Space out different checkbox groups */
    }

    /* Ensure the button is centered and large enough */
    .floating-filter-button {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ALWAYS ACTIVE - Reserve space and prevent layout shift */
.filter-sidebar-options,
.filter-sidebar {
    min-height: 400px; /* Adjust based on your typical filter height */
}

.filter-field-wrapper {
    min-height: 50px;
}

.checkbox-group {
    transition: height 0.3s ease;
}

.show-all-toggle {
    min-height: 24px;
}

/* ONLY ON INITIAL LOAD - Smooth reveal animations */
body.initial-load .filter-field-wrapper {
    opacity: 0;
    animation: fadeInFilter 0.3s ease-in-out forwards;
}

body.initial-load .filter-field-wrapper:nth-child(1) { animation-delay: 0.05s; }
body.initial-load .filter-field-wrapper:nth-child(2) { animation-delay: 0.1s; }
body.initial-load .filter-field-wrapper:nth-child(3) { animation-delay: 0.15s; }
body.initial-load .filter-field-wrapper:nth-child(4) { animation-delay: 0.2s; }
body.initial-load .filter-field-wrapper:nth-child(5) { animation-delay: 0.25s; }
body.initial-load .filter-field-wrapper:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInFilter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ON AJAX UPDATES - Instant appearance, no animation */
body:not(.initial-load) .filter-field-wrapper {
    opacity: 1;
    animation: none;
}

/* from zwischenfruechte/templates/zwischenfruechte/filter_chip_template.html */
/* Base Styles for Filter Chips */
.filter-chips {
    display: flex;
    flex-wrap: wrap; /* Allows chips to wrap to the next line on larger screens */
    gap: 8px; /* Consistent spacing between chips */
    margin-bottom: 0.25rem; /* mb-1 equivalent */
    margin-top: 0.25rem; /* mt-1 equivalent */
    padding: 0; /* Remove default padding if any */
}

/* Chip Styles */
.chip {
    background-color: rgba(66, 190, 16, 0.12); /* #42be101f */
    border: 1px solid #42be11;
    border-radius: 25px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    padding: 5px 10px; /* Adequate padding for better clickability */
    display: flex; /* Aligns inner elements horizontally */
    align-items: center; /* Vertically centers the content */
}

/* Hover Effect for Chips */
.chip:hover {
    background-color: rgba(65, 190, 16, 0.28); /* #41be1046 */
}

/* Link Inside Chip */
.chip-link {
    display: flex;
    align-items: center;
    color: #000; /* Black text color */
    text-decoration: none; /* Removes underline from links */
}

/* Close Button Styles */
.chip-close-btn {
    margin-right: 5px; /* Space between close button and label */
    display: flex;
    align-items: center;
}

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
    .filter-chips {
        overflow-x: auto; /* Enables horizontal scrolling */
        white-space: nowrap; /* Prevents chips from wrapping */
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

    /* Hide Scrollbar in WebKit Browsers */
    .filter-chips::-webkit-scrollbar {
        display: none; 
    }

    /* Ensure Chips Don't Wrap and Have Consistent Margin */
    .filter-chips .chip {
        flex: 0 0 auto; /* Prevents chips from shrinking */
        margin-right: 10px; /* Space between chips */
    }
}

/* Additional Styles for Checkbox Labels (Unrelated to Chips) */
.checkbox-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* from zwischenfruechte/templates/zwischenfruechte/product_template.html */
.card {
    font-family: var(--bs-body-font-family);
  }
  .product-specification {
    font-size: 12px !important;
  }

/* from zwischenfruechte/templates/zwischenfruechte/products.html */
.light-top-shadow {
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }
#products-container {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

.col-12.col-sm-6 {
    content-visibility: auto;
    contain-intrinsic-size: 0 350px;
}

/* from zwischenfruechte/templates/zwischenfruechte/templates/zwischenfruchtmischung.html */
.list-pointer-item::before {
margin-top:0px !important;
}
.list-checked-item::before{
    margin-top:0px !important; 
}

/* from zwischenfruechte/templates/zwischenfruechte/templates/pflanzenschutzmittel.html */
.list-pointer-item::before {
        margin-top: 0px !important;
    }
    .list-checked-item::before {
        margin-top: 0px !important; 
    }

/* from accounts/templates/accounts/order_retailer.html */
.button-as-link {
  background: none!important;
  border: none;
  padding: 0!important;
  color: #0a58ca;
  cursor: pointer;
  font-size: 14px;
}
    #id_status{
        max-width: 147px;
    }
    .table-order{
        border-left: 5px solid #42be13;

    margin-left: 13px;
    }
    .status{
        font-weight: 600 !important;
        
    }
    .status-text.s1 {
        color: #185abc;
        
    }
    .status.s1 {
        background-color: rgba(28,116,233,.1);
        border-color: white !important;
    }
    .status.s2{
        background-color: #fce8e6;
        border-color: white !important;
    }    
    .status-text.s2 {
        color: #c5221f;
        
    }
    .status.s3 {
        background-color: #dfb02024;
        border-color: white !important;
    }    
    .status-text.s3 {
        color: #fbbc04;
        
    }
    .status.s4 {
        background-color: #e6f4ea;
        border-color: white !important;
    }
    .status-text.s4 {
        color: #1d793b;;
        
    }
.height-override{
min-height: auto !important;
}