#handl-camera-modal{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:#000;
    z-index:999999;
    overflow-y:auto;
    display:none;
}

#handl-camera-modal.active{
    display:block;
}

/* =========================
   VIDEO
========================= */

.handl-camera-wrapper{
    position:absolute;
    inset:0;
    z-index:1;
}

#handl-camera-video{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

.handl-camera-wrapper::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

/* =========================
   CLOSE
========================= */
.handl-camera-top{
    position:absolute;
    top:25px;
    left:25px;
    z-index:100;
}

.handl-camera-close{
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:26px;
    cursor:pointer;
    backdrop-filter:blur(10px);
}


.handl-camera-logo-button{
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
}

.handl-camera-logo{
    width:200px !important;
    height:auto;
    display:block;
}

/* =========================
   TITLE
========================= */

.handl-camera-title-wrapper{
    position:absolute;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    text-align:center;
    color:#fff;
}

.handl-camera-title{
    font-size:30px;
    font-weight:700;
	letter-spacing:-1px;
}

.handl-camera-step{
    margin-top:8px;
    font-size:15px;
    color:rgba(255,255,255,.65);
}

/* =========================
   FACE FRAME
========================= */

.handl-face-frame{
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    width:300px;
    height:390px;
    border:5px solid #7C4DFF;
    border-radius:170px;
    z-index:90;
    box-shadow:
        0 0 0 9999px
        rgba(0,0,0,.35);
}

/* =========================
   INSTRUCTION
========================= */

.handl-camera-instruction-wrapper{
    position:absolute;
    top:78%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:100;
}

#handl-camera-instruction,
#handl-camera-alert{
    font-size:17px;
    font-weight:500;
    color:#fff;
}

/* =========================
   ACTION
========================= */

.handl-camera-action-wrapper{
    position:absolute;
    top:88%;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
}



/* =========================
   FOOTER
========================= */

.handl-camera-footer{
    position:absolute;
    bottom:65px;
    left:40px;
    right:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:90;
}

.handl-camera-footer button{
    background:none;
    border:none;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}


/* ==========================================================
   HANDL CAMERA FULLSCREEN RESPONSIVE
========================================================== */

/* Desktop XL */
@media (min-width:1400px){

    .handl-camera-title{
        font-size:45px;
        line-height:1;
    }

    .handl-camera-step{
        font-size:22px;
		margin-top:25px;
    }

    .handl-face-frame{
        width:420px;
        height:560px;
    }

    #handl-camera-instruction,
#handl-camera-alert{
        font-size:22px;
	  font-weight:700;
    }
	
	.handl-camera-instruction-wrapper{
    position:absolute;
    top:78%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:100;
}

    #handl-camera-start{
    background:#7C4DFF;
    color:#fff;
    border:none;
    border-radius:14px;
    padding:14px 34px;
    font-size:19px;
    font-weight:600;
    cursor:pointer;
	min-width:180px;
        box-shadow:
        0 10px 30px
        rgba(124,77,255,.25);
}
	
	
	
	.handl-camera-action-wrapper{
    position:absolute;
    top:88%;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
}

.handl-camera-footer button{
    background:none;
    border:none;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

}


/* Laptop */
@media (max-width:1399px){

    .handl-camera-title{
     font-size:30px;
     font-weight:700;
	 letter-spacing:-1px;
     line-height:1;
    }
	
    .handl-camera-step{
        font-size:18px;
    }

    .handl-face-frame{
    position:absolute;
    top:47%;
    left:50%;
    transform:translate(-50%,-50%);
    width:300px;
    height:390px;
    border:5px solid #7C4DFF;
    border-radius:170px;
    z-index:90;
    box-shadow:
        0 0 0 9999px
        rgba(0,0,0,.35);
    }

    #handl-camera-instruction,
#handl-camera-alert{
        font-size:20px;
		font-weight:700;
    }

    #handl-camera-start{
        min-width:180px;
        padding:14px 34px;
        font-size:18px;
    }

    .handl-camera-footer button{
         background:none;
		border:none;
		color:#fff;
		font-size:18px;
		cursor:pointer;
    }
}


/* Tablet */
@media (max-width:1024px){

    .handl-camera-title{
        font-size:34px;
        line-height:1.05;
    }

    .handl-camera-step{
        font-size:16px;
    }

    .handl-face-frame{
        width:280px;
        height:380px;
        top:42%;
    }

    #handl-camera-instruction,
#handl-camera-alert{
        font-size:20px;
    }

    #handl-camera-start{
        min-width:190px;
        padding:16px 34px;
        font-size:18px;
    }

    .handl-camera-footer button{
        font-size:16px;
    }
}


/* Mobile */
@media (max-width:768px){

    .handl-camera-title{
        font-size:22px;
        line-height:1.05;
    }

    .handl-camera-step{
        font-size:14px;
        margin-top:8px;
    }

    .handl-face-frame{
        width:220px;
        height:300px;
        top:46%;
        border-width:5px;
    }

    #handl-camera-instruction,
#handl-camera-alert{
        font-size:16px;
        margin-top:35px;
    }

    #handl-camera-start{
        min-width:170px;
        padding:14px 28px;
        font-size:16px;
        border-radius:18px;
    }

    .handl-camera-footer button{
        font-size:14px;
    }
	
	.handl-camera-instruction-wrapper{
        top:68%;
    }

    .handl-camera-action-wrapper{
        top:80%;
    }

    .handl-camera-footer{
        top:80%;
        left:20px;
        right:20px;
    }
	
	
}


/* =====================================================
   HANDL CAMERA BUTTON STATES
===================================================== */

#handl-camera-start{
    background:#22c55e !important;
    color:#fff !important;
    border-radius: 14px !important;
    border:none !important;
	font-weight:700 !important;
    box-shadow:
        0 0 25px
        rgba(
            34,
            197,
            94,
            .35
        ) !important;

    transition:
        all .3s ease;
}


#handl-camera-start.handl-stop{

    background:#ef4444 !important;

    color:#fff !important;

    box-shadow:
        0 0 25px
        rgba(
            239,
            68,
            68,
            .35
        ) !important;
}



.handl-capture{

    background:#22c55e !important;

    color:#fff !important;
}

.handl-challenge{

    display:block;

    font-size:25px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:1px;

}

#handl-camera-start.handl-disabled{

    background:#6b7280 !important;

    background-image:none !important;

    border-color:#6b7280 !important;

    color:#ffffff !important;

    opacity:1 !important;

    box-shadow:none !important;

    pointer-events:none !important;
}

#handl-camera-start.handl-capture{

    background:#22c55e !important;

    background-image:none !important;
}

/*====================================================
HANDL WELCOME SCREEN
====================================================*/

#handl-welcome-screen{

    position:absolute;
    inset:0;

    z-index:500;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:
    linear-gradient(
        135deg,
        #eef0ff 0%,
        #f8f8ff 45%,
        #ece9ff 100%
    );

}

.handl-welcome-card{

    width:100%;
    max-width:1700px;
    height:100%;

    border-radius:34px;

    background:
    rgba(255,255,255,.90);

    backdrop-filter:blur(25px);

    display:grid;

    grid-template-columns:

        44%
        56%;

    overflow:hidden;

    box-shadow:

        0 40px 90px
        rgba(58,39,145,.18);

}

.handl-welcome-left{

    padding:

        60px
        70px;

    display:flex;

    flex-direction:column;

}

.handl-welcome-right{

    position:relative;

    padding:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

/*====================================================
PHASE 2
====================================================*/

#handl-phase2-screen{

    position:relative;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;
     overflow-y:auto;
    z-index:400;

}

.handl-phase2-background{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:.18;

    z-index:0;

    pointer-events:none;

}

#handl-phase2-screen{

    background:
        radial-gradient(circle at top,
            rgba(124,77,255,.14),
            transparent 40%),
        linear-gradient(
            180deg,
            #f7f6ff 0%,
            #ffffff 45%,
            #f7f6ff 100%
        );

}

.handl-phase2-background::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:48%;

    background:

        url("/wp-content/uploads/2026/07/bg.png")
        center bottom /
        cover
        no-repeat;

    opacity:.55;

    pointer-events:none;

}

.handl-phase2-overlay{

    position:relative;

    width:min(1180px,94vw);

	margin:40px auto;

    border-radius:38px;

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

    background:

        rgba(255,255,255,.88);

    backdrop-filter:blur(22px);

    box-shadow:

        0 45px 120px
        rgba(54,38,145,.18);

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:

        45px
        70px
        55px;

}

.handl-phase2-close{

    position:absolute;

    top:35px;

    left:35px;

}

.handl-phase2-logo{

  width:260px;

    margin-top:10px;
    margin-bottom:25px;

}

.handl-phase2-title{

    margin-top:25px;

    font-size:42px;

    font-weight:700;

    color:#2d2554;

    text-align:center;

}

.handl-phase2-title span{

    color:#7C4DFF;

}

.handl-phase2-progress{

    display:flex;

    gap:14px;

    margin-top:26px;

}

.handl-phase2-progress span{

    width:13px;

    height:13px;

    border-radius:50%;

    background:#d8cffd;

}

.handl-phase2-progress .done{

    background:#6ad56a;

}

.handl-phase2-progress .active{

    background:#7C4DFF;

}

.handl-phase2-license{

    width:100%;

    max-width:760px;

    margin-top:35px;

}

.handl-phase2-license img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:

        0 25px 60px
        rgba(73,49,180,.18);

}

.handl-phase2-heading{

    margin-top:35px;

    font-size:36px;

    line-height:1.15;

    font-weight:700;

    color:#2d2554;

    text-align:center;

}

.handl-phase2-text{

    margin-top:18px;

    max-width:700px;

    text-align:center;

    font-size:20px;

    line-height:1.6;

    color:#66638b;

}

.handl-phase2-timer-wrapper{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


#handl-phase2-dot{
    position:absolute;
	top:50%;
	left:50%;
    width:16px;
    height:16px;
    margin-left:-11px;
    border-radius:50%;
    background:#6ad56a;
    box-shadow: 0 0 0 4px #fff;
	transform: translateY(-50%, -50%);
    z-index:5;
}

#handl-phase2-timer{
position:relative;
    width:170px;
    height:170px;

    border-radius:50%;

    border:8px solid #7C4DFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    font-weight:700;

    color:#7C4DFF;

    background:#fff;
	
	box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.45),
    0 0 0 1px rgba(124,77,255,.08);

}


.handl-phase2-timer-label{

    margin-top:18px;

    font-size:16px;

    color:#8a88a8;

}

.handl-phase2-security{

    margin-top:28px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:

        14px
        26px;

    border-radius:16px;

    background:#f5f3ff;

    color:#5d5788;

    font-size:17px;

}

#handl-phase2-continue{

    margin-top:35px;

    min-width:280px;

    height:64px;

    border:none;

    border-radius:18px;

    background:#7C4DFF;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:
        0 18px 40px
        rgba(124,77,255,.28);

}

#handl-phase2-continue:hover{

    transform:translateY(-2px);

    box-shadow:
        0 22px 45px
        rgba(124,77,255,.35);

}

.handl-phase2-accepted-title{

    margin-top:45px;

    font-size:22px;

    font-weight:700;

    color:#2d2554;

}

.handl-phase2-accepted{

    width:100%;
    max-width:900px;

    margin:25px auto 0;

    display:grid;
    grid-template-columns:repeat(3,1fr);

}

.handl-phase2-id-card{

    position:relative;

    padding:0 35px;

    text-align:center;

}

.handl-phase2-id-card:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;
    top:10px;

    width:1px;
    height:120px;

    background:#e8e6f5;

}

.handl-phase2-id-card img{

    width:190px;
    height:110px;

    object-fit:contain;

    display:block;

    margin:auto;

}

.handl-phase2-id-card div{

    margin-top:14px;

    font-size:17px;

    font-weight:600;

    color:#5a5884;

}

.handl-phase2-id-card:hover{

    transform:translateY(-4px);

}





.handl-phase2-footer{

    margin-top:35px;

    font-size:15px;

    color:#7a7898;

}

/*====================================================
PHASE 2 - TIMEOUT / CANCELLED
====================================================*/

#handl-phase2-timeout,
#handl-phase2-cancelled{

    position:fixed;

    top:0;
left:0;
right:0;
bottom:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:60px;

    background:
        rgba(255,255,255,.96);
overflow:hidden;
    z-index:20;

}

.handl-phase2-timeout-card,
.handl-phase2-cancelled-card{

    width:100%;
    max-width:650px;

    padding:60px 50px;

    border-radius:30px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 30px 80px
        rgba(54,38,145,.18);

}

.handl-phase2-timeout-icon{

    font-size:72px;

    margin-bottom:25px;

}

#handl-phase2-restart{

    margin-top:35px;

    min-width:260px;

    height:62px;

    border:none;

    border-radius:18px;

    background:#7C4DFF;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#handl-phase2-restart:hover{

    transform:translateY(-2px);

}

@media(max-width:1024px){

    .handl-phase2-overlay{

        padding:35px;

    }

    .handl-phase2-title{

        font-size:34px;

    }

    .handl-phase2-heading{

        font-size:30px;

    }

    .handl-phase2-text{

        font-size:18px;

    }

    .handl-phase2-accepted{

        grid-template-columns:1fr;

        max-width:320px;

    }

}

@media(max-width:768px){

    .handl-phase2-overlay{
		
		    width:100vw;
    height:100vh;
		overflow-y:auto;
        padding:22px;
        border-radius:24px;

    }

    .handl-phase2-logo{

        width:62px;

    }

    .handl-phase2-title{

        font-size:26px;

    }

    .handl-phase2-heading{

        font-size:24px;

    }

    .handl-phase2-text{

        font-size:16px;

    }

    #handl-phase2-timer{

        width:130px;

        height:130px;

        font-size:28px;

    }

    #handl-phase2-continue{
	max-width: 280px;
    width:100%;
    min-width:unset;
    height:64px;
    border-radius:22px;
    font-size:22px;
	padding: 18px 30px;
    }

}

/*====================================================
LARGE DESKTOP
====================================================*/

@media (min-width:1600px){

    .handl-phase2-overlay{

        width:1400px;
        height:920px ;

    }

    .handl-phase2-title{

        font-size:48px;

    }

    .handl-phase2-heading{

        font-size:42px;

    }

    .handl-phase2-text{

        font-size:22px;

    }

    .handl-phase2-license{

        max-width:720px;

    }

    #handl-phase2-timer{

        width:185px;
        height:185px;
        font-size:42px;

    }

}

/*====================================================
LAPTOP
====================================================*/

@media (max-width:1399px){

    .handl-phase2-overlay{

        width:92vw;
        padding:40px;

    }

    .handl-phase2-title{

        font-size:36px;

    }

    .handl-phase2-heading{

        font-size:30px;

    }

    .handl-phase2-license{

        max-width:560px;

    }

}

/*====================================================
TABLET
====================================================*/

@media (max-width:1024px){

    .handl-phase2-overlay{

        width:95vw;
        max-height:95vh;
		overflow-y:auto;
        padding:30px;

    }

    .handl-phase2-title{

        font-size:30px;

    }

    .handl-phase2-heading{

        font-size:26px;

    }

    .handl-phase2-text{

        font-size:17px;

    }

    .handl-phase2-license{

        max-width:470px;

    }

    .handl-phase2-accepted{

        grid-template-columns:repeat(3,1fr);

        gap:14px;

    }

    .handl-phase2-id-card{

        padding:14px;

    }

    .handl-phase2-id-card img{

        max-width:110px;

    }





.handl-phase2-accepted{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:10px;

    width:100%;

}

.handl-phase2-id-card{

    flex:1;

    padding:0;

    text-align:center;

}

.handl-phase2-id-card img{

    width:100%;

    max-width:90px;

    margin:0 auto;

}

.handl-phase2-id-card div{

    font-size:14px;

    line-height:1.35;

}

.handl-phase2-id-card:not(:last-child)::after{

    right:-5px;
}


/*====================================================
PHASE 3
====================================================*/

#handl-phase3-screen{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:350;

    pointer-events:none;

}

.handl-phase3-overlay{

    position:absolute;

    top:50px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff;

    z-index:351;

}

.handl-phase3-overlay .handl-phase2-logo{

    width:220px;

    margin-bottom:25px;

}

.handl-phase3-overlay .handl-phase2-title{

    margin:0;

    color:#ffffff;

}

.handl-phase3-overlay .handl-phase2-progress{

    margin-top:25px;

}

.handl-phase3-overlay .handl-phase2-heading{

    margin-top:60px;

    color:#ffffff;

}

.handl-phase3-overlay .handl-phase2-text{
    margin-top:20px;
    color:rgba(255,255,255,.92);

}

}


#handl-camera-instruction br{
    display:block;
    content:"";
    margin-top:16px;
}

#handl-camera-instruction{
    font-size:25px;
    font-weight:700;
    text-align:center;
    color:#fff;
    line-height:1.2;
}

@media(max-width:768px){
#handl-camera-instruction{
        font-size:17px;
        line-height:1.25;
        font-weight:700;
    }
}

#handl-camera-instruction br + *{
    font-size:25px;
    font-weight:700;
    color:#6D42FF;
}

#handl-camera-alert-wrapper{
    position:absolute;
    top:77%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:100;
}


@media(max-width:768px){
#handl-camera-instruction{
	font-size:23px;
    text-align:center;
    color:#fff;
    line-height:1.2;
    line-height:1.25;
    font-weight:700;
}

#handl-camera-instruction br{
    display:block;
    content:"";
    margin-top:16px;
}

#handl-camera-instruction br + *{
    font-size:22px;
    font-weight:700;
    color:rgba(255,255,255,.65);
}

#handl-camera-alert-wrapper{
    position:absolute;
    top:66%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:100;
}

#handl-camera-status{
    position:absolute;
    left:60px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border-radius:50%;
}

}

@media(max-width:768px){
.handl-camera-top{
    left:0;
    right:0;
    top:28px;
    display:flex;
    justify-content:center;

}

.handl-camera-logo{
    width:170px !important;
}
}

/* =====================================================
LOGO MOBILE & TABLET
===================================================== */

@media (max-width:1024px){
    .handl-camera-top{
        left:0;
        right:0;
        top:28px;
        display:flex;
        justify-content:center;

    }

    .handl-camera-logo{

        width:170px !important;
        height:auto;

    }

    .handl-camera-title-wrapper{
        top:95px;
    }
}