/* ==========================================================================
   KGI Trading — design foundation

   Form factors (per design spec):
     mobile  : width <  768px
     tablet  : width >= 768px and < 1280px
     desktop : width >= 1280px

   Written mobile-first: the base rules are the mobile layout, then
   `min-width: 768px` layers on tablet and `min-width: 1280px` on desktop.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable.ttf") format("truetype-variations"),
         url("../fonts/Inter-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype-variations"),
         url("../fonts/Inter-Italic-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Brand */
    --kgi-orange: #ff4200;
    --kgi-orange-hover: #e63a00;
    --kgi-orange-active: #cc3400;
    --kgi-navy: #0b3d7c;

    /* Ink */
    --ink: #111315;
    --ink-strong: #000000;
    --ink-soft: #4a4f54;
    --ink-muted: #71767b;
    --ink-inverse: #ffffff;

    /* Surfaces */
    --surface: #ffffff;
    --surface-sunken: #f7f7f7;
    --surface-dark: #16171a;

    /* Controls */
    --field-bg: #f7f7f7;
    --field-bg-focus: #ffffff;
    --field-border: #ececec;
    --field-border-focus: #000000;
    --field-placeholder: #9a9a9a;
    --control-disabled-bg: #e8e8e8;
    --control-disabled-fg: #b0b0b0;
    --link: #2e7bef;
    --link-hover: #1c62cc;
    --danger: #d92d20;
    --success: #1f9d55;
    --focus-ring: #2e7bef;

    /* Type */
    --font-sans: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --shell-max: 1440px;
    --gutter: 20px;
    /* A dialog's own edge-spacing floor — deliberately a fixed 32px rather
       than following --gutter above, which grows at wider breakpoints for
       page-level layout (up to 96px) and would leave a dialog swimming in
       empty margin at those widths instead of just capping out at its own
       max-width, e.g. .dialog's 420px. */
    --dialog-gutter: 32px;
    --header-height: 64px;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-pill: 999px;

    --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.28);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    :root {
        --gutter: 40px;
        --header-height: 76px;
    }
}

@media (min-width: 1280px) {
    :root {
        --gutter: 96px;
        --header-height: 88px;
    }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Nothing on this site is meant to scroll sideways — a horizontal scrollbar
       showing up (e.g. behind a wide dialog on a narrower window) is always an
       accident, never something to preserve. overflow on the root element is
       special-cased by the spec to apply to the viewport itself rather than
       creating a clipping box, so this does not affect how fixed-position
       elements (the app bar, an open dialog) are laid out. */
    overflow-x: hidden;
}

body {
    margin: 0;
    /* Belt and braces alongside html's overflow-x above: same rule, in case
       something ever puts this page into quirks mode or another context where
       the viewport's scroll behaviour is read off body instead of html. */
    overflow-x: hidden;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
}

/* The attribute otherwise loses to any class that sets display, such as
   .btn--block, which leaves scripted `element.hidden = true` with no effect. */
[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Text fields that fall back to the ring above, rather than showing focus
   with their own border like .input, still get the black field colour. */
input:not([type="checkbox"], [type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-color: var(--field-border-focus);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Shared page shell: caps the content width and applies the responsive gutter. */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Brand lockup — [mark] KGI | NINJATRADER
   -------------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    /* The lockup is nowrap, so it has to scale on narrow screens or it gets
       clipped by the hero's overflow. Settles at 20px from ~435px up. */
    font-size: clamp(1rem, 4.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--ink-inverse);
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover {
    color: var(--ink-inverse);
    text-decoration: none;
}

.brand__mark {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

.brand__kgi {
    letter-spacing: 0.005em;
}

.brand__rule {
    width: 1px;
    height: 1.05em;
    background: currentColor;
    opacity: 0.5;
}

.brand__product {
    letter-spacing: 0.04em;
}

/* Hero variant: larger, and NINJATRADER picks up the brand orange. */
.brand--hero {
    font-size: clamp(1.25rem, 5.6vw, 2rem);
}

.brand--hero .brand__product {
    color: var(--kgi-orange);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:hover {
    text-decoration: none;
}

/* No visible ring at all, :focus-visible included: some browsers still treat
   a button that gets autofocus the moment a dialog opens (see e.g.
   AccountLockedDialogViewComponent's "Contact Support" and TicketSubmitSuccessDialogViewComponent's
   "Okay") as worth a focus-visible outline even though it was never a
   deliberate keyboard action — which is what this is actually suppressing. */
.btn:focus,
.btn:focus-visible {
    outline: none;
}

.btn--primary {
    background: var(--kgi-orange);
    color: var(--ink-inverse);
}

.btn--primary:hover {
    background: var(--kgi-orange-hover);
    color: var(--ink-inverse);
}

.btn--primary:active {
    background: var(--kgi-orange-active);
}

/* Outlined button for use on dark media — the header "Login" control. */
.btn--outline-inverse {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--ink-inverse);
}

.btn--outline-inverse:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--ink-inverse);
}

/* Solid black control — the confirmation button in dialogs. */
.btn--ink {
    background: var(--ink-strong);
    color: var(--ink-inverse);
}

.btn--ink:hover {
    background: #26282c;
    color: var(--ink-inverse);
}

.btn--lg {
    min-height: 52px;
    padding: 0 28px;
    font-size: 16px;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--control-disabled-bg);
    border-color: transparent;
    color: var(--control-disabled-fg);
    cursor: not-allowed;
}

@media (min-width: 1280px) {
    .btn--lg {
        min-height: 56px;
        padding: 0 32px;
    }
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.field {
    display: grid;
    gap: 8px;
}

.field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.field__control {
    position: relative;
    display: flex;
}



.input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    background: var(--field-bg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.mar_right_20
{
    padding-right:60px;
}

.input::placeholder {
    color: var(--field-placeholder);
}

.input:hover {
    background: #f2f2f2;
}

.input:focus {
    background: var(--field-bg-focus);
    border-color: var(--field-border-focus);
    outline: none;
}

.input:focus-visible {
    outline: none;
}

/* The "Please specify" box next to a survey question's free-text option —
   greyed out until that option is actually picked. See site.js's
   wireSurveyWizard. */
.input:disabled {
    background: var(--control-disabled-bg);
    color: var(--control-disabled-fg);
    cursor: not-allowed;
}

.input:disabled::placeholder {
    color: var(--control-disabled-fg);
}

/* Leaves room for the password reveal toggle. */
.input--has-affix {
    padding-right: 52px;
}

/* Edge (still Chromium under the hood) draws its own native reveal/clear
   control inside every input[type="password"], regardless of this app's own
   .field__affix button — the two then show side by side as what looks like
   two eye icons on the same field. display: none alone leaves its hit area
   in place in Edge (a known quirk), which sat on top of .field__affix and
   swallowed every click meant for it — pointer-events and zeroing its box
   are what actually get out of the way, not just hide. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    pointer-events: none;
    width: 0;
    height: 0;
}

.field__affix {
    position: absolute;
    inset-block: 0;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
}

.field__affix:hover {
    color: var(--ink);
}

.field__affix svg {
    width: 20px;
    height: 20px;
}

/* Icon swap driven by the reveal toggle in site.js. */
.field__affix .icon-eye {
    display: none;
}

.field__affix.is-revealed .icon-eye {
    display: block;
}

.field__affix.is-revealed .icon-eye-off {
    display: none;
}

.field__error {
    font-size: 13px;
    color: var(--danger);
}

.field__error:empty {
    display: none;
}

.input.input-validation-error {
    border-color: var(--danger);
    background: var(--field-bg-focus);
}

/* Checkbox row — "I have read and agreed to …" */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    cursor: pointer;
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--kgi-orange);
    cursor: pointer;
}

/* Create an Account's own "I have read and agreed to..." checkbox — black to
   match its own Continue button, rather than this app's usual orange accent.
   Scoped to .auth__form rather than changed on .checkbox generally, which
   would also repaint "How Did You Hear About Us"'s unrelated checkboxes. */
.auth__form .checkbox input[type="checkbox"] {
    accent-color: var(--ink-strong);
}

/* "How Did You Hear About Us?" — see HowDidYouHearAboutUsDialogViewComponent. A
   plain list of .checkbox rows, one per line, divided the way the design
   shows rather than just stacked with a gap. */
.radio-list {
    display: grid;
}

/* Fills black on check, not this app's usual orange accent — same reasoning
   and same token as Create Account's own checkbox above. */
.radio-list .checkbox input[type="checkbox"] {
    accent-color: var(--ink-strong);
}

.radio-list .checkbox {
    padding: 14px 0;
    border-bottom: 1px solid var(--field-border);
}

.radio-list .checkbox:last-child {
    border-bottom: 0;
}

/* The free-text option ("Others") is followed by its own "Please specify" box rather than by another row, so it is not the
   last child and kept its divider - a line between the option and the box that belongs to it. Dividers only go between
   options. */
.radio-list .checkbox:has(+ .input) {
    border-bottom: 0;
}

/* The ring drawn when an option has keyboard focus (or when the dialog hands focus to the first one as it opens): the global
   focus ring is a hard square at a 2px offset, which looks clipped around a round radio button. Shaped to the control instead -
   round for a radio, lightly rounded for a checkbox - in the same black as the checked tick, and the label row has room for it. */
.radio-list .checkbox input[type="radio"]:focus-visible,
.radio-list .checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ink-strong);
    outline-offset: 2px;
}

.radio-list .checkbox input[type="radio"]:focus-visible {
    border-radius: 50%;
}

.radio-list .checkbox input[type="checkbox"]:focus-visible {
    border-radius: 3px;
}

.radio-list .checkbox {
    padding-left: 4px;
}

/* --------------------------------------------------------------------------
   Site header — overlays the hero media, so it is transparent by default
   -------------------------------------------------------------------------- */

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    height: var(--header-height);
    color: var(--ink-inverse);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.site-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-header__nav {
    display: none;
}

.site-header__actions {
    display: none;
    margin-left: auto;
    gap: 12px;
}

/* Signing out is a POST, so that control arrives wrapped in a form. These keep the
   wrapper from breaking the row it sits in. */
.site-header__actions form {
    display: inline-flex;
    margin: 0;
}

.nav-drawer__actions form {
    display: grid;
    margin: 0;
}

/* Hamburger — visible below the desktop breakpoint. */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.nav-toggle svg {
    width: 24px;
    height: 24px;
}

.nav-toggle__close {
    display: none;
}

body.nav-open .nav-toggle__open {
    display: none;
}

body.nav-open .nav-toggle__close {
    display: block;
}

/* Slide-in drawer holding the nav links (and, on mobile, the CTAs). */
.nav-drawer {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 19;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px var(--gutter) 40px;
    background: rgba(12, 13, 15, 0.97);
    backdrop-filter: blur(12px);
    color: var(--ink-inverse);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

body.nav-open .nav-drawer {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.nav-drawer__link {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink-inverse);
}

.nav-drawer__link:hover {
    color: var(--kgi-orange);
    text-decoration: none;
}

.nav-drawer__actions {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.nav-drawer__actions .btn {
    min-height: 48px;
    font-size: 15px;
}

@media (min-width: 768px) {
    /* Tablet keeps the CTAs in the bar; the links stay in the drawer. */
    .site-header__actions {
        display: flex;
        margin-left: auto;
    }

    .nav-toggle {
        order: 3;
        margin-left: 8px;
        margin-right: calc(var(--gutter) / -4);
    }

    .nav-drawer__actions {
        display: none;
    }
}

@media (min-width: 1150px) {
    .site-header__nav {
        display: flex;
        align-items: center;
        gap: 32px;
        margin-left: 56px;
    }

    .site-header__nav a {
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.92);
    }

    .site-header__nav a:hover {
        color: var(--ink-inverse);
        text-decoration: none;
    }

    .nav-toggle,
    .nav-drawer {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Modal dialog — alerts such as "Resend limit reached"

   Rendered as an open <dialog> so it is still visible with JavaScript off, in
   which case it stays in the flow instead of centring over a backdrop. The
   buttons sit in a form[method="dialog"], which closes it without script.
   -------------------------------------------------------------------------- */

.dialog {
    /* Fixed at its own max-width once the viewport leaves at least
       --dialog-gutter clear on each side; shrinks to keep exactly that much
       clear once it does not, rather than sitting flush against narrow
       screen edges. */
    width: calc(100% - 2 * var(--dialog-gutter));
    max-width: 420px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
    /* A native <dialog> shown via showModal() renders in the top layer, which
       html/body's own overflow-x: hidden above cannot clip — an ancestor's
       overflow never reaches into a top-layer box. Setting it here, on the
       dialog itself, is what actually stops it (or anything absolutely
       positioned inside it, e.g. .dialog__banner-content) from ever
       showing the viewport a horizontal scrollbar of its own. */
    overflow-x: hidden;
}

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.dialog__inner {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 24px;
}

.dialog__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Centred across the whole dialog rather than across the space left over beside
   the close control, which is why that control is taken out of the flow below. */
.dialog__title {
    flex: 1;
    font-size: 20px;
    text-align: center;
}

.dialog__close {
    /* top: 0 pinned this to .dialog__head's own top edge, but that box is
       only ever as tall as the title's single line (22px) — a 32px button
       anchored there sits visibly lower than the title's centre instead of
       beside it. Centering on the head's own height, whatever that is,
       is what actually keeps it level with the title. */
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
}

.dialog__close:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

/* No visible ring at all, :focus-visible included — same reasoning as
   .btn:focus-visible: a <dialog> can hand this control focus the moment it
   opens, which some browsers still paint as a deliberate keyboard action. */
.dialog__close:focus,
.dialog__close:focus-visible {
    outline: none;
}

.dialog__close svg {
    width: 18px;
    height: 18px;
}

.dialog__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    text-align: center;
}

/* Long copy — the legal pages. Left aligned because it is prose, and capped in
   height so the dialog never grows past the viewport. */
.dialog--legal {
    max-width: 560px;
}

.dialog__body--scroll {
    display: grid;
    gap: 14px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
}

/* Keeps the last line from sitting flush against the fade of the scroll edge. */
.dialog__body--scroll > :last-child {
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Simple content pages (Privacy, Error, …)
   -------------------------------------------------------------------------- */

.content-page {
    max-width: 760px;
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 80px;
}

.content-page h1 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.content-page h2,
.content-page h3 {
    margin: 32px 0 12px;
    font-size: 1.25rem;
}

.content-page p {
    margin-bottom: 16px;
    color: var(--ink-soft);
}

/* On content pages the header sits on a solid bar rather than over media. */
body.has-solid-header .site-header {
    background: var(--surface-dark);
}

/* --------------------------------------------------------------------------
   Build stamp (BuildVersionViewComponent)

   This application's version and the API's, on every page. Fixed rather than
   in the flow, so it adds no space to any layout: it sits faintly over
   whatever is in the corner and lets clicks through to it. Stacked below the
   header, the nav drawer and dialogs, which cover it when they are open. A
   mid-grey, so it reads on the dark marketing pages and the light app ones.
   -------------------------------------------------------------------------- */

.build-version {
    position: fixed;
    right: 8px;
    bottom: 6px;
    z-index: 1;
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink-muted);
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
}

/* Phones and tablets: centred along the bottom edge instead of tucked in the right-hand corner. */
@media (max-width: 1024px) {
    .build-version {
        left: 0;
        right: 0;
        text-align: center;
    }
}