/* ==========================================================
   INCEPTION FINAL RESPONSIVE
   ========================================================== */


/* ==========================================================
   DESKTOP - DAFTAR TIM
   Naik visual saja, Step tidak ikut bergeser.
   ========================================================== */

html body
#inception-register-v50-host
.v50-register-heading
:is(h1, h2),

html body
#inception-register-v50-host
.v50-card-head
> h2 {
    position:
        relative !important;

    top:
        -16px !important;

    transform:
        none !important;

    font-size:
        42px !important;

    font-weight:
        800 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -0.03em !important;

    text-align:
        center !important;
}


/* ==========================================================
   LOGIN MOBILE
   ========================================================== */

@media (max-width: 760px) {

    html,
    body {
        overflow-x:
            hidden !important;
    }


    body.inc-login-v12 {
        min-width:
            0 !important;

        min-height:
            100dvh !important;
    }


    /*
     * Card Login jangan lagi memakai posisi desktop:
     * left 75% / fixed.
     */
    body.inc-login-v12
    .inc-login-card {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        transform:
            none !important;

        width:
            calc(100vw - 28px) !important;

        min-width:
            0 !important;

        max-width:
            440px !important;

        margin:
            24px auto !important;

        box-sizing:
            border-box !important;
    }


    body.inc-login-v12
    .inc-login-card
    :is(h1, h2, h3) {
        font-size:
            34px !important;

        line-height:
            1.08 !important;
    }


    body.inc-login-v12
    .inc-login-card
    input {
        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            48px !important;

        box-sizing:
            border-box !important;
    }


    body.inc-login-v12
    .inc-login-card
    button[type="submit"] {
        width:
            100% !important;

        min-height:
            48px !important;
    }


    /*
     * React wrapper Login juga dibuat fluid.
     */
    body:has(.auth-card #password)
    .auth-page,

    body:has(.auth-card #password)
    .auth-panel,

    body:has(.auth-card #password)
    .auth-panel-inner {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    body:has(.auth-card #password)
    .auth-card {
        width:
            100% !important;

        max-width:
            440px !important;

        min-width:
            0 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/* ==========================================================
   REGISTER MOBILE
   ========================================================== */

@media (max-width: 760px) {

    #inception-register-v50-host {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;

        overflow-x:
            hidden !important;
    }


    #inception-register-v50-host
    .v50-card {
        width:
            calc(100vw - 24px) !important;

        max-width:
            680px !important;

        min-width:
            0 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Di HP judul tidak perlu offset desktop.
     */
    html body
    #inception-register-v50-host
    .v50-register-heading
    :is(h1, h2),

    html body
    #inception-register-v50-host
    .v50-card-head
    > h2 {
        top:
            0 !important;

        transform:
            none !important;

        font-size:
            32px !important;

        line-height:
            1.1 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        text-align:
            center !important;
    }


    /*
     * Step 01-03:
     * tetap 3 kolom tetapi lebih kecil,
     * tidak keluar layar.
     */
    #inception-register-v50-host
    .v50-step-chip {
        min-width:
            0 !important;

        font-size:
            12px !important;

        line-height:
            1.2 !important;

        padding-left:
            6px !important;

        padding-right:
            6px !important;

        white-space:
            normal !important;

        text-align:
            center !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Form Step 1/2 menjadi satu kolom.
     */
    #inception-register-v50-host
    .v50-grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            14px !important;
    }


    #inception-register-v50-host
    .v50-field,

    #inception-register-v50-host
    .v50-field input,

    #inception-register-v50-host
    .v50-search-input,

    #inception-register-v50-host
    select,

    #inception-register-v50-host
    textarea {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Step 3 proof cards juga tidak overflow.
     */
    #inception-register-v50-host
    .v50-proof-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    #inception-register-v50-host
    .v50-proof,

    #inception-register-v50-host
    .v50-upload {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Tombol action aman di HP.
     */
    #inception-register-v50-host
    .v50-actions {
        width:
            100% !important;

        flex-wrap:
            wrap !important;
    }


    #inception-register-v50-host
    .v50-actions
    button {
        min-height:
            46px !important;
    }

}


/* ==========================================================
   EXTRA SMALL PHONE
   ========================================================== */

@media (max-width: 430px) {

    #inception-register-v50-host
    .v50-card {
        width:
            calc(100vw - 16px) !important;
    }


    #inception-register-v50-host
    .v50-step-chip {
        font-size:
            11px !important;

        padding-left:
            4px !important;

        padding-right:
            4px !important;
    }


    body.inc-login-v12
    .inc-login-card {
        width:
            calc(100vw - 20px) !important;

        margin-top:
            16px !important;

        margin-bottom:
            16px !important;
    }

}



/* ==========================================================
   REAL FINAL REGISTER TITLE
   Elemen ini dibuat oleh inception-auth-final-v1.js.
   ========================================================== */

@media (min-width: 761px) {

    html body
    #inception-register-v50-host
    .inc-register-final-title {
        position: relative !important;

        top: 0 !important;

        transform:
            translateY(-14px) !important;

        margin-top:
            0 !important;

        margin-bottom:
            2px !important;

        font-size:
            42px !important;

        font-weight:
            800 !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.03em !important;

        text-align:
            center !important;
    }

}


/* HP: jangan memakai offset desktop */
@media (max-width: 760px) {

    html body
    #inception-register-v50-host
    .inc-register-final-title {
        position:
            relative !important;

        top:
            0 !important;

        transform:
            none !important;

        margin:
            12px 0 14px !important;

        font-size:
            30px !important;

        font-weight:
            800 !important;

        line-height:
            1.1 !important;

        text-align:
            center !important;
    }

}


/* INCEPTION_V51_CLEAN_OTP_START */

/* ==========================================================
   OTP / EMAIL VERIFICATION

   Saat .v50-otp ada:
   - ini BUKAN lagi Step 3
   - sembunyikan title register global
   - sembunyikan Step 01-03
   - tampilkan heading OTP asli
   ========================================================== */


#inception-register-v50-host:has(.v50-otp)
.inc-register-final-title,

#inception-register-v50-host:has(.v50-otp)
.inc-final-stepper,

#inception-register-v50-host:has(.v50-otp)
.v50-progress {
    display:
        none !important;
}


/* OTP card lebih fokus */

#inception-register-v50-host
.v50-otp {
    width:
        100% !important;

    max-width:
        560px !important;

    margin:
        8px auto 0 !important;

    padding:
        12px 0 4px !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    background:
        transparent !important;

    text-align:
        center !important;
}


/* Heading OTP sebelumnya tertutup oleh layer polish */

#inception-register-v50-host
.v50-otp
.v50-card-head {
    display:
        flex !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    overflow:
        visible !important;

    margin:
        0 0 20px !important;

    padding:
        0 !important;

    text-align:
        center !important;
}


#inception-register-v50-host
.v50-otp
.v50-card-head
> div {
    display:
        block !important;

    width:
        100% !important;
}


/* VERIFIKASI EMAIL */

#inception-register-v50-host
.v50-otp
.v50-card-head
small {
    display:
        block !important;

    visibility:
        visible !important;

    margin:
        0 0 7px !important;

    color:
        #5c72c9 !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .11em !important;
}


/* Masukkan Kode OTP */

#inception-register-v50-host
.v50-otp
.v50-card-head
h2 {
    display:
        block !important;

    visibility:
        visible !important;

    margin:
        0 0 7px !important;

    color:
        #27334e !important;

    font-size:
        30px !important;

    line-height:
        1.1 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.025em !important;
}


/* Informasi email */

#inception-register-v50-host
.v50-otp
.v50-card-head
p {
    display:
        block !important;

    visibility:
        visible !important;

    margin:
        0 auto !important;

    max-width:
        440px !important;

    color:
        #68758b !important;

    font-size:
        13px !important;

    line-height:
        1.5 !important;
}


/* OTP input */

#inception-register-v50-host
#v50-otp {
    display:
        block !important;

    width:
        min(280px, 100%) !important;

    height:
        58px !important;

    margin:
        0 auto 12px !important;

    padding:
        0 16px !important;

    box-sizing:
        border-box !important;

    border:
        1px solid #dce3f0 !important;

    border-radius:
        13px !important;

    background:
        #ffffff !important;

    color:
        #27334e !important;

    font-size:
        18px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .35em !important;

    text-align:
        center !important;

    outline:
        none !important;
}


#inception-register-v50-host
#v50-otp:focus {
    border-color:
        #6378d2 !important;

    box-shadow:
        0 0 0 3px
        rgba(99,120,210,.12) !important;
}


/* Verify button */

#inception-register-v50-host
.v50-otp
.v50-actions {
    justify-content:
        center !important;

    margin:
        0 !important;
}


#inception-register-v50-host
.v50-otp
#v50-verify {
    min-width:
        190px !important;

    min-height:
        46px !important;
}


/* Mobile */

@media (max-width: 760px) {

    #inception-register-v50-host
    .v50-otp {
        max-width:
            100% !important;

        padding:
            8px 0 !important;
    }


    #inception-register-v50-host
    .v50-otp
    .v50-card-head
    h2 {
        font-size:
            26px !important;
    }


    #inception-register-v50-host
    #v50-otp {
        width:
            100% !important;

        max-width:
            280px !important;
    }

}

/* INCEPTION_V51_CLEAN_OTP_END */


/* INCEPTION_V52B1R3_ROUTE_GUARD_START */

/*
 * REGISTER HARUS MATI TOTAL
 * ketika body bukan route Register.
 */

html body:not(.inception-register-v50-active)
#inception-register-v50-host {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
 * React utama kembali normal.
 */

html body:not(.inception-register-v50-active)
#root {
    visibility: visible !important;
    opacity: 1 !important;
}


/*
 * Saat route Register aktif.
 */

html body.inception-register-v50-active
#inception-register-v50-host {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* INCEPTION_V52B1R3_ROUTE_GUARD_END */


/* INCEPTION_V53B_R2_DASHBOARD_START */

/*
 * Participant Dashboard adalah full-screen React app.
 *
 * Kalau elemen auth lama lolos sekalipun,
 * CSS ini memastikan Dashboard tidak terpotong.
 */

body.participant-dashboard-body {
    display: block !important;

    grid-template-columns:
        none !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


body.participant-dashboard-body
> .inc-login-showcase,

body.participant-dashboard-body
> .inc-auth-shared-left,

body.participant-dashboard-body
> #inception-register-v50-host,

body.participant-dashboard-body
#inception-register-v50-host {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


body.participant-dashboard-body
> #root {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;
}

/* INCEPTION_V53B_R2_DASHBOARD_END */