/* ThisArcade dropdowns (dropdown.js): boxy, brand colours, used on the site and in the admin panel. */
.dd { position: relative; width: 100%; }
.dd-native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.dd-btn {
  position: relative; display: block; width: 100%; min-height: 40px; padding: 8px 38px 8px 11px; margin: 0;
  font: inherit; font-size: 15px; text-align: left; color: var(--ink, #0F1B3D); background: #fff;
  border: 2px solid #C9D2EA; border-radius: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-btn::after {   /* chevron */
  content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2.5px solid var(--ink, #0F1B3D); border-bottom: 2.5px solid var(--ink, #0F1B3D); transform: rotate(45deg);
  transition: transform .15s ease, margin-top .15s ease;
}
.dd.open .dd-btn::after { transform: rotate(-135deg); margin-top: -2px; }
.dd-btn:hover { border-color: #AEBBDD; }
.dd-btn:focus { outline: none; }
.dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--blue, #4D80FF); }
.dd-btn.placeholder { color: var(--muted, #56627F); }
.dd-btn:disabled { opacity: .55; cursor: default; }
.dd:has(select[aria-invalid="true"]) .dd-btn { border-color: var(--orange, #FF8A36); box-shadow: 0 0 0 2px var(--orange, #FF8A36); }
.dd-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: #fff; border: 2px solid var(--blue, #4D80FF);
  box-shadow: 0 14px 30px rgba(15,27,61,.22); color: var(--ink, #0F1B3D); font-size: 15px; text-align: left;
}
.dd.up .dd-list { top: auto; bottom: calc(100% + 4px); }
.dd-list li { position: relative; padding: 8px 32px 8px 12px; cursor: pointer; line-height: 1.35; }
.dd-list li.active { background: #E8EFFF; }
.dd-list li[aria-selected="true"] { font-weight: 700; }
.dd-list li[aria-selected="true"]::after {   /* tick on the chosen option */
  content: ""; position: absolute; right: 13px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border-right: 2.5px solid var(--blue, #4D80FF); border-bottom: 2.5px solid var(--blue, #4D80FF); transform: rotate(45deg);
}
.dd-list li[aria-disabled="true"] { color: #9AA3BC; cursor: not-allowed; background: none; }
