/* School and university suggestions under a name field on the apply form
   (js/kisaka-name-list.js). A plain white list on the form's hairline, one
   name per row, with the country quietly to the right on university names. */
.kisaka-name-list
   {
      position: absolute;
      z-index: 30;
      left: 0;
      right: 0;
      top: 100%;
      max-height: 320px;
      margin: 6px 0 0;
      padding: 6px 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      list-style: none;
      background: #fff;
      border: 1px solid var(--job-rule, #e3e7ef);
      border-radius: 10px;
      box-shadow: 0 10px 28px rgba(18, 22, 33, 0.08), 0 2px 6px rgba(18, 22, 33, 0.05);
   }

.kisaka-name-list[hidden]
   {
      display: none;
   }

.kisaka-name-list__option
   {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin: 0;
      padding: 10px 14px;
      font-size: 0.9375rem;
      line-height: 1.4;
      color: var(--job-ink, #2C2D3F);
      cursor: pointer;
   }

.kisaka-name-list__option:hover,
.kisaka-name-list__option[aria-selected="true"]
   {
      background: rgba(203, 31, 52, 0.05);
   }

.kisaka-name-list__country
   {
      flex-shrink: 0;
      font-size: 0.8125rem;
      color: var(--job-body, #4f5665);
   }

@media (prefers-reduced-motion: no-preference)
   {
      .kisaka-name-list__option
         {
            transition: background-color 120ms ease;
         }
   }

/* A strict list (A Level subjects) is a searchable dropdown, so it carries
   the dropdowns' caret (css/kisaka-select.css), drawn on the field itself:
   form-validate.js wraps the field, which would strand a separate element. */
.kisaka-job-form__group input.kisaka-name-list__field[type="text"]
   {
      padding-right: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b8f9b' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 15px center;
      background-size: 12px 8px;
   }

.kisaka-job-form__group input.kisaka-name-list__field[type="text"][aria-expanded="true"]
   {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%238b8f9b' stroke-width='2'/%3E%3C/svg%3E");
   }
