/* MDP-2369: suggestion lists (jQuery UI autocomplete) usable on a phone.
   Width and max-height are set per open in autocomplete_overrides.js. */
.ui-autocomplete.ui-menu {
  z-index: 1060;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* One card per suggestion: wraps instead of overflowing sideways. */
.ui-autocomplete.ui-menu .ui-menu-item-wrapper {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.ui-autocomplete.ui-menu .ui-menu-item + .ui-menu-item .ui-menu-item-wrapper {
  border-top: 1px solid var(--lightgrey, #efefef);
}

.ui-autocomplete .suggestion-title {
  display: block;
  font-weight: 500;
}

.ui-autocomplete .suggestion-detail {
  display: block;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--grey, #939597) 55%, var(--main-text-colour, #222));
}

.ui-autocomplete .ui-state-active .suggestion-detail {
  color: inherit;
}

/* Managed providers (fw-bold wrapper): bold the name, not the login line. */
.ui-autocomplete .fw-bold .suggestion-title {
  font-weight: 700;
}

.ui-autocomplete .fw-bold .suggestion-detail {
  font-weight: 400;
}

/* Touch screens: 44px minimum tap target. */
@media (pointer: coarse) {
  .ui-autocomplete.ui-menu .ui-menu-item-wrapper {
    min-height: 44px;
    padding: 0.625rem 1rem;
  }
}