.school-name-suggestions[hidden] { display: none; }
.school-name-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(15 43 92 / 14%);
}
.school-name-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  color: #0f2b5c;
  text-decoration: none;
}
.school-name-suggestion + .school-name-suggestion { border-top: 1px solid #eef1f5; }
.school-name-suggestion:hover,
.school-name-suggestion:focus-visible { background: #fff4ee; outline: none; }
.school-name-suggestion strong { font-size: 14px; font-weight: 600; }
.school-name-suggestion span { color: #64748b; font-size: 12px; flex-shrink: 0; }
.school-name-suggestion-message { margin: 0; padding: 12px 14px; color: #64748b; font-size: 13px; }
@media (max-width: 640px) {
  .school-name-suggestion { align-items: flex-start; flex-direction: column; gap: 2px; }
}