.search-container {max-width: 8000px; margin: auto; padding: 0 20px; } .search-wrapper {position: relative; width: 100%; height: 48px; background-color: #f3f4f6; border-radius: 12px; display: flex; align-items: center; transition: all 0.3s ease; margin-bottom: 20px; } .search-wrapper:hover {background-color: #f9fafb; } .search-wrapper.focused {background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 2px solid #3b82f6; } .search-icon {margin-left: 16px; color: #6b7280; } .search-input {width: 100%; height: 100%; padding: 0 16px; background: transparent; border: none; font-size: 16px; color: #1f2937; } .search-input::placeholder {color: #9ca3af; } .search-input:focus {outline: none; } .clear-button {display: none; padding: 8px; margin-right: 8px; background: none; border: none; border-radius: 50%; cursor: pointer; color: #6b7280; transition: all 0.2s ease; } .clear-button:hover {background-color: #e5e7eb; color: #374151; } .clear-button.visible {display: block; } .results-container {margin-top: 20px; } .search-results-post {background: white; border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .search-results-post-header {display: flex; justify-content: space-between; margin-bottom: 8px; color: #6b7280; font-size: 14px; } .search-results-post-content {color: #1f2937; font-size: 16px; } .highlight {background-color: #fef3c7; padding: 0 2px; } .no-results {text-align: center; color: #6b7280; padding: 20px; }