/* ==========================================================
   INCEPTION V42
   STEP 3 CLICKABLE PDF + CONFIRM CHECKBOX
   ========================================================== */


/* ==========================================================
   1. PDF UPLOAD AREA
   ========================================================== */

#inception-register-v50-host .v50-upload,
#inception-register-v50-host label.v50-upload {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 68px !important;

    padding:
        14px
        150px
        14px
        16px !important;

    border:
        2px solid
        #637be0 !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #f1f5ff 0%,
            #f8faff 100%
        ) !important;

    cursor:
        pointer !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease !important;
}


/* hover = jelas bisa diklik */

#inception-register-v50-host .v50-upload:hover,
#inception-register-v50-host label.v50-upload:hover {
    border-color:
        #4764d7 !important;

    background:
        #eaf0ff !important;

    box-shadow:
        0 8px 20px
        rgba(
            72,
            98,
            207,
            .14
        ) !important;

    transform:
        translateY(-1px) !important;
}


/* click feedback */

#inception-register-v50-host .v50-upload:active,
#inception-register-v50-host label.v50-upload:active {
    transform:
        translateY(0) !important;

    box-shadow:
        0 3px 10px
        rgba(
            72,
            98,
            207,
            .12
        ) !important;
}


/* ==========================================================
   2. BADGE "KLIK UNTUK UPLOAD PDF"
   ========================================================== */

#inception-register-v50-host .v50-upload::after,
#inception-register-v50-host label.v50-upload::after {
    content:
        "Klik untuk upload PDF";

    position:
        absolute;

    right:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0 11px;

    border-radius:
        9px;

    background:
        #5871d8;

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;

    pointer-events:
        none;

    box-shadow:
        0 4px 10px
        rgba(
            72,
            98,
            207,
            .18
        );
}


/* ==========================================================
   3. TEXT DI DALAM UPLOAD
   ========================================================== */

#inception-register-v50-host .v50-upload strong,
#inception-register-v50-host label.v50-upload strong {
    color:
        #111827 !important;

    font-weight:
        800 !important;
}


#inception-register-v50-host .v50-upload small,
#inception-register-v50-host label.v50-upload small {
    color:
        #8a94aa !important;

    font-weight:
        600 !important;
}


/*
 Input file tetap bekerja,
 cuma tidak tampil.
 */

#inception-register-v50-host .v50-upload input[type="file"],
#inception-register-v50-host label.v50-upload input[type="file"] {
    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    opacity:
        0 !important;

    cursor:
        pointer !important;
}


/* ==========================================================
   4. CONFIRMATION AREA
   ========================================================== */

/*
 Semua checkbox dalam register Step 3
 dipaksa terlihat.
 */

#inception-register-v50-host input[type="checkbox"] {
    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    display:
        inline-grid !important;

    place-content:
        center !important;

    flex:
        0 0 auto !important;

    width:
        22px !important;

    height:
        22px !important;

    min-width:
        22px !important;

    margin:
        0 10px 0 0 !important;

    padding:
        0 !important;

    border:
        2px solid
        #5871d8 !important;

    border-radius:
        6px !important;

    background:
        #ffffff !important;

    cursor:
        pointer !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    vertical-align:
        middle !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease !important;
}


/* checked */

#inception-register-v50-host input[type="checkbox"]:checked {
    background:
        #5871d8 !important;

    border-color:
        #5871d8 !important;

    box-shadow:
        0 3px 9px
        rgba(
            72,
            98,
            207,
            .22
        ) !important;
}


/* centang putih */

#inception-register-v50-host input[type="checkbox"]::before {
    content:
        "";

    width:
        10px;

    height:
        6px;

    border-left:
        2.5px solid
        #ffffff;

    border-bottom:
        2.5px solid
        #ffffff;

    transform:
        rotate(-45deg)
        scale(0);

    transition:
        transform .12s ease;
}


#inception-register-v50-host input[type="checkbox"]:checked::before {
    transform:
        rotate(-45deg)
        scale(1);
}


/* focus */

#inception-register-v50-host input[type="checkbox"]:focus-visible {
    outline:
        none !important;

    box-shadow:
        0 0 0 4px
        rgba(
            88,
            113,
            216,
            .16
        ) !important;
}


/* ==========================================================
   5. CONFIRMATION CONTAINER
   ========================================================== */

#inception-register-v50-host .v50-confirm,
#inception-register-v50-host .v15-confirm,
#inception-register-v50-host label:has(input[type="checkbox"]) {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    min-height:
        52px !important;

    padding:
        11px 14px !important;

    border:
        1.5px solid
        #d9e0ee !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    color:
        #111827 !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}


/* ==========================================================
   6. MOBILE
   ========================================================== */

@media (max-width: 760px) {

    #inception-register-v50-host .v50-upload,
    #inception-register-v50-host label.v50-upload {
        padding:
            13px 14px
            53px 14px !important;
    }


    #inception-register-v50-host .v50-upload::after,
    #inception-register-v50-host label.v50-upload::after {
        left:
            14px;

        right:
            auto;

        top:
            auto;

        bottom:
            10px;

        transform:
            none;
    }
}


/* ==========================================================
   INCEPTION V42 END
   ========================================================== */