.search-input {
    padding: var(--spacing-14) var(--spacing-20);
    border-radius: var(--radius-15);
    width: calc(var(--rpx) * 384);
    background-color: var(--blue-100-10);
    border: calc(var(--rpx) * 1) solid var(--blue-100-10);
    transition: var(--transition-fast);
    cursor: pointer;
  }

  .search-input .h-svg {
    height: calc(var(--rpx) * 21);
    width: calc(var(--rpx) * 21);
    display: flex;
  }
  
  .search-input > .h-svg svg{
    height: calc(var(--rpx) * 21);
    width: calc(var(--rpx) * 21);
  }
  
  .search-input .h-search-field {
    display: flex;
  }
  .search-input:has(input:focus),
  .search-input.focused {
    border-color: var(--blue-100-80);
  }
  .search-input input {
    font: var(--font-search-medium);
    color: var(--blue-100);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    border-radius: 0;
  }
  .search-input input::placeholder {
    color: var(--blue-100);
    transition: var(--transition-fast);
  }
  .search-input input:focus::placeholder {
    color: transparent;
  }
  
  /* Стили для активного поиска */
  .search-input.has-search {
    border-color: var(--blue-100);
    background-color: var(--blue-100-20);
  }
  
  .search-input.has-search input {
    color: var(--blue-100);
  }