.modalContent { padding: 1.5rem; } .title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary, #1a1612); margin-bottom: 1.5rem; font-family: var(--font-playfair), 'Playfair Display', serif; } .warning { background: var(--accent-gold-bg); border: 1px solid var(--accent-gold, #c9a227); color: var(--text-primary, #1a1612); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9375rem; } .searchContainer { position: relative; margin-bottom: 1.5rem; } .searchInput { width: 100%; padding: 0.875rem 1rem; font-size: 1rem; border: 2px solid var(--border-color, #e5dfd5); border-radius: 8px; background: var(--bg-card, white); color: var(--text-primary, #1a1612); transition: all 0.2s ease; } .searchInput::placeholder { color: var(--text-muted, #8a847a); } .searchInput:focus { outline: none; border-color: var(--accent-coral, #e07256); box-shadow: 0 0 0 3px var(--accent-coral-bg); } .searchSpinner { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; border: 2px solid rgba(224, 114, 86, 0.3); border-radius: 50%; border-top-color: var(--accent-coral, #e07256); animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .results { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; } /* Scrollbar styles */ .results::-webkit-scrollbar { width: 8px; } .results::-webkit-scrollbar-track { background: var(--bg-secondary, #f3ede4); border-radius: 4px; } .results::-webkit-scrollbar-thumb { background: var(--border-color, #e5dfd5); border-radius: 4px; } .results::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #8a847a); } .resultItem { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-secondary, #f3ede4); border: 1px solid var(--border-color, #e5dfd5); border-radius: 10px; transition: all 0.2s ease; } .resultItem:hover { background: var(--bg-card, white); border-color: var(--accent-coral, #e07256); box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06)); } .schoolInfo { flex: 1; min-width: 0; } .schoolName { font-size: 1rem; font-weight: 600; color: var(--text-primary, #1a1612); margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schoolMeta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary, #5c564d); } .schoolMeta span { display: flex; align-items: center; gap: 0.25rem; } .noResults { text-align: center; padding: 2rem; color: var(--text-secondary, #5c564d); font-size: 0.9375rem; } .hint { text-align: center; padding: 2rem; color: var(--text-muted, #8a847a); font-size: 0.9375rem; } /* Responsive */ @media (max-width: 768px) { .modalContent { padding: 1rem; } .title { font-size: 1.25rem; } .resultItem { flex-direction: column; align-items: stretch; } .addButton { width: 100%; } .schoolMeta { flex-direction: column; gap: 0.25rem; } }