.glass-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-field-border);
  border-radius: 50px;
  background-color: transparent;
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.glass-search:focus-within {
  border-color: var(--glass-field-border-focus);
  box-shadow: var(--glass-shadow), var(--glass-field-ring);
}

.glass-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
}
.glass-search input::placeholder { color: rgba(var(--text-rgb), 0.5); }
.glass-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }

.glass-search > svg,
.glass-search-icon {
  flex-shrink: 0;
  color: rgba(var(--text-rgb), 0.7);
}
.glass-search-icon {
  order: -1;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: color 0.2s;
}
.glass-search-icon:hover { color: var(--text-main); }
.glass-search > svg,
.glass-search-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass-search--lg {
  height: 54px;
  padding: 0 10px 0 20px;
}
.glass-search--lg input { font-size: 16px; }

@media (max-width: 900px) {
  .glass-search--lg { height: 48px; padding-left: 16px; }
}