/* Batch 28 - shared form theme (owner pick: concept B "split arena").
   Opt in by adding class="nxf" to any form or wrapper. It only skins: no layout, no behaviour, no new
   markup required. Selects keep their existing arrow and dropdown (background-color only, never the
   background shorthand). Floating labels: wrap a label + input in .nxf-fl (label first is fine).
   nx-forms.js adds .is-filled / .is-focus as a fallback for browsers without :has(), the Caps Lock
   hint ([data-caps-for]) and inline errors (.nxf-err). Logical properties so /ar/ mirrors itself. */
.nxf { --nxf-g: #45f882; --nxf-g-hi: #6dffa0; --nxf-ring: rgba(69, 248, 130, .16); --nxf-bg: #070c09; --nxf-bg-hi: #0a120d;
  --nxf-line: rgba(156, 170, 160, .28); --nxf-line-hi: rgba(160, 205, 175, .5); --nxf-ink: #f2f5f3; --nxf-mute: #aab3ad;
  --nxf-dim: #8d988f; --nxf-ph: #6f7b73; --nxf-err: #ff8f82; --nxf-err-ring: rgba(255, 122, 107, .16); --nxf-warn: #ffd27a; --nxf-r: 12px; }
.nxf ::selection { background: rgba(69, 248, 130, .35); color: #fff; }

/* base skin */
.nxf input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
.nxf textarea, .nxf select {
  min-height: 48px; border-radius: var(--nxf-r); border: 1px solid var(--nxf-line); background-color: var(--nxf-bg); color: var(--nxf-ink);
  font-size: 15px; caret-color: var(--nxf-g); box-shadow: none; outline: 0;
  transition: border-color .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s cubic-bezier(.22, 1, .36, 1), background-color .16s ease-out; }
.nxf input:not([type="checkbox"]):not([type="radio"]):hover, .nxf textarea:hover, .nxf select:hover { border-color: var(--nxf-line-hi); }
.nxf input:not([type="checkbox"]):not([type="radio"]):focus, .nxf textarea:focus, .nxf select:focus,
.nxf input:not([type="checkbox"]):not([type="radio"]):focus-visible, .nxf textarea:focus-visible, .nxf select:focus-visible {
  border-color: var(--nxf-g); background-color: var(--nxf-bg-hi); box-shadow: 0 0 0 4px var(--nxf-ring); outline: 0; }
.nxf ::placeholder { color: var(--nxf-ph); opacity: 1; }
.nxf select option { background: #0b120e; color: var(--nxf-ink); }
.nxf [aria-invalid="true"], .nxf .is-invalid { border-color: var(--nxf-err) !important; }
.nxf [aria-invalid="true"]:focus, .nxf .is-invalid:focus { box-shadow: 0 0 0 4px var(--nxf-err-ring) !important; }
.nxf input:disabled, .nxf textarea:disabled, .nxf select:disabled { opacity: .55; cursor: not-allowed; }
.nxf input[readonly] { background-color: #0b100d; color: var(--nxf-mute); }
.nxf input:-webkit-autofill, .nxf input:-webkit-autofill:hover, .nxf input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nxf-ink); caret-color: var(--nxf-g); -webkit-box-shadow: 0 0 0 1000px var(--nxf-bg-hi) inset; transition: background-color 9999s; }
.nxf input[type="checkbox"], .nxf input[type="radio"] { accent-color: var(--nxf-g); }

/* floating label */
.nxf-fl { position: relative; }
.nxf-fl > label { position: absolute; z-index: 1; inset-inline-start: 16px; inset-block-start: 17px; max-width: calc(100% - 64px); margin: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; color: var(--nxf-dim);
  font-size: 15px; font-weight: 500; line-height: 22px; transform-origin: 0 0;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), color .18s ease-out; }
[dir="rtl"] .nxf-fl > label { transform-origin: 100% 0; }
.nxf .nxf-fl > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 56px; padding: 24px 15px 8px; line-height: 22px; }
.nxf .nxf-fl > input::placeholder { color: transparent !important; transition: color .18s ease-out; }
.nxf .nxf-fl > input:focus::placeholder { color: var(--nxf-ph) !important; }
.nxf-fl:has(> input:focus) > label, .nxf-fl:has(> input:not(:placeholder-shown)) > label, .nxf-fl:has(> input:-webkit-autofill) > label,
.nxf-fl.is-focus > label, .nxf-fl.is-filled > label { transform: translateY(-10px) scale(.76); }
.nxf-fl:has(> input:focus) > label, .nxf-fl.is-focus > label { color: var(--nxf-g); }
.nxf-fl:has(> input[aria-invalid="true"]) > label { color: var(--nxf-err); }
.nxf-fl > label span { color: var(--nxf-dim); font-weight: 500; }

/* password eye: 44px target on the inline end */
.nxf .pw-wrap { position: relative; }
.nxf .pw-wrap > input { padding-inline-end: 54px !important; }
.nxf .pw-eye { position: absolute; inset-inline-end: 6px; inset-block-start: 6px; inset-inline-start: auto; width: 44px; height: 44px; transform: none;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--nxf-mute); cursor: pointer;
  transition: color .15s ease-out, background-color .15s ease-out; }
.nxf .pw-eye:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nxf .pw-eye:focus-visible { outline: 2px solid var(--nxf-g); outline-offset: 0; }
.nxf .pw-eye[aria-pressed="true"] { color: var(--nxf-g); }

/* helper lines */
.nxf-caps { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--nxf-warn); }
.nxf-caps[hidden] { display: none; }
.nxf-caps::before { content: ""; inline-size: 14px; block-size: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 12.5h5V20h8v-7.5h5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 12.5h5V20h8v-7.5h5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.nxf-err { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; font-style: normal; line-height: 1.45; color: var(--nxf-err); }
.nxf-err:empty { display: none; }
.nxf-hint { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--nxf-dim); }

/* segmented tabs */
.nxf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(156, 170, 160, .18); }
.nxf-seg > * { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--nxf-mute); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out; }
.nxf-seg > *:hover { color: #fff; }
.nxf-seg > [aria-selected="true"], .nxf-seg > .active { background: rgba(69, 248, 130, .12) !important; color: #fff; box-shadow: inset 0 0 0 1px rgba(69, 248, 130, .38) !important; }
/* the v2 sliding indicator (nx-ui-v2) would sit as a small box over the first tab here; this control draws its own active state */
.nxf-seg > .nxv2-ind { display: none !important; }
.nxf-seg > *:focus-visible { outline: 2px solid var(--nxf-g); outline-offset: 2px; }

/* buttons */
.nxf-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: 24px; border-radius: var(--nxf-r);
  border: 0; background: var(--nxf-g); color: #03140a; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(69, 248, 130, .9); transition: background-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out; }
.nxf-cta:hover { background: var(--nxf-g-hi); color: #03140a; box-shadow: 0 14px 30px -14px rgba(69, 248, 130, 1); }
.nxf-cta:active { transform: translateY(1px); }
.nxf-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nxf-cta:disabled, .nxf-cta[aria-busy="true"] { opacity: .6; cursor: progress; }
.nxf-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: 20px; border-radius: var(--nxf-r);
  border: 1px solid rgba(156, 170, 160, .3); background: transparent; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .16s ease-out, background-color .16s ease-out; }
.nxf-ghost:hover { border-color: var(--nxf-line-hi); background: rgba(255, 255, 255, .04); color: #fff; }
.nxf-ghost:focus-visible { outline: 2px solid var(--nxf-g); outline-offset: 3px; }
.nxf a:not([class]) { color: var(--nxf-g); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .nxf *, .nxf *::before { transition: none !important; } }