body { background: #f8f9fa; }

/* Featured item styling */
.featured-item { 
  text-align: center; 
  padding: 15px; 
  border-radius: 15px; 
  background: #fff; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease, background 0.3s ease; 
  opacity: 0; 
  transform: translateY(20px); 
  position: relative;
  overflow: hidden;
}

.featured-item.visible { 
  opacity: 1; 
  transform: translateY(0);
}

.featured-item:hover { 
  transform: translateY(-10px) scale(1.03); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.featured-item img { 
  width: 100%; 
  max-height: 220px; 
  object-fit: contain; 
  margin-bottom: 12px; 
  transition: transform 0.3s ease;
}

.featured-item h4 { 
  font-size: 17px; 
  font-weight: 600; 
  margin: 8px 0; 
  color: #333; 
  min-height: 40px;
  transition: color 0.3s ease;
}

.featured-item h6 { 
  display: inline-block; 
  background: green; 
  color: #fff; 
  padding: 6px 12px; 
  border-radius: 20px; 
  font-size: 14px; 
  font-weight: bold; 
  margin-top: 8px; 
  transition: background 0.3s ease, transform 0.3s ease;
}

.featured-item:hover img { 
  transform: scale(1.06);
}

.featured-item:hover h4 { 
  color: #007bff;
}

.featured-item:hover h6 { 
  background: #28a745;
  transform: translateY(-2px);
}

.featured-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.featured-item:hover::before { 
  opacity: 1;
}

/* Filter panel */
#filter-panel { 
  position: fixed; 
  top: 0; 
  right: -350px; 
  width: 350px; 
  height: 100%; 
  background: #fff; 
  padding: 20px 20px 40px 20px; 
  box-shadow: -3px 0 15px rgba(0,0,0,0.3); 
  overflow-y: auto; 
  transition: right 0.3s; 
  z-index: 1001;
}

@media (max-width:767px){ 
  #filter-panel{ 
    width: 100vw; 
    right: -100vw; 
    max-width: 100vw; 
    padding: 18px 8px 40px 8px; 
  } 
}

#filter-overlay { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.5); 
  z-index: 1000;
}

#filter-btn { 
  position: sticky; 
  top: 80px; 
  z-index: 1000; 
  margin-left: auto; 
  display: block; 
  border-radius: 25px; 
  padding: 8px 20px; 
  transition: all 0.3s; 
}

#filter-btn:hover { 
  background-color: #0069d9; 
}

#close-filter.close-btn { 
  position: absolute; 
  top: 15px; 
  right: 15px; 
  background: transparent; 
  border: none; 
  font-size: 28px; 
  font-weight: bold; 
  color: #333; 
  cursor: pointer; 
  transition: color 0.3s;
}

#close-filter.close-btn:hover { 
  color: #007bff; 
}

/* Lazy load */
img.lazy { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: opacity 0.5s ease, transform 0.5s ease; 
  width: 100%; 
  height: auto; 
  display: block; 
}

img.lazy.loaded { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Search box */
.search-box { 
  position: relative; 
  flex: 1; 
  max-width: 400px; 
}

.search-box input { 
  width: 100%; 
  padding: 12px 40px 12px 15px; 
  border-radius: 25px; 
  border: 1px solid #ddd; 
  transition: all 0.3s; 
  outline: none; 
  font-size: 14px; 
}

.search-box input:focus { 
  border-color: #007bff; 
  box-shadow: 0 0 10px rgba(0,123,255,0.2);
}

.search-box .clear-search { 
  position: absolute; 
  right: 15px; 
  top: 50%; 
  transform: translateY(-50%); 
  color: #888; 
  font-size: 20px; 
  background: transparent; 
  border: none; 
  padding: 0; 
  margin: 0; 
  cursor: pointer; 
  outline: none; 
  display: flex; 
  align-items: center; 
  z-index: 2; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.2s;
}

.search-box .clear-search.visible { 
  opacity: 1; 
  pointer-events: auto; 
}

@media (max-width:767px){
  .search-box { 
    max-width: 100%; 
    width: 100%; 
    margin-bottom: 10px; 
  }
  .search-box input { 
    font-size: 17px; 
    padding: 15px 44px 15px 16px; 
    border-radius: 24px; 
  }
  .featured-page .container .row.mb-3 { 
    flex-direction: column; 
    gap: 0 !important; 
  }
}

/* Price inputs */
.price-inputs { 
  display: flex; 
  gap: 15px; 
  margin-bottom: 15px; 
  margin-top: 15px; 
}

.price-inputs input { 
  width: 50%; 
  text-align: center; 
  padding: 10px; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  font-size: 15px; 
}

/* Slider */
#price-slider-side { 
  margin-top: 25px; 
  height: 14px; 
  padding: 0 5px; 
}

.noUi-target { 
  background: #e9ecef; 
  border-radius: 10px; 
  height: 14px !important; 
}

.noUi-connect { 
  background: #007bff; 
  border-radius: 10px; 
}

.noUi-handle { 
  width: 26px !important; 
  height: 26px !important; 
  top: -7px !important; 
  border-radius: 50%; 
  border: 2px solid #007bff; 
  background: #fff; 
  cursor: grab; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
  transition: transform 0.2s; 
}

.noUi-handle:hover { 
  transform: scale(1.15); 
}

/* Loader */
#loader { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  background: rgba(255,255,255,0.95); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 2000; 
  transition: opacity 0.4s; 
}

.spinner { 
  border: 6px solid #e0e0e0; 
  border-top: 6px solid #007bff; 
  border-radius: 50%; 
  width: 56px; 
  height: 56px; 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  100% { transform: rotate(360deg); } 
}

#loader-text { 
  margin-top: 16px; 
  color: #007bff; 
  font-weight: 500; 
  font-size: 17px;
}

#loader[hidden] { 
  opacity: 0; 
  pointer-events: none; 
}