1  .searchContainer {
 2    position: relative;
 3    max-width: 500px;
 4    width: 100%;
 5  }
 6  
 7  .searchWrapper {
 8    position: relative;
 9    display: flex;
10    align-items: center;
11  }
12  
13  .searchInput {
14    width: 100%;
15    padding: 1rem 3rem 1rem 1.5rem;
16    border: 2px solid var(--ifm-border-color);
17    border-radius: 8px;
18    font-size: 1rem;
19    background: var(--ifm-background-color);
20    color: var(--ifm-color-emphasis-hover);
21    transition: all 0.2s ease;
22    opacity: 0.7;
23  }
24  
25  .searchInput:focus {
26    outline: none;
27    border-color: #0194e2;
28    box-shadow: 0 0 0 3px rgba(1, 148, 226, 0.1);
29    opacity: 1;
30  }
31  
32  .searchInput::placeholder {
33    color: var(--ifm-border-color);
34  }
35  
36  .searchButton {
37    position: absolute;
38    right: 0.5rem;
39    padding: 0.5rem;
40    background: transparent;
41    border: none;
42    color: var(--ifm-border-color);
43    cursor: pointer;
44    display: flex;
45    align-items: center;
46    justify-content: center;
47    transition: color 0.2s ease;
48    border-radius: 4px;
49  }
50  
51  .searchButton:hover:not(:disabled) {
52    color: #0194e2;
53    background: rgba(1, 148, 226, 0.1);
54  }
55  
56  /* Hide SearchBox on mobile devices */
57  @media (max-width: 768px) {
58    .searchContainer {
59      display: none;
60    }
61  }