.search-group {
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--bg-section);
  padding: 2px;
}

.search-group:focus-within {
  border-radius: 20px;
  background-color: var(--bg-section);
  border: 1px solid #ff4d00;
}

.search-input {
  border: none;
  padding-right: 10px;
  border-radius: 10px;
  color: var(--text-primary);
  background-color: var(--bg-page);
}

.search-input:focus {
  box-shadow: none;
  background: transparent;
  color: var(--text-primary);
}

.search-input::placeholder {
  font-size: 0.85rem;
  color: var(--text-unit);
  opacity: 1;
}

.search-addon:focus {
  box-shadow: none;
}

.search-addon {
  font-size: 14px;
  color: white;
}

.bi-search {
  border: 1px solid #ff4d00;
  padding: 4px 12px;
  border-radius: 15px;
  background-color: #ff4d00;
  color: #fff;
  font-weight: bold;
}

.search-addon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .search-group {
  background-color: var(--bg-card);
  border-color: var(--border-soft);
}
[data-theme="dark"] .search-group:focus-within {
  border-color: var(--input-focus-border);
}

[data-theme="dark"] .search-input {
  color: var(--text-primary);
}

[data-theme="dark"] .search-input::placeholder {
  color: var(--text-unit);
}