/* KraalSense responsive authentication overrides. */
:root {
  --ks-auth-ink: #111111;
  --ks-auth-muted: #667085;
  --ks-auth-border: #dfe3e8;
  --ks-auth-accent: #7c3cff;
  --ks-auth-accent-hover: #6c2fe8;
  --ks-auth-focus: rgba(124, 60, 255, 0.18);
}
html { min-width: 320px; background: #fff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.ks-auth-page { min-width: 320px; min-height: 100%; margin: 0; background: #fff; color: var(--ks-auth-ink); overflow-x: hidden; }
.ks-auth-page .nk-body,
.ks-auth-page .nk-app-root,
.ks-auth-page .nk-main,
.ks-auth-page .nk-wrap,
.ks-auth-page .nk-content,
.ks-auth-page .nk-split { min-height: 100%; }
.ks-auth-page .nk-content { padding: 0; }
.ks-auth-page .nk-split-page { min-height: 100vh; min-height: 100dvh; }
.ks-auth-page .nk-auth-container { width: 100%; min-width: 0; }
.ks-auth-page .nk-auth-body { width: min(100%, 460px); max-width: none; margin-inline: auto; padding-inline: 24px; }
.ks-auth-page .brand-logo { margin: 0 0 28px; padding: 0 !important; text-align: left; }
.ks-auth-page .ks-auth-logo-link { display: inline-flex; align-items: center; max-width: 100%; text-decoration: none; }
.ks-auth-page .ks-auth-logo { display: block; width: auto; height: auto; max-width: min(220px, 68vw); max-height: 76px; object-fit: contain; }
.ks-auth-page .nk-block-head { margin-bottom: 28px; }
.ks-auth-page .nk-block-title { margin-bottom: 8px; color: var(--ks-auth-ink); font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.ks-auth-page .nk-block-des,
.ks-auth-page .nk-block-des p { color: var(--ks-auth-muted); font-size: 1rem; line-height: 1.55; }
.ks-auth-page .form-group { margin-bottom: 20px; }
.ks-auth-page .form-label-group { align-items: center; margin-bottom: 8px; }
.ks-auth-page .form-label { margin-bottom: 8px; color: #252525; font-size: .875rem; font-weight: 700; }
.ks-auth-page .form-label-group .form-label { margin-bottom: 0; }
.ks-auth-page .form-control,
.ks-auth-page .form-control-lg { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid var(--ks-auth-border); border-radius: 12px; background: #fff; color: var(--ks-auth-ink); font-size: 16px; line-height: 1.35; box-shadow: none; }
.ks-auth-page .form-control::placeholder { color: #98a2b3; opacity: 1; }
.ks-auth-page .form-control:focus { border-color: var(--ks-auth-accent); box-shadow: 0 0 0 4px var(--ks-auth-focus); }
.ks-auth-page .input-group { flex-wrap: nowrap; }
.ks-auth-page .input-group .form-control { min-width: 0; border-radius: 12px 0 0 12px; }
.ks-auth-page .input-group-append { display: flex; }
.ks-auth-page .toggle-password,
.ks-auth-page .input-group-text { display: inline-flex; width: 52px; min-width: 52px; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--ks-auth-border); border-left: 0; border-radius: 0 12px 12px 0; background: #fff; color: #475467; cursor: pointer; }
.ks-auth-page .btn.btn-lg,
.ks-auth-page .submit-btn { min-height: 52px; border-radius: 12px; font-size: 1rem; font-weight: 750; }
.ks-auth-page .btn-primary,
.ks-auth-page .submit-btn { border-color: var(--ks-auth-accent); background: var(--ks-auth-accent); }
.ks-auth-page .btn-primary:hover,
.ks-auth-page .submit-btn:hover { border-color: var(--ks-auth-accent-hover); background: var(--ks-auth-accent-hover); }
.ks-auth-page .form-note-s2 { padding-top: 4px; color: var(--ks-auth-muted); font-size: .925rem; line-height: 1.5; text-align: center; }
.ks-auth-page .ks-auth-consent { display: block; margin-top: 12px; color: var(--ks-auth-muted); font-size: .825rem; line-height: 1.55; }
.ks-auth-page .alert { border-radius: 12px; }
.ks-auth-page .errorlist { margin: 6px 0 0; padding: 0; color: #b42318; font-size: .85rem; list-style: none; }
.ks-auth-page .nk-auth-footer { width: min(100%, 460px); margin-inline: auto; padding-inline: 24px; color: var(--ks-auth-muted); }
.ks-auth-page .nk-auth-footer .nk-block-between { justify-content: center; }
.ks-auth-page .nk-auth-footer .nav { justify-content: center; gap: 4px 12px; }
.ks-auth-page .nk-auth-footer .nav-link { padding: 6px 0; font-size: .825rem; }
.ks-auth-page .nk-auth-footer p { margin-bottom: 0; font-size: .78rem; text-align: center; }
.ks-auth-page [data-content='athPromo'] { overflow: hidden; }
.ks-auth-page [data-content='athPromo'] > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
  .ks-auth-page .nk-split-page { display: block; }
  .ks-auth-page .nk-auth-container { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; justify-content: center; padding: max(28px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); }
  .ks-auth-page .nk-block-middle { flex: 0 0 auto; }
  .ks-auth-page .nk-auth-footer { position: static; margin-top: 36px; padding-bottom: 0; }
  .ks-auth-page [data-content='athPromo'],
  .ks-auth-page .absolute-top-right { display: none !important; }
}
@media (max-width: 575.98px) {
  .ks-auth-page .nk-auth-container { justify-content: flex-start; padding-top: max(48px, env(safe-area-inset-top)); }
  .ks-auth-page .nk-auth-body,
  .ks-auth-page .nk-auth-footer { width: 100%; padding-inline: 20px; }
  .ks-auth-page .brand-logo { margin-bottom: 24px; }
  .ks-auth-page .ks-auth-logo { max-width: min(210px, 64vw); max-height: 68px; }
  .ks-auth-page .nk-block-title { font-size: 1.85rem; }
  .ks-auth-page .nk-block-des,
  .ks-auth-page .nk-block-des p { font-size: .95rem; }
  .ks-auth-page .form-label-group { gap: 12px; }
  .ks-auth-page .form-label-group .link-sm { flex-shrink: 0; }
  .ks-auth-page .nk-auth-footer .nav { flex-wrap: wrap; }
}
@media (max-width: 359.98px) {
  .ks-auth-page .nk-auth-body,
  .ks-auth-page .nk-auth-footer { padding-inline: 16px; }
  .ks-auth-page .form-label-group { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* AUTH DESKTOP SIDE PANEL: START */
/* ==========================================================================
   AUTHENTICATION DESKTOP SPLIT PANEL
   ========================================================================== */

@media (min-width: 992px) {
  body.ks-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .ks-auth-page .nk-app-root,
  .ks-auth-page .nk-main,
  .ks-auth-page .nk-wrap,
  .ks-auth-page .nk-content {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .ks-auth-page .nk-content {
    padding: 0 !important;
  }

  .ks-auth-page .nk-split-page {
    display: grid !important;
    grid-template-columns:
      minmax(430px, 45%)
      minmax(0, 55%);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
  }

  .ks-auth-page .nk-auth-container {
    display: flex;
    width: 100% !important;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0 28px;
    background: #ffffff;
    overflow-y: auto;
  }

  .ks-auth-page .nk-auth-body {
    width: min(100%, 480px);
    margin-inline: auto;
    padding-inline: 40px;
  }

  .ks-auth-page .nk-auth-footer {
    width: min(100%, 480px);
    margin: 38px auto 0;
    padding-inline: 40px;
  }

  .ks-auth-page .ks-auth-promo {
    position: relative;
    display: flex !important;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    isolation: isolate;
    background:
      linear-gradient(135deg, #10110f 0%, #252722 100%);
  }

  .ks-auth-page .ks-auth-promo__image {
    position: absolute;
    inset: 0;
    z-index: -3;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  .ks-auth-page .ks-auth-promo__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.16) 38%,
        rgba(0, 0, 0, 0.82) 100%
      );
  }

  .ks-auth-page .ks-auth-promo__overlay::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(198, 239, 46, 0.18);
    filter: blur(4px);
  }

  .ks-auth-page .ks-auth-promo__content {
    width: min(100%, 760px);
    padding: 64px clamp(40px, 6vw, 96px);
    color: #ffffff;
  }

  .ks-auth-page .ks-auth-promo__eyebrow {
    margin: 0 0 16px;
    color: #c6ef2e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .ks-auth-page .ks-auth-promo__content h2 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.25rem, 4.3vw, 4.8rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.98;
  }

  .ks-auth-page .ks-auth-promo__content > p:last-child {
    max-width: 580px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.65;
  }
}

@media (min-width: 992px) and (max-height: 760px) {
  .ks-auth-page .nk-auth-container {
    justify-content: flex-start;
    padding-top: 34px;
  }

  .ks-auth-page .ks-auth-promo__content {
    padding-bottom: 42px;
  }

  .ks-auth-page .ks-auth-promo__content h2 {
    font-size: clamp(2rem, 3.8vw, 3.8rem);
  }
}

@media (min-width: 1440px) {
  .ks-auth-page .nk-split-page {
    grid-template-columns:
      minmax(520px, 42%)
      minmax(0, 58%);
  }

  .ks-auth-page .nk-auth-body,
  .ks-auth-page .nk-auth-footer {
    width: min(100%, 520px);
  }
}

@media (max-width: 991.98px) {
  .ks-auth-page .ks-auth-promo {
    display: none !important;
  }
}
/* AUTH DESKTOP SIDE PANEL: END */

/* AUTH PAGE SCROLL FIX: START */

/*
 * The registration form can exceed the viewport height.
 *
 * The document must therefore remain vertically scrollable. The desktop
 * image panel is kept visible with position: sticky instead of preventing
 * body scrolling with overflow: hidden.
 */

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.ks-auth-page {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
  body.ks-auth-page {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ks-auth-page .nk-app-root,
  .ks-auth-page .nk-main,
  .ks-auth-page .nk-wrap,
  .ks-auth-page .nk-wrap-nosidebar,
  .ks-auth-page .nk-content {
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .ks-auth-page .nk-content {
    padding: 0 !important;
  }

  .ks-auth-page .nk-split-page {
    display: grid !important;
    grid-template-columns:
      minmax(430px, 45%)
      minmax(0, 55%);
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: start;
    overflow: visible !important;
  }

  /*
   * Do not vertically centre a form that may be taller than the viewport.
   * Starting at the top means every field remains reachable by scrolling.
   */
  .ks-auth-page .nk-auth-container {
    display: flex;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: flex-start !important;
    padding:
      clamp(40px, 6vh, 72px)
      0
      clamp(32px, 5vh, 64px);
    overflow: visible !important;
  }

  .ks-auth-page .nk-block-middle {
    flex: 0 0 auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ks-auth-page .nk-auth-body {
    flex: 0 0 auto;
    width: min(100%, 480px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 40px;
  }

  .ks-auth-page .nk-auth-footer {
    position: static !important;
    flex: 0 0 auto;
    width: min(100%, 480px);
    margin: 38px auto 0;
    padding-inline: 40px;
    padding-bottom: 0;
  }

  /*
   * Keep the photo visible while the longer registration form scrolls.
   * The image panel no longer controls document overflow.
   */
  .ks-auth-page .ks-auth-promo {
    position: sticky !important;
    top: 0;
    align-self: start;
    display: flex !important;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
  }

  .ks-auth-page .ks-auth-promo__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 1440px) {
  .ks-auth-page .nk-split-page {
    grid-template-columns:
      minmax(520px, 42%)
      minmax(0, 58%);
  }

  .ks-auth-page .nk-auth-body,
  .ks-auth-page .nk-auth-footer {
    width: min(100%, 520px);
  }
}

@media (max-width: 991.98px) {
  html,
  body.ks-auth-page {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ks-auth-page .nk-app-root,
  .ks-auth-page .nk-main,
  .ks-auth-page .nk-wrap,
  .ks-auth-page .nk-content,
  .ks-auth-page .nk-split-page {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .ks-auth-page .nk-auth-container {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .ks-auth-page .nk-block-middle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ks-auth-page .ks-auth-promo {
    display: none !important;
  }
}

/* AUTH PAGE SCROLL FIX: END */

/* AUTH DESKTOP INTERNAL SCROLL: START */

/*
 * Desktop authentication layout:
 *
 * - The browser page is locked to the viewport.
 * - The form column scrolls independently.
 * - The photograph always fills the full viewport.
 * - Mobile and tablet pages continue using normal document scrolling.
 */

@media (min-width: 992px) {
  html {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  body.ks-auth-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden !important;
  }

  .ks-auth-page .nk-body,
  .ks-auth-page .nk-app-root,
  .ks-auth-page .nk-main,
  .ks-auth-page .nk-wrap,
  .ks-auth-page .nk-wrap-nosidebar,
  .ks-auth-page .nk-content {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .ks-auth-page .nk-content {
    padding: 0 !important;
  }

  /*
   * The split itself is exactly one viewport high.
   * min-height: 0 is essential so the taller registration form does not
   * force the entire grid row to become taller than the screen.
   */
  .ks-auth-page .nk-split-page {
    display: grid !important;
    grid-template-columns:
      minmax(440px, 45%)
      minmax(0, 55%);

    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh;
    max-height: 100dvh;

    align-items: stretch;
    overflow: hidden !important;
  }

  /*
   * The form column is now the only desktop scroll container.
   */
  .ks-auth-page .nk-auth-container {
    display: flex;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100vh;
    max-height: 100dvh;

    flex-direction: column;
    justify-content: flex-start !important;

    padding:
      clamp(38px, 6vh, 68px)
      0
      clamp(30px, 5vh, 56px);

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;

    background: #ffffff;
  }

  .ks-auth-page .nk-block-middle {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: auto !important;
    margin: 0 !important;
  }

  .ks-auth-page .nk-auth-body {
    flex: 0 0 auto;
    width: min(100%, 500px);
    max-width: none;
    margin: 0 auto;
    padding-inline: 42px;
  }

  .ks-auth-page .nk-auth-footer {
    position: static !important;
    flex: 0 0 auto;

    width: min(100%, 500px);
    margin: 38px auto 0;
    padding: 0 42px 12px;

    background: transparent;
  }

  /*
   * Undo the earlier sticky positioning. The image belongs to a fixed-height
   * grid column, so it does not need sticky positioning.
   */
  .ks-auth-page .ks-auth-promo {
    position: relative !important;
    inset: auto !important;
    top: auto !important;

    display: flex !important;
    width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100vh;
    max-height: 100dvh;

    align-self: stretch;
    align-items: flex-end;
    overflow: hidden !important;
  }

  .ks-auth-page .ks-auth-promo__image {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center;
  }

  .ks-auth-page .ks-auth-promo__overlay {
    position: absolute;
    inset: 0;
  }

  .ks-auth-page .ks-auth-promo__content {
    position: relative;
    z-index: 2;
  }

  /*
   * Optional clean desktop scrollbar for the form panel.
   */
  .ks-auth-page .nk-auth-container {
    scrollbar-width: thin;
    scrollbar-color: #c8cbd0 transparent;
  }

  .ks-auth-page .nk-auth-container::-webkit-scrollbar {
    width: 8px;
  }

  .ks-auth-page .nk-auth-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .ks-auth-page .nk-auth-container::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #c8cbd0;
    background-clip: padding-box;
  }

  .ks-auth-page .nk-auth-container::-webkit-scrollbar-thumb:hover {
    background: #a8adb5;
    background-clip: padding-box;
  }
}


@media (min-width: 1440px) {
  .ks-auth-page .nk-split-page {
    grid-template-columns:
      minmax(520px, 42%)
      minmax(0, 58%);
  }

  .ks-auth-page .nk-auth-body,
  .ks-auth-page .nk-auth-footer {
    width: min(100%, 540px);
  }
}


/*
 * Restore ordinary document scrolling below the desktop breakpoint.
 */
@media (max-width: 991.98px) {
  html {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.ks-auth-page {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ks-auth-page .nk-body,
  .ks-auth-page .nk-app-root,
  .ks-auth-page .nk-main,
  .ks-auth-page .nk-wrap,
  .ks-auth-page .nk-wrap-nosidebar,
  .ks-auth-page .nk-content,
  .ks-auth-page .nk-split-page {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none !important;
    overflow: visible !important;
  }

  .ks-auth-page .nk-auth-container {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none !important;

    justify-content: flex-start !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .ks-auth-page .ks-auth-promo {
    display: none !important;
  }
}

/* AUTH DESKTOP INTERNAL SCROLL: END */