/* Native customizable select: the real form control retains value, validation,
   focus, keyboard and top-layer placement. Touch keeps its OS picker. */
@supports (appearance: base-select) and selector(::picker(select)) {
  @media (min-width: 761px) and (hover: hover) and (pointer: fine) {
    #app31 #application-form select,
    #app31 #application-form select::picker(select) {
      appearance: base-select;
    }
    #app31 #application-form select {
      width: 100%;
      align-items: center;
      gap: 16px;
      cursor: pointer;
    }
    #app31 #application-form select::picker-icon {
      color: #52664b;
      font-size: 13px;
      transition: rotate 180ms ease;
    }
    #app31 #application-form select:open::picker-icon { rotate: 180deg; }
    #app31 #application-form select::picker(select) {
      box-sizing: border-box;
      inline-size: anchor-size(width);
      max-inline-size: calc(100vw - 32px);
      max-block-size: min(340px, 55dvh);
      margin-block: 7px;
      padding: 6px;
      border: 1px solid #afb6a0;
      border-radius: 12px;
      background: #f5f2e9;
      color: #263e2d;
      box-shadow: 0 12px 30px #18261c20, 0 2px 5px #18261c12;
      font: 16px/1.4 RoadSourceSans3, sans-serif;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #98a18a transparent;
      opacity: 0;
      transition: opacity 160ms ease, display 160ms allow-discrete, overlay 160ms allow-discrete;
    }
    #app31 #application-form select:open::picker(select) { opacity: 1; }
    @starting-style {
      #app31 #application-form select:open::picker(select) { opacity: 0; }
    }
    #app31 #application-form select option {
      display: flex;
      align-items: center;
      gap: 14px;
      min-block-size: 44px;
      padding: 9px 12px;
      border-radius: 7px;
      background: transparent;
      color: #263e2d;
      white-space: normal;
      cursor: pointer;
    }
    #app31 #application-form select option:checked { background: #e4e9d8; }
    #app31 #application-form select option[hidden] { display: none; }
    #app31 #application-form select option:not(:disabled):hover { background: #e9ecdf; }
    #app31 #application-form select option:focus-visible {
      background: #e4e9d8;
      outline: 1px solid #708262;
      outline-offset: -2px;
    }
    #app31 #application-form select option::checkmark {
      order: 1;
      margin-inline-start: auto;
      color: #47613e;
      font-size: 14px;
    }
    #app31 #application-form select:disabled,
    #app31 #application-form select option:disabled { cursor: default; opacity: .55; }
    @media (prefers-reduced-motion: reduce) {
      #app31 #application-form select::picker-icon,
      #app31 #application-form select::picker(select) { transition: none; }
    }
  }
}