.search-bar-wrap {
  position: relative; z-index: 10;
  margin-top: -1px;
  padding-bottom: var(--space-4);
}

.search-bar {
  background: var(--surface-structure);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
  display: flex; gap: var(--space-4);
  align-items: flex-end; flex-wrap: wrap;
}

.search-field { flex: 1; min-width: 120px; }

.search-field label {
  display: block;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 6px;
}

.search-field input,
.search-field select {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 15px;
  color: #fff; background: rgba(255,255,255,.07);
  outline: none; transition: border-color 150ms;
}

.search-field input:focus,
.search-field select:focus {
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
}

.search-field select option { background: var(--surface-structure); color: #fff; }

@media (max-width: 640px) {
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; }
  .search-bar > div:last-child { width: 100%; }
  .search-bar > div:last-child .btn { width: 100%; }
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .45; cursor: pointer;
  filter: invert(1);
}