/* Search & Filter Modern Styles */
.searchandfilter {
  margin: 0;
  padding: 0;
}

.searchandfilter > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.searchandfilter li {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.searchandfilter select {
  height: 40px !important;
  background: var(--bg-surface-elevated, #1a2234) !important;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1)) !important;
  border-radius: var(--radius-pill, 9999px) !important;
  color: var(--text-primary, #f8fafc) !important;
  padding: 0 16px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.searchandfilter select:focus {
  border-color: var(--color-primary, #0ea5e9) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.3) !important;
}

.searchandfilter input[type="submit"] {
  height: 40px !important;
  background: var(--grad-primary, linear-gradient(135deg, #0ea5e9, #6366f1)) !important;
  border: none !important;
  border-radius: var(--radius-pill, 9999px) !important;
  color: #fff !important;
  padding: 0 22px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.searchandfilter input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4) !important;
}

@media (max-width: 600px) {
  .searchandfilter > ul {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .searchandfilter li,
  .searchandfilter select,
  .searchandfilter input[type="submit"] {
    width: 100% !important;
  }
}