@layer base {
  .container {
    margin-bottom: var(--spacing-6);
  }

  .searchWrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
  }

  .searchIcon {
    position: absolute;
    left: var(--spacing-3);
    color: var(--muted-foreground);
    pointer-events: none;
    z-index: 1;
  }

  .searchInput {
    padding-left: calc(var(--spacing-3) * 2 + 18px);
    width: 100%;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .searchWrapper {
      max-width: 100%;
    }
  }
}