/*!
 * Nodalbank — authentication pages (login / register)
 *
 * Geometry measured from the reference platform's own login screen:
 *   page          background #000
 *   left panel    inset 16px, radius 8px, overflow hidden
 *   form card     500px wide, #101014, radius 16px, padding 24px
 *   input         46px tall, radius 6px, transparent, 14px, 16px left pad
 *   primary btn   48px tall, radius 6px, 14px/400, dark label
 *   social btn    48px tall, radius 6px, #1e232a
 *
 * Brand substitution is limited to the accent: the reference's teal #3ecec6
 * becomes Nodalbank gold. Every neutral surface keeps the reference's own
 * measured value. Namespaced `na-` so nothing leaks into main.css.
 */

.na {
    /* Neutral surfaces are the reference's own measured values, not our navy
       tints — only the accent carries the brand. */
    --na-page: #000000;
    --na-panel: #101014;
    --na-field: rgba(244, 247, 250, 0.04);
    --na-social: #1e232a;
    --na-social-hover: #2a313a;
    --na-line: rgba(229, 236, 242, 0.16);
    --na-line-strong: rgba(229, 236, 242, 0.34);
    --na-ink: #e5ecf2;
    --na-ink-dim: #9baab5;
    --na-accent: #cba352;
    --na-accent-hover: #dcbb77;
    --na-on-accent: #10141f;
    --na-danger: #e06a6a;

    --na-radius-card: 16px;
    --na-radius-panel: 8px;
    --na-radius-field: 6px;

    --na-ease: ease;
    --na-dur: 0.14s;

    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    background: var(--na-page);
    color: var(--na-ink);
    -webkit-font-smoothing: antialiased;
}

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

/* Native <select> popups and scrollbars follow the declared scheme, not CSS. */
:root:has(.na),
body:has(.na),
.na { color-scheme: dark; }

/* ==========================================================================
   Split layout
   ========================================================================== */

.na-split {
    display: grid;
    min-height: 100vh;
    padding: 16px;
    gap: 16px;
}

@media (min-width: 992px) {
    .na-split {
        grid-template-columns: minmax(0, 588fr) minmax(0, 836fr);
        align-items: stretch;
    }
}

/* -- Left visual panel ---------------------------------------------------- */

.na-visual {
    position: relative;
    display: none;
    border-radius: var(--na-radius-panel);
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
}

@media (min-width: 992px) {
    .na-visual { display: flex; flex-direction: column; }
}

.na-visual__img {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The copy sits at the top of the panel, so the heavier wash goes there;
   a light one at the foot keeps the rounded corner from glaring. */
.na-visual__scrim {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0) 48%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 24%);
}

.na-visual__inner {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Extra room at the head so the copy is not pinned to the panel's edge. */
    padding: 88px 40px 40px;
    text-align: center;
}

/* Fills the panel below the copy, which sits at the top. */
.na-visual__spacer { flex: 1; min-height: 24px; }

.na-visual__title {
    margin: 0 0 12px;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-wrap: balance;
}

.na-visual__text {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(244, 247, 250, 0.78);
}

/* ==========================================================================
   Right: the form card
   ========================================================================== */

.na-formwrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.na-card {
    width: 100%;
    max-width: 500px;
    padding: 24px;
    border-radius: var(--na-radius-card);
    background: var(--na-panel);
}

/* The wordmark rides above the card on small screens, where the visual panel
   is not rendered at all. */
.na-card__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin-bottom: 24px;
}

.na-card__logo img { height: 28px; width: auto; }

@media (min-width: 992px) {
    .na-card__logo { display: none; }
}

.na-card__title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--na-ink);
}

.na-card__sub {
    margin: 0 0 24px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--na-ink-dim);
}

/* ==========================================================================
   Fields
   ========================================================================== */

.na-field { margin-bottom: 16px; }

.na-field > label,
.na-field .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--na-ink-dim);
}

.na-field .text-muted { color: var(--na-ink-dim) !important; }

/* Wins over main.css's .form--control, which is loaded first. */
.na .form-control,
.na .form--control,
.na input[type='text'],
.na input[type='email'],
.na input[type='password'],
.na input[type='number'],
.na select,
.na textarea {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-field);
    background: var(--na-field);
    box-shadow: none;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--na-ink);
    transition: border-color var(--na-dur) var(--na-ease),
                background-color var(--na-dur) var(--na-ease);
}

.na textarea { height: auto; padding: 12px 16px; }

/* Covers every field on these pages, not just the two product classes — the
   referral-code box and the verification-code inputs carry placeholders too.
   main.css:1655 sets `::placeholder { color:#496a93 !important; opacity:.5
   !important }` on a bare selector, so !important is the only way to win. */
.na input::placeholder,
.na textarea::placeholder,
.na .form-control::placeholder,
.na .form--control::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.na .form-control:hover,
.na .form--control:hover { border-color: var(--na-line-strong); }

.na .form-control:focus,
.na .form--control:focus,
.na input:focus,
.na select:focus,
.na textarea:focus {
    outline: none;
    border-color: var(--na-accent);
    background: rgba(244, 247, 250, 0.06);
    box-shadow: none;
    color: var(--na-ink);
}

/* Browser autofill repaints the field white; keep it on-theme. */
.na input:-webkit-autofill,
.na input:-webkit-autofill:hover,
.na input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--na-ink);
    -webkit-box-shadow: 0 0 0 1000px #161c2b inset;
    caret-color: var(--na-ink);
}

.na-row {
    display: grid;
    gap: 0 16px;
}

@media (min-width: 576px) {
    .na-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Checkbox + inline links ---------------------------------------------- */

.na-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.na-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.na-check input[type='checkbox'] {
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    accent-color: var(--na-accent);
    cursor: pointer;
}

.na-check label {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--na-ink-dim);
    cursor: pointer;
}

.na-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8125rem;
    color: var(--na-ink);
    text-decoration: none;
    transition: color var(--na-dur) var(--na-ease);
}

.na-link:hover { color: var(--na-accent); text-decoration: none; }

.na-link:focus-visible {
    outline: 2px solid var(--na-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.na-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--na-radius-field);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--na-dur) var(--na-ease),
                color var(--na-dur) var(--na-ease);
}

.na-btn:focus-visible {
    outline: 3px solid var(--na-accent);
    outline-offset: 2px;
}

.na-btn--primary {
    background: var(--na-accent);
    color: var(--na-on-accent);
}

.na-btn--primary:hover { background: var(--na-accent-hover); color: var(--na-on-accent); }

.na-btn--social {
    background: var(--na-social);
    color: var(--na-ink);
    margin-bottom: 8px;
}

.na-btn--social:hover { background: var(--na-social-hover); color: var(--na-ink); }

.na-btn--social img,
.na-btn--social svg,
.na-btn--social i { width: 18px; height: 18px; font-size: 18px; flex: none; }

/* -- OR rule -------------------------------------------------------------- */

.na-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    color: var(--na-ink-dim);
}

.na-or::before,
.na-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--na-line);
}

/* ==========================================================================
   Footer of the card
   ========================================================================== */

.na-foot {
    margin: 24px 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--na-ink-dim);
}

.na-foot a {
    color: #f0faf8;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--na-dur) var(--na-ease);
}

.na-foot a:hover { color: var(--na-accent); text-decoration: none; }

/* ==========================================================================
   Wide variant — onboarding steps that do not fit a 500px column
   ========================================================================== */

.na-card--wide { max-width: 760px; }

.na-card--wide .na-row--2 { gap: 0 16px; }

/* Document-type chooser on the KYC step. The page ships its own light-theme
   rules; these come later in the cascade and win. */
.na .document-type-card {
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-field);
    background: rgba(244, 247, 250, 0.03);
    transition: border-color var(--na-dur) var(--na-ease),
                background-color var(--na-dur) var(--na-ease);
}

.na .document-type-card:hover {
    border-color: var(--na-line-strong);
    box-shadow: none;
}

.na .document-type-label {
    color: var(--na-ink-dim);
    padding: 20px 12px;
}

.na .document-type-card:has(input:checked) {
    border-color: var(--na-accent);
    background: rgba(203, 163, 82, 0.08);
}

.na .document-type-card input:checked + .document-type-label { color: var(--na-accent); }

/* Product buttons that appear inside the multi-step component. */
.na .btn--base,
.na .btn.btn--base {
    background: var(--na-accent);
    border: 0;
    color: var(--na-on-accent);
    border-radius: var(--na-radius-field);
    min-height: 48px;
    font-size: 0.875rem;
    font-weight: 400;
}

.na .btn--base:hover { background: var(--na-accent-hover); color: var(--na-on-accent); }

.na .btn--dark,
.na .btn-secondary {
    background: var(--na-social);
    border: 0;
    color: var(--na-ink);
    border-radius: var(--na-radius-field);
    min-height: 48px;
}

.na .btn--dark:hover,
.na .btn-secondary:hover { background: var(--na-social-hover); color: var(--na-ink); }

/* Bootstrap surfaces the component leans on. */
.na .card,
.na .list-group-item {
    background: rgba(244, 247, 250, 0.03);
    border-color: var(--na-line);
    color: var(--na-ink);
}

.na .form-select {
    background-color: var(--na-field);
    color: var(--na-ink);
    border-color: var(--na-line);
}

.na .form-select option { background: var(--na-panel); color: var(--na-ink); }

.na .text-muted,
.na small { color: var(--na-ink-dim) !important; }

.na .text--danger { color: var(--na-danger) !important; }

.na .form-label { color: var(--na-ink-dim); }

/* File inputs render a native button that ignores the field colours. */
.na input[type='file'] {
    padding: 10px 16px;
    height: auto;
}

.na input[type='file']::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 0;
    border-radius: 4px;
    background: var(--na-social);
    color: var(--na-ink);
    font-size: 0.8125rem;
    cursor: pointer;
}

.na input[type='file']::file-selector-button:hover { background: var(--na-social-hover); }

/* ==========================================================================
   Neutralising the shared product styles that reach into the card
   ========================================================================== */

/* main.css:2962 gives .account-form a white background, 40px padding and a
   light border — it was designed as the card itself. Here the card is .na-card,
   so the form is stripped back to a plain block. */
.na .account-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* partials/social_login renders provider buttons as .btn--outline. */
.na .btn--outline,
.na .cmn--btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--na-radius-field);
    background: var(--na-social);
    color: var(--na-ink);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--na-dur) var(--na-ease);
}

.na .btn--outline:hover,
.na .cmn--btn:hover { background: var(--na-social-hover); color: var(--na-ink); }

.na .others-login-image { width: 18px; height: 18px; }

/* That partial also appends its own centred "OR" after the buttons. The
   reference places the rule above them, so the page renders one there and the
   partial's trailing copy is hidden. */
.na .my-2 + .text-center { display: none; }

/* -- select2 and Bootstrap input groups ----------------------------------
   select2 replaces the native <select> with its own widget. custom.css then
   pins its height, padding and border-color with !important, so matching the
   plain fields needs !important back — and the visible chevron is an :after
   on .select2-selection__arrow, not the `b` element, which is display:none. */

.na .select2-container {
    width: 100% !important;
    display: block;
}

.na .select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 0 16px !important;
    border: 1px solid var(--na-line) !important;
    border-radius: var(--na-radius-field) !important;
    background: var(--na-field);
}

.na .select2-container--default.select2-container--open .select2-selection--single,
.na .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--na-accent) !important;
}

.na .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 44px;
    line-height: 44px;
    padding-left: 0;
    padding-right: 24px;
    color: var(--na-ink);
    font-size: 0.875rem;
}

.na .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(155, 170, 181, 0.7);
}

.na .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 8px;
    height: 44px;
}

/* custom.css pins this glyph with `position:absolute; top:0`, so it hangs at
   the head of the 44px arrow box instead of sitting on the label's centre
   line. Anchor it to the middle instead. */
.na .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    line-height: 1;
    color: var(--na-ink-dim);
}

/* The dropdown is appended to <body>, outside .na, so it is targeted globally
   and with literal colours — the -na- tokens are not in scope there. select2
   4.1 names its states --selectable / --selected / --highlighted (not the old
   aria-selected), and custom.css pins several of these with !important. */

.select2-container--default .select2-dropdown {
    background: #101014 !important;
    border: 1px solid rgba(229, 236, 242, 0.16) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

.select2-container--default .select2-search--dropdown {
    border-color: rgba(229, 236, 242, 0.16) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(244, 247, 250, 0.04) !important;
    border: 1px solid rgba(229, 236, 242, 0.16) !important;
    border-radius: 6px;
    color: #e5ecf2 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(155, 170, 181, 0.7) !important;
}

.select2-container--default .select2-results__option,
.select2-container--default .select2-results__option--selectable,
.select2-container--default .select2-results__option.select2-results__message {
    background: transparent !important;
    color: #e5ecf2 !important;
    border-bottom-color: rgba(229, 236, 242, 0.1) !important;
    font-size: 0.875rem;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option.select2-results__option--selected {
    background: rgba(203, 163, 82, 0.18) !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option--disabled {
    color: rgba(155, 170, 181, 0.6) !important;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: rgba(244, 247, 250, 0.04);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb,
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: rgba(229, 236, 242, 0.24);
}

/* Keep the dial-code chip on the same line as its input. */
.na .input-group {
    flex-wrap: nowrap;
}

.na .input-group-text {
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--na-line);
    border-right: 0;
    border-radius: var(--na-radius-field) 0 0 var(--na-radius-field);
    background: rgba(244, 247, 250, 0.06);
    color: var(--na-ink-dim);
    font-size: 0.875rem;
    white-space: nowrap;
}

.na .input-group .form-control,
.na .input-group .form--control {
    border-radius: 0 var(--na-radius-field) var(--na-radius-field) 0;
}

/* ==========================================================================
   Third-party blocks that live inside the card
   ========================================================================== */

/* Captcha widgets size themselves; stop them forcing the card wider. */
.na-card .g-recaptcha,
.na-card iframe { max-width: 100%; }

.na-card img.captcha-image { border-radius: var(--na-radius-field); }

.na .invalid-feedback,
.na .text-danger { color: var(--na-danger); font-size: 0.8125rem; }

/* The register page ships a Bootstrap modal for the already-registered case. */
.na-modal .modal-content {
    background: var(--na-panel);
    color: var(--na-ink);
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-card);
}

.na-modal .modal-header,
.na-modal .modal-footer { border-color: var(--na-line); }

@media (prefers-reduced-motion: reduce) {
    .na *,
    .na *::before,
    .na *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Verification code
   ==========================================================================
   Six equal cells laid out by the grid, so the row fits whatever width the
   card happens to be. The stock widget sized itself from a hard-coded
   letter-spacing and only aligned at one specific container width. */

.na-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.na .na-otp__box {
    width: 100%;
    /* Square-ish without a fixed height, so the row scales with the font. */
    aspect-ratio: 1 / 1.15;
    padding: 0;
    border: 1px solid var(--na-line);
    border-radius: var(--na-radius-field);
    background: var(--na-field);
    color: var(--na-ink);
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    caret-color: var(--na-accent);
    transition: border-color var(--na-dur) var(--na-ease),
                background-color var(--na-dur) var(--na-ease);
}

.na .na-otp__box:focus {
    outline: none;
    border-color: var(--na-accent);
    background: rgba(203, 163, 82, 0.08);
}

/* A filled cell reads as done even while the caret is elsewhere. The class is
   set from JS: `:placeholder-shown` never matches an input with no placeholder,
   and the `value` attribute is not updated by typing, so neither works here. */
.na .na-otp__box.is-filled {
    border-color: var(--na-line-strong);
    background: rgba(244, 247, 250, 0.07);
}

.na .na-otp__box::selection { background: rgba(203, 163, 82, 0.3); }

/* Chrome draws its own spinner on numeric input on some platforms. */
.na .na-otp__box::-webkit-outer-spin-button,
.na .na-otp__box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 400px) {
    .na-otp { gap: 6px; }
    .na .na-otp__box { font-size: 1.125rem; }
}