.Premium-search-container { position: relative; width: 100%; max-width: 600px; } .Premium-search-form { display: flex; gap: 12px; align-items: center; width: 100%; } .search-input-wrapper { position: relative; flex: 1; background: rgba(40, 40, 60, 0.25); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 25px; padding: 14px 20px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.07); } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); transition: all 0.3s ease; z-index: 2; } .search-icon { color: rgba(102, 126, 234, 0.8); transform: translateY(-50%) scale(1.1); } .Premium-search-input { width: 100%; background: none !important; border: none; outline: none; color: white; font-size: 1rem; font-weight: 400; padding-left: 35px; padding-right: 35px; z-index: 2; position: relative; } .Premium-search-input::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 300; } .clear-search-btn { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: rgba(255, 255, 255, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 3; } .clear-search-btn:hover { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; transform: translateY(-50%) scale(1.1); } .search-glow-effect, .search-border-animation { display: none !important; } .Premium-search-btn { display: flex; align-items: center; justify-content: center; padding: 14px 28px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 25px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3); min-width: 100px; } .Premium-search-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5); } .btn-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; } .Premium-search-btn:hover .btn-shine { left: 100%; } .search-suggestions-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); z-index: 1000; max-height: 500px; overflow-y: auto; } .suggestion-section { padding: 8px 0; } .suggestion-section:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .suggestion-header { display: flex; align-items: center; gap: 8px; padding: 12px 20px 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; position: relative; } .suggestion-header.trending { color: #ff6b6b; } .trending-glow { position: absolute; right: 20px; width: 6px; height: 6px; background: #ff6b6b; border-radius: 50%; animation: pulse 2s infinite; } .suggestion-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; position: relative; } .suggestion-item:hover { background: rgba(255, 255, 255, 0.1); color: white; } .suggestion-item.recent { color: rgba(255, 255, 255, 0.6); } .suggestion-item.trending { position: relative; } .trending-star { margin-left: auto; color: #ffd700; opacity: 0.7; } .suggestion-item.trending:hover .trending-star { opacity: 1; animation: sparkle 0.6s ease; } @keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(180deg); } } .quick-actions { padding: 16px 20px; } .quick-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .quick-action-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .quick-action-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .quick-action-icon { font-size: 1.5rem; margin-bottom: 4px; } .quick-action-item span { color: rgba(255, 255, 255, 0.8); font-size: 0.8rem; font-weight: 500; } .search-suggestions-dropdown::-webkit-scrollbar { width: 6px; } .search-suggestions-dropdown::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .search-suggestions-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } .search-suggestions-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } @media (max-width: 768px) { .Premium-search-form { gap: 8px; } .search-input-wrapper { padding: 12px 16px; } .Premium-search-input { font-size: 0.9rem; padding-left: 30px; padding-right: 30px; } .search-icon { left: 14px; } .clear-search-btn { right: 14px; } .Premium-search-btn { padding: 12px 20px; font-size: 0.85rem; min-width: 80px; } .quick-action-grid { grid-template-columns: repeat(2, 1fr); } .search-suggestions-dropdown { margin-top: 4px; } } @media (max-width: 576px) { .Premium-search-form { flex-direction: column; gap: 12px; } .Premium-search-btn { width: 100%; } .quick-action-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .quick-action-item { padding: 12px 4px; } .quick-action-icon { font-size: 1.2rem; } .quick-action-item span { font-size: 0.7rem; } } @keyframes searchFocus { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .search-input-wrapper.focused { animation: searchFocus 0.3s ease; } .suggestion-item:focus, .quick-action-item:focus { outline: 2px solid rgba(102, 126, 234, 0.5); outline-offset: 2px; } @media (prefers-contrast: high) { .search-input-wrapper { background: rgba(0, 0, 0, 0.8); border: 2px solid white; } .Premium-search-btn { background: white; color: black; border: 2px solid black; } } @media (prefers-reduced-motion: reduce) { .search-border-animation, .trending-glow, .btn-shine { animation: none; } .search-input-wrapper, .suggestion-item, .quick-action-item { transition: none; } }