/*
====================================================
 JOBNZIZA CV BOOST PREMIUM CSS
 File: assets/css/boost.css
====================================================
*/


/* =====================================
   MODAL DESIGN
===================================== */

#boostCvModal .modal-dialog{

    max-width:1200px;

}



#boostCvModal .modal-content{

    border:0;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}




/* =====================================
   HEADER
===================================== */


.boost-modal-header{

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #20c997
    );

    padding:25px 35px;

    border:none;

}



.boost-modal-header h4{

    font-size:28px;

}



/* =====================================
   MODAL BODY SCROLL
===================================== */


#boostCvModal .modal-body{

    background:#f8fafc;

    padding:35px 45px;

    max-height:75vh;

    overflow-y:auto;

}




/* =====================================
   STEP SYSTEM
===================================== */


#boostCvModal .boost-step{

    display:none;

}



#boostCvModal .boost-step.active{

    display:block;

    animation:boostFade .35s ease;

}



@keyframes boostFade{


from{

    opacity:0;

    transform:translateY(15px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}




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


.boost-progress .progress{

    height:12px;

    border-radius:30px;

    background:#e9ecef;

}



.boost-progress .progress-bar{

    background:
    linear-gradient(
        90deg,
        #0d6efd,
        #20c997
    );

    border-radius:30px;

    transition:.4s;

}





/* =====================================
   SECTION CARD
===================================== */


.boost-section{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.05);

    margin-bottom:25px;

}




.section-title{

    margin-bottom:25px;

}





/* =====================================
   FORM INPUT
===================================== */


#boostCvModal .form-control,
#boostCvModal .form-select{

    min-height:46px;

    border-radius:12px;

    border:1px solid #ddd;

    padding:12px 15px;

}



#boostCvModal textarea.form-control{

    min-height:auto;

}



#boostCvModal .form-control:focus,
#boostCvModal .form-select:focus{


    border-color:#0d6efd;

    box-shadow:
    0 0 0 .25rem rgba(13,110,253,.15);

}





/* =====================================
   PACKAGE CARDS
===================================== */


.boost-package-card{


    cursor:pointer;

    border-radius:20px;

    transition:.3s;

    height:100%;


}



.boost-package-card:hover{


    transform:translateY(-8px);


    box-shadow:
    0 15px 35px rgba(0,0,0,.15);


}



.boost-package-card.active{


    border:2px solid #0d6efd;

    background:#eef6ff;


}




.package-price{


    font-size:32px;

    font-weight:800;

}





.package-icon{


    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:25px;


}




/* =====================================
   UPLOAD AREA
===================================== */


.upload-box{


    border:2px dashed #0d6efd;

    border-radius:20px;

    background:#f8fbff;


}




.photo-preview img{


    object-fit:cover;

}





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


.boost-navigation{


    display:flex;

    justify-content:space-between;

    align-items:center;

    /*position:sticky;*/

    bottom:0;

    background:white;

    padding:15px 0;

    margin-top:25px;

    border-top:1px solid #eee;

    z-index:20;


}



#boostNextBtn,
#boostPreviousBtn,
#boostSubmitBtn{


    padding:12px 35px;

    border-radius:12px;

    font-weight:600;


}





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


#boostCvModal .modal-footer{


    padding:20px 35px;


}





/* =====================================
   ALERTS
===================================== */


#boostCvModal .alert{


    border-radius:15px;


}




/* =====================================
   CHECKBOX
===================================== */


#boostCvModal .form-check-input{


    width:18px;

    height:18px;


}




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


@media(max-width:768px){



#boostCvModal .modal-body{


    padding:20px;


}



.boost-section{


    padding:20px;


}



.boost-modal-header h4{


    font-size:22px;


}



.package-price{


    font-size:26px;


}



.boost-navigation{


    flex-direction:column;

    gap:10px;


}



.boost-navigation button{


    width:100%;


}



}

/* ===================================
JOBNZIZA BOOST MODAL
=================================== */


#boostCvModal .modal-dialog{

    max-width:1200px;

}


#boostCvModal .modal-content{

    border-radius:25px;
    overflow:hidden;

}



#boostCvModal .modal-body{

    background:#f8fafc;

    padding:30px;

    max-height:65vh;

    overflow-y:auto;

}





/* ===============================
STEP CONTROL
=============================== */


#boostCvModal .boost-step{

    display:none;

}


#boostCvModal .boost-step.active{

    display:block;

    animation:fadeBoost .3s ease;

}




@keyframes fadeBoost{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}




/* ===============================
STEP HEADER
=============================== */


.boost-steps{

display:flex;

justify-content:space-between;

gap:10px;

overflow-x:auto;

}


.step-item{

background:#eee;

padding:8px 15px;

border-radius:20px;

font-size:13px;

white-space:nowrap;

}



.step-item.active{

background:#0d6efd;

color:white;

}





/* ===============================
FORM SPACING
=============================== */


.boost-section{

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}




.boost-section .row{

margin-left:-10px;

margin-right:-10px;

}



.boost-section .col-md-6,
.boost-section .col-md-4,
.boost-section .col-12{

padding-left:10px;

padding-right:10px;

}





.form-control,
.form-select{

height:48px;

border-radius:12px;

}



textarea.form-control{

height:auto;

}





/* ===============================
PACKAGE CARD
=============================== */


.boost-package-card{

cursor:pointer;

border-radius:20px;

transition:.3s;

}



.boost-package-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 30px rgba(0,0,0,.15);

}



.boost-package-card.active{

border:2px solid #0d6efd;

background:#eef6ff;

}




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


.boost-navigation{

padding-top:20px;

border-top:1px solid #ddd;

}





/* MOBILE */

@media(max-width:768px){


#boostCvModal .modal-body{

padding:15px;

}


.boost-section{

padding:15px;

}



}.boost-step{
    display:none;
}

.boost-step.active{
    display:block;
}


.boost-navigation{
    /*position:sticky;*/
    bottom:0;
    background:white;
    padding:15px;
    border-top:1px solid #ddd;
    z-index:10;
}



#boostCvModal .modal-body{

    max-height:75vh;
    overflow-y:auto;
    padding:35px;

}



.boost-section{

    background:white;
    padding:25px;
    margin-bottom:20px;
    border-radius:20px;

}



.boost-section .row{

    margin-left:0;
    margin-right:0;

}



.boost-section .form-control,
.boost-section .form-select{

    min-height:45px;

}