/* ==========================================================
READINESS ASSESSMENT
========================================================== */

/* Main Container */
#ra-container{
max-width:850px!important;
margin:25px auto!important;
}

/* ==========================================================
START SCREEN
========================================================== */

#ra-start-screen{
text-align:center!important;
margin:25px 0!important;
}

.ra-start-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
background:#003f53!important;
color:#fff!important;
text-decoration:none!important;
padding:16px 36px!important;
border-radius:8px!important;
font-size:16px!important;
font-weight:600!important;
transition:all .25s ease!important;
}

.ra-start-btn:hover{
background:#32a4d5!important;
color:#fff!important;
text-decoration:none!important;
}

/* ==========================================================
FORM / QUESTION SCREENS
========================================================== */

#ra-contact-screen,
#ra-questions-screen,
#ra-complete-screen{
background:#fff!important;
border:1px solid #e6edf0!important;
border-radius:12px!important;
padding:10px 40px!important;
margin-top:25px!important;
}

#ra-contact-screen h3,
#ra-question-title,
#ra-complete-screen h2{
color:#000!important;
margin:0 0 25px!important;
font-weight:700!important;
}

#ra-question-title{
font-size:28px!important;
line-height:1.4!important;
text-align:left!important;
}

/* ==========================================================
FORM FIELDS
========================================================== */

.ra-field{
margin-bottom:22px!important;
}

.ra-field label{
display:block!important;
margin-bottom:8px!important;
color:#000!important;
font-size:14px!important;
font-weight:600!important;
}

.ra-field input{
width:100%!important;
padding:8px 16px!important;
border:1px solid #d6dde1!important;
border-radius:8px!important;
font-size:15px!important;
background:#fff!important;
transition:all .2s ease!important;
}

.ra-field input:focus{
outline:none!important;
border-color:#32a4d5!important;
box-shadow:0 0 0 3px rgba(50,164,213,.15)!important;
}

/* ==========================================================
PROGRESS
========================================================== */

.ra-progress{
margin-bottom:12px!important;
color:#003f53!important;
font-size:14px!important;
font-weight:600!important;
}

.ra-progress-bar{
height:8px!important;
background:#edf3f5!important;
border-radius:100px!important;
overflow:hidden!important;
margin-bottom:30px!important;
}

.ra-progress-fill{
width:25%!important;
height:100%!important;
background:#32a4d5!important;
transition:width .3s ease!important;
}

/* ==========================================================
ANSWER OPTIONS
========================================================== */

.ra-option{
display:flex!important;
align-items:baseline!important;
gap:14px!important;

background:#fff!important;
border:2px solid #e6edf0!important;
border-radius:10px!important;

padding:18px 20px!important;
margin-bottom:15px!important;

cursor:pointer!important;
transition:all .2s ease!important;
text-align: left;
}

.ra-option:hover

.ra-option input{
margin-top:4px!important;
cursor:pointer!important;
}

.ra-option span{
color:#000!important;
font-size:15px!important;
line-height:1.6!important;
}

/* Selected State */
.ra-option:has(input:checked){
border-color:#003f53!important;
background:#f3fbfd!important;
}

/* ==========================================================
NAVIGATION BUTTONS
========================================================== */

.ra-nav{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
margin-top:35px!important;
}

#ra-prev-btn,
#ra-next-btn,
#ra-save-contact{
border:none!important;
border-radius:8px!important;
padding:14px 28px!important;
font-size:15px!important;
font-weight:600!important;
cursor:pointer!important;
transition:all .25s ease!important;
background:#003f53!important;
}

#ra-prev-btn{
background:#f3f5f6!important;
color:#000!important;
}


#ra-next-btn,
#ra-save-contact{
background:#003f53!important;
color:#fff!important;
}

#ra-next-btn:hover,
#ra-save-contact:hover{
border:none!important;
border-radius:8px!important;
padding:14px 28px!important;
font-size:15px!important;
font-weight:600!important;
cursor:pointer!important;
transition:all .25s ease!important;
background:#003f53!important;
}

/* ==========================================================
COMPLETION SCREEN
========================================================== */

.ra-score{
font-size:72px!important;
font-weight:700!important;
color:#003f53!important;
line-height:1!important;
margin-bottom:15px!important;
}

.ra-result-level{
font-size:28px!important;
font-weight:700!important;
color:#000!important;
margin-bottom:15px!important;
}

.ra-result-message{
font-size:16px!important;
line-height:1.8!important;
color:#333!important;
}

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

@media (max-width: 767px){

#ra-contact-screen,
#ra-questions-screen,
#ra-complete-screen{
    padding:25px!important;
}

#ra-question-title{
    font-size:22px!important;
}

.ra-nav{
    gap:12px!important;
}

#ra-prev-btn,
#ra-next-btn,
#ra-save-contact{
    flex:1!important;
    padding:14px!important;
}

.ra-score{
    font-size:52px!important;
}

}