/* 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: 11px 40px 11px 14px; cursor: pointer; position: relative; line-height: 1.3; border-radius: 10px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.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: 14px; top: 46%; transform: translateY(-50%); color: var(--muted, #6B7280); font-size: 16px; transition: transform .16s ease; }
.ns-trigger.placeholder { color: var(--muted, #6B7280); }
.ns.open > .ns-trigger { border-color: var(--red, #E43138); box-shadow: 0 0 0 3.5px rgba(228,49,56,.18); }
.ns.open > .ns-trigger::after { transform: translateY(-50%) rotate(180deg); }
.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% + 6px); left: 0; min-width: 100%;
  background: var(--dark, #111214); border: 1px solid var(--line, #2A2D33); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28); max-height: min(58vh, 380px); overflow: auto; display: none;
}
.ns.open > .ns-panel { display: block; }
.ns-panel.up { top: auto; bottom: calc(100% + 6px); }      /* flip above when short on space below */
.ns-search {
  position: sticky; top: 0; width: 100%; background: transparent; color: var(--white, #fff);
  border: 1px solid var(--line, #2A2D33); border-radius: 9px; margin-bottom: 5px;
  font-family: var(--fb, var(--font-body, inherit)); font-size: 15px; padding: 11px 12px; outline: none;
}
.ns-opt {
  padding: 11px 12px; font-size: 15px; color: var(--white, #fff); cursor: pointer; line-height: 1.3;
  border-radius: 9px; white-space: normal;
}
.ns-opt:hover { background: rgba(127,127,127,.14); }
.ns-opt.sel { color: var(--red, #E43138); font-weight: 700; background: rgba(228,49,56,.12); }
.ns-opt.hide { display: none; }
/* <optgroup> heading — a quiet divider, never mistakable for a selectable row */
.ns-group {
  padding: 10px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted, #6B7280); pointer-events: none;
}
.ns-group + .ns-opt { margin-top: 0; }
.ns-group.hide { display: none; }