/* -----------------------------
POPUP OVERLAY
----------------------------- */

#requestCallBackpopup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}

.hidden{
display:none !important;
}


/* -----------------------------
POPUP BOX
----------------------------- */

.lcp-popup-box{
width:100%;
max-width:520px;
background:#fff;
border-radius:10px;
overflow:hidden;
position:relative;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}


/* -----------------------------
STEP 1
----------------------------- */
.step1-popup{
padding:50px;
background:#188475;
text-align:center;
}

/* sidebar form */

.step1-sidebar{
padding:10px;
background:#188475;
text-align:center;
}

.step1-sidebar .lcp-title{
font-size:13px;
margin-bottom:20px;
}

.step1-sidebar .lcp-input{
padding:8px;
}

.step1-sidebar .lcp-btn-primary{
padding:8px;
font-size:14px;
}

.lcp-title{
font-size:20px;
font-weight:600;
margin-bottom:35px;
color:#fff;
}

.lcp-title-dark{
font-size:20px;
font-weight:600;
margin-bottom:15px;
text-align:center;
color:#fff;
}


/* -----------------------------
INPUTS
----------------------------- */

.lcp-input{
width:100%;
height: 40px;
padding:10px 12px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:12px;
font-size:14px;
box-sizing:border-box;
}


/* -----------------------------
BUTTON GROUP
----------------------------- */

.lcp-btn-group{
display:flex;
gap:10px;
padding-top: 14px;
}

.lcp-btn-primary{
background:#4c9589;
border:none;
color:#fff;
padding:10px;
border-radius:6px;
cursor:pointer;
flex:1;
font-weight:500;
transition:background 0.2s ease;
}

.lcp-btn-primary:hover{
background:#146E62;
}

.lcp-btn-secondary{
background:#666;
border:none;
color:#fff;
padding:10px;
border-radius:6px;
cursor:pointer;
flex:1;
}

.full{
width:100%;
}


/* -----------------------------
STEP 2
----------------------------- */
.step2-popup{
padding:50px;
background:#188475;
text-align:center;
}

.step2-sidebar{
padding:10px;
background:#188475;
text-align:center;
}

.step2-sidebar .lcp-title{
font-size:13px;
margin-bottom:20px;
}

.step2-sidebar .lcp-input{
padding:8px;
}

.step2-sidebar .lcp-btn-primary{
padding:8px;
font-size:14px;
}


/* -----------------------------
OTP INPUT
----------------------------- */

.otp-container{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:18px;
}

.step2-sidebar .otp{
width:33px;
height:33px;
text-align:center;
font-size:18px;
border:1px solid #ccc;
border-radius:6px;
outline:none;
}

.step2-sidebar .otp:focus{
border-color:#188475;
box-shadow:0 0 4px rgba(24,132,117,0.3);
}

.step2-popup .otp{
width:50px;
height:40px;
text-align:center;
font-size:18px;
border:1px solid #ccc;
border-radius:6px;
outline:none;
}

.step2-popup .otp:focus{
border-color:#188475;
box-shadow:0 0 4px rgba(24,132,117,0.3);
}


/* -----------------------------
OTP META
----------------------------- */

.otp-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.resendOtp{
background:none;
border:none;
color:#fff;
font-size:13px;
cursor:pointer;
}

.otpTimer{
font-size:13px;
color:#fff;
}


/* -----------------------------
BOARD & CLASS OPTIONS
----------------------------- */

.options{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}

.board,
.class{
border:1px solid #ccc;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
background:#fff;
font-size:13px;
transition:all 0.15s ease;
}

.board:hover,
.class:hover{
background:#f5f5f5;
}

.board.active,
.class.active{
background:#b2ceca;
color:#fff;
}


/* -----------------------------
PHONE INPUT (intl-tel-input)
----------------------------- */

.iti{
width:100%;
display:block;
}

.iti input{
width:100%;
height:40px;
font-size:14px;
}

.iti__flag-container{
z-index:10;
}

.iti__selected-flag{
border-right:1px solid #ddd;
}

.iti__country-list{
z-index:9999;
max-height:220px;
overflow-y:auto;
}

.closeTopPopup {
	position: absolute;
    top: 0;
    right: 0;
}


/* -----------------------------
RESPONSIVE
----------------------------- */

@media(max-width:480px){

.lcp-popup-box{
	max-width:95%;
    position: relative;
}

.otp{
width:40px;
height:40px;
}

}