/* Nice Select — a custom dropdown that replaces the native <select> popup (which
   can't be sized on mobile) with big, readable, on-theme rows. The <select> stays
   in the DOM (hidden) as the value source, so all existing logic keeps working.
   Colour tokens fall back to the Rotax dark palette when a page doesn't define them. */
.select-wrap.ns::after { display: none; }                 /* hide the old CSS arrow */
.ns-wrap { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.select-wrap.ns { position: relative; }
.ns-trigger {
  background: var(--mid, #1C1F24); border: 1px solid var(--line, #2A2D33); color: var(--white, #fff);
  font-family: var(--fb, var(--font-body, inherit)); font-size: 16px; text-align: left;
  padding: 12px 40px 12px 13px; cursor: pointer; position: relative; line-height: 1.3; border-radius: 0;
}
.select-wrap.ns > .ns-trigger { width: 100%; }             /* form fields fill the field */
.ns-wrap > .ns-trigger { width: auto; max-width: 100%; }   /* toolbar selects keep their size */
.ns-trigger::after { content: '▾'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted, #6B7280); font-size: 12px; }
.ns-trigger.placeholder { color: var(--muted, #6B7280); }
.ns.open > .ns-trigger { border-color: var(--red, #E43138); }
.ns > select.error ~ .ns-trigger { border-color: #EF4444; }
.ns > select.valid ~ .ns-trigger { border-color: var(--green, #22C55E); }
.ns-panel {
  position: absolute; z-index: 200; top: calc(100% + 4px); left: 0; min-width: 100%;
  background: var(--dark, #111214); border: 1px solid var(--line, #2A2D33);
  box-shadow: 0 14px 34px rgba(0,0,0,.55); max-height: min(58vh, 380px); overflow: auto; display: none;
}
.ns.open > .ns-panel { display: block; }
.ns-panel.up { top: auto; bottom: calc(100% + 4px); }      /* flip above when short on space below */
.ns-search {
  position: sticky; top: 0; width: 100%; background: var(--mid, #1C1F24); color: var(--white, #fff);
  border: 0; border-bottom: 1px solid var(--line, #2A2D33);
  font-family: var(--fb, var(--font-body, inherit)); font-size: 16px; padding: 13px 14px; outline: none;
}
.ns-opt {
  padding: 14px; font-size: 16px; color: var(--white, #fff); cursor: pointer; line-height: 1.3;
  border-bottom: 1px solid rgba(255,255,255,.05); white-space: normal;
}
.ns-opt:last-child { border-bottom: 0; }
.ns-opt:hover { background: rgba(228,49,56,.14); }
.ns-opt.sel { color: var(--red, #E43138); font-weight: 700; }
.ns-opt.hide { display: none; }