/**
 * Intelligent Filter Section Sticky Styles
 * 
 * This CSS replaces the old fixed-height approach with dynamic positioning
 */

.filter-section {
  padding: 0;
  position: absolute;
  z-index: 30;
  width: 100%;
  left: 0;
  display: flex;
  align-items: center;
  background: #fff;
  transition: ease-in-out all 0.3s;
}

.filter-section.scroll {
  position: fixed;
  width: 100%;
  left: 0;
  /* Dynamic top position will be set by JavaScript */
  border: none;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

/* Ensure smooth transitions */
.filter-section {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .filter-section.scroll {
    /* Mobile adjustments if needed */
  }
}

@media (max-width: 575px) {
  .filter-section.scroll {
    /* Small mobile adjustments if needed */
  }
}

/* Add a subtle backdrop for better visibility */
/* .filter-section.scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: -1;
} */

/* Ensure the filter section maintains its original position when not sticky */
.filter-section:not(.scroll) {
  position: absolute;
  top: auto;
}