/* Themed dropdown — shared by the v2 pages and the agent registration page.
   Extracted from eway.css so both load one implementation, not two. */

/* ---------- Themed dropdown ----------
   A native <select> popup is OS chrome: the option-list highlight cannot be
   styled and cannot even be screenshotted for verification. Where the brand
   colour matters, eway.js swaps the select for this in-page listbox and keeps
   the original <select> in the DOM as the value holder, so every existing
   .value read and change listener still works. No JS -> the native select
   stays, fully usable. */
.sel { position: relative; display: inline-block; max-width: 100%; }
.sel > select { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.sel-btn {
  display: inline-flex; align-items: center; gap: .4em;
  width: 100%; cursor: pointer; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
.sel-btn::after {
  content: ""; flex: none; width: .62em; height: .62em; margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s;
}
.sel[data-open="true"] .sel-btn::after { transform: rotate(180deg); }
.sel-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.sel-list {
  overflow-y: auto;
  min-width: 100%;
  /* tall enough that the everyday lists (8 items) never scroll; the cap only
     bites on the 14-entry nationality list, and never taller than the viewport */
  max-height: min(70vh, 460px);
  /* No visible scrollbar: the list still scrolls with the wheel, and arrow-key
     navigation scrolls it via scrollIntoView in eway.js. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.sel-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  /* .sel-list is a scroll container (overflow-y:auto also makes overflow-x
     scrollable), so its min-content width is 0. Without an explicit width this
     shrink-to-fit panel collapses to the trigger's width and clips the option
     text -- which is fine for a full-width field, but not for the narrow
     inline triggers in the build card. Size to the longest option instead. */
  width: max-content; min-width: 100%; max-width: min(88vw, 340px);
  display: grid; gap: 6px;
}
.sel[data-open="false"] .sel-panel { display: none; }
.sel-opt {
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.sel-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sel-opt[aria-selected="true"] { color: var(--green); }
/* the themed replacement for the OS highlight */
.sel-opt.is-active { background: var(--green); color: var(--bg); }

/* context sizing: the button has to read exactly like the select it replaced */
.build .sel { border-bottom: 2px solid var(--green); }
.build .sel-btn { color: var(--green); font-weight: 700; font-size: 24px; padding: 0 4px; }
.build .sel-list { font-size: 18px; }
.sel.from-field { display: block; width: 100%; background-color: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; margin-top: 12px; }
.sel.from-field .sel-btn { color: var(--text); }

/* search field — only shown once the list is long enough to need it */
.sel-search {
  width: 100%; min-width: 220px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 12px;
}
.sel:not(.has-search) .sel-search { display: none; }
.sel-search:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.sel-search::placeholder { color: var(--dim); }

/* mirrors select.disabled */
.sel.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- themed autocomplete (input[list]) ---------- */
.ac { position: relative; display: block; }
.ac-list {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 100%; min-width: 100%; max-height: 300px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md, 14px); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  scrollbar-width: none; -ms-overflow-style: none;
}
.ac-list::-webkit-scrollbar { width: 0; display: none; }
.ac[data-open="false"] .ac-list { display: none; }
.ac-opt {
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 600;
}
.ac-opt.is-active { background: var(--green); color: var(--bg); }