/*==========================================================
JACOB ENGENHARIA
CADASTRO PROFISSIONAL
VERSÃO 3.0
==========================================================*/


/*==========================================================
SEÇÃO
==========================================================*/

.cadastro-profissional{

    background:#F8FAFC;

    padding:90px 0;

}


/*==========================================================
CARD PRINCIPAL
==========================================================*/

.cadastro-box{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:55px;

    box-shadow:0 20px 60px rgba(15,23,42,.05);

}


/*==========================================================
TOPO
==========================================================*/

.cadastro-topo{

    text-align:center;

    margin-bottom:55px;

}

.cadastro-topo h2{

    font-size:2.5rem;

    color:#0F172A;

    margin:18px 0;

}

.cadastro-topo p{

    max-width:760px;

    margin:auto;

    color:#667085;

    line-height:1.9;

}


/*==========================================================
BLOCOS
==========================================================*/

.form-section{

    width:100%;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:35px;

    margin-bottom:35px;

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

    transition:.30s;

}

.form-section:hover{

    box-shadow:0 20px 40px rgba(15,23,42,.08);

    transform:translateY(-2px);

}


/*==========================================================
TÍTULOS
==========================================================*/

.form-section h3{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.45rem;

    color:#0F172A;

    padding-bottom:18px;

    margin-bottom:22px;

    border-bottom:2px solid #EEF2F6;

}

.form-section h3 i{

    color:#D4AF37;

    font-size:1.35rem;

}

.form-info{

    color:#667085;

    margin-bottom:28px;

    line-height:1.8;

}


/*==========================================================
GRID
==========================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:26px;

    width:100%;

}


/*==========================================================
COLUNA INTEIRA
==========================================================*/

.form-group.full-width{

    grid-column:1 / -1;

}


/*==========================================================
GRUPOS
==========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    width:100%;

}

.form-group label{

    font-size:.95rem;

    font-weight:600;

    color:#0F172A;

    margin-bottom:10px;

}


/*==========================================================
INPUTS
==========================================================*/

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid #D1D5DB;

    border-radius:12px;

    background:#fff;

    font-size:1rem;

    transition:.30s;

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}

.form-group input:hover,

.form-group select:hover,

.form-group textarea:hover{

    border-color:#C9A227;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    border-color:#D4AF37;

    box-shadow:0 0 0 4px rgba(212,175,55,.12);

}

::placeholder{

    color:#94A3B8;

}

/*==========================================================
CHECKBOXES
==========================================================*/

.checkbox-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:16px;

    width:100%;

}

.checkbox-grid label{

    display:flex;

    align-items:center;

    gap:12px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:12px;

    padding:14px 18px;

    cursor:pointer;

    transition:.30s;

    color:#334155;

    font-size:.95rem;

    font-weight:500;

}

.checkbox-grid label:hover{

    background:#FFFDF7;

    border-color:#D4AF37;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(15,23,42,.05);

}

.checkbox-grid input{

    width:18px;

    height:18px;

    flex-shrink:0;

    accent-color:#D4AF37;

}


/*==========================================================
UPLOADS
==========================================================*/

input[type=file]{

    width:100%;

    padding:18px;

    border:2px dashed #D1D5DB;

    border-radius:14px;

    background:#F8FAFC;

    transition:.30s;

    cursor:pointer;

}

input[type=file]:hover{

    border-color:#D4AF37;

    background:#FFFDF7;

}

input[type=file]::file-selector-button{

    background:#0F172A;

    color:#fff;

    border:none;

    padding:10px 18px;

    border-radius:8px;

    margin-right:15px;

    cursor:pointer;

    transition:.30s;

}

input[type=file]::file-selector-button:hover{

    background:#1E293B;

}


/*==========================================================
TEXTAREA
==========================================================*/

textarea{

    font-family:inherit;

    line-height:1.8;

}


/*==========================================================
LGPD
==========================================================*/

.checkbox-termos{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:28px;

    line-height:1.8;

    color:#475467;

}

.checkbox-termos input{

    width:20px;

    height:20px;

    margin-top:4px;

    accent-color:#D4AF37;

}


/*==========================================================
BOTÃO
==========================================================*/

.form-actions{

    text-align:center;

    margin-top:50px;

}

.form-actions .btn-primary{

    min-width:280px;

    padding:18px 40px;

    font-size:1.05rem;

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

    transition:.30s;

}

.form-actions .btn-primary:hover{

    transform:translateY(-3px);

}


/*==========================================================
SEPARAÇÃO ENTRE BLOCOS
==========================================================*/

.form-section:not(:last-child){

    border-bottom:none;

}


/*==========================================================
FOCO NO LABEL
==========================================================*/

.form-group:focus-within label{

    color:#B8860B;

}

/*==========================================================
RESPONSIVIDADE
==========================================================*/

@media (max-width:1200px){

    .cadastro-box{

        max-width:100%;

        padding:45px;

    }

}

@media (max-width:992px){

    .cadastro-profissional{

        padding:70px 0;

    }

    .cadastro-box{

        padding:35px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-group.full-width{

        grid-column:auto;

    }

}

@media (max-width:768px){

    .cadastro-box{

        padding:25px;

        border-radius:18px;

    }

    .cadastro-topo{

        margin-bottom:40px;

    }

    .cadastro-topo h2{

        font-size:2rem;

    }

    .form-section{

        padding:25px;

    }

    .form-section h3{

        font-size:1.25rem;

    }

    .checkbox-grid{

        grid-template-columns:1fr;

    }

    .form-actions .btn-primary{

        width:100%;

        min-width:100%;

    }

}

@media (max-width:480px){

    .cadastro-profissional{

        padding:50px 0;

    }

    .cadastro-box{

        padding:20px;

    }

}


/*==========================================================
ACABAMENTO
==========================================================*/

.cadastro-box{

    overflow:hidden;

}

.form-section:last-child{

    margin-bottom:0;

}

.form-group input,

.form-group select,

.form-group textarea{

    box-sizing:border-box;

}

.form-group textarea{

    max-width:100%;

}

.checkbox-grid label{

    user-select:none;

}

input[type=file]{

    box-sizing:border-box;

}


/*==========================================================
MELHORIAS PREMIUM
==========================================================*/

.form-section{

    position:relative;

}

.form-section::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#D4AF37;

    border-radius:18px 0 0 18px;

}

.form-section h3{

    margin-left:8px;

}

.form-group label{

    letter-spacing:.2px;

}

.form-actions{

    padding-top:15px;

}

.form-actions .btn-primary{

    min-height:58px;

}


/*==========================================================
IMPORTANTE
FORÇA O FORMULÁRIO A OCUPAR 100%
==========================================================*/

form{

    width:100%;

}

form .form-section{

    width:100%;

}

form .form-grid{

    width:100%;

}

form .checkbox-grid{

    width:100%;

}

form textarea{

    width:100%;

}

form input,

form select{

    width:100%;

}