.google-search-container {
  display: flex; /* Arrange items horizontally */
  align-items: center; /* Vertically center items */
  width: 100%;
  max-width: 580px;
  height: 44px;
  gap: 10px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dfe1e5;
  box-shadow: none;
  border-radius: 24px;
  padding: 0 8px 0 14px; /* Padding inside the container */
  box-sizing: border-box;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.google-search-container:hover,
.google-search-container:has(.google-search-input:focus) { /* Style container on hover or when input inside has focus */
  border-color: #dfe1e5;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.15);
}

.search-icon, .mic-icon {
  display: flex; /* Helps center SVG content if needed */
  align-items: center;
  justify-content: center;
  padding: 0 8px; /* Space around icons */
  cursor: pointer; /* Indicate interactivity */
}
.search-icon svg {
   width: 20px;
   height: 20px;
}

/* Style for the actual input field inside the container */
.google-search-input {
  flex-grow: 1; /* Allow input to take up remaining space */
  height: 100%; /* Fill container height */
  border: none; /* No border for the input itself */
  outline: none; /* No outline for the input itself */
  padding: 0 8px; /* Space between text and icons */
  font-family: Arial, sans-serif;
  font-size: 16px;
  background-color: transparent; /* Inherit container background */
  color: #202124;
}

.google-search-input::placeholder {
  color: #9aa0a6;
  opacity: 1;
}
/* Older placeholder styles */
.google-search-input::-webkit-input-placeholder { color: #9aa0a6; }
.google-search-input::-moz-placeholder { color: #9aa0a6; opacity: 1; }
.google-search-input:-ms-input-placeholder { color: #9aa0a6; }
.google-search-input::-ms-input-placeholder { color: #9aa0a6; }

/* Prevent Chrome's yellow autofill background */
.google-search-input:-webkit-autofill,
.google-search-input:-webkit-autofill:hover,
.google-search-input:-webkit-autofill:focus,
.google-search-input:-webkit-autofill:active {
    /* Need to apply to input, but since it's transparent, override container bg */
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #202124 !important;
}

/* Note: The :has() selector for focus is relatively new, check browser compatibility
   If older browser support is needed, you might need JavaScript to add a class
   to the container when the input receives focus. */