/* ==========================================================================
   AAFKYC — Site / component styles
   Requires theme.css to be loaded first (uses its CSS variables).
   Bootstrap 5 handles the grid/utilities; this file is the bespoke
   "onboarding wizard" look (stepper, cards, camera capture, pills etc.)
   ========================================================================== */

html, body {
    height: 100%;
    overflow: hidden; /* the page itself never scrolls — only .step-scroll does */
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
}

.app-shell {
    max-width: 1440px; /* wider desktop layout */
    height: 100vh;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}

/* Everything that must stay pinned at the top (logo header + stepper).
   The box-shadow here is what visually separates the pinned header/stepper
   from the scrollable card content below (item #2). */
.pinned-top {
    flex: 0 0 auto;
    padding-top: 20px;
    background: var(--paper);
    box-shadow: 0 6px 10px -8px rgba(11,30,61,.35);
    position: relative;
    z-index: 5;
}

/* Only this area scrolls — the card/step content */
.step-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Allows short pages to fill the available height */
    display: flex;
    flex-direction: column;
}
    .step-scroll::-webkit-scrollbar {
        display: none;
    }
/* chrome/safari/edge */

/* ---------- HEADER ---------- */
/* Layout: [logo box] [address contact block]  <--space-between-->  [title, 2 lines, right-aligned]
   Matches the NDB reference structure — logo+contact info on the left,
   simple two-line title on the right. Address block collapses on mobile
   (per your "not mandatory on mobile" call) so the header stays compact. */
.formhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(120deg, var(--ink) 0%, var(--ink-soft) 100%);
    border-radius: var(--radius);
    padding: 16px 24px;
    margin-bottom: 14px;
    color: #fff;
    flex-wrap: wrap;
    gap: 16px;
}

    .formhead .brand {
        display: flex;
        align-items: center;
        gap: 16px;
    }

.brand .mark {
    width: 220px;
    height: 84px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 7px 12px;
}

    .brand .mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Contact/address block next to the logo */
.brand-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #B9C4D6;
    line-height: 1.4;
}

    .brand-contact .bc-row {
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }

    .brand-contact .bc-icon {
        flex-shrink: 0;
        opacity: .85;
    }

/* Two-line title on the right */
.formhead .titleblock {
    text-align: right;
}

    .formhead .titleblock h1 {
        font-weight: 600;
        font-size: 19px;
        margin: 0;
        letter-spacing: -0.01em;
        color: #fff;
    }

    .formhead .titleblock p {
        margin: 2px 0 0;
        font-size: 12.5px;
        color: #B9C4D6;
        letter-spacing: .02em;
    }

@media (max-width:820px) {
    .brand-contact {
        display: none;
    }
    /* address block is desktop-only detail */
}

@media (max-width:576px) {
    .formhead {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: nowrap;
    }

    /* Hide address, phone and email on mobile */
    .brand-contact {
        display: none;
    }

    .formhead .brand {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        flex-shrink: 0;
    }

    .brand .mark {
        width: 120px;
        height: 55px;
        padding: 5px 8px;
    }

    .formhead .titleblock {
        width: auto;
        text-align: right;
        flex: 1;
    }

        .formhead .titleblock h1 {
            font-size: 13px;
            line-height: 1.2;
            margin: 0;
        }

        .formhead .titleblock p {
            font-size: 9px;
            line-height: 1.2;
            margin: 3px 0 0;
        }
}


@media (min-width:577px) and (max-width:820px) {
    .brand .mark {
        width: 105px;
        height: 56px;
    }

    .formhead {
        padding: 14px 18px;
    }

        .formhead .titleblock h1 {
            font-size: 17px;
        }

        .formhead .titleblock p {
            font-size: 11.5px;
        }
}

/* ---------- STEPPER (dot + connector design) ---------- */
/* Neutral off-white bar with a thin gold top accent — gold now marks
   progress (line/dot) rather than filling the whole background, which
   reads calmer and more premium than a solid mustard block. */
.stepper-wrap {
    position: relative;
    background: var(--card);
    border-top: 3px solid var(--gold);
    border-bottom: 1px solid var(--line);
    border-radius: 10px 10px 0 0;
    padding: 22px 24px 18px;
}

.stepper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

    .stepper::-webkit-scrollbar {
        display: none;
    }

.step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    width: 104px;
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--card);
    color: var(--slate-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: all .15s ease;
    flex-shrink: 0;
}

    .step-dot.active {
        border-color: var(--gold);
        background: var(--ink);
        color: #fff;
        box-shadow: 0 0 0 4px var(--gold-dim);
    }

    .step-dot.complete {
        border-color: var(--gold);
        background: var(--gold-bg);
        color: var(--gold);
    }

.step-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--slate-soft);
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
}

    .step-lbl.active {
        color: var(--ink);
    }

.step-line {
    flex: 1 1 24px; /* grows to absorb leftover width evenly, so every gap between steps is equal */
    min-width: 16px;
    height: 2px;
    background: var(--line-strong);
    margin-top: 15px;
}

    .step-line.done {
        background: var(--gold);
    }

@media (max-width:820px) {
    .step-node {
        width: 52px;
    }

    .step-lbl {
        display: none;
    }

    .step-line {
        flex: 0 0 20px;
        margin-top: 13px;
    }
    /* fixed on mobile — scroll area, no leftover space to distribute */
}

/* ---------- CARD ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 36px 34px;
    /* Fill the available scroll area */
    flex: 1 0 auto;
    min-height: 100%;
    margin-top: -1px;
    /* Lets footer navigation move to the bottom */
    display: flex;
    flex-direction: column;
}

@media (max-width:576px) {
    .card {
        padding: 22px 18px;
        min-height: 100%;
    }
}

.section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0 6px;
}

.section-title {
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.section-sub {
    font-size: 13.5px;
    color: var(--slate);
    margin: 0 0 26px;
    max-width: 560px;
    line-height: 1.5;
}

/* ---------- FIELDS ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

    .field label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
    }

        .field label .opt {
            font-weight: 400;
            color: var(--slate-soft);
        }

        .field label .req {
            color: var(--red);
            margin-left: 2px;
        }

.hint {
    font-size: 11.5px;
    color: var(--slate-soft);
}

.errmsg {
    font-size: 11.5px;
    color: var(--red);
    font-weight: 500;
    margin-top: 1px;
}

.form-control, .form-select {
    font-size: 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: 7px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--gold-dim);
    }
    /* Error ring — only appears when VALIDATION_ENABLED is true and a field
   fails validation. Toggling VALIDATION_ENABLED off in the JS means this
   class is never applied, so nothing here changes that on/off behaviour. */
    .form-control.err, .form-select.err {
        border-color: var(--red);
        box-shadow: 0 0 0 3px var(--red-bg);
        background: #FFFCFC;
    }

        .form-control.err:focus, .form-select.err:focus {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(178,58,58,.18);
        }

.radiorow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pill {
    padding: 8px 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    color: var(--slate);
    background: #fff;
    user-select: none;
}

    .pill.selected {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
    }

        .pill.selected.risk {
            background: var(--amber);
            border-color: var(--amber);
        }

/* ---------- UPLOAD / CAMERA ---------- */
.upload {
    border: 1.5px dashed var(--line-strong);
    border-radius: 9px;
    padding: 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--slate);
    cursor: pointer;
    background: #FAF8F3;
    display: block;
}

    .upload:hover {
        border-color: var(--gold);
    }

    .upload.done {
        border-color: var(--green);
        background: var(--green-bg);
        color: var(--green);
        font-weight: 500;
        text-align: left;
        cursor: default;
    }

.camslot {
    border: 1.5px dashed var(--line-strong);
    border-radius: 9px;
    padding: 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--slate);
    cursor: pointer;
    background: #FAF8F3;
}

    .camslot:hover {
        border-color: var(--gold);
    }

    .camslot .camicon {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .camslot .camsub {
        font-size: 10.5px;
        color: var(--slate-soft);
        margin-top: 3px;
    }

    .camslot.done {
        border-style: solid;
        border-color: var(--green);
        background: var(--green-bg);
        text-align: left;
        padding: 10px;
        cursor: default;
    }

    .camslot .camthumb {
        width: 100%;
        aspect-ratio: 1.586/1; /* standard ID card ratio, so the frame matches the document shape */
        object-fit: contain; /* shows the full captured image, nothing cropped */
        background: #0000000d; /* subtle fill for any letterbox gap */
        border-radius: 6px;
        display: block;
        margin-bottom: 8px;
    }

.camslot-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--green);
    font-weight: 500;
    font-size: 12.5px;
}

.camoverlay {
    position: fixed;
    inset: 0;
    background: rgba(11,30,61,.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
}

    .camoverlay .camlabel {
        color: #fff;
        font-size: 12px;
        letter-spacing: .05em;
        text-transform: uppercase;
        opacity: .85;
    }

    .camoverlay video {
        max-width: 92vw;
        max-height: 56vh;
        border-radius: 14px;
        background: #000;
    }

.camerr {
    color: #ffd7d7;
    background: rgba(178,58,58,.35);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    max-width: 380px;
    text-align: center;
    border: 1px solid rgba(255,140,140,.4);
}

.camctrls {
    display: flex;
    align-items: center;
    gap: 22px;
}

.camshutter {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--gold);
    border: 4px solid rgba(255,255,255,.35);
    cursor: pointer;
}

    .camshutter:hover {
        border-color: rgba(255,255,255,.6);
    }

.camcancel {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    padding: 10px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12.5px;
}

/* ---------- OTP ---------- */
.otpbox {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .otpbox input {
        max-width: 150px;
        letter-spacing: .3em;
    }

/* ---------- BUTTONS (theme overrides on top of Bootstrap) ---------- */
.btn-navy {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

    .btn-navy:hover {
        background: var(--ink-soft);
        border-color: var(--ink-soft);
        color: #fff;
    }

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

    .btn-gold:hover {
        filter: brightness(1.08);
        color: #fff;
    }

.btn-outline-navy {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
}

    .btn-outline-navy:hover {
        background: var(--ink);
        color: #fff;
    }

/* ---------- BANNERS ---------- */
.banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 20px;
}

    .banner.amber {
        background: var(--amber-bg);
        color: #8a5a1e;
    }

    .banner.green {
        background: var(--green-bg);
        color: var(--green);
    }

    .banner.red {
        background: var(--red-bg);
        color: var(--red);
    }

/* ---------- FOOTER NAV ----------
   Fixed 3-column grid (Back | Step count | Continue) instead of flexbox.
   This keeps "Step X of 8" pinned dead-center in the exact same spot on
   every page — its position no longer shifts depending on whether the
   Back button is present — and Back/Continue never wrap onto separate
   lines, even on narrow mobile widths. */
.footer-nav {
    display: grid;
    /* Equal left/right areas keep the center truly centered */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    /* Push footer to bottom on short pages */
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    width: 100%;
}

    .footer-nav .fn-left {
        justify-self: start;
    }

    .footer-nav .fn-right {
        justify-self: end;
    }

.progress-text {
    font-size: 12px;
    color: var(--slate-soft);
    white-space: nowrap;
    /* Always exactly in the middle */
    justify-self: center;
    text-align: center;
}

@media (max-width:480px) {
    .footer-nav {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 6px;
        padding-top: 14px;
    }

        .footer-nav .btn {
            padding: 8px 14px;
            font-size: 13px;
            white-space: nowrap;
        }

    .progress-text {
        font-size: 11px;
        min-width: 72px;
        text-align: center;
    }
}

/* ---------- REVIEW STEP ---------- */
.revsec {
    margin-bottom: 20px;
}

    .revsec h4 {
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 11px;
        color: var(--gold);
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--line);
        font-weight: 700;
    }

.revgrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px 20px;
}

@media (max-width:576px) {
    .revgrid {
        grid-template-columns: 1fr 1fr;
    }
}

.revitem .k {
    font-size: 11px;
    color: var(--slate-soft);
    margin-bottom: 2px;
}

.revitem .v {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
}

    .revitem .v.empty {
        color: var(--slate-soft);
        font-weight: 400;
        font-style: italic;
    }

/* ---------- SIGNATURE ---------- */
/* Real draw-to-sign canvas (mouse + touch), matching the working pattern
   from the NDB reference build. .sigpad is the clickable/drawable box;
   the <canvas> inside it is created and wired up by setupSignaturePad()
   in the page script, which also handles the VALIDATION_ENABLED-gated
   "required" check the same way every other field does. */
.sigpad {
    border: 1.5px dashed var(--line-strong);
    border-radius: 8px;
    height: 120px;
    position: relative;
    background: #FAF8F3;
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
}

    .sigpad.signed {
        border-style: solid;
        border-color: var(--gold);
        background: #fff;
    }

    .sigpad.err {
        border-color: var(--red);
        background: #FFFCFC;
    }

    .sigpad canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        touch-action: none;
    }

    .sigpad .sigplaceholder {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: italic;
        color: var(--slate-soft);
        font-size: 14px;
        pointer-events: none;
    }

    .sigpad.signed .sigplaceholder {
        display: none;
    }

.sigpad-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

    .sigpad-actions .note {
        font-size: 11px;
        color: var(--slate-soft);
    }

.checkline {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--slate);
    cursor: pointer;
}

    .checkline input {
        margin-top: 3px;
    }

/* ---------- SUCCESS SCREEN ---------- */
.successwrap {
    text-align: center;
    padding: 46px 16px;
}

    .successwrap .ring {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--green-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        color: var(--green);
        font-size: 28px;
    }

    .successwrap h2 {
        font-size: 24px;
        margin: 0 0 8px;
        color: var(--ink);
    }

    .successwrap p {
        color: var(--slate);
        font-size: 13.5px;
        max-width: 420px;
        margin: 0 auto;
    }

/* ---------- content space ( 1 and 2) ---------- */
@media (max-width:576px) {
    .card .field {
        margin-bottom: clamp(18px, 3vh, 30px);
    }

    .card .section-sub {
        margin-bottom: clamp(26px, 4vh, 36px);
    }
}