.fi-ta-search-field {
  display: flex;
  align-items: center;
  background: #f0f3f7;             /* soft light background */
  border-radius: 9999px;           /* full pill shape */
  padding: 0.75rem 1.5rem;         /* vertical ⬆︎ / horizontal ↔︎ padding */
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.1),
   -6px -6px 16px rgba(255, 255, 255, 0.7)
;
  transition: box-shadow 0.2s;
}

.fi-ta-search-field input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: #444;
}

.fi-ta-search-field button {
  margin-left: 0.5rem;
  padding: 0.5rem;                 /* make the circle big enough */
  background: #f0f3f7;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.1),
   -6px -6px 16px rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}

/* Pressed / focus state */
.fi-ta-search-field:focus-within,
.fi-ta-search-field button:active {
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.1),
    inset -4px -4px 8px rgba(255, 255, 255, 0.7);
}

/* Dark-mode variant */
.dark .fi-ta-search-field {
  background: #1e1e1e;
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.6),
   -6px -6px 16px rgba(50, 50, 50, 0.4);
}

.dark .fi-ta-search-field input {
  color: #ddd;
}

.dark .fi-ta-search-field button {
  background: #1e1e1e;
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.6),
   -6px -6px 16px rgba(50, 50, 50, 0.4);
}

.dark .fi-ta-search-field:focus-within,
.dark .fi-ta-search-field button:active {
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.6),
    inset -4px -4px 8px rgba(50, 50, 50, 0.4);
}