/* ==========================================================================
   ns-forms.css — design layer for the public lead-capture forms.

   EVERY rule is scoped under .ns-form. These forms are embedded as iframes in
   the live TP360 / TP Auction sites; nothing here may escape into a host page.

   Aesthetic: refined / restrained. Hairline borders, a strict 4px spacing
   scale, uppercase letter-spaced labels, and a single green accent inherited
   from the existing brand. Depth comes from precision, not decoration.
   ========================================================================== */

.ns-form {
  /* Neutrals are warm rather than cold grey — reads closer to print. */
  --nsf-bg: #ffffff;
  --nsf-fg: #1a1a18;
  --nsf-muted: #767470;
  --nsf-border: #d8d6d1;
  --nsf-border-strong: #b3b0a9;
  --nsf-field-bg: #ffffff;
  --nsf-field-bg-hover: #fbfbfa;

  --nsf-accent: #006837;
  --nsf-accent-soft: rgba(0, 104, 55, 0.14);
  --nsf-danger: #b3261e;
  --nsf-danger-soft: rgba(179, 38, 30, 0.12);

  /* 4px spacing scale. */
  --nsf-s1: 4px;
  --nsf-s2: 8px;
  --nsf-s3: 12px;
  --nsf-s4: 16px;
  --nsf-s5: 24px;
  --nsf-s6: 32px;

  --nsf-radius: 10px;
  --nsf-radius-sm: 6px;
  --nsf-control-h: 48px;
  --nsf-ease: cubic-bezier(0.2, 0, 0.2, 1);

  color: var(--nsf-fg);
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ns-form--dark {
  --nsf-bg: #222222;
  --nsf-fg: #f2f1ee;
  --nsf-muted: #a3a099;
  --nsf-border: #45443f;
  --nsf-border-strong: #6a6862;
  --nsf-field-bg: #2c2c2a;
  --nsf-field-bg-hover: #333331;

  --nsf-accent: #2de762;
  --nsf-accent-soft: rgba(45, 231, 98, 0.18);
  --nsf-danger: #ff6b61;
  --nsf-danger-soft: rgba(255, 107, 97, 0.16);
}

/* --------------------------------------------------------------------------
   Headings and intro copy
   -------------------------------------------------------------------------- */

.ns-form h1,
.ns-form h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 var(--nsf-s2);
  color: var(--nsf-fg);
}

.ns-form .ns-form__intro {
  color: var(--nsf-muted);
  font-size: 0.9375rem;
  margin: 0 0 var(--nsf-s6);
}

/* --------------------------------------------------------------------------
   Field rhythm
   -------------------------------------------------------------------------- */

.ns-form .form-group {
  margin-bottom: var(--nsf-s5);
}

/* Uppercase, letter-spaced labels — the main carrier of the refined tone. */
.ns-form label,
.ns-form .form-group > label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nsf-muted);
  margin-bottom: var(--nsf-s2);
}

/* Red reads as "required" far more directly than the brand green, which was
   easy to mistake for decoration. */
.ns-form .ns-req {
  color: var(--nsf-danger);
  margin-left: 2px;
  font-weight: 700;
}

.ns-form .ns-hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--nsf-muted);
  margin-top: var(--nsf-s2);
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.ns-form .form-control,
.ns-form select.form-control,
.ns-form textarea.form-control {
  min-height: var(--nsf-control-h);
  padding: var(--nsf-s3) var(--nsf-s4);
  /* 16px prevents iOS zooming the page on focus. */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--nsf-fg);
  background-color: var(--nsf-field-bg);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius);
  box-shadow: none;
  transition: border-color 150ms var(--nsf-ease),
              box-shadow 150ms var(--nsf-ease),
              background-color 150ms var(--nsf-ease);
}

.ns-form .form-control::placeholder {
  color: var(--nsf-muted);
  opacity: 1;
}

.ns-form .form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--nsf-border-strong);
  background-color: var(--nsf-field-bg-hover);
}

/* A real, visible focus state — there was effectively none before. */
.ns-form .form-control:focus {
  outline: none;
  border-color: var(--nsf-accent);
  box-shadow: 0 0 0 3px var(--nsf-accent-soft);
  background-color: var(--nsf-field-bg);
}

.ns-form .form-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ns-form textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Native select needs its own arrow once the default appearance is removed. */
.ns-form select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: var(--nsf-s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23767470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--nsf-s4) center;
  background-size: 12px 8px;
}

.ns-form--dark select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3a099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

/* File input — the default control is unstyleable, so the wrapper carries the look. */
.ns-form input[type="file"] {
  display: block;
  width: 100%;
  min-height: var(--nsf-control-h);
  padding: var(--nsf-s3) var(--nsf-s4);
  font-size: 0.9375rem;
  color: var(--nsf-fg);
  background-color: var(--nsf-field-bg);
  border: 1px dashed var(--nsf-border-strong);
  border-radius: var(--nsf-radius);
  cursor: pointer;
  transition: border-color 150ms var(--nsf-ease), background-color 150ms var(--nsf-ease);
}

.ns-form input[type="file"]:hover {
  border-color: var(--nsf-accent);
  background-color: var(--nsf-field-bg-hover);
}

.ns-form input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--nsf-accent);
  box-shadow: 0 0 0 3px var(--nsf-accent-soft);
}

/* --------------------------------------------------------------------------
   Checkboxes and radios
   -------------------------------------------------------------------------- */

/* .custom-control is left alone: Bootstrap positions its ::before/::after
   against a padding-left, which display:flex would break. */
.ns-form .form-check,
.ns-form .form-check-inline {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--nsf-s2);
}

.ns-form .form-check-inline {
  margin-right: var(--nsf-s5);
}

.ns-form .form-check-inline:last-child {
  margin-right: 0;
}

.ns-form .custom-control {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding-left: 1.75rem;
}

/* These need to outrank ".ns-form .form-group > label" (0,2,1), which would
   otherwise render consent text uppercase and push it out of alignment with
   its checkbox via the label margin. */
.ns-form .form-check-label,
.ns-form .form-group.form-check > label,
.ns-form .form-check > .form-check-label,
.ns-form .custom-control > .custom-control-label,
.ns-form .custom-control-label {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nsf-fg);
  margin-bottom: 0;
  cursor: pointer;
}

/* A wrapping consent label must align to the first line, not the block centre. */
.ns-form .form-group.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--nsf-s3);
}

.ns-form .form-group.form-check > .form-check-input {
  margin-top: 2px;
}

/* Bootstrap 4 makes .form-check-input position:absolute with a -1.25rem left
   margin, which cancels the flex gap above. Return it to normal flow. */
.ns-form .form-check {
  padding-left: 0;
}

.ns-form .form-check-input,
.ns-form input[type="checkbox"],
.ns-form input[type="radio"] {
  position: static;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--nsf-accent);
  cursor: pointer;
}

/* Bootstrap draws .custom-control radios with label ::before/::after over a
   hidden input. That fights the native styling used by every other check on
   these forms, so render them natively and drop the pseudo-elements. */
.ns-form .custom-control {
  padding-left: 0;
}

.ns-form .custom-control-input {
  position: static;
  z-index: auto;
  opacity: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--nsf-accent);
}

.ns-form .custom-control-label::before,
.ns-form .custom-control-label::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Error state
   -------------------------------------------------------------------------- */

/* !important is required here: several forms carry Bootstrap's .border-success
   utility, which is itself !important and would otherwise keep the field green
   while it is showing an error. */
.ns-form .form-control.is-invalid,
.ns-form input[type="file"].is-invalid {
  border-color: var(--nsf-danger) !important;
  background-image: none;
  padding-right: var(--nsf-s4);
}

.ns-form select.form-control.is-invalid {
  border-color: var(--nsf-danger) !important;
  padding-right: var(--nsf-s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b3261e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

.ns-form .form-control.is-invalid:focus {
  border-color: var(--nsf-danger) !important;
  box-shadow: 0 0 0 3px var(--nsf-danger-soft);
}

.ns-form .invalid-feedback {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nsf-danger);
  margin-top: var(--nsf-s2);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ns-form .btn {
  min-height: var(--nsf-control-h);
  padding: var(--nsf-s3) var(--nsf-s6);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--nsf-radius);
  transition: background-color 150ms var(--nsf-ease),
              border-color 150ms var(--nsf-ease),
              transform 80ms var(--nsf-ease),
              box-shadow 150ms var(--nsf-ease);
}

.ns-form .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nsf-accent-soft);
}

.ns-form .btn:active:not(:disabled) {
  transform: translateY(1px);
}

.ns-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ns-form .btn-success,
.ns-form .btn-dark,
.ns-form .btn-primary {
  color: #fff;
  background-color: var(--nsf-accent);
  border-color: var(--nsf-accent);
}

.ns-form--dark .btn-success,
.ns-form--dark .btn-dark,
.ns-form--dark .btn-primary {
  color: #10240f;
}

.ns-form .btn-success:hover:not(:disabled),
.ns-form .btn-dark:hover:not(:disabled),
.ns-form .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* Submitting state — spinner lives inside the button. */
.ns-form .ns-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: var(--nsf-s2);
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ns-spin 700ms linear infinite;
}

@keyframes ns-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ns-form .ns-spinner { animation-duration: 2s; }
  .ns-form * { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .ns-form .form-group {
    margin-bottom: var(--nsf-s4);
  }

  /* Full-width buttons below sm, but never the inline pair on the home form. */
  .ns-form .btn:not(.ns-btn-inline) {
    display: block;
    width: 100%;
  }

  .ns-form .btn + .btn:not(.ns-btn-inline) {
    margin-top: var(--nsf-s2);
  }
}

/* --------------------------------------------------------------------------
   Consent / fine print
   -------------------------------------------------------------------------- */

.ns-form .ns-consent {
  margin: var(--nsf-s5) 0;
  padding: var(--nsf-s4) var(--nsf-s5);
  background-color: var(--nsf-field-bg-hover);
  border: 1px solid var(--nsf-border);
  border-radius: var(--nsf-radius);
}

.ns-form--dark .ns-consent {
  background-color: rgba(255, 255, 255, 0.03);
}

.ns-form .ns-consent__lead {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nsf-fg);
  margin: 0 0 var(--nsf-s3);
}

/* Legal copy: readable fine print rather than a wall of bold body text. */
.ns-form .ns-consent__note {
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--nsf-muted);
  margin: 0 0 var(--nsf-s2);
}

.ns-form .ns-consent__note:last-child {
  margin-bottom: 0;
}

.ns-form .ns-consent .form-group.form-check {
  margin-bottom: var(--nsf-s3);
}

/* --------------------------------------------------------------------------
   Submit row
   -------------------------------------------------------------------------- */

.ns-form .ns-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nsf-s3);
  margin-top: var(--nsf-s5);
}

.ns-form .ns-actions .btn {
  min-width: 200px;
}

@media (max-width: 575.98px) {
  .ns-form .ns-actions .btn {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Country code combobox
   -------------------------------------------------------------------------- */

.ns-form .nsf-cc {
  position: relative;
}

/* Until the JS upgrade runs, the native select is the control. */
.ns-form .nsf-cc__trigger {
  display: none;
}

.ns-form .nsf-cc--ready .nsf-cc__native {
  /* Kept in the DOM as the submitted control, but visually replaced. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ns-form .nsf-cc--ready .nsf-cc__trigger {
  display: flex;
  align-items: center;
  gap: var(--nsf-s2);
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23767470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--nsf-s2) center;
  background-size: 12px 8px;
  padding-left: var(--nsf-s3);
  padding-right: 26px;
}

.ns-form--dark .nsf-cc--ready .nsf-cc__trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3a099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

.ns-form .nsf-cc__flag {
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
}

.ns-form .nsf-cc__dial {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ns-form .nsf-cc__panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 6px);
  left: 0;
  /* Wide enough for the longest short-form country name, but never narrower
     than the trigger it is anchored to. */
  width: 320px;
  min-width: 100%;
  max-width: calc(100vw - 32px);
  background-color: var(--nsf-field-bg);
  border: 1px solid var(--nsf-border-strong);
  border-radius: var(--nsf-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.ns-form .nsf-cc__search {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--nsf-s2) var(--nsf-s4);
  font-size: 0.9375rem;
  color: var(--nsf-fg);
  background-color: var(--nsf-field-bg);
  border: 0;
  border-bottom: 1px solid var(--nsf-border);
  outline: none;
}

.ns-form .nsf-cc__search:focus {
  box-shadow: inset 0 -2px 0 var(--nsf-accent);
}

.ns-form .nsf-cc__list {
  max-height: 260px;
  margin: 0;
  padding: var(--nsf-s1) 0;
  overflow-y: auto;
  list-style: none;
}

.ns-form .nsf-cc__option {
  display: flex;
  align-items: center;
  gap: var(--nsf-s3);
  min-height: 40px;
  padding: var(--nsf-s2) var(--nsf-s4);
  font-size: 0.9375rem;
  color: var(--nsf-fg);
  cursor: pointer;
}

.ns-form .nsf-cc__option .nsf-cc__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ns-form .nsf-cc__option .nsf-cc__dial {
  color: var(--nsf-muted);
  font-size: 0.875rem;
}

.ns-form .nsf-cc__option:hover,
.ns-form .nsf-cc__option.is-active {
  background-color: var(--nsf-accent-soft);
}

.ns-form .nsf-cc__option[aria-selected="true"] {
  font-weight: 700;
}

.ns-form .nsf-cc__empty {
  padding: var(--nsf-s4);
  font-size: 0.875rem;
  color: var(--nsf-muted);
  text-align: center;
}

/* On a phone the panel escapes its narrow grid column as a bottom sheet. */
@media (max-width: 575.98px) {
  .ns-form .nsf-cc__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    border-radius: var(--nsf-radius) var(--nsf-radius) 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
  }

  .ns-form .nsf-cc__list {
    max-height: 45vh;
  }
}

/* --------------------------------------------------------------------------
   Form title / intro — replaces three differently hand-styled headings
   -------------------------------------------------------------------------- */

.ns-form .ns-form__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  color: var(--nsf-fg);
  margin: var(--nsf-s5) 0 var(--nsf-s2);
}

.ns-form .ns-form__intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
  color: var(--nsf-muted);
  margin: 0 auto var(--nsf-s6);
  max-width: 52ch;
}

/* Style consent copy structurally, so a form that lacks the explicit classes
   still renders identically to the others. */
.ns-form .ns-consent p {
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--nsf-muted);
  margin: 0 0 var(--nsf-s2);
}

.ns-form .ns-consent p:first-of-type {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nsf-fg);
  margin-bottom: var(--nsf-s3);
}

.ns-form .ns-consent p:last-child {
  margin-bottom: 0;
}

/* Inline font-weight on legacy markup must not reintroduce the heavy look. */
.ns-form .ns-consent p[style] {
  font-weight: 400 !important;
}

.ns-form .ns-consent p:first-of-type[style] {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Grid alignment
   -------------------------------------------------------------------------- */

/* The trigger is the narrowest control on the page; keep its chevron clear of
   the dial code at small widths. */
@media (max-width: 575.98px) {
  .ns-form .nsf-cc--ready .nsf-cc__trigger {
    padding-left: var(--nsf-s3);
    padding-right: var(--nsf-s5);
    background-position: right var(--nsf-s2) center;
    gap: var(--nsf-s1);
  }

  .ns-form .nsf-cc__flag {
    font-size: 0.95rem;
  }

  .ns-form .nsf-cc__dial {
    font-size: 0.9375rem;
  }
}

/* --------------------------------------------------------------------------
   Checkbox / radio groups
   -------------------------------------------------------------------------- */

/* Inline checks sit in a block parent, so they cannot share a row on their own
   and end up one per line on a phone. A grid gives even columns that reflow by
   available width, and keeps every item left-aligned in its cell. */
/* Specificity must beat the .form-row > .form-group rules above. */
.ns-form .form-row > .form-group.ns-checks,
.ns-form .ns-checks {
  display: grid;
  /* 112px keeps two columns at 320px (270px container - 16px gap = 127 each). */
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--nsf-s2) var(--nsf-s4);
  align-items: center;
}

.ns-form .ns-checks > label {
  grid-column: 1 / -1;
  margin-bottom: var(--nsf-s1);
}

.ns-form .ns-checks .form-check-inline,
.ns-form .ns-checks .form-check,
.ns-form .ns-checks .custom-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nsf-s2);
  margin-right: 0;
  min-width: 0;
}

.ns-form .ns-checks .form-check-label,
.ns-form .ns-checks .custom-control-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Switch (binary yes/no) and segmented control (either/or)
   -------------------------------------------------------------------------- */

.ns-form label.nsf-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--nsf-s3);
  min-height: 44px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nsf-fg);
  cursor: pointer;
}

.ns-form .nsf-switch .nsf-switch__input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin: 0;
  background-color: var(--nsf-border-strong);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms var(--nsf-ease);
}

.ns-form .nsf-switch .nsf-switch__input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 150ms var(--nsf-ease);
}

.ns-form .nsf-switch .nsf-switch__input:checked {
  background-color: var(--nsf-accent);
}

.ns-form .nsf-switch .nsf-switch__input:checked::after {
  transform: translateX(20px);
}

.ns-form .nsf-switch .nsf-switch__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nsf-accent-soft);
}

/* State word is driven by the checkbox, so no JS is needed to keep it in sync. */
.ns-form .nsf-switch__state::after {
  content: attr(data-off);
}

.ns-form .nsf-switch .nsf-switch__input:checked ~ .nsf-switch__state::after {
  content: attr(data-on);
}

.ns-form .nsf-segment {
  display: inline-flex;
  padding: 3px;
  background-color: var(--nsf-field-bg-hover);
  border: 1px solid var(--nsf-border);
  border-radius: 999px;
}

.ns-form .nsf-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ns-form .nsf-segment label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 0 var(--nsf-s4);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nsf-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms var(--nsf-ease), color 150ms var(--nsf-ease);
}

.ns-form .nsf-segment input:checked + label {
  background-color: var(--nsf-accent);
  color: #fff;
}

.ns-form--dark .nsf-segment input:checked + label {
  color: #10240f;
}

.ns-form .nsf-segment input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--nsf-accent-soft);
}

/* --------------------------------------------------------------------------
   Page-rendered select (replaces the OS-drawn native option list)
   -------------------------------------------------------------------------- */

.ns-form .nsf-sel {
  position: relative;
}

/* Before the JS upgrade the native select is still the control. */
.ns-form .nsf-sel__trigger {
  display: none;
}

.ns-form .nsf-sel--ready .nsf-sel__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ns-form .nsf-sel--ready .nsf-sel__trigger {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--nsf-s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23767470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--nsf-s4) center;
  background-size: 12px 8px;
}

.ns-form--dark .nsf-sel--ready .nsf-sel__trigger {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a3a099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

/* Placeholder option should read as placeholder text, not a value. */
.ns-form .nsf-sel__trigger.is-placeholder {
  color: var(--nsf-muted);
}

/* The inline error renderer marks the hidden select; reflect that on the trigger. */
.ns-form .nsf-sel__native.is-invalid ~ .nsf-sel__trigger {
  border-color: var(--nsf-danger) !important;
}

/* Pinned to the trigger's width, so it can never render wider than its control. */
.ns-form .nsf-sel__panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background-color: var(--nsf-field-bg);
  border: 1px solid var(--nsf-border-strong);
  border-radius: var(--nsf-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.ns-form .nsf-sel__search {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--nsf-s2) var(--nsf-s4);
  font-size: 0.9375rem;
  color: var(--nsf-fg);
  background-color: var(--nsf-field-bg);
  border: 0;
  border-bottom: 1px solid var(--nsf-border);
  outline: none;
}

.ns-form .nsf-sel__search:focus {
  box-shadow: inset 0 -2px 0 var(--nsf-accent);
}

.ns-form .nsf-sel__list {
  max-height: 260px;
  margin: 0;
  padding: var(--nsf-s1) 0;
  overflow-y: auto;
  list-style: none;
}

.ns-form .nsf-sel__option {
  display: block;
  min-height: 40px;
  padding: 10px var(--nsf-s4);
  font-size: 0.9375rem;
  color: var(--nsf-fg);
  cursor: pointer;
}

.ns-form .nsf-sel__option:hover,
.ns-form .nsf-sel__option.is-active {
  background-color: var(--nsf-accent-soft);
}

.ns-form .nsf-sel__option[aria-selected="true"] {
  font-weight: 700;
}

.ns-form .nsf-sel__option[aria-disabled="true"] {
  color: var(--nsf-muted);
  cursor: default;
}

.ns-form .nsf-sel__empty {
  padding: var(--nsf-s4);
  font-size: 0.875rem;
  color: var(--nsf-muted);
  text-align: center;
}