.container { max-width: 600px; display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: 2rem 1rem; } .title { font-weight: 700; font-size: 2.5rem; /* Reduced from 3.5rem */ background: linear-gradient(45deg, #3b82f6, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1.5rem; /* Reduced from 2rem */ } .search-container { margin-bottom: 1rem; } .search-input { border: none; border-radius: 20px; padding: 0.75rem 1.5rem; font-size: 0.9rem; /* Reduced from 1rem */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .search-button { border: none; border-radius: 50%; width: 50px; height: 50px; background: linear-gradient(45deg, #3b82f6, #10b981); color: white; font-size: 1.2rem; margin-left: -50px; transition: transform 0.2s; } .search-button:hover { transform: scale(1.05); } .options-container { position: relative; width: 100%; max-width: 500px; margin-top: 1rem; } .option-group { margin-bottom: 1rem; } .option-title { font-weight: 500; color: #555; margin-bottom: 0.4rem; /* Reduced from 0.5rem */ display: flex; align-items: center; font-size: 0.85rem; /* Added font size */ } .option-title i { margin-right: 0.5rem; } .option-buttons { display: flex; gap: 0.5rem; } .option-button { flex: 1; border: none; background-color: #e0e0e0; color: #555; padding: 0.4rem; /* Reduced from 0.5rem */ border-radius: 10px; transition: all 0.2s; font-size: 0.8rem; /* Reduced from 0.9rem */ } .option-button:hover, .option-button.active { background: linear-gradient(45deg, #3b82f6, #10b981); color: white; } .option-button i { margin-right: 0.25rem; } .advanced-options { position: absolute; top: 90%; left: 20px; right: 20px; border-radius: 20px; padding: 1rem 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 900; display: none; } .advanced-options.show { display: block; } .advanced-options-title { font-weight: 500; color: #555; margin-bottom: 0.75rem; /* Reduced from 1rem */ cursor: pointer; font-size: 0.9rem; /* Added font size */ } .collapse-icon { transition: transform 0.3s; } .collapse-icon.rotated { transform: rotate(180deg); } .toggle-container { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1rem; } .toggle-label { margin-right: 0.5rem; font-weight: 500; color: #555; font-size: 0.85rem; /* Added font size */ } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background: linear-gradient(45deg, #3b82f6, #10b981); } input:checked + .toggle-slider:before { transform: translateX(26px); }