*{
    font-family: 'Poppins', sans-serif;
}

:root{
    --light-bg-color: #e9ecef; 
    --light-bg-color-1: #de2004; 
}

/*************************
**** Registration CSS ****
**************************/

.main-container{
    padding: 50px 15px;
}

.registration-card{
    background: rgba(255,255,255,0.97);
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.top-progress{
    height: 8px;
    background: var(--light-bg-color);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 30px;
}

.top-progress-bar{
    width: 100%;
    height: 100%;
    background-color: var(--light-bg-color-1);
}

.form-title{
    font-size: 34px;
    font-weight: 700;
    color: var(--light-bg-color-1);
    margin-bottom: 5px;
}

.form-subtitle{
    color: #6c757d;
    margin-bottom: 35px;
    font-size: 15px;
}

.section-title{
    font-size: 18px;
    font-weight: 600;
    color: var(--light-bg-color-1);
    margin-bottom: 20px;
    border-left: 4px solid var(--light-bg-color-1);
    padding-left: 10px;
}

label{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.mandatory{
    color: red;
}

.form-control,
.form-select{
    height: 52px;
    border-radius: 14px;
    border: 1px solid #dce3ea;
    font-size: 15px;
    padding-left: 15px;
    transition: 0.3s ease;
}

textarea.form-control{
    height: 110px;
    padding-top: 12px;
}

.form-control:focus,
.form-select:focus{
    border-color: var(--light-bg-color-1);
    box-shadow: 0 0 0 4px rgba(13,110,253,0.12);
}

.preference-card{
    border:1px solid #dcdcdc;
    border-radius:10px;
    padding:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:10px;
    transition:0.3s;
    background:#fff;
    min-height:70px;
}

.preference-card:hover{
    border-color:#0d6efd;
    background:#f8fbff;
}

.preference-card input[type="checkbox"]{
    transform:scale(1.2);
}

.preference-text{
    font-size:15px;
    font-weight:500;
}

.preference-box{
    background: #f8fbff;
    border: 1px solid #dce8ff;
    border-radius: 18px;
    padding: 25px;
}

.preference-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
}

.form-check{
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    padding: 12px 15px 12px 42px;
    transition: 0.3s ease;
    cursor: pointer;
    height: 100%;
}

.form-check:hover{
    border-color: var(--light-bg-color-1);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.form-check-input{
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.form-check-label{
    cursor: pointer;
    font-size: 14px;
}

.btn-submit{
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 16px;
    background-color: var(--light-bg-color-1);
    color: white;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s ease;
    box-shadow: 0 10px 25px rgba(13,110,253,0.25);
}

.btn-submit:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(13,110,253,0.35);
}

.btn-submit:disabled{
    opacity: 0.7;
}

.alert{
    border-radius: 14px;
    padding: 15px 18px;
    font-size: 15px;
}

.small-note{
    font-size: 13px;
    color: #6c757d;
}

@media(max-width:768px){

    .registration-card{
        padding: 25px;
    }

    .form-title{
        font-size: 28px;
    }

}

.consent-wrapper{
    background: #f8fbff;
    border: 1px solid #e4ecff;
    border-radius: 16px;
    padding: 12px 18px;
}

.consent-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px dashed #e6e6e6;
}

.consent-item:last-child{
    border-bottom: none;
}

.consent-checkbox{
    width: 18px;
    height: 18px;
    accent-color: var(--light-bg-color-1);
    flex-shrink: 0;
    margin-top: -1px;
}

.consent-item span{
    line-height: 1.4;
    color: #212529;
}

.consent-item small{
    font-size: 11px;
    margin-left: 4px;
}


/**************************
****** OTP MODAL CSS ******
**************************/

.otp-modal{
    border-radius: 22px;
    overflow: hidden;
    border: none;
}

.otp-header{
    background: linear-gradient(135deg, var(--light-bg-color-1), #0056d6);
    color: white;
    padding: 18px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
}

.otp-body{
    padding: 35px;
    text-align: center;
}

.otp-icon{
    font-size: 55px;
    margin-bottom: 15px;
}

.otp-text{
    font-size: 16px;
    color: #495057;
    margin-bottom: 25px;
}

.otp-input{
    height: 58px;
    text-align: center;
    font-size: 28px;
    letter-spacing: 8px;
    border-radius: 16px;
    font-weight: 600;
}

.otp-input:focus{
    box-shadow: 0 0 0 4px rgba(13,110,253,0.15);
    border-color: var(--light-bg-color-1);
}

.btn-verify{
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg,#16a34a,#15803d);
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-verify:hover{
    transform: translateY(-2px);
}

.resend-text{
    margin-top: 18px;
    font-size: 14px;
}

.resend-text a{
    text-decoration: none;
    font-weight: 600;
}